From e47eca05c8da9cea15d7a6774b65c84231a2535b Mon Sep 17 00:00:00 2001 From: Karthik Ayangar Date: Sun, 11 Feb 2024 16:40:53 +0530 Subject: [PATCH] feat: firstVisit popup Signed-off-by: Karthik Ayangar --- src/app/api/githubData.ts | 6 +- src/app/api/organization.ts | 2 +- src/app/api/project.ts | 2 +- src/app/components/buttonBar/index.tsx | 39 +++-- src/app/components/firstVisit/index.scss | 32 ++++ src/app/components/firstVisit/index.tsx | 42 +++++ src/app/components/popup/index.scss | 70 ++++++++ src/app/components/popup/index.tsx | 82 ++++++++++ src/app/components/reactPortal/index.tsx | 14 ++ src/app/components/timeRangeSwitch/index.tsx | 8 +- src/app/routes/BasicRoutes.tsx | 34 +++- src/envConstants.ts | 2 +- src/features/AddWorkspace/index.tsx | 2 +- src/features/EditProject/index.scss | 149 +++++++++--------- src/features/EditProject/index.tsx | 30 ++-- src/features/EditWorkspace/index.tsx | 39 +++-- src/features/ProjectAddMember /index.scss | 2 - src/features/ProjectAddMember /index.tsx | 22 +-- src/features/WorkspaceAddMember/index.scss | 2 - src/features/WorkspaceAddMember/index.tsx | 46 +++--- .../components/BackNavigation.tsx | 20 +-- .../components/MemberCard.tsx | 99 ++++++++---- .../project-members /components/Options.tsx | 45 ++++-- src/features/project-members /index.scss | 1 - src/features/project-members /index.tsx | 83 +++++----- .../components/contributorCard/index.tsx | 4 +- .../project/components/contributors/index.tsx | 135 +++++++++------- src/features/project/index.tsx | 62 +++++--- .../components/BackNavigation.tsx | 8 +- .../components/MemberCard.tsx | 55 ++++--- .../workspace-members /components/Options.tsx | 17 +- src/features/workspace-members /index.scss | 1 - src/features/workspace-members /index.tsx | 71 +++++---- src/features/workspace-view/index.tsx | 38 ++--- .../workspace-view/workspace-card/index.scss | 4 +- .../workspace-view/workspace-card/index.tsx | 31 ++-- .../components/leaderboard/index.tsx | 63 +++++--- .../components/projectCard/index.scss | 2 +- .../components/projectCard/index.tsx | 71 +++++---- src/features/workspace/index.tsx | 79 +++++----- 40 files changed, 958 insertions(+), 556 deletions(-) create mode 100644 src/app/components/firstVisit/index.scss create mode 100644 src/app/components/firstVisit/index.tsx create mode 100644 src/app/components/popup/index.scss create mode 100644 src/app/components/popup/index.tsx create mode 100644 src/app/components/reactPortal/index.tsx diff --git a/src/app/api/githubData.ts b/src/app/api/githubData.ts index 2b76ff9..24c29e5 100644 --- a/src/app/api/githubData.ts +++ b/src/app/api/githubData.ts @@ -21,8 +21,8 @@ export interface OrgRank { contributors: Contributors; } -export interface ProjectStats{ - contributors: Contributors +export interface ProjectStats { + contributors: Contributors; } // Contributors==project issues commits pull @@ -71,7 +71,7 @@ export const getProjectGithubData = async ( orgName: string, projectName: string, monthly: boolean -) : Promise>=> { +): Promise> => { const url = BACKEND_URL + '/api/protected/github/' + diff --git a/src/app/api/organization.ts b/src/app/api/organization.ts index 7af24dc..24f758f 100644 --- a/src/app/api/organization.ts +++ b/src/app/api/organization.ts @@ -124,7 +124,7 @@ export const changeOrgMembersStatus = async ( orgName: string, orgMemberStatus: { [key: string]: string } ) => { - const url = BACKEND_URL + '/api/protected/org/changeMembersStatus/'+orgName; + const url = BACKEND_URL + '/api/protected/org/changeMembersStatus/' + orgName; const respnse = await axios.put( url, { diff --git a/src/app/api/project.ts b/src/app/api/project.ts index d51757f..b0ae917 100644 --- a/src/app/api/project.ts +++ b/src/app/api/project.ts @@ -11,7 +11,7 @@ export interface GetProject { id: number; name: string; description: string; - link: string + link: string; } export interface Member { diff --git a/src/app/components/buttonBar/index.tsx b/src/app/components/buttonBar/index.tsx index 35f4401..4945f7e 100644 --- a/src/app/components/buttonBar/index.tsx +++ b/src/app/components/buttonBar/index.tsx @@ -4,27 +4,36 @@ import TimeRangeSwitch from 'app/components/timeRangeSwitch'; import './index.scss'; import { GetProject } from 'app/api/project'; import { useNavigate } from 'react-router-dom'; -interface Props{ - weekly: boolean, - setWeekly: (week:boolean)=>void - project: GetProject | null - workspaceName: string | undefined - +interface Props { + weekly: boolean; + setWeekly: (week: boolean) => void; + project: GetProject | null; + workspaceName: string | undefined; } -const ButtonBar:React.FC = ({weekly, setWeekly, project, workspaceName}) => { - const navigate= useNavigate() +const ButtonBar: React.FC = ({ + weekly, + setWeekly, + project, + workspaceName, +}) => { + const navigate = useNavigate(); return (
- +
- { project&&<> -

{project.name}

-

- {project.description} -

- } + {project && ( + <> +

{project.name}

+

{project.description}

+ + )}
); }; diff --git a/src/app/components/firstVisit/index.scss b/src/app/components/firstVisit/index.scss new file mode 100644 index 0000000..c215fb5 --- /dev/null +++ b/src/app/components/firstVisit/index.scss @@ -0,0 +1,32 @@ +.modal-footer { + height: 100%; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + font-size: 0.5rem; + font-weight: 600; + a { + text-decoration: none; + } +} + +.firstvisit-btn { + background-color: #402aa4; + border: none; + color: white; + padding: 0.5rem 1rem; + border-radius: 5rem; + border: 1px solid #402aa4; + font-size: 1rem; +} + +.firstvisit-btn:hover { + background-color: whitesmoke; + border: none; + color: #402aa4; + padding: 0.5rem 1rem; + border-radius: 5rem; + border: 1px solid #402aa4; + font-size: 1rem; +} diff --git a/src/app/components/firstVisit/index.tsx b/src/app/components/firstVisit/index.tsx new file mode 100644 index 0000000..8f6822a --- /dev/null +++ b/src/app/components/firstVisit/index.tsx @@ -0,0 +1,42 @@ +import { useEffect, useState } from 'react'; +import Popup from '../popup'; +import './index.scss'; + +export default function FirstVisit() { + const [show, setShow] = useState(false); + useEffect(() => { + const visit = localStorage.getItem('visit'); + if (visit !== 'true') { + localStorage.setItem('visit', 'true'); + + setShow(true); + } + }, []); + + return ( + <> + {show && ( + setShow(false)} + footer={ +
+

+ Google Summer of Code is a global, online program focused on + bringing new contributors into open source software development. +

+ + Visit GSOC + +
+ } + popup_zindex={{ overlay: 3000, modal: 4000 }} + /> + )} + + ); +} diff --git a/src/app/components/popup/index.scss b/src/app/components/popup/index.scss new file mode 100644 index 0000000..7ddab5a --- /dev/null +++ b/src/app/components/popup/index.scss @@ -0,0 +1,70 @@ +.popup-overlay { + position: fixed; + top: 0; + left: 0; + right: 0; + bottom: 0; + background-color: rgba(0, 0, 0, 0.5); +} + +.popup-modal { + position: fixed; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + background-color: white; + border-radius: 10px; + max-width: 500px; + width: 100%; + max-height: 67vh; + overflow-y: auto; + color: black; +} + +.popup-title { + display: flex; + justify-content: space-between; + align-items: center; + border-bottom: 1px solid black; + padding: 0.5em 1em 0.5em 1em; + background-color: #402aa4; + color: white; +} + +.popup-body { + text-align: center; + padding: 0.5em 1em 0.5em 1em; +} + +.popup-footer { + display: flex; + flex-direction: row-reverse; + margin: 0.6em; +} + +.close-btn { + background: none; + border: none; + padding: 0.1em; + color: white; +} + +.modal-btn { + width: 30px; + height: 30px; + background-color: transparent; + border: none; + color: white; + border: 1px solid white; + border-radius: 50%; +} + +.modal-btn:hover { + width: 30px; + height: 30px; + background-color: white; + border: none; + color: #402aa4; + border: 1px solid #402aa4; + border-radius: 50%; +} diff --git a/src/app/components/popup/index.tsx b/src/app/components/popup/index.tsx new file mode 100644 index 0000000..2badb89 --- /dev/null +++ b/src/app/components/popup/index.tsx @@ -0,0 +1,82 @@ +import './index.scss'; +import ReactPortal from '../reactPortal'; +import { ReactNode } from 'react'; +type _POPUP_PROPS = { + onClose?: () => void; + onSubmit?: () => void; + title: string | ReactNode; + type?: 'success' | 'error'; + submit?: string; + content?: string | ReactNode; + footer?: ReactNode; + popup_zindex?: { + overlay: number; + modal: number; + }; +}; + +const Popup = ({ + title, + content, + type, + onClose, + onSubmit, + submit, + footer, + popup_zindex, +}: _POPUP_PROPS) => { + return ( + +
+
+
+ {typeof title === 'string' ? ( + {title} + ) : ( +
{title}
+ )} + {onClose && ( + + )} +
+ {content &&
{content}
} +
+ {onSubmit && ( + + )} +
{footer}
+
+
+ + ); +}; + +export default Popup; diff --git a/src/app/components/reactPortal/index.tsx b/src/app/components/reactPortal/index.tsx new file mode 100644 index 0000000..a855a0a --- /dev/null +++ b/src/app/components/reactPortal/index.tsx @@ -0,0 +1,14 @@ +import { ReactNode, useEffect, useState } from 'react'; +import { createPortal } from 'react-dom'; + +/** + * Ensures that document.body is available + */ +export default function ReactPortal({ children }: { children: ReactNode }) { + const [mounted, setMounted] = useState(false); + useEffect(() => { + setMounted(true); + }, []); + + return <>{mounted && createPortal(<>{children}, document.body)}; +} diff --git a/src/app/components/timeRangeSwitch/index.tsx b/src/app/components/timeRangeSwitch/index.tsx index e32b95c..17f5d23 100644 --- a/src/app/components/timeRangeSwitch/index.tsx +++ b/src/app/components/timeRangeSwitch/index.tsx @@ -13,14 +13,14 @@ interface Props { const TimeRangeSwitch: React.FC = ({ weekly, setWeekly }) => { // const dispatch = useDispatch(); // const isWeekly = useSelector((state: timeRangeModel) => state.isWeekly.value); - useEffect(()=>{ - console.log(weekly) - },[weekly, setWeekly]) + useEffect(() => { + console.log(weekly); + }, [weekly, setWeekly]); return (
@@ -128,7 +122,7 @@ const ProjectAddMember = () => {
{member}

{' '} diff --git a/src/features/project-members /components/Options.tsx b/src/features/project-members /components/Options.tsx index d9bcd8d..ecf9975 100644 --- a/src/features/project-members /components/Options.tsx +++ b/src/features/project-members /components/Options.tsx @@ -1,20 +1,41 @@ -import UserContext from "app/context/user/userContext"; -import { useContext } from "react"; -import { useNavigate } from "react-router-dom"; +import UserContext from 'app/context/user/userContext'; +import { useContext } from 'react'; +import { useNavigate } from 'react-router-dom'; -interface Props{ - spaceName: string - projectName: string, - projectMembers: {[username: string]:string} | null, - orgMembers: {[username:string]:string} | null +interface Props { + spaceName: string; + projectName: string; + projectMembers: { [username: string]: string } | null; + orgMembers: { [username: string]: string } | null; } -const Options:React.FC = ({spaceName, projectName, projectMembers, orgMembers}) => { - const navigate= useNavigate() - const userContext= useContext(UserContext) +const Options: React.FC = ({ + spaceName, + projectName, + projectMembers, + orgMembers, +}) => { + const navigate = useNavigate(); + const userContext = useContext(UserContext); return (
- {orgMembers&&projectMembers&&spaceName&&projectName&&userContext?.username&&(orgMembers[userContext?.username?.toString()]==('admin'||'manager')||projectMembers[userContext?.username.toString()]=='admin')&&} + {orgMembers && + projectMembers && + spaceName && + projectName && + userContext?.username && + (orgMembers[userContext?.username?.toString()] == + ('admin' || 'manager') || + projectMembers[userContext?.username.toString()] == 'admin') && ( + + )} {/* */}
); diff --git a/src/features/project-members /index.scss b/src/features/project-members /index.scss index 60986a9..5344489 100644 --- a/src/features/project-members /index.scss +++ b/src/features/project-members /index.scss @@ -172,7 +172,6 @@ display: flex; flex-direction: row; justify-content: space-between; - } @media only screen and (max-width: 600px) { diff --git a/src/features/project-members /index.tsx b/src/features/project-members /index.tsx index ae87586..5af9b6d 100644 --- a/src/features/project-members /index.tsx +++ b/src/features/project-members /index.tsx @@ -9,52 +9,61 @@ import { AVATAR_URL } from 'app/constants/api'; import { AVATAR_API } from 'envConstants'; import { getMembers } from 'app/api/project'; const ProjectMembers = () => { + const { spaceName, projectName } = useParams(); + const token = localStorage.getItem('token'); + const [orgMembers, setOrgMembers] = useState<{ + [username: string]: string; + } | null>(null); + const [projectMembers, setProjectMembers] = useState<{ + [username: string]: string; + } | null>(null); - const {spaceName, projectName} = useParams() - const token= localStorage.getItem('token') - const [orgMembers, setOrgMembers]= useState<{[username:string]:string} | null>(null) - const [projectMembers, setProjectMembers]= useState<{[username: string]:string} | null>(null) - - const dataFetch= async()=>{ - try{ - if(spaceName&&token&&projectName){ - const projectMemRes= await getMembers(token,projectName ,spaceName) - setProjectMembers(projectMemRes.data.members) - const orgMemRes = await getOrgMembers(token, spaceName) - setOrgMembers(orgMemRes.data.members) - + const dataFetch = async () => { + try { + if (spaceName && token && projectName) { + const projectMemRes = await getMembers(token, projectName, spaceName); + setProjectMembers(projectMemRes.data.members); + const orgMemRes = await getOrgMembers(token, spaceName); + setOrgMembers(orgMemRes.data.members); } - }catch(e){ + } catch (e) {} + }; + useEffect(() => { + dataFetch(); + }, [setOrgMembers, setProjectMembers]); - } - } - useEffect(()=>{ - dataFetch() - },[ setOrgMembers, setProjectMembers ]) - return ( - spaceName&&projectName&&
- -
- -
- {orgMembers&&projectMembers&&Object.entries(projectMembers).map(([key, value])=>{ - return + + {spaceName && projectName && ( +
+ - })} +
+ {orgMembers && + projectMembers && + Object.entries(projectMembers).map(([key, value]) => { + return ( + { - const { Name, PR,Commits, Issues } = props; - const url=AVATAR_URL + '/' + Name + '.png?apikey=' + AVATAR_API + const { Name, PR, Commits, Issues } = props; + const url = AVATAR_URL + '/' + Name + '.png?apikey=' + AVATAR_API; return (
profile diff --git a/src/features/project/components/contributors/index.tsx b/src/features/project/components/contributors/index.tsx index 6003b50..1b3dc8a 100644 --- a/src/features/project/components/contributors/index.tsx +++ b/src/features/project/components/contributors/index.tsx @@ -6,7 +6,7 @@ import previous_contributor from 'app/assets/images/previous_contributor.svg'; import { mockData } from 'app/utils/data'; import mockdatatypes from 'app/models/mockDataTypes'; import ReactSimplyCarousel from 'react-simply-carousel'; -import { Contributors as contri} from 'app/api/githubData'; +import { Contributors as contri } from 'app/api/githubData'; const btn_style = { alignSelf: 'center', @@ -14,46 +14,61 @@ const btn_style = { border: 'none', }; -interface Props{ - weekly: boolean, - monthlyData: contri | null - weeklyData: contri | null +interface Props { + weekly: boolean; + monthlyData: contri | null; + weeklyData: contri | null; } -const Contributors: React.FC= ({weekly, monthlyData, weeklyData}) => { +const Contributors: React.FC = ({ weekly, monthlyData, weeklyData }) => { const [activeSlideIndex, setActiveSlideIndex] = useState(0); - const [monthlyDataArray, setMonthlyDataArray]= useState<{index: number, username: string, commits: number, issues: number, pulls:number}[]>([]) - const [weeklyDataArray, setWeeklyDataArray]= useState<{index: number, username: string, commits: number, issues: number, pulls:number}[]>([]) + const [monthlyDataArray, setMonthlyDataArray] = useState< + { + index: number; + username: string; + commits: number; + issues: number; + pulls: number; + }[] + >([]); + const [weeklyDataArray, setWeeklyDataArray] = useState< + { + index: number; + username: string; + commits: number; + issues: number; + pulls: number; + }[] + >([]); - const initialProcess= ()=>{ - if(monthlyData){ + const initialProcess = () => { + if (monthlyData) { const contributorsArray = Object.entries(monthlyData).map( ([username, data], index) => ({ index, username, - ...data + ...data, }) - ) - contributorsArray.sort((a, b) => b.pulls - a.pulls) - setMonthlyDataArray(contributorsArray) + ); + contributorsArray.sort((a, b) => b.pulls - a.pulls); + setMonthlyDataArray(contributorsArray); } - if(weeklyData){ + if (weeklyData) { const contributorsArray = Object.entries(weeklyData).map( ([username, data], index) => ({ index, username, - ...data + ...data, }) - ) - contributorsArray.sort((a, b) => b.pulls - a.pulls) - setWeeklyDataArray(contributorsArray) + ); + contributorsArray.sort((a, b) => b.pulls - a.pulls); + setWeeklyDataArray(contributorsArray); } - } + }; - useEffect(()=>{ - initialProcess() - - },[weekly,monthlyData,weeklyData]) + useEffect(() => { + initialProcess(); + }, [weekly, monthlyData, weeklyData]); return (
@@ -102,41 +117,43 @@ const Contributors: React.FC= ({weekly, monthlyData, weeklyData}) => { speed={400} easing='linear' > - {weekly?weeklyDataArray.map((e) => { - return ( -
- -
- ); - }):monthlyDataArray.map((e) => { - return ( -
- -
- ); - })} + {weekly + ? weeklyDataArray.map((e) => { + return ( +
+ +
+ ); + }) + : monthlyDataArray.map((e) => { + return ( +
+ +
+ ); + })}
diff --git a/src/features/project/index.tsx b/src/features/project/index.tsx index 4d14faf..cd754ff 100644 --- a/src/features/project/index.tsx +++ b/src/features/project/index.tsx @@ -4,35 +4,57 @@ import ButtonBar from 'app/components/buttonBar'; import './index.scss'; import { useParams } from 'react-router-dom'; import { GetProject, getProject } from 'app/api/project'; -import { Contributors as contri, getProjectGithubData } from 'app/api/githubData'; +import { + Contributors as contri, + getProjectGithubData, +} from 'app/api/githubData'; const ProjectPage = () => { - const {spaceName, projectName}= useParams(); - const token= localStorage.getItem('token') - const [project, setProject] =useState(null); - const [weeklyData, setWeeklyData]= useState(null) - const [monthlyData, setMonthlyData]= useState(null) - const [weekly, setWeekly]= useState(true) - const fetchData= async()=>{ - if(spaceName&&projectName&&token){ + const { spaceName, projectName } = useParams(); + const token = localStorage.getItem('token'); + const [project, setProject] = useState(null); + const [weeklyData, setWeeklyData] = useState(null); + const [monthlyData, setMonthlyData] = useState(null); + const [weekly, setWeekly] = useState(true); + const fetchData = async () => { + if (spaceName && projectName && token) { const project = await getProject(token, projectName, spaceName); - setProject(project.data) - const weeklyData= await getProjectGithubData(token,spaceName,projectName, false) - const monthlyData= await getProjectGithubData(token, spaceName, projectName, true) - setWeeklyData(weeklyData.data.contributors) - setMonthlyData(monthlyData.data.contributors) + setProject(project.data); + const weeklyData = await getProjectGithubData( + token, + spaceName, + projectName, + false + ); + const monthlyData = await getProjectGithubData( + token, + spaceName, + projectName, + true + ); + setWeeklyData(weeklyData.data.contributors); + setMonthlyData(monthlyData.data.contributors); } - } + }; - useEffect(()=>{ - fetchData() - },[]) + useEffect(() => { + fetchData(); + }, []); return ( <>
- - + +
); diff --git a/src/features/workspace-members /components/BackNavigation.tsx b/src/features/workspace-members /components/BackNavigation.tsx index fee5516..0fc7ac3 100644 --- a/src/features/workspace-members /components/BackNavigation.tsx +++ b/src/features/workspace-members /components/BackNavigation.tsx @@ -1,13 +1,13 @@ -import { useNavigate } from "react-router-dom"; +import { useNavigate } from 'react-router-dom'; const BackNavigation = () => { // const clickBack = () => { // console.log('Back button clicked'); // }; - const navigate= useNavigate() + const navigate = useNavigate(); return ( -
- + {/* */}
); diff --git a/src/features/workspace-members /index.scss b/src/features/workspace-members /index.scss index 60986a9..5344489 100644 --- a/src/features/workspace-members /index.scss +++ b/src/features/workspace-members /index.scss @@ -172,7 +172,6 @@ display: flex; flex-direction: row; justify-content: space-between; - } @media only screen and (max-width: 600px) { diff --git a/src/features/workspace-members /index.tsx b/src/features/workspace-members /index.tsx index 25c6b37..1c83020 100644 --- a/src/features/workspace-members /index.tsx +++ b/src/features/workspace-members /index.tsx @@ -8,48 +8,49 @@ import { getOrgMembers } from 'app/api/organization'; import { AVATAR_URL } from 'app/constants/api'; import { AVATAR_API } from 'envConstants'; const WorkspaceMembers = () => { + const { spaceName } = useParams(); + const token = localStorage.getItem('token'); + const [orgMembers, setOrgMembers] = useState<{ + [username: string]: string; + } | null>(null); - const {spaceName} = useParams() - const token= localStorage.getItem('token') - const [orgMembers, setOrgMembers]= useState<{[username:string]:string} | null>(null) - - const dataFetch= async()=>{ - try{ - if(spaceName&&token){ - const memRes= await getOrgMembers(token, spaceName) - - setOrgMembers(memRes.data.members) + const dataFetch = async () => { + try { + if (spaceName && token) { + const memRes = await getOrgMembers(token, spaceName); + setOrgMembers(memRes.data.members); } - }catch(e){ + } catch (e) {} + }; + useEffect(() => { + dataFetch(); + }, [setOrgMembers]); - } - } - useEffect(()=>{ - dataFetch() - },[ setOrgMembers ]) - return ( - spaceName&&
+
-
- -
- {orgMembers&&Object.entries(orgMembers).map(([key, value])=>{ - return + +
+ {orgMembers && + Object.entries(orgMembers).map(([key, value]) => { + return ( + { const userContext = useContext(UserContext); @@ -43,6 +44,7 @@ const WorkspaceView = () => { return (
+
@@ -56,24 +58,24 @@ const WorkspaceView = () => { {isLoad ? ( ) : ( - userContext?.userOrgs && - Object.entries(userContext.userOrgs.userOrgs) - .filter(([key, value]) => { - if (key.toLowerCase().includes(searchValue.toLowerCase())) - return [key, value]; - }) - .map(([orgName, details]) => { - return ( - - ); - }) + userContext?.userOrgs && + Object.entries(userContext.userOrgs.userOrgs) + .filter(([key, value]) => { + if (key.toLowerCase().includes(searchValue.toLowerCase())) + return [key, value]; + }) + .map(([orgName, details]) => { + return ( + + ); + }) )}
diff --git a/src/features/workspace-view/workspace-card/index.scss b/src/features/workspace-view/workspace-card/index.scss index 25b0b6b..d65e41f 100644 --- a/src/features/workspace-view/workspace-card/index.scss +++ b/src/features/workspace-view/workspace-card/index.scss @@ -76,7 +76,7 @@ height: fit-content !important; background: rgba(26, 26, 57, 0.5); - background:black; + background: black; border: 1px solid #402aa4; backdrop-filter: blur(2px); /* Note: backdrop-filter has minimal browser support */ @@ -100,4 +100,4 @@ .image-stack { margin-left: 1rem; -} \ No newline at end of file +} diff --git a/src/features/workspace-view/workspace-card/index.tsx b/src/features/workspace-view/workspace-card/index.tsx index b6770e2..bd33abb 100644 --- a/src/features/workspace-view/workspace-card/index.tsx +++ b/src/features/workspace-view/workspace-card/index.tsx @@ -34,7 +34,7 @@ const WorkspaceCard = (props: workspaceCardProps) => { const [fileName, setFileName] = useState(null); const [imageSrc, setImageSrc] = useState(null); const [members, setMembers] = useState(null); - const [membersArray, setMembersArray]= useState<{username:string}[]>([]); + const [membersArray, setMembersArray] = useState<{ username: string }[]>([]); const userContext = useContext(UserContext); const navigate = useNavigate(); @@ -53,15 +53,14 @@ const WorkspaceCard = (props: workspaceCardProps) => { try { const members_data = await getOrgMembers(token, workspaceName); setMembers(members_data.data.members); - const membersArray = Object.entries(members_data.data.members).map(([username]) => ({ username })); - setMembersArray(membersArray) - - + const membersArray = Object.entries(members_data.data.members).map( + ([username]) => ({ username }) + ); + setMembersArray(membersArray); } catch (e) {} } }; - const HandleDelete = async () => { if (!workspaceName.endsWith('-userspace') && token) { const func = async () => { @@ -118,14 +117,14 @@ const WorkspaceCard = (props: workspaceCardProps) => { const HandleArchive = async () => { if (!workspaceName.endsWith('-userspace') && token) { const initArc = archeive; - + const func = async () => { const status: { [key: string]: boolean } = { - [workspaceName]: (!archeive), + [workspaceName]: !archeive, }; - console.log(status) - const res = await setOrgArcheiveStatus(token, status); - console.log(res) + console.log(status); + const res = await setOrgArcheiveStatus(token, status); + console.log(res); const orgs = userContext?.userOrgs; if (orgs?.userOrgs.hasOwnProperty(workspaceName)) { orgs.userOrgs[workspaceName].archive = (!archeive).toString(); @@ -149,8 +148,7 @@ const WorkspaceCard = (props: workspaceCardProps) => { }; useEffect(() => { workSpaceData(); - }, [ userContext?.setUserOrgs ]); - + }, [userContext?.setUserOrgs]); return ( <> @@ -210,10 +208,13 @@ const WorkspaceCard = (props: workspaceCardProps) => { ? "USER's WORKSPACE" : workspaceName}
-
navigate(`/workspaceMembers/${workspaceName}`)}> +
navigate(`/workspaceMembers/${workspaceName}`)} + >
- { membersArray.length > 0 ? ( + {membersArray.length > 0 ? ( membersArray.slice(0, 4).map((obj) => { const url = AVATAR_URL + diff --git a/src/features/workspace/components/leaderboard/index.tsx b/src/features/workspace/components/leaderboard/index.tsx index 738c7f4..a1bf350 100644 --- a/src/features/workspace/components/leaderboard/index.tsx +++ b/src/features/workspace/components/leaderboard/index.tsx @@ -25,8 +25,16 @@ const LeaderBoard: React.FC = ({ const [pageNumber, setPageNumber] = useState(1); // const newMockData = sortJSON(mockData); - - const [items, setItems] = useState<{index:number,name:string, issues:number , commits: number, pulls: number}[]>([]); + + const [items, setItems] = useState< + { + index: number; + name: string; + issues: number; + commits: number; + pulls: number; + }[] + >([]); const itemsPerPage = 4; @@ -42,23 +50,27 @@ const LeaderBoard: React.FC = ({ } }; + useEffect(() => { + if (weekly && weeklyOrgRank) { + const arrayOfContributors = Object.entries(weeklyOrgRank).map( + ([name, data], index) => ({ index, name, ...data }) + ); - useEffect(()=>{ - if(weekly&&weeklyOrgRank){ - const arrayOfContributors = Object.entries(weeklyOrgRank).map(([name, data], index) => ({ index,name, ...data })); - - setItems(arrayOfContributors) - setItemsLength(Object.keys(weeklyOrgRank).length) - setPageCount(Math.ceil(Object.keys(weeklyOrgRank).length/itemsPerPage)) - }else if(!weekly&&monthlyOrgRank){ - const arrayOfContributors = Object.entries(monthlyOrgRank).map(([name, data], index) => ({ index,name, ...data })); + setItems(arrayOfContributors); + setItemsLength(Object.keys(weeklyOrgRank).length); + setPageCount(Math.ceil(Object.keys(weeklyOrgRank).length / itemsPerPage)); + } else if (!weekly && monthlyOrgRank) { + const arrayOfContributors = Object.entries(monthlyOrgRank).map( + ([name, data], index) => ({ index, name, ...data }) + ); - setItems(arrayOfContributors) - setItemsLength(Object.keys(monthlyOrgRank).length) - setPageCount(Math.ceil(Object.keys(monthlyOrgRank).length/itemsPerPage)) - - } - },[weekly, weeklyOrgRank, monthlyOrgRank]) + setItems(arrayOfContributors); + setItemsLength(Object.keys(monthlyOrgRank).length); + setPageCount( + Math.ceil(Object.keys(monthlyOrgRank).length / itemsPerPage) + ); + } + }, [weekly, weeklyOrgRank, monthlyOrgRank]); return (
@@ -69,15 +81,20 @@ const LeaderBoard: React.FC = ({
PR
- {items&&items - .slice(itemOffset, itemOffset + itemsPerPage) - .map((e) => { - if (e.index+1 <= 3) { + {items && + items.slice(itemOffset, itemOffset + itemsPerPage).map((e) => { + if (e.index + 1 <= 3) { return (
top-rank-medal
@@ -88,7 +105,7 @@ const LeaderBoard: React.FC = ({ } else { return (
-
{e.index+1}
+
{e.index + 1}
{e.name}
{e.pulls}
diff --git a/src/features/workspace/components/projectCard/index.scss b/src/features/workspace/components/projectCard/index.scss index e9c04a5..dcefea1 100644 --- a/src/features/workspace/components/projectCard/index.scss +++ b/src/features/workspace/components/projectCard/index.scss @@ -23,7 +23,7 @@ margin-bottom: 0.6em; } -.invisible-height{ +.invisible-height { height: 30px; } diff --git a/src/features/workspace/components/projectCard/index.tsx b/src/features/workspace/components/projectCard/index.tsx index 5b8528d..8dc4108 100644 --- a/src/features/workspace/components/projectCard/index.tsx +++ b/src/features/workspace/components/projectCard/index.tsx @@ -12,7 +12,7 @@ import UserContext from 'app/context/user/userContext'; import { setArcheiveStatus, setBookmarkStatus } from 'app/api/organization'; import toast from 'react-hot-toast'; import { useNavigate } from 'react-router-dom'; -import rightNavbtn from '../../../../app/assets/images/right_navigation_button.svg' +import rightNavbtn from '../../../../app/assets/images/right_navigation_button.svg'; interface Props { projectName: string; orgName: string; @@ -40,17 +40,18 @@ const ProjectCard: React.FC = ({ const navigate = useNavigate(); const [pin, setPin] = useState(status.archeive); const [archive, setArchive] = useState(status.bookmark); - const [project, setProject]= useState(null) - const [projectMembers, setProjectMembers]= useState<{key:string, value: string}[]>([]) + const [project, setProject] = useState(null); + const [projectMembers, setProjectMembers] = useState< + { key: string; value: string }[] + >([]); const fetchProjectData = async () => { if (token != null) { const project_data = await getProject(token, projectName, orgName); - setProject(project_data.data) + setProject(project_data.data); } }; - const fetchProjectMembers = async () => { if (token != null) { const members = await getMembers(token, projectName, orgName); @@ -58,12 +59,10 @@ const ProjectCard: React.FC = ({ ([key, value]) => ({ key, value }) ); - setProjectMembers(myArray) + setProjectMembers(myArray); } }; - - const PinHandler = async () => { if (token && orgName) { let initial = pin; @@ -128,12 +127,11 @@ const ProjectCard: React.FC = ({ }); } }; - useEffect(()=>{ - fetchProjectData() - fetchProjectMembers() - },[ userContext?.setUsername, userContext?.setUserOrgs]) + useEffect(() => { + fetchProjectData(); + fetchProjectMembers(); + }, [userContext?.setUsername, userContext?.setUserOrgs]); - return (

{projectName}

@@ -185,26 +183,33 @@ const ProjectCard: React.FC = ({
- {orgName&&!orgName.endsWith("-userspace")&&
navigate(`/projectMembers/${orgName}/${projectName}`)} > - {projectMembers && projectMembers.length > 0 ? ( - projectMembers.slice(0, 4).map((obj) => { - const url = - AVATAR_URL + '/' + obj.key + '.png?apikey=' + AVATAR_API; - return ; - }) - ) : ( - <> -
add Members
- - )} -
} - {orgName&&!orgName.endsWith("-userspace")&&
- navigate(`/project/${orgName}/${projectName}`)} - alt='' - /> -
} + {orgName && !orgName.endsWith('-userspace') && ( +
navigate(`/projectMembers/${orgName}/${projectName}`)} + > + {projectMembers && projectMembers.length > 0 ? ( + projectMembers.slice(0, 4).map((obj) => { + const url = + AVATAR_URL + '/' + obj.key + '.png?apikey=' + AVATAR_API; + return ; + }) + ) : ( + <> +
add Members
+ + )} +
+ )} + {orgName && !orgName.endsWith('-userspace') && ( +
+ navigate(`/project/${orgName}/${projectName}`)} + alt='' + /> +
+ )}
); }; diff --git a/src/features/workspace/index.tsx b/src/features/workspace/index.tsx index e8f27ae..d79076f 100644 --- a/src/features/workspace/index.tsx +++ b/src/features/workspace/index.tsx @@ -38,61 +38,56 @@ const Workspace = () => { const [weeklyOrgProjectsData, setWeeklyOrgProjectsData] = useState(null); const { spaceName } = useParams(); - const [isLoading, setIsLoading]= useState(true) + const [isLoading, setIsLoading] = useState(true); const fetchOrgProjects = async () => { - setIsLoading(true) + setIsLoading(true); if (token && spaceName) { - try{ - const orgProjects = await getOrgProjects(token, spaceName); - setOrgProjects(orgProjects.data.projects); - }catch(e){ - navigate("/") + try { + const orgProjects = await getOrgProjects(token, spaceName); + setOrgProjects(orgProjects.data.projects); + } catch (e) { + navigate('/'); } } - setIsLoading(false) + setIsLoading(false); }; const fetchWeeklyData = async () => { - try{ - if (token && spaceName) { - const weeklyOrgRank = await getOrgRank(token, spaceName, true); - const weeklyOrgProjectsData = await getOrgGithubData( - token, - spaceName, - false - ); - - setWeeklyOrgProjectsData(weeklyOrgProjectsData.data.projects); - setWeeklyOrgRank(weeklyOrgRank.data.contributors); - }}catch(e){ + try { + if (token && spaceName) { + const weeklyOrgRank = await getOrgRank(token, spaceName, true); + const weeklyOrgProjectsData = await getOrgGithubData( + token, + spaceName, + false + ); - } + setWeeklyOrgProjectsData(weeklyOrgProjectsData.data.projects); + setWeeklyOrgRank(weeklyOrgRank.data.contributors); + } + } catch (e) {} }; const fetchMonthlyData = async () => { - try{ - if (token && spaceName) { - const monthlyOrgRank = await getOrgRank(token, spaceName, true); - const monthlyOrgProjectsData = await getOrgGithubData( - token, - spaceName, - true - ); - setMonthlyOrgRank(monthlyOrgRank.data.contributors); - setMOnthyOrgProjectsData(monthlyOrgProjectsData.data.projects); - } - }catch(e){ - - } + try { + if (token && spaceName) { + const monthlyOrgRank = await getOrgRank(token, spaceName, true); + const monthlyOrgProjectsData = await getOrgGithubData( + token, + spaceName, + true + ); + setMonthlyOrgRank(monthlyOrgRank.data.contributors); + setMOnthyOrgProjectsData(monthlyOrgProjectsData.data.projects); + } + } catch (e) {} }; - useEffect(()=>{ - fetchOrgProjects() - fetchWeeklyData() - fetchMonthlyData() - },[weekly, userContext?.setUsername, userContext?.setUserOrgs]) - - + useEffect(() => { + fetchOrgProjects(); + fetchWeeklyData(); + fetchMonthlyData(); + }, [weekly, userContext?.setUsername, userContext?.setUserOrgs]); return ( <>