allow searching during page load

uselagoon · Dec 11, 2023 · 4dd864c · 4dd864c
1 parent 8213d17
commit 4dd864c
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 14 deletions.
diff --git a/src/components/Projects/ProjectsSkeleton.tsx b/src/components/Projects/ProjectsSkeleton.tsx
@@ -5,7 +5,10 @@ import Box from 'components/Box';
 
 import { ProjectsHeader, ProjectsPage, SearchInput, StyledProject } from './StyledProjects';
 
-const ProjectsSkeleton = () => {
+interface Props {
+  setSearch: (text: string) => React.SetStateAction<string>;
+}
+const ProjectsSkeleton = ({ setSearch }: Props) => {
   const RenderSkeletonBox = (index: number) => {
     return (
       <Box className="box">
@@ -22,14 +25,20 @@ const ProjectsSkeleton = () => {
 
   return (
     <ProjectsPage>
-        <ProjectsHeader>
-          <label>
-            <Skeleton width={'20%'} />
-          </label>
-          <label></label>
-          <SearchInput aria-labelledby="search" className="searchInput" type="text" placeholder="Type to search" />
-        </ProjectsHeader>
-        <>{[...Array<undefined>(numberOfItems)].map((_, idx) => RenderSkeletonBox(idx))}</>
+      <ProjectsHeader>
+        <label>
+          <Skeleton width={'20%'} />
+        </label>
+        <label></label>
+        <SearchInput
+          onChange={e => setSearch(e.target.value)}
+          aria-labelledby="search"
+          className="searchInput"
+          type="text"
+          placeholder="Type to search"
+        />
+      </ProjectsHeader>
+      <>{[...Array<undefined>(numberOfItems)].map((_, idx) => RenderSkeletonBox(idx))}</>
     </ProjectsPage>
   );
 };

diff --git a/src/components/Projects/index.js b/src/components/Projects/index.js
@@ -16,8 +16,8 @@ import {
 /**
  * The primary list of projects.
  */
-const Projects = ({ projects = [] }) => {
-  const [searchInput, setSearchInput] = useState('');
+const Projects = ({ projects = [], initialSearch }) => {
+  const [searchInput, setSearchInput] = useState(initialSearch);
 
   const filteredProjects = projects.filter(key => {
     const sortByName = key.name.toLowerCase().includes(searchInput.trim().toLowerCase());

diff --git a/src/pages/projects.js b/src/pages/projects.js
@@ -1,4 +1,4 @@
-import React, { useEffect } from 'react';
+import React, { useEffect, useState } from 'react';
 
 import Head from 'next/head';
 
@@ -18,6 +18,8 @@ import { useTourContext } from '../tours/TourContext';
 const ProjectsPage = () => {
   const { startTour } = useTourContext();
 
+  const [searchInput, setSearchInput] = useState('');
+
   const { data, loading, error } = useQuery(AllProjectsQuery, {
     displayName: 'AllProjectsQuery',
   });
@@ -42,9 +44,12 @@ const ProjectsPage = () => {
         <CommonWrapper>
           <h2>Projects</h2>
           <div className="content">
-            {loading ? <ProjectsSkeleton /> : <Projects projects={data.allProjects || []} />}
+            {loading ? (
+              <ProjectsSkeleton setSearch={setSearchInput} />
+            ) : (
+              <Projects initialSearch={searchInput} projects={data.allProjects || []} />
+            )}
           </div>
-
         </CommonWrapper>
       </MainLayout>
     </>