less ternary use, dont mutate request results for core ID logic

karlkeefer · Oct 11, 2022 · 3b23d5f · 3b23d5f
1 parent acc9276
commit 3b23d5f
Show file tree

Hide file tree

Showing 5 changed files with 48 additions and 49 deletions.
diff --git a/react/src/Routes/Posts/Post.tsx b/react/src/Routes/Posts/Post.tsx
@@ -11,25 +11,23 @@ import SimplePage from 'Shared/SimplePage'
 
 const ViewPost = () => {
   const params = useParams<{ id: string }>();
-  const [loading, error, run, post] = useRequest<Post>({
-    id: Number(params.id),
-    title: '',
-    body: ''
-  })
+  const postID = Number(params.id);
+  const [loading, error, run, post] = useRequest<Post>({} as Post);
 
   // if we have a post ID, fetch it
   useEffect(() => {
-    if (post.id) {
-      run(API.getPost(post.id))
+    if (postID) {
+      run(API.getPost(postID))
     }
-  }, [run, post.id])
+  }, [run, postID])
 
   const { id, title, body } = post;
 
   return (
     <SimplePage icon='file' title={title} loading={loading} error={error}>
       <p>{body}</p>
-      {id ? <Button as={Link} to={`/post/${id}/edit`} content='Edit' /> : false}
+      {id && id > 0 && 
+        <Button as={Link} to={`/post/${id}/edit`} content='Edit' />}
     </SimplePage>
   )
 }

diff --git a/react/src/Routes/Posts/PostForm.tsx b/react/src/Routes/Posts/PostForm.tsx
@@ -11,45 +11,42 @@ import SimplePage from 'Shared/SimplePage';
 
 const PostForm = () => {
   const params = useParams<{ id: string }>();
-  const post = {
-    id: Number(params.id),
-    title: '',
-    body: ''
-  };
-  const [loading, error, run] = useRequest<Post>(post)
-  const [fields, handleChange, setFields] = useFields<Post>(post)
+  const postID = Number(params.id);
+  const [loading, error, run] = useRequest<Post>({} as Post)
+  const [fields, handleChange, setFields] = useFields<Post>({} as Post)
   const [redirectTo, setRedirectTo] = useState('');
 
+  // if we have a post ID, fetch it
+  useEffect(() => {
+    if (postID) {
+      run(API.getPost(postID), (post) => {
+        setFields(post);
+      });
+    }
+  }, [postID, run, setFields])
+
+  // handlers
   const handleSubmit = useCallback(() => {
-    const action = post.id ? API.updatePost(fields) : API.createPost(fields);
+    const action = postID ? API.updatePost(fields) : API.createPost(fields);
     run(action, () => {
       setRedirectTo('/posts')
     })
-  }, [post.id, fields, run])
+  }, [postID, fields, run])
 
   const handleDelete = useCallback(() => {
-    run(API.deletePost(post.id), () => {
+    run(API.deletePost(postID), () => {
       setRedirectTo('/posts')
     })
-  }, [run, post.id])
-
-  // if we have a post ID, fetch it
-  useEffect(() => {
-    if (post.id) {
-      run(API.getPost(post.id), (post) => {
-        setFields(post);
-      });
-    }
-  }, [post.id, run, setFields])
+  }, [run, postID])
 
   if (redirectTo) {
     return <Redirect to={redirectTo} />
   }
 
-  const { title, body } = fields;
+  const { id, title, body } = fields;
 
   return (
-    <SimplePage icon='file alternate outline' title={post.id ? `Edit Post #${post.id}` : 'Create a Post'}>
+    <SimplePage icon='file alternate outline' title={id ? `Edit Post #${id}` : 'Create a Post'}>
       <Form error name="createPost" loading={loading} onSubmit={handleSubmit}>
         <Message error>{error}</Message>
         <Form.Input
@@ -69,7 +66,8 @@ const PostForm = () => {
           value={body}
           onChange={handleChange as TextAreaChangeHandler} />
         <Button primary size="huge" type="submit">Save</Button>
-        {post.id ? <Button negative size="huge" type="button" onClick={handleDelete}>Delete</Button> : false}
+        {id && id > 0 &&
+          <Button negative size="huge" type="button" onClick={handleDelete}>Delete</Button>}
       </Form>
     </SimplePage>
   )

diff --git a/react/src/Routes/Posts/Posts.tsx b/react/src/Routes/Posts/Posts.tsx
@@ -20,15 +20,17 @@ const Posts = () => {
   return (
     <SimplePage icon='copy' title='My Posts' error={error}>
       <p>This page fetches some protected data that only the logged in user ({user.email}) can see!</p>
-      {loading ? <Placeholder style={{ marginBottom: '1em' }}>
-        <Placeholder.Paragraph>
-          <Placeholder.Line />
-          <Placeholder.Line />
-          <Placeholder.Line />
-          <Placeholder.Line />
-        </Placeholder.Paragraph>
-      </Placeholder> : false}
-      {posts.length === 0 && !loading ? <Message warning>No posts found...</Message> : false}
+      {loading &&
+        <Placeholder style={{ marginBottom: '1em' }}>
+          <Placeholder.Paragraph>
+            <Placeholder.Line />
+            <Placeholder.Line />
+            <Placeholder.Line />
+            <Placeholder.Line />
+          </Placeholder.Paragraph>
+        </Placeholder>}
+      {posts.length === 0 && !loading && 
+        <Message warning>No posts found...</Message>}
       {posts.map(SinglePost)}
       <Button as={Link} to='/post/create' primary icon='plus' content='New post' />
     </SimplePage>

diff --git a/react/src/Routes/Verify/Verify.tsx b/react/src/Routes/Verify/Verify.tsx
@@ -12,13 +12,14 @@ import { UserContainer } from 'Shared/UserContainer'
 
 const Verify = () => {
   const { code } = useParams<{ code: string }>();
-  const [loading, error, run, result] = useRequest<User>({} as User)
+  const [loading, error, run, user] = useRequest<User>({} as User)
   const [redirect, setRedirect] = useState(false)
   const { userLoading, setUser } = useContext(UserContainer)
 
   useEffect(() => {
     if (!userLoading) {
-      // wait until defailt whoami returns before attempting reset
+      // wait until default whoami (called within the UserContainer) returns 
+      // before attempting reset, otherwise there is a race condition
       run(API.verify({ code }), user => {
         setUser(user);
         setTimeout(() => {
@@ -34,7 +35,8 @@ const Verify = () => {
 
   return (
     <SimplePage title='Account Verification' centered loading={loading} error={error}>
-      {result && result.id ? <Message positive>Success! You have verified your email!</Message> : false}
+      {user && user.id && user.id > 0 && 
+        <Message positive>Success! You have verified your email!</Message>}
     </SimplePage>
   );
 }

diff --git a/react/src/Shared/SimplePage.tsx b/react/src/Shared/SimplePage.tsx
@@ -13,18 +13,17 @@ type SimplePageProps = React.PropsWithChildren<{
 
 const SimplePage = ({ title, icon, centered, loading, error, children }: SimplePageProps): JSX.Element => (
   <Container style={{ paddingTop: '7em' }}>
-    {title && !loading ?
+    {title && !loading &&
       <Helmet>
         <title>{title}</title>
-      </Helmet>
-      : false}
+      </Helmet>}
 
     <Content centered={!!centered}>
       <Header as='h1'>
-        {icon ? <Icon name={icon} /> : false}{title}
+        {icon && <Icon name={icon} />}{title}
       </Header>
 
-      {error ? <Message negative>{error}</Message> : false}
+      {error && <Message negative>{error}</Message>}
 
       {loading ? <Loader active inline='centered' /> : children}
     </Content>