removed postsArray state from component, not relying on React Query for state

austin-cavanagh · austin-cavanagh · commit 96a98266a383 · 2023-11-26T19:01:58.000-08:00
diff --git a/examples/example-2/client/src/client/App.tsx b/examples/example-2/client/src/client/App.tsx
@@ -2,6 +2,8 @@ import React from 'react';
 import PostsOne from './components/PostsOne';
 
 const App = () => {
+  // const [screenView, setScreenView] = useState<string>('Posts One');
+
   return (
     <>
       <div className="window">
diff --git a/examples/example-2/client/src/client/components/PostsOne.tsx b/examples/example-2/client/src/client/components/PostsOne.tsx
@@ -1,17 +1,12 @@
-import React from 'react';
-
-import { useState, FormEvent } from 'react';
+import React, { FormEvent } from 'react';
 import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
-
 import { usePostInputChange } from '../hooks/usePostInputChange';
 import { useCommentInputChange } from '../hooks/useCommentInputChange';
 import { Post, CreateCommentParams } from '../types';
-import { openComment } from '../functions/openComment';
 
 function PostsOne() {
   const queryClient = useQueryClient();
 
-  const [postsArray, setPostsArray] = useState<Post[]>([]);
   const { postInput, setPostInput, postInputChange } = usePostInputChange();
   const { commentInputs, setCommentInputs, commentInputChange } =
     useCommentInputChange();
@@ -25,7 +20,6 @@ function PostsOne() {
       }
 
       const newPostsArray = await response.json();
-      setPostsArray(newPostsArray);
 
       return newPostsArray;
     } catch (error) {
@@ -35,16 +29,14 @@ function PostsOne() {
 
   // query for fetching old posts
   const {
-    data: postsState,
+    data: postsArray,
     isLoading,
     error,
-  } = useQuery({
+  } = useQuery<Post[]>({
     queryKey: ['posts'],
     queryFn: fetchPostsRoute,
   });
 
-  console.log(postsState, isLoading);
-
   // create-post route
   const createPostRoute = async (newPost: Post) => {
     try {
@@ -70,9 +62,8 @@ function PostsOne() {
   // mutation for creating a new post
   const newPostMutation = useMutation({
     mutationFn: createPostRoute,
-    onSuccess: updatedPostsArray => {
+    onSuccess: () => {
       queryClient.invalidateQueries({ queryKey: ['posts'] });
-      setPostsArray(updatedPostsArray);
     },
   });
 
@@ -118,9 +109,8 @@ function PostsOne() {
   // mutation for liking a post
   const likePostMutation = useMutation({
     mutationFn: likePostRoute,
-    onSuccess: updatedPostsArray => {
+    onSuccess: () => {
       queryClient.invalidateQueries({ queryKey: ['posts'] });
-      setPostsArray(updatedPostsArray);
     },
   });
 
@@ -154,9 +144,8 @@ function PostsOne() {
   // mutation for deleting a post
   const deletePostMutation = useMutation({
     mutationFn: deletePostRoute,
-    onSuccess: updatedPostsArray => {
+    onSuccess: () => {
       queryClient.invalidateQueries({ queryKey: ['posts'] });
-      setPostsArray(updatedPostsArray);
     },
   });
 
@@ -193,9 +182,8 @@ function PostsOne() {
   // mutation for creating a comment
   const createCommentMutation = useMutation({
     mutationFn: createCommentRoute,
-    onSuccess: updatedPostsArray => {
+    onSuccess: () => {
       queryClient.invalidateQueries({ queryKey: ['posts'] });
-      setPostsArray(updatedPostsArray);
     },
   });
 
@@ -214,6 +202,41 @@ function PostsOne() {
     }
   };
 
+  // open-comment route
+  const openCommentRoute = async (index: number) => {
+    try {
+      const response = await fetch('http://localhost:3000/open-comment', {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({ index: index }),
+      });
+
+      if (!response.ok) {
+        throw new Error('Error creating post');
+      }
+
+      const updatedPostsArray = await response.json();
+      return updatedPostsArray;
+    } catch (errror) {
+      console.error('Creating post failed:', error);
+    }
+  };
+
+  // mutation for opening comment
+  const openCommentMutation = useMutation({
+    mutationFn: openCommentRoute,
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['posts'] });
+    },
+  });
+
+  // function that opens comment
+  const openComment = (index: number) => {
+    openCommentMutation.mutate(index);
+  };
+
   return (
     <>
       <div className="posts-container">
@@ -228,60 +251,64 @@ function PostsOne() {
             Send
           </button>
         </form>
-        {postsArray.map((post, index) => (
-          <div
-            className={`post-container ${index % 2 === 0 ? 'green' : 'blue'}`}
-            key={index}
-          >
-            <div className="post-text">{post.text}</div>
-            <div className="like-comment-container">
-              <button
-                className={`button ${post.liked === true ? 'red' : ''}`}
-                onClick={() => likePost(index)}
-              >
-                Like
-              </button>
-              <button
-                className="button left-margin"
-                onClick={() => openComment(postsArray, index, setPostsArray)}
-              >
-                Comment
-              </button>
-              <button
-                className="button left-margin"
-                onClick={() => deletePost(index)}
-              >
-                Delete
-              </button>
-            </div>
-            <div className="comment-section">
-              {post.createComment === true && (
-                <>
-                  {' '}
-                  <form
-                    className="create-post-container-2"
-                    onSubmit={event => createComment(event, index)}
-                  >
-                    <input
-                      type="text"
-                      className="input-2"
-                      value={commentInputs[index] || ''}
-                      onChange={event => commentInputChange(index, event)}
-                    />
-                    <button className="button margin-left" type="submit">
-                      Send
-                    </button>
-                  </form>
-                  {post.comments.map((comment, commentIndex) => (
-                    <div className="post-text" key={commentIndex}>
-                      {`${commentIndex}) ${comment}`}
-                    </div>
-                  ))}
-                </>
-              )}
+
+        {isLoading && <div>Loading...</div>}
+        {error && <div>Error loading posts</div>}
+        {postsArray &&
+          postsArray.map((post, index) => (
+            <div
+              className={`post-container ${index % 2 === 0 ? 'green' : 'blue'}`}
+              key={index}
+            >
+              <div className="post-text">{post.text}</div>
+              <div className="like-comment-container">
+                <button
+                  className={`button ${post.liked === true ? 'red' : ''}`}
+                  onClick={() => likePost(index)}
+                >
+                  Like
+                </button>
+                <button
+                  className="button left-margin"
+                  onClick={() => openComment(index)}
+                >
+                  Comment
+                </button>
+                <button
+                  className="button left-margin"
+                  onClick={() => deletePost(index)}
+                >
+                  Delete
+                </button>
+              </div>
+              <div className="comment-section">
+                {post.createComment === true && (
+                  <>
+                    {' '}
+                    <form
+                      className="create-post-container-2"
+                      onSubmit={event => createComment(event, index)}
+                    >
+                      <input
+                        type="text"
+                        className="input-2"
+                        value={commentInputs[index] || ''}
+                        onChange={event => commentInputChange(index, event)}
+                      />
+                      <button className="button margin-left" type="submit">
+                        Send
+                      </button>
+                    </form>
+                    {post.comments.map((comment, commentIndex) => (
+                      <div className="post-text" key={commentIndex}>
+                        {`${commentIndex}) ${comment}`}
+                      </div>
+                    ))}
+                  </>
+                )}
+              </div>
             </div>
-          </div>
-        ))}
+          ))}
       </div>
     </>
   );
diff --git a/examples/example-2/client/src/client/linked/ReactQueryRewind.tsx b/examples/example-2/client/src/client/linked/ReactQueryRewind.tsx
@@ -1,29 +1,44 @@
 import React, { useEffect } from 'react';
 import { useQueryClient } from '@tanstack/react-query';
 
-export type SubscribeEvent = {
-  // structure of subscribe event
+type SubscribeEvent = {
+  type: string;
+  query: {
+    state: {
+      data: any;
+    };
+  };
+};
+
+const cleanData = (event: SubscribeEvent) => {
+  const relevantTypes = ['added', 'removed', 'updated'];
+  const eventType = event.type;
+
+  if (!relevantTypes.includes(eventType)) return;
+
+  console.log(event);
+
+  // if (event.type === 'added') {
+  //   console.log('ADDED', event.query.state.data);
+  // }
+
+  // if (event.type === 'updated') {
+  //   console.log('UPDATED', event.query.state.data);
+  // }
 };
 
 const ReactQueryRewind = () => {
-  // React does not allow hooks inside of useEffect
   const queryClient = useQueryClient();
+
   useEffect(() => {
     const queryCache = queryClient.getQueryCache();
-    // tbh this is a callback - it will only every take in one event. You can't accidentally call this function. It looks like there are ways to do partial checks in enormous objects but it might not be worth it for us. We can type check the fields we care about and send those along to the pure functions
+
     const unsubscribe = queryCache.subscribe((event: SubscribeEvent) => {
-      // setTimeout ensure it runs after components load
-      setTimeout(() => {
-        // These need to be optimized so that if it's data I don't want, the functions are never called or return as early as possible
-        console.log(event);
-        // logging(event);
-      }, 0);
+      cleanData(event);
     });
 
     return () => unsubscribe();
   }, []);
-  // useEffect(() => console.log('Effect in pacakge'), [])
-  console.log('React Query Rewind Test');
   return <></>;
 };
 
@@ -37,6 +52,5 @@ export const RewindHook = () => {
   //   return () => unsubscribe();
   // }, [])
 
-  console.log('Hook Test');
   return;
 };
diff --git a/examples/example-2/server/database.json b/examples/example-2/server/database.json
@@ -3,7 +3,7 @@
     {
       "id": 1,
       "text": "First Post",
-      "liked": false,
+      "liked": true,
       "comments": [
         "First comment on first post",
         "Second comment on first post"
diff --git a/examples/example-2/server/server.ts b/examples/example-2/server/server.ts
@@ -107,7 +107,26 @@ app.post('/create-comment', async (req, res) => {
     const postIndex = parseInt(index, 10);
 
     db.posts[postIndex].comments.push(comment);
-    // db.posts[postIndex].createComment = true;
+
+    await fs.writeFile(dbPath, JSON.stringify(db, null, 2), 'utf8');
+
+    res.status(201).json(db.posts);
+  } catch (err) {
+    console.error('Error updating database.json:', err);
+    res.status(500).send('Error saving data');
+  }
+});
+
+// open comment
+app.post('/open-comment', async (req, res) => {
+  try {
+    const dbPath = path.join(__dirname, 'database.json');
+    const data = await fs.readFile(dbPath, 'utf8');
+    const db = JSON.parse(data);
+
+    const index = parseInt(req.body.index, 10);
+
+    db.posts[index].createComment = !db.posts[index].createComment;
 
     await fs.writeFile(dbPath, JSON.stringify(db, null, 2), 'utf8');
 
diff --git a/package.json b/package.json
@@ -19,7 +19,7 @@
     "watch": "rollup -c -w",
     "prepublishOnly": "npm run build",
     "clean": "rm -rf dist",
-    "install-all": "npm install && (cd examples/example-1 && npm install) && (cd examples/example-2 && npm install)",
+    "install-all": "npm install && (cd examples/example-1 && npm install) && (cd examples/example-2 && npm install) && (cd examples/example-2/client && npm install) && (cd examples/example-2/server && npm install)",
     "link-package": "npm link && (cd examples/example-1 && npm link react-query-rewind)",
     "link-dependencies": "npm link examples/example-1/node_modules/react examples/example-1/node_modules/react-dom examples/example-1/node_modules/@tanstack/react-query",
     "unlink-package": "(cd examples/example-1 && npm unlink react-query-rewind) && npm unlink"

Original file line number	Diff line number	Diff line change
`@@ -3,7 +3,7 @@`
`3`	`3`	`{`
`4`	`4`	`"id": 1,`
`5`	`5`	`"text": "First Post",`
`6`		`- "liked": false,`
	`6`	`+ "liked": true,`
`7`	`7`	`"comments": [`
`8`	`8`	`"First comment on first post",`
`9`	`9`	`"Second comment on first post"`