feat: search feature

Signed-off-by: Karthik Ayangar <[email protected]>
mdgspace · Jan 20, 2024 · f8efe9d · f8efe9d
1 parent 9719e1a
commit f8efe9d
Show file tree

Hide file tree

Showing 10 changed files with 68 additions and 56 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -3,7 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
-    "@reduxjs/toolkit": "^1.9.6",
+    "@reduxjs/toolkit": "^1.9.7",
     "@testing-library/jest-dom": "^6.1.3",
     "@testing-library/react": "^14.0.0",
     "@testing-library/user-event": "^14.5.1",

diff --git a/src/app/components/search/index.tsx b/src/app/components/search/index.tsx
@@ -12,7 +12,7 @@ const SearchBar = () => {
   };
   const handleSearch = (e: React.FormEvent<HTMLFormElement>) => {
     e.preventDefault();
-    if (search !== '') dispatch(searchAction(search));
+    dispatch(searchAction(search));
   };
 
   return (

diff --git a/src/features/AddProject/index.tsx b/src/features/AddProject/index.tsx
@@ -24,7 +24,6 @@ const AddProject = () => {
     if (token && spaceName) {
       try {
         const res = await getOrgProjects(token, spaceName);
-        console.log(res.data.projects);
         setOrgProjects(res.data.projects);
       } catch (e) {}
     }

diff --git a/src/features/project-members/components/MemberCard.tsx b/src/features/project-members/components/MemberCard.tsx
@@ -7,24 +7,26 @@ const MemberCard = ({
   name: string;
   role: string;
 }) => {
-    const handleRemove = () => {
-        console.log('Remove member');
-    }
+  const handleRemove = () => {
+    console.log('Remove member');
+  };
   return (
     <div className='member-card'>
       <div className='member-info'>
         <img src={image} alt='image' />
         <h1 className='member-name'>{name}</h1>
       </div>
       <div className='member-actions'>
-        <div className="select-overlay">
-        <select name='role' id='role' defaultValue={role.toLowerCase()}>
-          <option value='maintainer'>Maintainer</option>
-          <option value='manager'>Manager</option>
-          <option value='member'>Member</option>
-        </select>
+        <div className='select-overlay'>
+          <select name='role' id='role' defaultValue={role.toLowerCase()}>
+            <option value='maintainer'>Maintainer</option>
+            <option value='manager'>Manager</option>
+            <option value='member'>Member</option>
+          </select>
         </div>
-        <button className='member-remove-btn' onClick={handleRemove}>Remove</button>
+        <button className='member-remove-btn' onClick={handleRemove}>
+          Remove
+        </button>
       </div>
     </div>
   );

diff --git a/src/features/project-members/index.scss b/src/features/project-members/index.scss
@@ -122,9 +122,9 @@
       font-size: 1.2rem;
     }
     .select-overlay {
-        padding-right: 1rem;
-        background: #402aa4;
-        cursor: pointer;
+      padding-right: 1rem;
+      background: #402aa4;
+      cursor: pointer;
     }
     select {
       border: none;
@@ -136,8 +136,8 @@
       cursor: pointer;
     }
     option {
-        padding: 1rem;
-        margin: 2rem;
+      padding: 1rem;
+      margin: 2rem;
     }
   }
 }

diff --git a/src/features/workspace-view/index.tsx b/src/features/workspace-view/index.tsx
@@ -7,6 +7,7 @@ import UserContext from 'app/context/user/userContext';
 import { UserOrgDetails, getUserOrgs } from 'app/api/user';
 import loader from '../../app/assets/gifs/loader.gif';
 import { Navigate, useNavigate } from 'react-router-dom';
+import { useSelector } from 'react-redux';
 
 const WorkspaceView = () => {
   const userContext = useContext(UserContext);
@@ -28,6 +29,7 @@ const WorkspaceView = () => {
       setIsLoad(false);
     }
   };
+  const searchValue = useSelector((state: any) => state.searchKeyword.value);
 
   useEffect(() => {
     fetchData();
@@ -36,6 +38,7 @@ const WorkspaceView = () => {
     userContext?.username,
     navigate,
     userContext?.setUserOrgs,
+    searchValue,
   ]);
 
   return (
@@ -54,8 +57,12 @@ const WorkspaceView = () => {
           <img src={loader} className='loader' />
         ) : (
           userContext?.userOrgs &&
-          Object.entries(userContext.userOrgs.userOrgs).map(
-            ([orgName, details]) => {
+          Object.entries(userContext.userOrgs.userOrgs)
+            .filter(([key, value]) => {
+              if (key.toLowerCase().includes(searchValue.toLowerCase()))
+                return [key, value];
+            })
+            .map(([orgName, details]) => {
               return (
                 <WorkspaceCard
                   key={orgName}
@@ -66,8 +73,7 @@ const WorkspaceView = () => {
                   archeives={archeives}
                 />
               );
-            }
-          )
+            })
         )}
       </div>
     </div>

diff --git a/src/features/workspace/components/projectCardContainer/index.tsx b/src/features/workspace/components/projectCardContainer/index.tsx
@@ -3,6 +3,7 @@ import ProjectCard from '../projectCard';
 import './index.scss';
 import { Projects } from 'app/api/organization';
 import { ProjectsGithubData } from 'app/api/githubData';
+import { useSelector } from 'react-redux';
 
 interface Props {
   weekly: boolean;
@@ -21,38 +22,38 @@ const ProjectCardCont: React.FC<Props> = ({
   weeklyOrgProjectsData,
   archives,
 }) => {
-  useEffect(() => {}, [weekly]);
+  const searchValue = useSelector((state: any) => state.searchKeyword.value);
+
+  useEffect(() => {
+    console.log(orgProjects);
+  }, [weekly, searchValue]);
 
   return (
     <>
       <div className='projectcard-cont'>
         {orgProjects &&
-          Object.entries(orgProjects).map(([key, value]) => {
-            return (
-              archives === value.archeive &&
-              (weekly ? (
-                <ProjectCard
-                  key={key}
-                  orgName={orgName}
-                  projectName={key}
-                  status={value}
-                  githubData={
-                    weeklyOrgProjectsData ? weeklyOrgProjectsData[key] : null
-                  }
-                />
-              ) : (
-                <ProjectCard
-                  key={key}
-                  orgName={orgName}
-                  projectName={key}
-                  status={value}
-                  githubData={
-                    monthlyOrgProjectsData ? monthlyOrgProjectsData[key] : null
-                  }
-                />
-              ))
-            );
-          })}
+          Object.entries(orgProjects)
+            .filter(([key, value]) => {
+              if (key.toLowerCase().includes(searchValue.toLowerCase()))
+                return [key, value];
+            })
+            .map(([key, value]) => {
+              return (
+                archives === value.archeive && (
+                  <ProjectCard
+                    key={key}
+                    orgName={orgName}
+                    projectName={key}
+                    status={value}
+                    githubData={
+                      weekly
+                        ? weeklyOrgProjectsData && weeklyOrgProjectsData[key]
+                        : monthlyOrgProjectsData && monthlyOrgProjectsData[key]
+                    }
+                  />
+                )
+              );
+            })}
       </div>
     </>
   );

diff --git a/src/features/workspace/index.tsx b/src/features/workspace/index.tsx
@@ -19,6 +19,8 @@ import { ProjectsGithubData } from 'app/api/githubData';
 import { Contributors } from 'app/api/githubData';
 import loader from '../../app/assets/gifs/loader.gif';
 import UserContext from 'app/context/user/userContext';
+import { useSelector } from 'react-redux';
+import { SEARCH } from 'app/constants/sliceNames';
 
 const Workspace = () => {
   const navigate = useNavigate();
@@ -94,8 +96,10 @@ const Workspace = () => {
     <>
       <div className='home-header'>
         <SearchBar />
-
-        <button className='' onClick={() => setArcheives(!archives)}>
+        <button
+          style={archives ? { background: 'var(--home-page-card-bg)' } : {}}
+          onClick={() => setArcheives(!archives)}
+        >
           Archives
         </button>
         {spaceName &&

diff --git a/src/features/workspace/slices/projectSearchSlice.ts b/src/features/workspace/slices/projectSearchSlice.ts
@@ -7,7 +7,7 @@ export const searchSlice = createSlice({
     value: '',
   },
   reducers: {
-    searchAction: (state, action: PayloadAction<string>) => {
+    searchAction: (state: any, action: PayloadAction<string>) => {
       state.value = action.payload;
     },
   },