From 5596cd214c225e6749da07f1c1d926d3823ff7e9 Mon Sep 17 00:00:00 2001 From: Karthik Ayangar Date: Sat, 20 Jan 2024 17:22:33 +0530 Subject: [PATCH] style: project members Signed-off-by: Karthik Ayangar --- src/app/api/file.ts | 18 +- src/app/api/githubData.ts | 28 +- src/app/api/organization.ts | 31 +- src/app/api/project.ts | 20 +- src/app/api/user.ts | 12 +- src/app/components/buttonBar/index.tsx | 4 +- src/app/components/timeRangeSwitch/index.tsx | 8 +- src/app/constants/api.ts | 2 +- src/app/context/user/userContext.tsx | 18 +- src/app/context/user/userState.tsx | 35 ++- src/app/index.tsx | 47 ++- src/app/state/action-creators/orgActions.ts | 36 +-- .../state/action-creators/projectActions.ts | 41 +-- src/app/state/action-creators/usersActions.ts | 1 - src/app/state/reducers/index.ts | 4 +- src/app/state/reducers/orgReducers.ts | 48 ++-- src/app/state/store.ts | 2 +- src/envConstants.ts | 4 +- src/features/AddProject/index.tsx | 20 +- src/features/AddWorkspace/index.tsx | 11 +- src/features/login/index.scss | 97 +++---- src/features/login/index.tsx | 64 ++--- src/features/project-members/index.tsx | 5 + src/features/workspace-members/index.tsx | 7 + src/features/workspace-view/index.tsx | 85 +++--- .../workspace-view/workspace-card/index.tsx | 269 +++++++++--------- .../components/leaderboard/index.tsx | 28 +- .../components/projectCard/index.scss | 13 + .../components/projectCard/index.tsx | 31 +- .../components/projectCardContainer/index.tsx | 9 +- src/features/workspace/index.scss | 7 +- src/features/workspace/index.tsx | 108 +++---- src/index.tsx | 2 +- 33 files changed, 563 insertions(+), 552 deletions(-) diff --git a/src/app/api/file.ts b/src/app/api/file.ts index 8e7f26b..17eaf87 100644 --- a/src/app/api/file.ts +++ b/src/app/api/file.ts @@ -26,15 +26,17 @@ export const uploadIcon = async ( export const getIcon = async (authorizationToken: string, orgName: string) => { const url = BACKEND_URL + '/api/protected/file/getIcon/' + orgName; - const response = await axios.get(url, - + const response = await axios.get( + url, + { - responseType:'blob', - headers: { - Authorization: `Bearer ${authorizationToken}`, - Accept: "*/*" - }, - }); + responseType: 'blob', + headers: { + Authorization: `Bearer ${authorizationToken}`, + Accept: '*/*', + }, + } + ); return response; }; diff --git a/src/app/api/githubData.ts b/src/app/api/githubData.ts index 6916685..95830b6 100644 --- a/src/app/api/githubData.ts +++ b/src/app/api/githubData.ts @@ -1,42 +1,36 @@ import axios, { AxiosResponse } from 'axios'; import { BACKEND_URL } from 'envConstants'; - - export interface Contributors { [contributorName: string]: { - issues: number, - pulls: number, - commits:number + issues: number; + pulls: number; + commits: number; }; } export interface ProjectsGithubData { [contributorName: string]: { - issues: number, - pulls: number, - commits:number + issues: number; + pulls: number; + commits: number; }; } - -export interface OrgRank{ - contributors: Contributors +export interface OrgRank { + contributors: Contributors; } - // Contributors==project issues commits pull -export interface OrgProjectGithubData{ - projects: ProjectsGithubData +export interface OrgProjectGithubData { + projects: ProjectsGithubData; } - - export const getOrgGithubData = async ( authorizationToken: string, orgName: string, monthly: boolean -):Promise> => { +): Promise> => { const url = BACKEND_URL + '/api/protected/github/' + orgName + '?monthly=' + monthly; const respnse = await axios.get(url, { diff --git a/src/app/api/organization.ts b/src/app/api/organization.ts index b265da1..f175b07 100644 --- a/src/app/api/organization.ts +++ b/src/app/api/organization.ts @@ -14,20 +14,20 @@ export interface AllOrgs { }[]; } -export interface Projects{ - [ProjectName: string]:{ - archeive:boolean, - bookmark: boolean - } +export interface Projects { + [ProjectName: string]: { + archeive: boolean; + bookmark: boolean; + }; } -export interface OrgProjects{ - projects: Projects +export interface OrgProjects { + projects: Projects; } -export interface Workspace{ +export interface Workspace { id: number; name: string; - description: string + description: string; } interface OrgMembers { members: { @@ -35,7 +35,6 @@ interface OrgMembers { }; } - export const deleteOrg = async ( authorizationToken: string, orgName: string @@ -98,7 +97,7 @@ export const addOrgMembers = async ( }, } ); - + return respnse; }; @@ -142,7 +141,6 @@ export const changeOrgMembersStatus = async ( return respnse; }; - export const setArcheiveStatus = async ( authorizationToken: string, orgName: string, @@ -189,7 +187,7 @@ export const setBookmarkStatus = async ( export const getOrgMembers = async ( authorizationToken: string, orgName: string -) : Promise> => { +): Promise> => { const url = BACKEND_URL + '/api/protected/org/getMembers/' + orgName; const respnse = await axios.get(url, { @@ -204,7 +202,7 @@ export const getOrgMembers = async ( export const getOrgProjects = async ( authorizationToken: string, orgName: string -):Promise> => { +): Promise> => { const url = BACKEND_URL + '/api/protected/org/getProjects/' + orgName; const respnse = await axios.get(url, { headers: { @@ -215,7 +213,10 @@ export const getOrgProjects = async ( return respnse; }; -export const getOrg = async (authorizationToken: string, orgName: string): Promise> => { +export const getOrg = async ( + authorizationToken: string, + orgName: string +): Promise> => { const url = BACKEND_URL + '/api/protected/org/getOrg/' + orgName; const respnse = await axios.get(url, { headers: { diff --git a/src/app/api/project.ts b/src/app/api/project.ts index e604a3d..a3bbb6d 100644 --- a/src/app/api/project.ts +++ b/src/app/api/project.ts @@ -7,17 +7,17 @@ export interface projectBody { link: string; } -export interface GetProject{ - id: number, - name: string, - description: string +export interface GetProject { + id: number; + name: string; + description: string; } -export interface Member{ - [key: string]:string +export interface Member { + [key: string]: string; } -export interface ProjectMembers{ - members:Member +export interface ProjectMembers { + members: Member; } export const addProject = async ( @@ -159,7 +159,7 @@ export const getProject = async ( authorizationToken: string, projectName: string, orgName: string -):Promise> => { +): Promise> => { const url = BACKEND_URL + '/api/protected/project/getProject/' + @@ -179,7 +179,7 @@ export const getMembers = async ( authorizationToken: string, projectName: string, orgName: string -) : Promise>=> { +): Promise> => { const url = BACKEND_URL + '/api/protected/project/getMembers/' + diff --git a/src/app/api/user.ts b/src/app/api/user.ts index afcd261..6dada20 100644 --- a/src/app/api/user.ts +++ b/src/app/api/user.ts @@ -5,7 +5,6 @@ export interface UserData { message: string; } - export interface UserOrgs { userOrgs: UserOrgDetails; } @@ -16,11 +15,8 @@ export interface UserOrgDetails { role: string; archive: string; }; - } - - export interface AllUserData { users: { id: number; @@ -96,17 +92,13 @@ export const setOrgArcheiveStatus = async ( ); return respnse; - }; export const getUserOrgs = async ( authorizationToken: string, username: string -):Promise> => { - const url = - BACKEND_URL + - '/api/protected/user/getUserOrgs/' + - username; +): Promise> => { + const url = BACKEND_URL + '/api/protected/user/getUserOrgs/' + username; const respnse = await axios.get(url, { headers: { Accept: 'application/json', diff --git a/src/app/components/buttonBar/index.tsx b/src/app/components/buttonBar/index.tsx index 0f8cf2a..7d22ffb 100644 --- a/src/app/components/buttonBar/index.tsx +++ b/src/app/components/buttonBar/index.tsx @@ -3,12 +3,12 @@ import TimeRangeSwitch from 'app/components/timeRangeSwitch'; import './index.scss'; const ButtonBar = () => { - const [weeky, setWeekly]= useState(true); + const [weeky, setWeekly] = useState(true); return (
- +

Appetizer

diff --git a/src/app/components/timeRangeSwitch/index.tsx b/src/app/components/timeRangeSwitch/index.tsx index cd1661f..ca7be49 100644 --- a/src/app/components/timeRangeSwitch/index.tsx +++ b/src/app/components/timeRangeSwitch/index.tsx @@ -4,12 +4,12 @@ import { timeRangeModel } from 'features/project/components/contributorCard/type import { weekAction, monthAction } from './timeRangeSlice'; import './index.scss'; -interface Props{ - weekly: boolean, - setWeekly: (bool: boolean)=>void +interface Props { + weekly: boolean; + setWeekly: (bool: boolean) => void; } -const TimeRangeSwitch:React.FC = ({weekly, setWeekly}) => { +const TimeRangeSwitch: React.FC = ({ weekly, setWeekly }) => { const dispatch = useDispatch(); const isWeekly = useSelector((state: timeRangeModel) => state.isWeekly.value); diff --git a/src/app/constants/api.ts b/src/app/constants/api.ts index 1dff1ff..a81f0db 100644 --- a/src/app/constants/api.ts +++ b/src/app/constants/api.ts @@ -1 +1 @@ -export const AVATAR_URL="https://api.multiavatar.com" +export const AVATAR_URL = 'https://api.multiavatar.com'; diff --git a/src/app/context/user/userContext.tsx b/src/app/context/user/userContext.tsx index ed47787..792bb04 100644 --- a/src/app/context/user/userContext.tsx +++ b/src/app/context/user/userContext.tsx @@ -1,13 +1,13 @@ -import { UserOrgDetails, UserOrgs } from "app/api/user"; -import { createContext } from "react"; +import { UserOrgDetails, UserOrgs } from 'app/api/user'; +import { createContext } from 'react'; -export interface UserContextType{ - username: String | null; - setUsername: (name: String)=>void; - userOrgs: UserOrgs | null; - setUserOrgs: (user_Orgs: UserOrgs)=> void +export interface UserContextType { + username: String | null; + setUsername: (name: String) => void; + userOrgs: UserOrgs | null; + setUserOrgs: (user_Orgs: UserOrgs) => void; } -const UserContext= createContext(undefined); +const UserContext = createContext(undefined); -export default UserContext; \ No newline at end of file +export default UserContext; diff --git a/src/app/context/user/userState.tsx b/src/app/context/user/userState.tsx index 2484e02..2c86d2b 100644 --- a/src/app/context/user/userState.tsx +++ b/src/app/context/user/userState.tsx @@ -1,23 +1,22 @@ -import { FC, ReactNode, useState } from "react"; -import UserContext from "./userContext"; -import { UserOrgDetails, UserOrgs } from "app/api/user"; +import { FC, ReactNode, useState } from 'react'; +import UserContext from './userContext'; +import { UserOrgDetails, UserOrgs } from 'app/api/user'; -interface Props{ - children: ReactNode +interface Props { + children: ReactNode; } -const UserState: FC= ({children})=>{ +const UserState: FC = ({ children }) => { + const [username, setUsername] = useState(null); + const [userOrgs, setUserOrgs] = useState(null); - const [username, setUsername] = useState(null); - const [userOrgs, setUserOrgs] = useState(null) + return ( + + {children} + + ); +}; - return ( - - - {children} - - - ) -} - -export default UserState \ No newline at end of file +export default UserState; diff --git a/src/app/index.tsx b/src/app/index.tsx index f566813..df7fcde 100644 --- a/src/app/index.tsx +++ b/src/app/index.tsx @@ -9,38 +9,37 @@ import { useContext } from 'react'; import UserContext from './context/user/userContext'; function App() { - - const navigate= useNavigate(); + const navigate = useNavigate(); const location = useLocation(); const currentPath = location.pathname; - const userContext= useContext(UserContext); - const token= localStorage.getItem('token'); - const checklogin= async ()=>{ - if(token!=null){ - try{ - const userData= await getUser(token); + const userContext = useContext(UserContext); + const token = localStorage.getItem('token'); + const checklogin = async () => { + if (token != null) { + try { + const userData = await getUser(token); userContext?.setUsername(userData.data.message); - if(currentPath=="/login"){ - navigate("/"); + if (currentPath == '/login') { + navigate('/'); + } + } catch (e) { + localStorage.removeItem('token'); + if (currentPath != '/login') { + toast.error('Session expired'); + navigate('/login'); } - } catch(e){ - localStorage.removeItem('token') - if(currentPath!="/login"){ - toast.error("Session expired") - navigate("/login"); - } } - }else{ - if(currentPath!="/login"){ - toast.error("Not authenticated") - navigate("/login") + } else { + if (currentPath != '/login') { + toast.error('Not authenticated'); + navigate('/login'); } } - } - const {} = useQuery("login", checklogin, { + }; + const {} = useQuery('login', checklogin, { enabled: true, - staleTime: Infinity - }) + staleTime: Infinity, + }); return ( <> diff --git a/src/app/state/action-creators/orgActions.ts b/src/app/state/action-creators/orgActions.ts index 6f3b308..6c7caa4 100644 --- a/src/app/state/action-creators/orgActions.ts +++ b/src/app/state/action-creators/orgActions.ts @@ -1,23 +1,17 @@ -import { Dispatch } from "redux" -import { Organization } from "../reducers/orgReducers" +import { Dispatch } from 'redux'; +import { Organization } from '../reducers/orgReducers'; +export const AddOrganization = (org: Organization) => { + return (dispatch: Dispatch) => { + dispatch({ type: 'add', payload: org }); + }; +}; - - - -export const AddOrganization= (org:Organization)=>{ - return(dispatch:Dispatch)=>{ - dispatch({ type:'add', - payload:org}) - } -} - -export const DeleteOrg=(org:Organization)=>{ - return(dispatch:Dispatch)=>{ - dispatch({ - type:'delete', - payload:org - }) - } -} - +export const DeleteOrg = (org: Organization) => { + return (dispatch: Dispatch) => { + dispatch({ + type: 'delete', + payload: org, + }); + }; +}; diff --git a/src/app/state/action-creators/projectActions.ts b/src/app/state/action-creators/projectActions.ts index 1f2018a..171e738 100644 --- a/src/app/state/action-creators/projectActions.ts +++ b/src/app/state/action-creators/projectActions.ts @@ -1,22 +1,23 @@ -import { Dispatch } from "redux" +import { Dispatch } from 'redux'; +export const addProject = ( + project: [string, { archieve: boolean; bookmark: boolean }] +) => { + return (dispatch: Dispatch) => { + dispatch({ + type: 'add', + payload: project, + }); + }; +}; -export const addProject = (project:[string,{archieve:boolean, bookmark:boolean}])=>{ - - return(dispatch:Dispatch)=>{ - dispatch({ - type: 'add', - payload: project - }) - } -} - -export const deleteProject= (project:[string,{archeive:boolean, bookmark:boolean}])=>{ - - return(dispatch:Dispatch)=>{ - dispatch({ - type:'delete', - payload: project - }) - } -} \ No newline at end of file +export const deleteProject = ( + project: [string, { archeive: boolean; bookmark: boolean }] +) => { + return (dispatch: Dispatch) => { + dispatch({ + type: 'delete', + payload: project, + }); + }; +}; diff --git a/src/app/state/action-creators/usersActions.ts b/src/app/state/action-creators/usersActions.ts index 3911e53..e7078bc 100644 --- a/src/app/state/action-creators/usersActions.ts +++ b/src/app/state/action-creators/usersActions.ts @@ -17,4 +17,3 @@ export const setAllUsernames = (usernames: string[]) => { }); }; }; - diff --git a/src/app/state/reducers/index.ts b/src/app/state/reducers/index.ts index deda32e..564b80f 100644 --- a/src/app/state/reducers/index.ts +++ b/src/app/state/reducers/index.ts @@ -9,7 +9,7 @@ export const reducers = combineReducers({ searchKeyword: searchReducer, setUsername: setUsernameReducer, setAllUsernames: setAllUsernamesReducer, - organization: orgReducer + organization: orgReducer, }); -export type RootState= ReturnType +export type RootState = ReturnType; diff --git a/src/app/state/reducers/orgReducers.ts b/src/app/state/reducers/orgReducers.ts index c0689aa..a47ac3d 100644 --- a/src/app/state/reducers/orgReducers.ts +++ b/src/app/state/reducers/orgReducers.ts @@ -1,29 +1,25 @@ -import { act } from "react-dom/test-utils" - -export interface Organization{ - name: string, - description: string|null +import { act } from 'react-dom/test-utils'; +export interface Organization { + name: string; + description: string | null; } - -export const orgReducer=(state: Organization[]=[], action:{ - type:string, - payload: Organization -})=>{ - - switch(action.type){ - case 'add': - return state.concat(action.payload) - - case 'delete': - return state.filter(elem=>elem!=action.payload) - - default: - return state - } - -} - - - +export const orgReducer = ( + state: Organization[] = [], + action: { + type: string; + payload: Organization; + } +) => { + switch (action.type) { + case 'add': + return state.concat(action.payload); + + case 'delete': + return state.filter((elem) => elem != action.payload); + + default: + return state; + } +}; diff --git a/src/app/state/store.ts b/src/app/state/store.ts index 6471a84..a4660c2 100644 --- a/src/app/state/store.ts +++ b/src/app/state/store.ts @@ -1,6 +1,6 @@ import { legacy_createStore as createStore } from 'redux'; -import {reducers} from './reducers'; +import { reducers } from './reducers'; const store = createStore(reducers, {}); diff --git a/src/envConstants.ts b/src/envConstants.ts index 3d96714..baa7d9e 100644 --- a/src/envConstants.ts +++ b/src/envConstants.ts @@ -1,5 +1,5 @@ export const CLIENT_ID = '149d2857118e05e729a8'; export const BACKEND_URL = 'http://13.233.127.61:8080'; -export const AVATAR_API= "w9zrqHdDa4MsYB"; +export const AVATAR_API = 'w9zrqHdDa4MsYB'; -// http://13.233.127.61:8080 \ No newline at end of file +// http://13.233.127.61:8080 diff --git a/src/features/AddProject/index.tsx b/src/features/AddProject/index.tsx index 8626be1..7d2a585 100644 --- a/src/features/AddProject/index.tsx +++ b/src/features/AddProject/index.tsx @@ -18,14 +18,13 @@ const AddProject = () => { const [description, setDescription] = useState(null); const [link, setLink] = useState(null); - const [orgProject, setOrgProjects] = useState(null); const fetchData = async () => { if (token && spaceName) { try { const res = await getOrgProjects(token, spaceName); - console.log(res.data.projects) + console.log(res.data.projects); setOrgProjects(res.data.projects); } catch (e) {} } @@ -60,12 +59,12 @@ const AddProject = () => { return regex.test(input); } - const isUnique= (name: string)=>{ - if(orgProject && name in orgProject){ + const isUnique = (name: string) => { + if (orgProject && name in orgProject) { return false; } return true; - } + }; const SubmitHandler = async () => { if ( @@ -76,7 +75,6 @@ const AddProject = () => { isValidName(name) && isGitHubRepositoryLink(link) && description && - description?.length < 200 ) { const func = async () => { @@ -110,7 +108,7 @@ const AddProject = () => { /> {!name ? 'Name feild should not be empty' : <>} {name && !isValidName(name) && 'Not a valid name'} - {name&&!isUnique(name)&&"This project name already exists"} + {name && !isUnique(name) && 'This project name already exists'}

Project link
{ placeholder='Github link of project' /> {!link ? 'Link feild should not be empty' : <>} - {link&&!isGitHubRepositoryLink(link)&&"Not a valid github repository link"} + {link && + !isGitHubRepositoryLink(link) && + 'Not a valid github repository link'}
Description
{ placeholder='Details about project' /> {!description ? 'Description feild should not be empty' : <>} - {description&&description.length>=200&&"Description length should not be greater than 200"} + {description && + description.length >= 200 && + 'Description length should not be greater than 200'} + +
- ); - } +}; export default Login; diff --git a/src/features/project-members/index.tsx b/src/features/project-members/index.tsx index e69de29..f85cb69 100644 --- a/src/features/project-members/index.tsx +++ b/src/features/project-members/index.tsx @@ -0,0 +1,5 @@ +const ProjectMembers = () => { + return
ProjectMembers
; +}; + +export default ProjectMembers; diff --git a/src/features/workspace-members/index.tsx b/src/features/workspace-members/index.tsx index e69de29..4eec7d0 100644 --- a/src/features/workspace-members/index.tsx +++ b/src/features/workspace-members/index.tsx @@ -0,0 +1,7 @@ +import React from 'react'; + +const WorkspaceMembers = () => { + return
WorkspaceMembers
; +}; + +export default WorkspaceMembers; diff --git a/src/features/workspace-view/index.tsx b/src/features/workspace-view/index.tsx index 5085687..8d98dd4 100644 --- a/src/features/workspace-view/index.tsx +++ b/src/features/workspace-view/index.tsx @@ -5,59 +5,70 @@ import WorkspaceCard from './workspace-card'; import { workSpaceData } from 'app/utils/workspaceData'; import UserContext from 'app/context/user/userContext'; import { UserOrgDetails, getUserOrgs } from 'app/api/user'; -import loader from '../../app/assets/gifs/loader.gif' +import loader from '../../app/assets/gifs/loader.gif'; import { Navigate, useNavigate } from 'react-router-dom'; const WorkspaceView = () => { - const userContext= useContext(UserContext); - const [isLoad, setIsLoad]= useState(false) - const [archeives, setArcheives]= useState(false); - const token= localStorage.getItem('token') - const navigate= useNavigate() - const fetchData=async()=>{ - - if(token&&userContext?.username){ - - setIsLoad(true) - try{ - const userOrgs= await getUserOrgs(token, userContext?.username.toString()); - userContext?.setUserOrgs(userOrgs.data) - - }catch(e){ + const userContext = useContext(UserContext); + const [isLoad, setIsLoad] = useState(false); + const [archeives, setArcheives] = useState(false); + const token = localStorage.getItem('token'); + const navigate = useNavigate(); + const fetchData = async () => { + if (token && userContext?.username) { + setIsLoad(true); + try { + const userOrgs = await getUserOrgs( + token, + userContext?.username.toString() + ); + userContext?.setUserOrgs(userOrgs.data); + } catch (e) {} - } - - setIsLoad(false) + setIsLoad(false); } - } + }; - - useEffect(()=>{ + useEffect(() => { fetchData(); - },[userContext?.setUsername, userContext?.username,navigate, userContext?.setUserOrgs]) + }, [ + userContext?.setUsername, + userContext?.username, + navigate, + userContext?.setUserOrgs, + ]); return (
- - - + +
- {isLoad?:userContext?.userOrgs&&Object.entries(userContext.userOrgs.userOrgs).map(([orgName, details])=>{ - - return - })} + {isLoad ? ( + + ) : ( + userContext?.userOrgs && + Object.entries(userContext.userOrgs.userOrgs).map( + ([orgName, details]) => { + return ( + + ); + } + ) + )}
); diff --git a/src/features/workspace-view/workspace-card/index.tsx b/src/features/workspace-view/workspace-card/index.tsx index 4427dbe..309b090 100644 --- a/src/features/workspace-view/workspace-card/index.tsx +++ b/src/features/workspace-view/workspace-card/index.tsx @@ -6,7 +6,12 @@ import { deleteFile, getIcon } from 'app/api/file'; import { getMembers } from 'app/api/project'; import UserContext from 'app/context/user/userContext'; import toast from 'react-hot-toast'; -import { UserOrgDetails, UserOrgs, setOrgArcheiveStatus, setOrgBookmarkStatus } from 'app/api/user'; +import { + UserOrgDetails, + UserOrgs, + setOrgArcheiveStatus, + setOrgBookmarkStatus, +} from 'app/api/user'; import { useNavigate } from 'react-router-dom'; type workspaceCardProps = { @@ -15,189 +20,191 @@ type workspaceCardProps = { archeive: boolean; bookmark: boolean; archeives: boolean; -} -interface members{ - [username: string]: string +}; +interface members { + [username: string]: string; } const WorkspaceCard = (props: workspaceCardProps) => { - const { workspaceName, role, archeive, bookmark ,archeives} = props; - const [description,setDescription] = useState(null) + const { workspaceName, role, archeive, bookmark, archeives } = props; + const [description, setDescription] = useState(null); const [showPopUp, setShowPopUp] = useState(false); - const token= localStorage.getItem('token') - const [fileName, setFileName]= useState(null); + const token = localStorage.getItem('token'); + const [fileName, setFileName] = useState(null); const [imageSrc, setImageSrc] = useState(null); - const [members, setMembers]= useState(null) - const userContext= useContext(UserContext) - const navigate= useNavigate() - const workSpaceData= async()=>{ - - - - if(token&&workspaceName&&!workspaceName.endsWith("-userspace")){ - try{ - - const workspace_data = await getOrg(token, workspaceName) - - setDescription(workspace_data.data.description) - - }catch(e){ - - } - try{ - const image_data= await getIcon(token,workspaceName) - const objectUrl= URL.createObjectURL(image_data.data) - setImageSrc(objectUrl) - - }catch(e){ + const [members, setMembers] = useState(null); + const userContext = useContext(UserContext); + const navigate = useNavigate(); + const workSpaceData = async () => { + if (token && workspaceName && !workspaceName.endsWith('-userspace')) { + try { + const workspace_data = await getOrg(token, workspaceName); - } - try{ - const members_data= await getOrgMembers(token, workspaceName) - setMembers(members_data.data.members) - }catch(e){ + setDescription(workspace_data.data.description); + } catch (e) {} + try { + const image_data = await getIcon(token, workspaceName); + const objectUrl = URL.createObjectURL(image_data.data); + setImageSrc(objectUrl); + } catch (e) {} + try { + const members_data = await getOrgMembers(token, workspaceName); + setMembers(members_data.data.members); + } catch (e) {} + } + }; - } - - } - } + useEffect(() => { + workSpaceData(); + }, [workspaceName, userContext?.setUserOrgs]); - useEffect(()=>{ - workSpaceData() - },[workspaceName, userContext?.setUserOrgs]) + const HandleDelete = async () => { + if (!workspaceName.endsWith('-userspace') && token) { + const func = async () => { + const res = await deleteOrg(token, workspaceName); + const orgs = userContext?.userOrgs; - const HandleDelete= async()=>{ - if(!workspaceName.endsWith("-userspace")&&token){ - const func= async()=>{ - const res= await deleteOrg(token, workspaceName); - const orgs= userContext?.userOrgs - - if(orgs?.userOrgs.hasOwnProperty(workspaceName)){ - const obj: UserOrgDetails= orgs.userOrgs; - delete obj[workspaceName]; - userContext?.setUserOrgs({ - userOrgs: obj - }) + if (orgs?.userOrgs.hasOwnProperty(workspaceName)) { + const obj: UserOrgDetails = orgs.userOrgs; + delete obj[workspaceName]; + userContext?.setUserOrgs({ + userOrgs: obj, + }); } - - - - } + }; toast.promise(func(), { loading: 'Deleting', success: Successfully Deleted, error: Error while deleting, }); - } - } - + }; - const HandlePin = async()=>{ - if(!workspaceName.endsWith("-userspace")&&token){ - const initBmk= bookmark - const func=async()=>{ + const HandlePin = async () => { + if (!workspaceName.endsWith('-userspace') && token) { + const initBmk = bookmark; + const func = async () => { let status: { [key: string]: boolean } = { [workspaceName]: !bookmark, - }; - - - const res= await setOrgBookmarkStatus(token,status) - const orgs= userContext?.userOrgs - if(orgs?.userOrgs.hasOwnProperty(workspaceName)){ - - orgs.userOrgs[workspaceName].bookmark= (!bookmark).toString(); + }; + + const res = await setOrgBookmarkStatus(token, status); + const orgs = userContext?.userOrgs; + if (orgs?.userOrgs.hasOwnProperty(workspaceName)) { + orgs.userOrgs[workspaceName].bookmark = (!bookmark).toString(); userContext?.setUserOrgs(orgs); } - } - if(initBmk){ + }; + if (initBmk) { toast.promise(func(), { loading: 'Unpinning', success: Successfully unpinned, error: Error while unpinning, }); - } - else{ + } else { toast.promise(func(), { loading: 'Pinning', success: Successfully pinned, error: Error while pinning, - }) + }); } } - } + }; - const HandleArchive = async()=>{ - if(!workspaceName.endsWith("-userspace")&&token){ - const initArc= archeive - const func=async()=>{ + const HandleArchive = async () => { + if (!workspaceName.endsWith('-userspace') && token) { + const initArc = archeive; + const func = async () => { let status: { [key: string]: boolean } = { [workspaceName]: !bookmark, - }; - - - const res= await setOrgArcheiveStatus(token,status) - const orgs= userContext?.userOrgs - if(orgs?.userOrgs.hasOwnProperty(workspaceName)){ - - orgs.userOrgs[workspaceName].archive= (!bookmark).toString(); + }; + + const res = await setOrgArcheiveStatus(token, status); + const orgs = userContext?.userOrgs; + if (orgs?.userOrgs.hasOwnProperty(workspaceName)) { + orgs.userOrgs[workspaceName].archive = (!bookmark).toString(); userContext?.setUserOrgs(orgs); } - } - if(initArc){ + }; + if (initArc) { toast.promise(func(), { loading: 'Archiving', success: Successfully archived, error: Error, }); - } - else{ + } else { toast.promise(func(), { loading: 'Unarchiving', success: Successfully unarchived, error: Error, - }) + }); } } - } + }; return ( <> - { (archeive==archeives)&&
-
-
setShowPopUp(showPopUp ? false : true)} - > - {!workspaceName.endsWith("-userspace")&&} -
-
-
{bookmark?"UnPin":"Pin"}
-
{archeive?"Unarchive":"archive"}
-
delete
-
-
-
- -
-
-
{workspaceName.endsWith("-userspace")?"USER's WORKSPACE":workspaceName}
-
img
-
{members?Object.keys(members).length:0} members
+ {archeive == archeives && ( +
+
+
setShowPopUp(showPopUp ? false : true)} + > + {!workspaceName.endsWith('-userspace') && ( + + )} +
+
+
+ {bookmark ? 'UnPin' : 'Pin'} +
+
+ {archeive ? 'Unarchive' : 'archive'} +
+
+ delete +
+
+
+
+ +
+
+
+ {workspaceName.endsWith('-userspace') + ? "USER's WORKSPACE" + : workspaceName} +
+
img
+
{members ? Object.keys(members).length : 0} members
+
+
+
+ {workspaceName.endsWith('-userspace') && + "User's private workspace"} + {description ? description.substring(0, 120) + '...' : <>} +
+
+ navigate(`/workspace/${workspaceName}`)} + alt='' + /> +
-
- {workspaceName.endsWith("-userspace")&&"User's private workspace"} - {description?description.substring(0, 120) + '...':<>} -
-
- navigate(`/workspace/${workspaceName}`)} alt='' /> -
-
-
} + )} ); }; diff --git a/src/features/workspace/components/leaderboard/index.tsx b/src/features/workspace/components/leaderboard/index.tsx index 8a689b8..301a564 100644 --- a/src/features/workspace/components/leaderboard/index.tsx +++ b/src/features/workspace/components/leaderboard/index.tsx @@ -10,21 +10,24 @@ import mockdatatypes from 'app/models/mockDataTypes'; import './index.scss'; import { Contributors } from 'app/api/githubData'; -interface Prop{ - weekly: boolean, - weeklyOrgRank: Contributors | null - monthlyOrgRank: Contributors | null +interface Prop { + weekly: boolean; + weeklyOrgRank: Contributors | null; + monthlyOrgRank: Contributors | null; } - -const LeaderBoard:React.FC = ({weekly, weeklyOrgRank, monthlyOrgRank}) => { +const LeaderBoard: React.FC = ({ + weekly, + weeklyOrgRank, + monthlyOrgRank, +}) => { const [itemOffset, setItemOffset] = useState(0); const [pageNumber, setPageNumber] = useState(1); const newMockData = sortJSON(mockData); - + const [items, setItems] = useState(mockData); const itemsPerPage = 4; - + const [itemsLength, setItemsLength] = useState(0); const [pageCount, setPageCount] = useState(0); // const pageCount = Math.ceil(itemsLength / itemsPerPage); @@ -37,11 +40,10 @@ const LeaderBoard:React.FC = ({weekly, weeklyOrgRank, monthlyOrgRank}) => } }; - useEffect(()=>{ - if(weekly&&weeklyOrgRank){ - - } - },[weekly, weeklyOrgRank, monthlyOrgRank]) + useEffect(() => { + if (weekly && weeklyOrgRank) { + } + }, [weekly, weeklyOrgRank, monthlyOrgRank]); return (
diff --git a/src/features/workspace/components/projectCard/index.scss b/src/features/workspace/components/projectCard/index.scss index a50a842..1273d5b 100644 --- a/src/features/workspace/components/projectCard/index.scss +++ b/src/features/workspace/components/projectCard/index.scss @@ -81,3 +81,16 @@ .projectcard-contributor li:nth-child(4n-3) { background: #e8aa0a; } + +.image-stack { + margin-left: 1rem; +} + +.project-image { + display: inline-block; + margin-left: -10px; + width: 28px; + height: 28px; + border: 1px solid white; + border-radius: 50%; +} diff --git a/src/features/workspace/components/projectCard/index.tsx b/src/features/workspace/components/projectCard/index.tsx index e3ee159..0741289 100644 --- a/src/features/workspace/components/projectCard/index.tsx +++ b/src/features/workspace/components/projectCard/index.tsx @@ -27,7 +27,7 @@ interface Props { const ProjectCard: React.FC = ({ projectName, orgName, - + status, githubData, }) => { @@ -121,17 +121,16 @@ const ProjectCard: React.FC = ({ }; const DeleteHandler = async () => { - if(token&&orgName){ - const func= async()=>{ - const res= await deleteProject(token, projectName, orgName); - } - toast.promise(func(),{ - loading: 'On progress', - success: Successfully deleted, - error: Unable to delete, - }) + if (token && orgName) { + const func = async () => { + const res = await deleteProject(token, projectName, orgName); + }; + toast.promise(func(), { + loading: 'On progress', + success: Successfully deleted, + error: Unable to delete, + }); } - }; return ( @@ -161,19 +160,15 @@ const ProjectCard: React.FC = ({
-
    +
    {project_members && Object.entries(project_members) .slice(0, 4) .map(([key, value]) => { const url = AVATAR_URL + '/' + key + '.png?apikey=' + AVATAR_API; - return ( -
  • - -
    • - ); + return ; })} -
+
); }; diff --git a/src/features/workspace/components/projectCardContainer/index.tsx b/src/features/workspace/components/projectCardContainer/index.tsx index ede5ec6..865a076 100644 --- a/src/features/workspace/components/projectCardContainer/index.tsx +++ b/src/features/workspace/components/projectCardContainer/index.tsx @@ -10,7 +10,7 @@ interface Props { orgProjects: Projects | null; monthlyOrgProjectsData: ProjectsGithubData | null; weeklyOrgProjectsData: ProjectsGithubData | null; - archives: boolean + archives: boolean; } const ProjectCardCont: React.FC = ({ @@ -19,10 +19,9 @@ const ProjectCardCont: React.FC = ({ orgProjects, monthlyOrgProjectsData, weeklyOrgProjectsData, - archives + archives, }) => { - - useEffect(()=>{},[weekly]) + useEffect(() => {}, [weekly]); return ( <> @@ -34,7 +33,6 @@ const ProjectCardCont: React.FC = ({ (weekly ? ( = ({ ) : ( { const navigate = useNavigate(); const token = localStorage.getItem('token'); - const userContext= useContext(UserContext); - const [weekly,setWeekly]= useState(true); + const userContext = useContext(UserContext); + const [weekly, setWeekly] = useState(true); const [orgProjects, setOrgProjects] = useState(null); - const [archives, setArcheives] = useState(false) + const [archives, setArcheives] = useState(false); const [monthlyOrgRank, setMonthlyOrgRank] = useState( null ); @@ -35,36 +35,31 @@ const Workspace = () => { useState(null); const [weeklyOrgProjectsData, setWeeklyOrgProjectsData] = useState(null); - const {spaceName} = useParams(); - + const { spaceName } = useParams(); const fetchOrgProjects = async () => { - if (token&&spaceName) { + if (token && spaceName) { const orgProjects = await getOrgProjects(token, spaceName); setOrgProjects(orgProjects.data.projects); - } }; - - const fetchWeeklyData= async()=>{ - if(token&&spaceName){ + const fetchWeeklyData = async () => { + 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); - - } - } - - const fetchMonthlyData= async()=>{ - if(token&&spaceName){ + }; + + const fetchMonthlyData = async () => { + if (token && spaceName) { const monthlyOrgRank = await getOrgRank(token, spaceName, true); const monthlyOrgProjectsData = await getOrgGithubData( token, @@ -73,54 +68,67 @@ const Workspace = () => { ); setMonthlyOrgRank(monthlyOrgRank.data.contributors); setMOnthyOrgProjectsData(monthlyOrgProjectsData.data.projects); - } - } + }; - const { error, isLoading } = useQuery("orgProjects",fetchOrgProjects,{ + const { error, isLoading } = useQuery('orgProjects', fetchOrgProjects, { enabled: true, - staleTime: Infinity + staleTime: Infinity, }); - - if(error){ - navigate("/") - } - + if (error) { + navigate('/'); + } - const {} = useQuery("weeklyData", fetchWeeklyData, { + const {} = useQuery('weeklyData', fetchWeeklyData, { enabled: true, - staleTime: Infinity - }) - + staleTime: Infinity, + }); - const {}= useQuery("monthlyData", fetchMonthlyData,{ + const {} = useQuery('monthlyData', fetchMonthlyData, { enabled: true, - staleTime: Infinity - }) - - + staleTime: Infinity, + }); return ( <>
- - - {spaceName&&(userContext?.userOrgs?.userOrgs[spaceName].role=='admin'|| userContext?.userOrgs?.userOrgs[spaceName].role=="manager")&&} - - -
- {isLoading?
- -
: - -
- {spaceName&&} - + + + {spaceName && + (userContext?.userOrgs?.userOrgs[spaceName].role == 'admin' || + userContext?.userOrgs?.userOrgs[spaceName].role == 'manager') && ( + + )} + +
- } - + {isLoading ? ( +
+ +
+ ) : ( +
+ {spaceName && ( + + )} + +
+ )} ); }; diff --git a/src/index.tsx b/src/index.tsx index 2dc4a29..f4dc382 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -20,7 +20,7 @@ root.render( - +