connection search implement

Author: wickedev

package.json

@@ -32,6 +32,7 @@
     "http-proxy-middleware": "^2.0.2",
     "js-base64": "^3.7.2",
     "js-cookie": "^3.0.1",
+    "lodash-es": "^4.17.21",
     "matcher": "^5.0.0",
     "node-fetch": "^3.2.0",
     "ohmyfetch": "^0.4.15",
@@ -62,6 +63,7 @@
     "@graphql-codegen/schema-ast": "^2.4.1",
     "@types/js-cookie": "^3.0.1",
     "@types/loadable__component": "^5.13.4",
+    "@types/lodash-es": "^4.17.6",
     "@types/node": "^17.0.15",
     "@types/react": "^17.0.39",
     "@types/react-dom": "^17.0.11",

schema/schema.graphql

@@ -100,7 +100,7 @@ type Query {
   myInfo: User
   node(id: ID!): Node
   post(id: ID!): Post
-  posts(after: ID, first: Int, orderBy: [OrderInput!]): PostConnect!
+  posts(after: ID, first: Int, orderBy: [OrderInput!], search: String): PostConnect!
   users(before: ID, last: Int): UserConnect!
 }
 

src/components/Posts.tsx

@@ -1,4 +1,5 @@
-import { useMemo } from "react";
+import { debounce } from "lodash-es";
+import { useEffect, useMemo } from "react";
 import { graphql, usePaginationFragment } from "react-relay";
 import { HomePostsQuery$data } from "../pages/__generated__/HomePostsQuery.graphql";
 import { InfinateScrollGrid } from "./InfinateScrollGrid";
@@ -8,6 +9,7 @@ import { PostsQuery } from "./__generated__/PostsQuery.graphql";
 
 interface PostsProps {
   postsRef: HomePostsQuery$data;
+  search: string;
 }
 
 export const postsFragment = graphql`
@@ -19,10 +21,14 @@ export const postsFragment = graphql`
       type: "[OrderInput!]"
       defaultValue: [{ property: "id", direction: DESC }]
     }
+    search: { type: "String", defaultValue: null }
   )
   @refetchable(queryName: "PostsQuery") {
-    posts(first: $first, after: $after, orderBy: $orderBy)
-      @connection(key: "HomePostConnectionFragment_posts") {
+    posts(first: $first, after: $after, orderBy: $orderBy, search: $search)
+      @connection(
+        key: "HomePostConnectionFragment_posts"
+        filters: ["orderBy", "search"]
+      ) {
       __id
       edges {
         node {
@@ -38,27 +44,37 @@ export const postsFragment = graphql`
   }
 `;
 
-export const Posts = ({ postsRef }: PostsProps) => {
+export const Posts = ({ postsRef, search }: PostsProps) => {
   const pagination = usePaginationFragment<PostsQuery, PostsFragment_query$key>(
     postsFragment,
     postsRef
   );
 
+  const searching = useMemo(
+    () =>
+      debounce(
+        (search: string) => {
+          pagination.refetch({
+            first: 10,
+            after: null,
+            orderBy: [{ property: "id", direction: "DESC" }],
+            search: search,
+          });
+        },
+        300,
+      ),
+    []
+  );
+
+  useEffect(() => {
+    searching(search);
+  }, [searching, search]);
+
   const edges = useMemo(() => {
     return pagination.data.posts.edges.filter((edge) => edge.node != null);
   }, [pagination.data.posts.edges]);
 
-  if (!edges.length) {
-    return (
-      <div className="w-full m-16 text-center">
-        There is no posts. Be the first to write
-      </div>
-    );
-  }
-
-  pagination.isLoadingNext;
-
-  return (
+  return edges.length ? (
     <InfinateScrollGrid
       data={edges}
       endReached={() => {
@@ -70,5 +86,7 @@ export const Posts = ({ postsRef }: PostsProps) => {
         return <PostCard key={post.cursor} post={post.node} />;
       }}
     />
+  ) : (
+    <div className="w-full m-16 text-center">There is no posts.</div>
   );
 };

src/components/Progress.tsx

@@ -1,5 +1,3 @@
 export function Progress() {
-  console.log("Progress");
-
   return <div className="w-full text-center my-36">Loading...</div>;
 }

src/pages/Home.tsx

@@ -1,5 +1,5 @@
 import { encode } from "js-base64";
-import { Suspense } from "react";
+import { Suspense, useState } from "react";
 import {
   graphql,
   PreloadedQuery,
@@ -28,6 +28,8 @@ export const homePostsQuery = graphql`
 export default function HomePage({ preloaded }: HomePageProps) {
   const auth = useSnapshot(useAuth());
 
+  const [search, setSearch] = useState("");
+
   const postsRef = usePreloadedQuery<HomePostsQuery>(
     homePostsQuery,
     preloaded.query
@@ -40,13 +42,23 @@ export default function HomePage({ preloaded }: HomePageProps) {
   const connectionID = fragmentData.posts.__id;
 
   return (
-    <Suspense fallback={<Progress />}>
+    <div>
       {auth.isAuthentiated && (
         <div className="flex justify-end px-4 pt-2">
           <Link to={`/post/new?cid=${encode(connectionID)}`}>New Post</Link>
         </div>
       )}
-      <Posts postsRef={postsRef} />
-    </Suspense>
+      <div className="mx-8 mt-4">
+        <input
+          className="font-sans block text-sm leading-5 w-full py-2 px-3 border-2 border-slate-600 text-slate-500 rounded-lg shadow-sm focus:outline-none focus:ring focus:ring-slate-200"
+          placeholder="Search"
+          type="text"
+          onChange={(e) => setSearch(e.target.value)}
+        />
+      </div>
+      <Suspense fallback={<Progress />}>
+        <Posts postsRef={postsRef} search={search} />
+      </Suspense>
+    </div>
   );
 }

yarn.lock

@@ -1144,7 +1144,16 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/lodash@npm:^4.14.175":
+"@types/lodash-es@npm:^4.17.6":
+  version: 4.17.6
+  resolution: "@types/lodash-es@npm:4.17.6"
+  dependencies:
+    "@types/lodash": "*"
+  checksum: 9bd239dd525086e278821949ce12fbdd4f100a060fed9323fc7ad5661113e1641f28a7ebab617230ed3474680d8f4de705c1928b48252bb684be6ec9eed715db
+  languageName: node
+  linkType: hard
+
+"@types/lodash@npm:*, @types/lodash@npm:^4.14.175":
   version: 4.14.178
   resolution: "@types/lodash@npm:4.14.178"
   checksum: a69a04a60bfc5257c3130a554b4efa0c383f0141b7b3db8ab7cf07ad2a46ea085fce66d0242da41da7e5647b133d5dfb2c15add9cbed8d7fef955e4a1e5b3128
@@ -5953,6 +5962,7 @@ __metadata:
     "@loadable/component": ^5.15.2
     "@types/js-cookie": ^3.0.1
     "@types/loadable__component": ^5.13.4
+    "@types/lodash-es": ^4.17.6
     "@types/node": ^17.0.15
     "@types/react": ^17.0.39
     "@types/react-dom": ^17.0.11
@@ -5971,6 +5981,7 @@ __metadata:
     http-proxy-middleware: ^2.0.2
     js-base64: ^3.7.2
     js-cookie: ^3.0.1
+    lodash-es: ^4.17.21
     matcher: ^5.0.0
     node-fetch: ^3.2.0
     npm-run-all: ^4.1.5