feat: member search feature

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

Author: kituuu

src/envConstants.ts

@@ -1,5 +1,5 @@
 export const CLIENT_ID = '149d2857118e05e729a8';
-export const BACKEND_URL = 'http://localhost:8080';
+export const BACKEND_URL = 'https://leaderboard-java.mdgspace.org';
 export const AVATAR_API = 'w9zrqHdDa4MsYB';
 
 // http://13.233.127.61:8080

src/features/ProjectAddMember /index.scss

@@ -33,9 +33,36 @@ $breakpoint-tablet: 768px;
 
   .single-form-element-container {
     display: flex;
+    position: relative;
     flex-direction: column;
     gap: 1rem;
     width: 100%;
+    .member-search-result {
+      position: absolute;
+      border: 2px solid #8989ce;
+      top: 6rem;
+      background-color: #1414325b;
+      gap: 1rem;
+      width: fit-content;
+      backdrop-filter: blur(25px);
+      display: flex;
+      flex-direction: column;
+      padding: 1rem 1rem;
+      z-index: 1000;
+      p {
+        color: #8989ce;
+        width: fit-content;
+        font-size: 1.25rem;
+        font-weight: 900;
+        padding: 0.1rem 1rem;
+        border-radius: 1rem;
+      }
+      P:hover {
+        color: #8181ff;
+        cursor: pointer;
+        background-color: black;
+      }
+    }
     .label {
       color: #8181ff;
       font-size: 1.5rem;

src/features/ProjectAddMember /index.tsx

@@ -25,7 +25,24 @@ const ProjectAddMember = () => {
 
   const { spaceName, projectName } = useParams();
   const [projectMembers, setProjectMembers] = useState<string[]>([]);
-  const [orgMembers, setOrgMembers] = useState<string[]>([]);
+  const [orgMembers, setOrgMembers] = useState<string[]>([
+    'kituuu',
+    'karthik',
+    'kartik',
+    'kartar',
+  ]);
+  const [searchedMembers, setSearchedMembers] = useState<string[]>([]);
+
+  const filterMembers = (search: string) => {
+    let temp: string[] = [];
+    orgMembers.forEach((member) => {
+      if (member.includes(search)) {
+        temp.push(member);
+      }
+    });
+
+    setSearchedMembers(temp);
+  };
 
   const dataFetch = async () => {
     try {
@@ -41,7 +58,7 @@ const ProjectAddMember = () => {
 
   useEffect(() => {
     dataFetch();
-  }, []);
+  }, [memberName]);
 
   const addMembers = () => {
     if (memberName) {
@@ -52,6 +69,8 @@ const ProjectAddMember = () => {
       ) {
         setMembers([...members, memberName]);
         setMemberName(null);
+      } else if (projectMembers.includes(memberName)) {
+        toast.error('Member already exists in the project');
       }
     }
   };
@@ -108,13 +127,31 @@ const ProjectAddMember = () => {
               value={memberName ? memberName : ''}
               onChange={(e: ChangeEvent<HTMLInputElement>) => {
                 setMemberName(e.target.value);
+                if (memberName) filterMembers(memberName);
               }}
               placeholder='Github ID of user'
             />
             <button onClick={addMembers} className='add-member-button'>
               {'+ Add'}
             </button>
           </div>
+          {memberName && searchedMembers.length > 0 && (
+            <div className='add-member-container member-search-result'>
+              {searchedMembers.map((member, index) => {
+                return (
+                  <p
+                    onClick={() => {
+                      setMemberName(member);
+                      setSearchedMembers([]);
+                    }}
+                    key={index}
+                  >
+                    {member}
+                  </p>
+                );
+              })}
+            </div>
+          )}
         </div>
         <div className='added-members'>
           {members.map((member, index) => {