feat: search feature for projects

Signed-off-by: Karthik Ayangar <[email protected]>

Author: kituuu

frontend/src/app/components/search/index.tsx

@@ -1,14 +1,14 @@
-import React from 'react';
+import { useState } from 'react';
 import { useDispatch } from 'react-redux';
 import { searchAction } from 'features/workspace/slices/projectSearchSlice';
 import search_icon from 'app/assets/images/search_icon.svg';
 import './index.scss';
 
 const SearchBar = () => {
   const dispatch = useDispatch();
-  let search = '';
+  const [search,setSearch] = useState('')
   const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    search = e.target.value;
+    setSearch(e.target.value);
   };
   const handleSearch = (e: React.FormEvent<HTMLFormElement>) => {
     e.preventDefault();

frontend/src/features/AddProject/index.tsx

@@ -1,6 +1,6 @@
 import  { ChangeEvent, useEffect, useState } from 'react';
 import './index.scss';
-// import tick from '../../app/assets/images/tick.png';
+import tick from '../../app/assets/images/tick.png';
 import { useNavigate, useParams } from 'react-router-dom';
 import toast from 'react-hot-toast';
 import { addProject } from 'app/api/project';
@@ -131,7 +131,7 @@ const AddProject = () => {
             'Description length should not be greater than 200'}
         </form>
         <button className='add-project-btn' onClick={SubmitHandler}>
-          {/* <img src={tick} alt='' /> */}
+          <img src={tick} alt='' />
            Done
         </button>
       </div>

frontend/src/features/EditProject/index.tsx

@@ -1,13 +1,12 @@
 import  { ChangeEvent, useEffect, useState } from 'react';
 import './index.scss';
-import tick from '../../app/assets/images/tick.png';
+// import tick from '../../app/assets/images/tick.png';
 import { useNavigate, useParams } from 'react-router-dom';
 import toast from 'react-hot-toast';
 import {
   getProject,
   updateProject,
 } from 'app/api/project';
-import UserContext from 'app/context/user/userContext';
 import {  Projects, getOrgProjects } from 'app/api/organization';
 
 
@@ -144,7 +143,8 @@ const EditProject = () => {
             'Description length should not be greater than 200'}
         </form>
         <button className='add-project-btn' onClick={SubmitHandler}>
-          <img src={tick} alt='' /> Done
+          {/* <img src={tick} alt='' /> */}
+           Done
         </button>
       </div>
     </div>

frontend/src/features/workspace-view/index.tsx

@@ -17,9 +17,7 @@ const WorkspaceView = () => {
   const [userOrgs, setUserOrgs] = useState<UserOrgs>();
   const token = localStorage.getItem('token');
   const navigate = useNavigate();
-  
   const searchValue = useSelector((state: any) => state.searchKeyword.value);
-
   const fetchData = async () => {
     if (token && userContext?.username) {
       setIsLoad(true);
@@ -31,12 +29,7 @@ const WorkspaceView = () => {
         userContext?.setUserOrgs(userOrgs.data);
         setUserOrgs(userOrgs.data);
         setIsLoad(false);
-        // console.log(userContext)
-        // console.log(userOrgs)
-
-     
       } catch (e) {}
-
       setIsLoad(false);
     }
   };

frontend/src/features/workspace/components/projectCardContainer/index.tsx

@@ -22,20 +22,14 @@ const ProjectCardCont: React.FC<Props> = ({
   weeklyOrgProjectsData,
   archives,
 }) => {
-  const searchValue = useSelector((state: any) => state.searchKeyword.value);
-
-  useEffect(() => {}, [weekly, searchValue]);
+  useEffect(() => {
+    return;
+  }, [weekly]);
 
   return (
-    <>
       <div className='projectcard-cont'>
         {orgProjects &&
-          Object.entries(orgProjects)
-            .filter(([key, value]) => {
-              if (key.toLowerCase().includes(searchValue.toLowerCase()))
-                return [key, value];
-            })
-            .map(([key, value]) => {
+          Object.entries(orgProjects).map(([key, value]) => {
               return (
                 archives === value.archeive && (
                   <ProjectCard
@@ -53,7 +47,6 @@ const ProjectCardCont: React.FC<Props> = ({
               );
             })}
       </div>
-    </>
   );
 };
 

frontend/src/features/workspace/index.tsx

@@ -16,13 +16,14 @@ import { Contributors } from 'app/api/githubData';
 import loader from '../../app/assets/gifs/loader.gif';
 import UserContext from 'app/context/user/userContext';
 import { getUserOrgs } from 'app/api/user';
+import { useSelector } from 'react-redux';
 
 
 const Workspace = () => {
+  const searchValue = useSelector((state: any) => state.searchKeyword.value);
   const navigate = useNavigate();
   const token = localStorage.getItem('token');
   const userContext = useContext(UserContext);
-  // userContext?.setUsername('test');
   const [weekly, setWeekly] = useState<boolean>(true);
   const [orgProjects, setOrgProjects] = useState<Projects | null>(null);
   const [archives, setArcheives] = useState<boolean>(false);
@@ -41,7 +42,8 @@ const Workspace = () => {
     if (token && spaceName) {
       try {
         const orgProjects = await getOrgProjects(token, spaceName);
-        setOrgProjects(orgProjects.data.projects);
+        const temp = Object.entries(orgProjects.data.projects).filter(([key]) => key.toLowerCase().includes(searchValue.toLowerCase()));
+        setOrgProjects(Object.fromEntries(temp))
       } catch (e) {
         navigate('/');
       }
@@ -98,7 +100,7 @@ const Workspace = () => {
     fetchOrgProjects();
     fetchWeeklyData();
     fetchMonthlyData();
-  }, [weekly,spaceName]);
+  }, [weekly,spaceName,searchValue]);
 
   return (
     <>