From c47ad198b1b9f0673a7cf9bcdc418c09f2665665 Mon Sep 17 00:00:00 2001
From: Jae Wu <jaewuchun@gmail.com>
Date: Fri, 4 Mar 2022 01:27:59 -0800
Subject: [PATCH 1/4] change display, currently read only

---
 components/Judging/TeamMembersSelector.js | 145 ++++++++++++++++++++++
 components/projectsCard.js                |   6 +-
 pages/Livesite/judging.js                 |  12 +-
 3 files changed, 157 insertions(+), 6 deletions(-)
 create mode 100644 components/Judging/TeamMembersSelector.js

diff --git a/components/Judging/TeamMembersSelector.js b/components/Judging/TeamMembersSelector.js
new file mode 100644
index 00000000..a175f317
--- /dev/null
+++ b/components/Judging/TeamMembersSelector.js
@@ -0,0 +1,145 @@
+// teamMembers should be array of object:
+//
+// [
+//     {
+//         discord,
+//         email,
+//         id,
+//         name
+//     },
+//     ...
+// ]
+import { useEffect, useState } from 'react';
+import styled from 'styled-components';
+
+const TeamMembersSelector = (props) => {
+  const { value, updateValue } = props;
+  // onChange => ('teamMembers', e)
+
+  const copyValues = () => {
+    const duplicate = [];
+    value.forEach((item) => {
+      duplicate.push(item);
+    });
+    return duplicate;
+  };
+
+  const [members, setMembers] = useState(value);
+  const [renderMembers, setRenderMembers] = useState([]);
+  const [trigger, setTrigger] = useState(false);
+  const [isAdding, setIsAdding] = useState(false);
+
+  const InputArea = styled.div`
+    background: white;
+    padding: 0.5rem;
+    border: 1px solid #eeeeee;
+    display: flex;
+    gap: 0.5rem;
+    position: relative;
+    min-height: calc(1rem + calc(1rem * 1.2));
+  `;
+
+  const Member = styled.div`
+    background: #2d2937;
+    color: white;
+    padding: 0.5rem 0.7rem;
+    border-radius: 5px;
+    display: inline-flex;
+    align-items: center;
+    gap: 0.5rem;
+  `;
+
+  const AddText = styled.span`
+    margin: 0.5rem 0.3rem;
+    cursor: pointer;
+    font-weight: 600;
+    position: absolute;
+    top: 0.5rem;
+    right: 10px;
+  `;
+
+  const AddPanel = styled.div`
+    transition: all 0.2s linear;
+    background: white;
+    padding: 0.5rem;
+    border-style: none solid solid solid;
+    border-width: 1px;
+    border-color: #EEEEEE;
+  `;
+
+  const handleAddMember = () => {};
+
+  const handleDeleteMember = (index) => {
+    const currentMembers = members;
+    currentMembers.splice(index, 1);
+    setMembers(currentMembers);
+    setTrigger(!trigger);
+  };
+
+  const DeleteIcon = ({ index }) => {
+    return (
+      <div
+        style={{
+          cursor: 'pointer',
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+        }}
+        role="button"
+        tabIndex="0"
+        onKeyPress={() => handleDeleteMember(index)}
+        onClick={() => handleDeleteMember(index)}
+      >
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="16"
+          height="16"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          strokeWidth="2"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        >
+          <line x1="18" y1="6" x2="6" y2="18" />
+          <line x1="6" y1="6" x2="18" y2="18" />
+        </svg>
+      </div>
+    );
+  };
+
+  useEffect(() => {
+    const renderArray = [];
+
+    members.forEach((item, index) => {
+      renderArray.push(
+        <Member key={index}>
+          {item.name}
+          {/* <DeleteIcon index={index} /> */}
+        </Member>
+      );
+    });
+
+    setRenderMembers(renderArray);
+  }, [trigger]);
+
+  return (
+    <>
+      <InputArea>
+        {renderMembers}
+        {/* <AddText onClick={() => setIsAdding(!isAdding)}>
+          {isAdding ? 'Cancel' : 'Add Member'}
+        </AddText> */}
+      </InputArea>
+      <AddPanel
+        style={{
+          display: isAdding ? 'flex' : 'none',
+        }}
+      >
+        yuh
+      </AddPanel>
+    </>
+  );
+};
+
+export default TeamMembersSelector;
diff --git a/components/projectsCard.js b/components/projectsCard.js
index 2b64ee83..e0e575ca 100644
--- a/components/projectsCard.js
+++ b/components/projectsCard.js
@@ -79,7 +79,11 @@ export default ({
                     Link
                   </a>
                 </Text>
-                <Text>{project.teamMembers?.toString()}</Text>
+                <Text>
+                  {project.teamMembers.map((item, index) => (
+                    <span key={index}>{item.name} </span>
+                  ))}
+                </Text>
                 <Actions>
                   <Button
                     type={EDIT}
diff --git a/pages/Livesite/judging.js b/pages/Livesite/judging.js
index 73868706..0106c975 100644
--- a/pages/Livesite/judging.js
+++ b/pages/Livesite/judging.js
@@ -14,6 +14,7 @@ import {
 } from '../../utility/firebase';
 import { EDIT, NEW, LIVESITE_NAVBAR } from '../../constants';
 import ProjectsCard from '../../components/projectsCard';
+import TeamMembersSelector from '../../components/Judging/TeamMembersSelector';
 
 const Label = styled.p`
   font-weight: bold;
@@ -67,8 +68,8 @@ export default ({ hackathons }) => {
 
   const formatProject = (project) => {
     project.sponsorPrizes = stringToArr(project.sponsorPrizes);
-    project.teamMembers = stringToArr(project.teamMembers);
     project.teamMembersEmails = stringToArr(project.teamMembersEmails);
+    // project.teamMembers = stringToArr(project.teamMembers);
     return project;
   };
 
@@ -108,7 +109,8 @@ export default ({ hackathons }) => {
     setData({
       ...projects[key],
       id: key,
-      teamMembers: projects[key].teamMembers?.toString(),
+      // teamMembers: projects[key].teamMembers?.toString(),
+      teamMembers: projects[key].teamMembers,
       teamMembersEmails: projects[key].teamMembersEmails?.toString(),
       sponsorPrizes: projects[key].sponsorPrizes?.toString(),
     });
@@ -163,10 +165,10 @@ export default ({ hackathons }) => {
           value={data.youtubeUrl}
           onChange={(e) => handleChange('youtubeUrl', e)}
         />
-        <Label>Team Members (Comma separated)</Label>
-        <Input
+        <Label>Team Members</Label>
+        <TeamMembersSelector
           value={data.teamMembers}
-          onChange={(e) => handleChange('teamMembers', e)}
+          updateValue={handleChange}
         />
         <Label>Team Emails (Comma separated)</Label>
         <Input

From f21a0bc318e13df1eeea928ebec4d2e2c2b8185b Mon Sep 17 00:00:00 2001
From: Jae Wu <jaewuchun@gmail.com>
Date: Fri, 4 Mar 2022 17:57:38 -0800
Subject: [PATCH 2/4] add/remove members to team

---
 components/Judging/TeamMembersSelector.js | 279 +++++++++++++++++-----
 components/modal.js                       |   9 +-
 pages/Livesite/judging.js                 |   7 +-
 3 files changed, 231 insertions(+), 64 deletions(-)

diff --git a/components/Judging/TeamMembersSelector.js b/components/Judging/TeamMembersSelector.js
index a175f317..c0c5ff14 100644
--- a/components/Judging/TeamMembersSelector.js
+++ b/components/Judging/TeamMembersSelector.js
@@ -11,9 +11,106 @@
 // ]
 import { useEffect, useState } from 'react';
 import styled from 'styled-components';
+import TextField from '../TextField';
+import { getAllApplicants } from '../../utility/firebase';
+
+const InputArea = styled.div`
+  background: white;
+  padding: 0.5rem;
+  border: 1px solid #eeeeee;
+  display: flex;
+  gap: 0.5rem;
+  position: relative;
+  min-height: calc(1rem + calc(1rem * 1.2));
+`;
+
+const Member = styled.div`
+  background: #2d2937;
+  color: white;
+  padding: 0.5rem 0.7rem;
+  border-radius: 5px;
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+`;
+
+const AddText = styled.span`
+  margin: 0.5rem 0.3rem;
+  cursor: pointer;
+  font-weight: 600;
+  position: absolute;
+  top: 0.5rem;
+  right: 10px;
+`;
+
+const AddPanelOverlay = styled.div`
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  background: rgba(0, 0, 0, 0.5);
+  ${(p) => (p.isAdding ? 'display: flex;' : 'display: none;')}
+  align-items: flex-end;
+  justify-content: center;
+`;
+
+const AddPanel = styled.div`
+  transition: all 0.5s linear;
+  background: #f8f8f8;
+  border-style: none solid solid solid;
+  border-width: 1px;
+  border-color: #eeeeee;
+  box-sizing: border-box;
+  border-radius: 8px 8px 0 0;
+`;
+
+const AddTitle = styled.h4`
+  line-height: 150%;
+  margin: 0;
+`;
+
+const HackerOptions = styled.div`
+  overflow-y: auto;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+
+  ::-webkit-scrollbar {
+    width: 5px;
+  }
+  ::-webkit-scrollbar-track {
+    background: #f8f8f8;
+  }
+  ::-webkit-scrollbar-thumb {
+    background: #eeeeee;
+    border-radius: 9001px;
+  }
+`;
+
+const EmptyOptions = styled.div`
+  font-size: 0.9rem;
+  color: #777777;
+`;
+
+const SelectableHacker = styled.div`
+  line-height: 150%;
+  box-sizing: border-box;
+  padding: 0.5rem 1.5rem;
+  cursor: pointer;
+  width: 100%;
+
+  :hover {
+    background: #eeeeee;
+  }
+`;
+
+const SmallText = styled.span`
+  font-size: 0.8rem;
+  color: #777777;
+`;
 
 const TeamMembersSelector = (props) => {
-  const { value, updateValue } = props;
+  const { value, updateValue, fnNoOverflow } = props;
   // onChange => ('teamMembers', e)
 
   const copyValues = () => {
@@ -28,46 +125,17 @@ const TeamMembersSelector = (props) => {
   const [renderMembers, setRenderMembers] = useState([]);
   const [trigger, setTrigger] = useState(false);
   const [isAdding, setIsAdding] = useState(false);
+  const [hackerSearch, setHackerSearch] = useState('');
+  const [applicants, setApplicants] = useState([]);
 
-  const InputArea = styled.div`
-    background: white;
-    padding: 0.5rem;
-    border: 1px solid #eeeeee;
-    display: flex;
-    gap: 0.5rem;
-    position: relative;
-    min-height: calc(1rem + calc(1rem * 1.2));
-  `;
-
-  const Member = styled.div`
-    background: #2d2937;
-    color: white;
-    padding: 0.5rem 0.7rem;
-    border-radius: 5px;
-    display: inline-flex;
-    align-items: center;
-    gap: 0.5rem;
-  `;
-
-  const AddText = styled.span`
-    margin: 0.5rem 0.3rem;
-    cursor: pointer;
-    font-weight: 600;
-    position: absolute;
-    top: 0.5rem;
-    right: 10px;
-  `;
-
-  const AddPanel = styled.div`
-    transition: all 0.2s linear;
-    background: white;
-    padding: 0.5rem;
-    border-style: none solid solid solid;
-    border-width: 1px;
-    border-color: #EEEEEE;
-  `;
-
-  const handleAddMember = () => {};
+  const handleAddHackerToTeam = (hacker) => {
+    const currentMembers = members;
+    members.push(hacker);
+    setMembers(currentMembers);
+    setTrigger(!trigger);
+    setIsAdding(false);
+    setHackerSearch('');
+  };
 
   const handleDeleteMember = (index) => {
     const currentMembers = members;
@@ -76,7 +144,7 @@ const TeamMembersSelector = (props) => {
     setTrigger(!trigger);
   };
 
-  const DeleteIcon = ({ index }) => {
+  const DeleteIcon = ({ fn }) => {
     return (
       <div
         style={{
@@ -87,8 +155,8 @@ const TeamMembersSelector = (props) => {
         }}
         role="button"
         tabIndex="0"
-        onKeyPress={() => handleDeleteMember(index)}
-        onClick={() => handleDeleteMember(index)}
+        onKeyPress={fn}
+        onClick={fn}
       >
         <svg
           xmlns="http://www.w3.org/2000/svg"
@@ -111,33 +179,122 @@ const TeamMembersSelector = (props) => {
   useEffect(() => {
     const renderArray = [];
 
-    members.forEach((item, index) => {
-      renderArray.push(
-        <Member key={index}>
-          {item.name}
-          {/* <DeleteIcon index={index} /> */}
-        </Member>
-      );
-    });
+    if (members) {
+      members.forEach((item, index) => {
+        renderArray.push(
+          <Member key={index}>
+            {item.name}
+            <DeleteIcon fn={() => handleDeleteMember(index)} />
+          </Member>
+        );
+      });
+    }
 
     setRenderMembers(renderArray);
   }, [trigger]);
 
+  useEffect(() => {
+    if (isAdding) {
+      document
+        .getElementById('project-modal')
+        ?.scrollTo(0, document.getElementById('project-modal')?.scrollHeight);
+      fnNoOverflow(true);
+    } else {
+      fnNoOverflow(false);
+    }
+  }, [isAdding]);
+
+  useEffect(() => {
+    getAllApplicants(setApplicants);
+  }, []);
+
   return (
     <>
-      <InputArea>
-        {renderMembers}
-        {/* <AddText onClick={() => setIsAdding(!isAdding)}>
-          {isAdding ? 'Cancel' : 'Add Member'}
-        </AddText> */}
-      </InputArea>
-      <AddPanel
+      <div style={{ paddingBottom: '0.5rem' }}>
+        <InputArea>
+          {renderMembers}
+          <AddText onClick={() => setIsAdding(true)}>Add Member</AddText>
+        </InputArea>
+      </div>
+      <AddPanelOverlay
+        isAdding={isAdding}
         style={{
-          display: isAdding ? 'flex' : 'none',
+          height: document.getElementById('project-modal')?.scrollHeight,
+          overflow: 'hidden',
         }}
       >
-        yuh
-      </AddPanel>
+        <AddPanel>
+          {/* Head */}
+          <div
+            style={{
+              padding: '1.5rem',
+              boxSizing: 'border-box',
+            }}
+          >
+            <div
+              style={{
+                display: 'flex',
+                gap: '1rem',
+                justifyContent: 'space-between',
+                paddingBottom: '1rem',
+              }}
+            >
+              {/* Title + Cancel */}
+              <AddTitle>Add Team Member</AddTitle>
+              <DeleteIcon fn={() => setIsAdding(false)} />
+            </div>
+            {/* Search */}
+            <TextField
+              value={hackerSearch}
+              onChangeCustomValue={(e) => setHackerSearch(e.target.value)}
+            />
+          </div>
+
+          {/* Searched Options */}
+          <HackerOptions
+            style={{
+              maxHeight:
+                document.getElementById('project-modal')?.scrollHeight / 2,
+              minWidth:
+                document.getElementById('project-modal')?.scrollWidth / 2,
+              paddingBottom: '1.5rem',
+            }}
+          >
+            {/* OPTIMIZATION TODO: debounce search + pull from firebase where applicant is accepted (if possible) */}
+            {hackerSearch ? (
+              applicants?.map((applicant, index) => {
+                const name = `${applicant.basicInfo.firstName} ${applicant.basicInfo.lastName}`;
+                const { email } = applicant.basicInfo;
+                if (
+                  (name.toLowerCase().includes(hackerSearch.toLowerCase()) ||
+                    hackerSearch === '*') &&
+                  applicant.status.applicationStatus === 'accepted' &&
+                  applicant.status.attending
+                ) {
+                  return (
+                    <SelectableHacker
+                      key={index}
+                      onClick={() =>
+                        handleAddHackerToTeam({
+                          discord: '-#-',
+                          email,
+                          id: applicant._id,
+                          name,
+                        })
+                      }
+                    >
+                      {name} <SmallText>{email}</SmallText>
+                    </SelectableHacker>
+                  );
+                }
+                return <></>;
+              })
+            ) : (
+              <EmptyOptions>Begin typing to search</EmptyOptions>
+            )}
+          </HackerOptions>
+        </AddPanel>
+      </AddPanelOverlay>
     </>
   );
 };
diff --git a/components/modal.js b/components/modal.js
index 3bbd6117..ad013f7a 100644
--- a/components/modal.js
+++ b/components/modal.js
@@ -138,7 +138,7 @@ const ModalBackground = styled.div`
   width: 740px;
   max-width: 100%;
   max-height: 70%;
-  overflow-y: auto;
+  ${(p) => (p.noOverflow ? 'overflow-y: hidden;' : 'overflow-y: auto;')}
 `;
 
 const ButtonContainer = styled.div`
@@ -239,6 +239,7 @@ export default function Modal({
   lastModified,
   children,
   modalTitle,
+  noOverflow,
 }) {
   if (!isOpen) {
     return null;
@@ -277,7 +278,11 @@ export default function Modal({
   return (
     <>
       {isOpen && <BackDropScreen />}
-      <ModalBackground isOpen={isOpen}>
+      <ModalBackground
+        isOpen={isOpen}
+        noOverflow={noOverflow}
+        id="project-modal"
+      >
         <ModalButton type={CLOSE} handleClose={handleClose} />
         {(modalTitle && getTitle(modalTitle)) || getTitle(modalAction)}
         {children}
diff --git a/pages/Livesite/judging.js b/pages/Livesite/judging.js
index 0106c975..37cc60ee 100644
--- a/pages/Livesite/judging.js
+++ b/pages/Livesite/judging.js
@@ -27,6 +27,9 @@ export default ({ hackathons }) => {
   const [activeModal, setActiveModal] = useState('');
   const [data, setData] = useState({});
 
+  // for Add Team Member function trigger (/components/Judging/TeamMemberSelector.js)
+  const [innerModalOpen, setInnerModalOpen] = useState(false);
+
   useEffect(() => {
     (async () => {
       setActiveHackathon(await getActiveHackathon);
@@ -74,6 +77,7 @@ export default ({ hackathons }) => {
   };
 
   const handleSave = async () => {
+    console.log(data);
     if (!Object.values(data).every((field) => field === 0 || !!field)) {
       // eslint-disable-next-line no-alert
       alert('All fields required');
@@ -109,7 +113,6 @@ export default ({ hackathons }) => {
     setData({
       ...projects[key],
       id: key,
-      // teamMembers: projects[key].teamMembers?.toString(),
       teamMembers: projects[key].teamMembers,
       teamMembersEmails: projects[key].teamMembersEmails?.toString(),
       sponsorPrizes: projects[key].sponsorPrizes?.toString(),
@@ -142,6 +145,7 @@ export default ({ hackathons }) => {
         handleClose={handleCloseModal}
         handleSave={handleSave}
         modalAction={activeModal}
+        noOverflow={innerModalOpen}
       >
         <Label>Title</Label>
         <Input value={data.title} onChange={(e) => handleChange('title', e)} />
@@ -169,6 +173,7 @@ export default ({ hackathons }) => {
         <TeamMembersSelector
           value={data.teamMembers}
           updateValue={handleChange}
+          fnNoOverflow={setInnerModalOpen}
         />
         <Label>Team Emails (Comma separated)</Label>
         <Input

From 95d5c7e12a751397d8211fb3afd7a2827e9354eb Mon Sep 17 00:00:00 2001
From: Jae Wu <jaewuchun@gmail.com>
Date: Fri, 4 Mar 2022 18:06:41 -0800
Subject: [PATCH 3/4] fixes

---
 components/Judging/TeamMembersSelector.js | 26 +++++++++++++----------
 pages/Livesite/judging.js                 |  4 ++--
 2 files changed, 17 insertions(+), 13 deletions(-)

diff --git a/components/Judging/TeamMembersSelector.js b/components/Judging/TeamMembersSelector.js
index c0c5ff14..b7af2753 100644
--- a/components/Judging/TeamMembersSelector.js
+++ b/components/Judging/TeamMembersSelector.js
@@ -113,13 +113,13 @@ const TeamMembersSelector = (props) => {
   const { value, updateValue, fnNoOverflow } = props;
   // onChange => ('teamMembers', e)
 
-  const copyValues = () => {
-    const duplicate = [];
-    value.forEach((item) => {
-      duplicate.push(item);
-    });
-    return duplicate;
-  };
+  //   const copyValues = () => {
+  //     const duplicate = [];
+  //     value.forEach((item) => {
+  //       duplicate.push(item);
+  //     });
+  //     return duplicate;
+  //   };
 
   const [members, setMembers] = useState(value);
   const [renderMembers, setRenderMembers] = useState([]);
@@ -129,12 +129,12 @@ const TeamMembersSelector = (props) => {
   const [applicants, setApplicants] = useState([]);
 
   const handleAddHackerToTeam = (hacker) => {
+    setHackerSearch(''); // doesn't reset... maybe something to do with onChangeCustomValue
     const currentMembers = members;
     members.push(hacker);
     setMembers(currentMembers);
     setTrigger(!trigger);
     setIsAdding(false);
-    setHackerSearch('');
   };
 
   const handleDeleteMember = (index) => {
@@ -191,6 +191,9 @@ const TeamMembersSelector = (props) => {
     }
 
     setRenderMembers(renderArray);
+
+    // Save
+    updateValue('teamMembers', members, true);
   }, [trigger]);
 
   useEffect(() => {
@@ -262,18 +265,19 @@ const TeamMembersSelector = (props) => {
           >
             {/* OPTIMIZATION TODO: debounce search + pull from firebase where applicant is accepted (if possible) */}
             {hackerSearch ? (
-              applicants?.map((applicant, index) => {
+              applicants?.map((applicant) => {
                 const name = `${applicant.basicInfo.firstName} ${applicant.basicInfo.lastName}`;
                 const { email } = applicant.basicInfo;
                 if (
                   (name.toLowerCase().includes(hackerSearch.toLowerCase()) ||
                     hackerSearch === '*') &&
                   applicant.status.applicationStatus === 'accepted' &&
-                  applicant.status.attending
+                  applicant.status.attending &&
+                  !(members.filter((e) => e.id === applicant._id).length > 0)
                 ) {
                   return (
                     <SelectableHacker
-                      key={index}
+                      key={applicant._id}
                       onClick={() =>
                         handleAddHackerToTeam({
                           discord: '-#-',
diff --git a/pages/Livesite/judging.js b/pages/Livesite/judging.js
index 37cc60ee..1895d645 100644
--- a/pages/Livesite/judging.js
+++ b/pages/Livesite/judging.js
@@ -120,10 +120,10 @@ export default ({ hackathons }) => {
     setActiveModal(EDIT);
   };
 
-  const handleChange = (field, e) => {
+  const handleChange = (field, e, custom = false) => {
     setData({
       ...data,
-      [field]: e.target.value,
+      [field]: custom ? e : e.target.value,
     });
   };
 

From c7d4d6bbe36807defa58ff6abaafff074e5b8905 Mon Sep 17 00:00:00 2001
From: Jae Wu <jaewuchun@gmail.com>
Date: Sat, 5 Mar 2022 17:38:39 -0800
Subject: [PATCH 4/4] made fields match, made field cheq for required only

---
 components/Judging/TeamMembersSelector.js | 23 +++++---
 pages/Livesite/judging.js                 | 66 ++++++++++++++++++-----
 2 files changed, 67 insertions(+), 22 deletions(-)

diff --git a/components/Judging/TeamMembersSelector.js b/components/Judging/TeamMembersSelector.js
index b7af2753..9fc8a964 100644
--- a/components/Judging/TeamMembersSelector.js
+++ b/components/Judging/TeamMembersSelector.js
@@ -256,16 +256,18 @@ const TeamMembersSelector = (props) => {
           {/* Searched Options */}
           <HackerOptions
             style={{
-              maxHeight:
-                document.getElementById('project-modal')?.scrollHeight / 2,
-              minWidth:
-                document.getElementById('project-modal')?.scrollWidth / 2,
+              maxHeight: document.getElementById('project-modal')
+                ? document.getElementById('project-modal').scrollHeight / 2
+                : 0,
+              minWidth: document.getElementById('project-modal')
+                ? document.getElementById('project-modal').scrollWidth / 2
+                : 0,
               paddingBottom: '1.5rem',
             }}
           >
             {/* OPTIMIZATION TODO: debounce search + pull from firebase where applicant is accepted (if possible) */}
             {hackerSearch ? (
-              applicants?.map((applicant) => {
+              applicants?.map((applicant, index) => {
                 const name = `${applicant.basicInfo.firstName} ${applicant.basicInfo.lastName}`;
                 const { email } = applicant.basicInfo;
                 if (
@@ -273,11 +275,16 @@ const TeamMembersSelector = (props) => {
                     hackerSearch === '*') &&
                   applicant.status.applicationStatus === 'accepted' &&
                   applicant.status.attending &&
-                  !(members.filter((e) => e.id === applicant._id).length > 0)
+                  (members
+                    ? !(
+                        members?.filter((e) => e.id === applicant._id).length >
+                        0
+                      )
+                    : true)
                 ) {
                   return (
                     <SelectableHacker
-                      key={applicant._id}
+                      key={index}
                       onClick={() =>
                         handleAddHackerToTeam({
                           discord: '-#-',
@@ -287,7 +294,7 @@ const TeamMembersSelector = (props) => {
                         })
                       }
                     >
-                      {name} <SmallText>{email}</SmallText>
+                      {name} <SmallText key={index}>{email}</SmallText>
                     </SelectableHacker>
                   );
                 }
diff --git a/pages/Livesite/judging.js b/pages/Livesite/judging.js
index 1895d645..7fba80a1 100644
--- a/pages/Livesite/judging.js
+++ b/pages/Livesite/judging.js
@@ -47,13 +47,18 @@ export default ({ hackathons }) => {
 
   const handleNew = () => {
     setData({
+      charityChoice: '',
       description: '',
-      devpostUrl: '',
-      youtubeUrl: '',
+      links: {
+        youtube: '',
+        devpost: '',
+        sourceCode: '',
+      },
       sponsorPrizes: '',
       teamMembers: '',
-      teamMembersEmails: '',
       title: '',
+      mentorNominations: '',
+      draftStatus: '',
     });
     setActiveModal(NEW);
   };
@@ -71,14 +76,27 @@ export default ({ hackathons }) => {
 
   const formatProject = (project) => {
     project.sponsorPrizes = stringToArr(project.sponsorPrizes);
-    project.teamMembersEmails = stringToArr(project.teamMembersEmails);
-    // project.teamMembers = stringToArr(project.teamMembers);
     return project;
   };
 
   const handleSave = async () => {
     console.log(data);
-    if (!Object.values(data).every((field) => field === 0 || !!field)) {
+
+    const requiredFields = [
+      'title',
+      'description',
+      'teamMembers',
+      'links',
+      'sponsorPrizes',
+    ];
+
+    if (
+      !Object.keys(data).some(
+        (key) =>
+          (requiredFields.includes(key) && data[key] === 0) ||
+          (requiredFields.includes(key) && !!data[key])
+      )
+    ) {
       // eslint-disable-next-line no-alert
       alert('All fields required');
       return;
@@ -114,7 +132,6 @@ export default ({ hackathons }) => {
       ...projects[key],
       id: key,
       teamMembers: projects[key].teamMembers,
-      teamMembersEmails: projects[key].teamMembersEmails?.toString(),
       sponsorPrizes: projects[key].sponsorPrizes?.toString(),
     });
     setActiveModal(EDIT);
@@ -127,6 +144,12 @@ export default ({ hackathons }) => {
     });
   };
 
+  const handleChangeLink = (linkField, e) => {
+    const currentData = data;
+    currentData.links[linkField] = e.target.value;
+    setData(currentData);
+  };
+
   return (
     <Page
       currentPath="Livesite"
@@ -161,13 +184,23 @@ export default ({ hackathons }) => {
         />
         <Label>Devpost Url</Label>
         <Input
-          value={data.devpostUrl}
-          onChange={(e) => handleChange('devpostUrl', e)}
+          value={data.links?.devpost}
+          onChange={(e) => handleChangeLink('devpost', e)}
         />
         <Label>Youtube Url</Label>
         <Input
-          value={data.youtubeUrl}
-          onChange={(e) => handleChange('youtubeUrl', e)}
+          value={data.links?.youtube}
+          onChange={(e) => handleChangeLink('youtube', e)}
+        />
+        <Label>Source Code Url</Label>
+        <Input
+          value={data.links?.sourceCode}
+          onChange={(e) => handleChangeLink('sourceCode', e)}
+        />
+        <Label>Charity Choice</Label>
+        <Input
+          value={data.charityChoice}
+          onChange={(e) => handleChange('charityChoice', e)}
         />
         <Label>Team Members</Label>
         <TeamMembersSelector
@@ -175,10 +208,15 @@ export default ({ hackathons }) => {
           updateValue={handleChange}
           fnNoOverflow={setInnerModalOpen}
         />
-        <Label>Team Emails (Comma separated)</Label>
+        <Label>Mentor Nominations</Label>
+        <Input
+          value={data.mentorNominations}
+          onChange={(e) => handleChange('mentorNominations', e)}
+        />
+        <Label>Draft Status</Label>
         <Input
-          value={data.teamMembersEmails}
-          onChange={(e) => handleChange('teamMembersEmails', e)}
+          value={data.draftStatus}
+          onChange={(e) => handleChange('draftStatus', e)}
         />
       </Modal>
     </Page>