[Examples] Fix realworld Wasp example app (#561)

* Fix errors in realworld Wasp app

* Fix errors in realworld Wasp app

* Fix identation

* Add database migration for cascading comments

examples/realworld/ext/MainPage.js

@@ -1,5 +1,4 @@
 import React, { useState } from 'react'
-import { Link } from 'react-router-dom'
 import _ from 'lodash'
 
 import Container from '@material-ui/core/Container'

examples/realworld/ext/article/components/ArticleEditorPage.js

@@ -1,6 +1,6 @@
 import React, { useState } from 'react'
 import PropTypes from 'prop-types'
-import { Link, useHistory } from 'react-router-dom'
+import { useHistory } from 'react-router-dom'
 
 import Container from '@material-ui/core/Container'
 import TextField from '@material-ui/core/TextField'
@@ -9,7 +9,6 @@ import Chip from '@material-ui/core/Chip'
 import Button from '@material-ui/core/Button'
 import { makeStyles } from '@material-ui/core/styles'
 
-import logout from '@wasp/auth/logout.js'
 import { useQuery } from '@wasp/queries'
 
 import createArticle from '@wasp/actions/createArticle'
@@ -44,7 +43,7 @@ const ArticleEditorPage = (props) => {
   //   When is article null, when not, should I look into combination of article and articleSlug, then
   //   there is this 'enabled' which I need on the other hand -> uff. And what if I get error? humpf!
   const articleSlug = props.match.params.articleSlug
-  const { data: article, error: articleError } = useQuery(getArticle, { slug: articleSlug }, { enabled: articleSlug })
+  const { data: article, error: articleError } = useQuery(getArticle, { slug: articleSlug }, { enabled: !!articleSlug })
 
   return articleError
     ? articleError.message || articleError
@@ -67,7 +66,6 @@ ArticleEditorPage.propTypes = {
 const ArticleEditor = (props) => {
   const classes = useStyles()
 
-  const user = props.user
   const article = props.article
 
   const history = useHistory()

examples/realworld/ext/article/components/ArticleList.js

@@ -9,15 +9,11 @@ import CardActions from '@material-ui/core/CardActions'
 import CardHeader from '@material-ui/core/CardHeader'
 import Avatar from '@material-ui/core/Avatar'
 import Typography from '@material-ui/core/Typography'
-import IconButton from '@material-ui/core/IconButton'
-import FavoriteIcon from '@material-ui/icons/Favorite'
 import { makeStyles } from '@material-ui/core/styles'
 import Chip from '@material-ui/core/Chip'
 
 import setArticleFavorited from '@wasp/actions/setArticleFavorited'
 
-import smileyImageUrl from '../../smiley.jpg'
-
 const useStyles = makeStyles((theme) => ({
   root: {
   },

examples/realworld/ext/article/components/ArticleViewPage.js

@@ -22,7 +22,6 @@ import { useQuery } from '@wasp/queries'
 
 import getArticle from '@wasp/queries/getArticle'
 import getArticleComments from '@wasp/queries/getArticleComments'
-import getUser from '@wasp/queries/getUser'
 import deleteArticle from '@wasp/actions/deleteArticle'
 import createComment from '@wasp/actions/createComment'
 import deleteComment from '@wasp/actions/deleteComment'
@@ -84,6 +83,7 @@ const ArticleViewPage = (props) => {
     if (!window.confirm('Are you sure you want to delete the article?')) return
     try {
       await deleteArticle({ id: article.id })
+      history.push('/')
     } catch (err) {
       console.log(err)
       window.alert('Failed to delete article: ' + err)
@@ -105,11 +105,7 @@ const ArticleViewPage = (props) => {
         </Grid>
 
         <Grid item xs={8}>
-          <p>
-            <Typography variant="h5">
-              <ReactMarkdown children={article.markdownContent} />
-            </Typography>
-          </p>
+          <ReactMarkdown children={article.markdownContent} />
         </Grid>
 
         <Grid item xs={8}>

examples/realworld/ext/article/queries.js

@@ -84,6 +84,9 @@ export const getArticle = async ({ slug }, context) => {
     where: { slug },
     include: articleInclude
   })
+  if (!article) { 
+    throw new HttpError(404)
+  }
   articleSetFavoritedFields(article, context.user)
   return article
 }

examples/realworld/ext/auth/SignupPage.js

@@ -4,7 +4,7 @@ import { useHistory } from 'react-router-dom'
 import login from '@wasp/auth/login'
 import signup from '@wasp/auth/signup'
 
-export default () => {
+const SignupPage = () => {
   const history = useHistory()
   const [username, setUsername] = useState()
   const [email, setEmail] = useState()
@@ -48,3 +48,5 @@ export default () => {
     </div>
   )
 }
+
+export default SignupPage

examples/realworld/ext/user/components/UserProfilePage.js

@@ -2,7 +2,6 @@ import React, { useState } from 'react'
 import { Link, useHistory } from 'react-router-dom'
 
 import Container from '@material-ui/core/Container'
-import TextField from '@material-ui/core/TextField'
 import Grid from '@material-ui/core/Grid'
 import Tabs from '@material-ui/core/Tabs'
 import Tab from '@material-ui/core/Tab'
@@ -29,8 +28,6 @@ const useStyles = makeStyles((theme) => ({
 
 
 const UserProfilePage = (props) => {
-  const classes = useStyles()
-
   const history = useHistory()
 
   const { data: me } = useAuth()
@@ -53,7 +50,7 @@ const UserProfilePage = (props) => {
 
       <Grid container direction="row" justify="center">
         <Grid item xs={8}>
-          <img src={user.profilePictureUrl || smileyImageUrl} />
+          <img src={user.profilePictureUrl || smileyImageUrl} alt="Profile" />
           <p> { user.username } </p>
           <p> { user.bio } </p>
           { me && me.username === username && (
@@ -158,8 +155,6 @@ function TabPanel(props) {
 const Articles = (props) => {
   const classes = useStyles()
 
-  const user = props.user
-
   return (
     <div className={classes.articles}>
       <ProfileFeedTabs {...props} />

examples/realworld/ext/user/components/UserSettingsPage.js

@@ -1,5 +1,5 @@
 import React, { useState } from 'react'
-import { Link, useHistory } from 'react-router-dom'
+import { useHistory } from 'react-router-dom'
 
 import Container from '@material-ui/core/Container'
 import Grid from '@material-ui/core/Grid'

examples/realworld/main.wasp

@@ -104,7 +104,7 @@ entity Comment {=psl
 
     user            User     @relation(fields: [userId], references: [id])
     userId          Int
-    article         Article  @relation(fields: [articleId], references: [id])
+    article         Article  @relation(fields: [articleId], references: [id], onDelete: Cascade)
     articleId       Int
 psl=}
 

examples/realworld/migrations/20220413083346_cascade_comments/migration.sql

@@ -0,0 +1,5 @@
+-- DropForeignKey
+ALTER TABLE "Comment" DROP CONSTRAINT "Comment_articleId_fkey";
+
+-- AddForeignKey
+ALTER TABLE "Comment" ADD CONSTRAINT "Comment_articleId_fkey" FOREIGN KEY ("articleId") REFERENCES "Article"("id") ON DELETE CASCADE ON UPDATE CASCADE;