-
-
- Appetizer
-- Lorem ipsum dolor sit amet consectetur adipisicing elit. Libero, - officiis aut. Expedita doloremque itaque quae perspiciatis ratione aut - tempora mollitia obcaecati saepe. Quam sapiente odio molestias eos at - nisi dolorum. At corporis dolore, explicabo et eveniet facilis amet sit - reiciendis quae officia quam vel quisquam in blanditiis ad, id - praesentium voluptates ipsum! Sunt magni placeat maiores libero non - fugiat veniam? Voluptatibus blanditiis ipsum enim eum, exercitationem - culpa quidem unde ex consectetur dignissimos quae libero cumque! Quis - eveniet unde, necessitatibus sit corrupti eius saepe nobis magnam et - tempore architecto libero dolorum? -
+ {project && ( + <> +{project.name}
+{project.description}
+ + )}
+
+ }
+ 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..49e05c4
--- /dev/null
+++ b/src/app/components/popup/index.tsx
@@ -0,0 +1,85 @@
+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 (
+ + Google Summer of Code is a global, online program focused on + bringing new contributors into open source software development. +
+ + Visit GSOC + +
+
+
+ {typeof title === 'string' ? (
+ {title}
+ ) : (
+
+ {content && {title}
+ )}
+ {onClose && (
+
+ )}
+ {content}
}
+
+ {onSubmit && (
+
+ )}
+
+ {footer}
+
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
new file mode 100644
index 0000000..0d7da6e
--- /dev/null
+++ b/src/app/context/user/userContext.tsx
@@ -0,0 +1,13 @@
+import { 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;
+}
+
+const UserContext = createContext(undefined);
+
+export default UserContext;
diff --git a/src/app/context/user/userState.tsx b/src/app/context/user/userState.tsx
new file mode 100644
index 0000000..9648558
--- /dev/null
+++ b/src/app/context/user/userState.tsx
@@ -0,0 +1,22 @@
+import { FC, ReactNode, useState } from 'react';
+import UserContext from './userContext';
+import { UserOrgs } from 'app/api/user';
+
+interface Props {
+ children: ReactNode;
+}
+
+const UserState: FC = ({ children }) => {
+ const [username, setUsername] = useState(null);
+ const [userOrgs, setUserOrgs] = useState(null);
+
+ return (
+
+ {children}
+
+ );
+};
+
+export default UserState;
diff --git a/src/app/index.scss b/src/app/index.scss
index 058bdb6..f49efde 100644
--- a/src/app/index.scss
+++ b/src/app/index.scss
@@ -37,3 +37,8 @@ a:hover {
.bd-white {
border: 1px solid white;
}
+
+
+.pointer{
+ cursor: pointer;
+}
\ No newline at end of file
diff --git a/src/app/index.tsx b/src/app/index.tsx
index c71f936..3a9bf08 100644
--- a/src/app/index.tsx
+++ b/src/app/index.tsx
@@ -1,15 +1,52 @@
-import React from 'react';
import Navbar from 'app/components/navbar';
import BasicRoutes from 'app/routes/BasicRoutes';
import './index.scss';
-import { Toaster } from 'react-hot-toast';
+import toast, { Toaster } from 'react-hot-toast';
+import { getUser } from './api/user';
+import { useLocation, useNavigate } from 'react-router-dom';
+import { useQuery } from 'react-query';
+import { useContext } from 'react';
+import UserContext from './context/user/userContext';
+
function App() {
+ 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);
+ userContext?.setUsername(userData.data.message);
+ if (currentPath == '/login') {
+ navigate('/');
+ }
+ } catch (e) {
+ localStorage.removeItem('token');
+ if (currentPath != '/login') {
+ toast.error('Session expired');
+ navigate('/login');
+ }
+ }
+ } else {
+ if (currentPath != '/login') {
+ toast.error('Not authenticated');
+ navigate('/login');
+ }
+ }
+ };
+ const {} = useQuery('login', checklogin, {
+ enabled: true,
+ 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 b00d4dc..e7078bc 100644
--- a/src/app/state/action-creators/usersActions.ts
+++ b/src/app/state/action-creators/usersActions.ts
@@ -17,7 +17,3 @@ export const setAllUsernames = (usernames: string[]) => {
});
};
};
-
-
-
-
diff --git a/src/app/state/reducers/index.ts b/src/app/state/reducers/index.ts
index 36506a4..564b80f 100644
--- a/src/app/state/reducers/index.ts
+++ b/src/app/state/reducers/index.ts
@@ -1,7 +1,7 @@
import { combineReducers } from 'redux';
import { setAllUsernamesReducer, setUsernameReducer } from './usersReducers';
import timeRangeReducer from 'app/components/timeRangeSwitch/timeRangeSlice';
-import searchReducer from 'features/home/slices/projectSearchSlice';
+import searchReducer from 'features/workspace/slices/projectSearchSlice';
import { orgReducer } from './orgReducers';
export const reducers = combineReducers({
@@ -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 efcb05a..81d836e 100644
--- a/src/envConstants.ts
+++ b/src/envConstants.ts
@@ -1,3 +1,6 @@
-export const CLIENT_ID = '149d2857118e05e729a8';
-export const BACKEND_URL = 'http://localhost:8080';
-export const AVATAR_API= "w9zrqHdDa4MsYB";
\ No newline at end of file
+export const CLIENT_ID = process.env.CLIENT_ID;
+export const BACKEND_URL = process.env.BACKEND_URL;
+export const AVATAR_API = process.env.AVATAR_API;
+
+// http://13.233.127.61:8080
+// https://leaderboard-java.mdgspace.org
\ No newline at end of file
diff --git a/src/features/AddProject/index.tsx b/src/features/AddProject/index.tsx
index da553f2..b8f3464 100644
--- a/src/features/AddProject/index.tsx
+++ b/src/features/AddProject/index.tsx
@@ -1,61 +1,41 @@
-import React, { ChangeEvent, useState } from 'react';
+import React, { ChangeEvent, useContext, useEffect, useState } from 'react';
import './index.scss';
import tick from '../../app/assets/images/tick.png';
-import { useNavigate } from 'react-router-dom';
-import { getUser } from 'app/api/user';
+import { useNavigate, useParams } from 'react-router-dom';
import toast from 'react-hot-toast';
-import { useQuery } from 'react-query';
-import axios from 'axios';
import { addProject } from 'app/api/project';
+import { Projects, getOrgProjects } from 'app/api/organization';
+
+
const AddProject = () => {
const navigate = useNavigate();
const token = localStorage.getItem('token');
- const orgName = 'orgName';
+ const { spaceName } = useParams();
const [name, setName] = useState(null);
const [description, setDescription] = useState(null);
const [link, setLink] = useState(null);
- const [validLink, setValidLink] = useState(false);
+ const [orgProject, setOrgProjects] = useState(null);
- const [validName, setValidName] = useState(false);
-
- const checkLogin = async () => {
- if (token != null) {
- const userData = await getUser(token);
- return userData.data;
- } else {
- toast.error('Not authorized');
- navigate('/login');
+ const fetchData = async () => {
+ if (token && spaceName) {
+ try {
+ const res = await getOrgProjects(token, spaceName);
+ setOrgProjects(res.data.projects);
+ } catch (e) {}
}
};
- const { data, isError } = useQuery({
- queryFn: () => checkLogin(),
- queryKey: 'checkLogin',
- });
-
- if (isError) {
- toast.error('Session Expired');
- navigate('/login');
- }
+ useEffect(() => {
+ fetchData();
+ }, [spaceName]);
const linkChange = async (event: ChangeEvent) => {
setLink(event.target.value);
-
- if (isGitHubRepositoryLink(event.target.value)) {
- try {
- const response = await axios.get(event.target.value);
- setValidLink(true);
- return;
- } catch (e) {}
- }
-
- setValidLink(false);
};
const nameChange = async (event: ChangeEvent) => {
setName(event.target.value);
- setValidName(true);
};
function isGitHubRepositoryLink(link: string): boolean {
@@ -67,39 +47,50 @@ const AddProject = () => {
return githubRepoPattern.test(link);
}
+ function isValidName(input: string): boolean {
+ // Regular expression to match only alphanumeric characters, hyphens, and underscores
+ const regex = /^[a-zA-Z0-9-_]+$/;
+
+ // Test if the input string matches the regular expression
+ return regex.test(input);
+ }
+
+ const isUnique = (name: string) => {
+ if (orgProject && name in orgProject) {
+ return false;
+ }
+ return true;
+ };
+
const SubmitHandler = async () => {
if (
+ spaceName &&
token &&
name &&
- validName &&
- validLink &&
- description &&
link &&
- description?.length > 3
+ isValidName(name) &&
+ isGitHubRepositoryLink(link) &&
+ description &&
+ description?.length < 200
) {
- try {
- const res = await addProject(token, orgName, {
+ const func = async () => {
+ const res = await addProject(token, spaceName, {
name: name,
description: description,
link: link,
});
- } catch (e) {
- toast.error('Error while saving');
- }
+ navigate(`/workspace/${spaceName}`);
+ };
+ toast.promise(func(), {
+ loading: 'Saving Project',
+ success: Project saved,
+ error: Could not save,
+ });
+ } else {
+ toast.error('Invalid inputs');
}
-
- toast.error('Invalid inputs');
};
-
- toast.promise(
- SubmitHandler(),{
- loading: 'Saving Project',
- success: Project saved,
- error:Could not save
- }
- )
-
return (
(null);
const [name, SetName] = useState(null);
const [description, setDiscription] = useState(null);
+ const [validDescription, setValidDescription] = useState(true);
const [validName, setValidName] = useState(false);
-
+ const [uniqueName, setUniqueName] = useState(false);
const [members, setMembers] = useState([]);
- const [memberName, setMemberName]=useState(null);
+ const [memberName, setMemberName] = useState(null);
const [users, setUsers] = useState([]);
const [orgs, setOrgs] = useState([]);
- const orgState= useSelector((state:RootState)=>state.organization);
-
-
const dataFetch = async () => {
try {
if (token) {
@@ -50,30 +48,9 @@ const AddWorkspace = () => {
} catch (e) {}
};
- const checklogin = async () => {
- if (token != null) {
- const userData = await getUser(token);
- return userData.data
- } else {
- toast.error("Not authorized")
- navigate('/login');
- }
- };
-
- const { data,isError } = useQuery({
- queryFn: () => checklogin(),
- queryKey: 'checkLogin',
- });
-
- if (isError) {
- toast.error("Session expired")
- navigate('/login');
- }
-
- const {} = useQuery({
- queryFn: () => dataFetch(),
- queryKey: 'allUsersAndAllOrgs',
- });
+ useEffect(() => {
+ dataFetch();
+ }, []);
const allowedFieTypes = ['image/jpeg', 'image/jpg', 'image/png'];
@@ -92,115 +69,213 @@ const AddWorkspace = () => {
function valid_name(str: string): boolean {
// Define a regular expression for special characters (excluding letters, digits, and spaces)
- const specialCharacters = /[^a-zA-Z0-9\s]/;
+ const specialCharacters = /^[a-zA-Z0-9_-]+$/;
// Check if the string contains any special characters
- return (
- specialCharacters.test(str) &&
- !str.endsWith('/userspace') &&
- !orgs.includes(str)
-
- );
+ return specialCharacters.test(str) && !str.endsWith('-userspace');
}
- const isNotOrgName= (orgName:string)=>{
- orgState.forEach(el=>{
- if(el.name==orgName){
- return false
- }
- })
- return true
+ function isUniqueName(str: string): boolean {
+ return !orgs.includes(str);
}
const handleNameChange = (event: ChangeEvent) => {
SetName(event.target.value);
-
-
-
- setValidName(() => valid_name(event.target.value)&&isNotOrgName(event.target.value));
+ setUniqueName(() => isUniqueName(event.target.value));
+ setValidName(() => valid_name(event.target.value));
};
const handleDesriptionChange = (event: ChangeEvent) => {
setDiscription(event.target.value);
+ if (description?.length) {
+ setValidDescription(description.length < 200);
+ }
};
- const addMembers= ()=>{
- if(memberName){
- if(users.includes(memberName)&& memberName!=data?.message){
- setMembers([...members,memberName])
- setMemberName(null)
+ const addMembers = () => {
+ if (memberName) {
+ if (
+ users.includes(memberName) &&
+ memberName != userContext?.username &&
+ !members.includes(memberName)
+ ) {
+ setMembers([...members, memberName]);
+ setMemberName(null);
}
}
- }
-
+ };
- const SubmitHandler=async():Promise=>{
+ const removeMembers = (member: string) => {
+ const indexToRemove = members.indexOf(member);
+ if (indexToRemove !== -1) {
+ const updatedMembers = [
+ ...members.slice(0, indexToRemove),
+ ...members.slice(indexToRemove + 1),
+ ];
- if(validName&&description&&token&&name){
-
- const func= async():Promise=>{
- const dataRes= await addOrg(token,{
- name:name,
- description:description
- })
-
- try{
- if(selectedFile!=null){
- const fileRes= uploadIcon(token, name, selectedFile)
- }}catch(e){
-
- }
- navigate("/workspace-view")
- }
-
- toast.promise(
- func(),{
- loading:'Saving...',
- success: Workspace Saved,
- error: Could not save.,
+ setMembers(updatedMembers);
+ } else {
+ console.warn(`Member "${member}" not found in the members array.`);
+ }
+ };
+ const SubmitHandler = async (): Promise => {
+ if (
+ description &&
+ token &&
+ name &&
+ validName &&
+ uniqueName &&
+ validDescription
+ ) {
+ const func = async (): Promise => {
+ const dataRes = await addOrg(token, {
+ name: name,
+ description: description,
+ });
+ try {
+ if (selectedFile != null) {
+ const fileRes = uploadIcon(token, name, selectedFile);
}
- )
-
-
- }else{
- toast.error('Invalid inputs')
+ } catch (e) {}
+ if (members.length > 0) {
+ try {
+ const addMmebersRes = await addOrgMembers(token, name, members);
+ } catch (e) {}
+ }
+ navigate('/');
+ };
+
+ toast.promise(func(), {
+ loading: 'Saving Workspace',
+ success: Workspace saved,
+ error: Could not save,
+ });
+ } else {
+ toast.error('Invalid inputs');
}
-
-
- }
-
-
-
+ };
return (
-
@@ -111,6 +102,9 @@ const AddProject = () => {
onChange={nameChange}
value={name ? name : ''}
/>
+ {!name ? 'Name feild should not be empty' : <>}
+ {name && !isValidName(name) && 'Not a valid name'}
+ {name && !isUnique(name) && 'This project name already exists'}
diff --git a/src/features/AddWorkspace/index.scss b/src/features/AddWorkspace/index.scss
new file mode 100644
index 0000000..f6f5ed5
--- /dev/null
+++ b/src/features/AddWorkspace/index.scss
@@ -0,0 +1,162 @@
+$breakpoint-tablet: 768px;
+.main_aworkspace_container {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ width: 100%;
+ height: max-content;
+ padding: 2rem;
+ .addworkspace-form-container {
+ background: linear-gradient(110.51deg, #141432 0.9%, #2a2a4b 101.51%);
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ width: 100%;
+ height: 100%;
+ padding: 2rem 1rem;
+ border-radius: 1.25rem;
+ gap: 2rem;
+ .submit {
+ display: flex;
+ padding: 1rem 2rem;
+ align-self: flex-end;
+ font-size: 1.5rem;
+ border-radius: 0.875rem;
+ background: #402aa4;
+ color: white;
+ outline: none;
+ border: none;
+ }
+ }
+
+ .single-form-element-container {
+ display: flex;
+ flex-direction: column;
+ gap: 1rem;
+ width: 100%;
+ .label {
+ color: #8181ff;
+ font-size: 1.5rem;
+ font-weight: 900;
+ }
+ }
+}
+
+.custom-input {
+ box-sizing: border-box;
+ border: 0.8px solid #402aa4;
+ border-radius: 14px;
+ background-color: transparent;
+ align-items: flex-start;
+ color: rgba(173, 173, 255, 0.75);
+ padding: 1.5rem 1rem;
+ font-size: 1.25rem;
+ font-family: 'Poppins';
+ outline: none;
+}
+
+.custom-input::placeholder {
+ color: rgba(173, 173, 255, 0.75);
+ font-family: Poppins;
+ font-size: 1.25rem;
+ font-weight: 100;
+ line-height: normal;
+}
+
+.file-input-container {
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ width: 100%;
+ max-width: 30rem;
+ padding: 2rem;
+ border-radius: 1.25rem;
+ background: linear-gradient(
+ 138deg,
+ rgba(20, 20, 50, 0.7) 5.19%,
+ rgba(20, 20, 50, 0.7) 97.11%
+ );
+ backdrop-filter: blur(25px);
+
+ .custom-file-input {
+ visibility: hidden;
+ }
+ .file-label {
+ width: fit-content;
+ padding: 0.4375rem 0.5625rem;
+ border-radius: 1.75rem;
+ background: #402aa4;
+ color: white;
+ }
+}
+
+.add-member-container {
+ position: relative;
+ box-sizing: border-box;
+ border: 0.8px solid #402aa4;
+ border-radius: 14px;
+ display: flex;
+ flex-direction: row;
+ outline: #141432;
+ .custom-input {
+ display: flex;
+ width: 100%;
+ border: none;
+ outline: none;
+ }
+ button {
+ border: none;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ font-size: 1.25rem;
+ margin: 0.75rem 1rem;
+ color: white;
+ width: 7rem;
+ font-weight: 100 !important;
+ border-radius: 2.3125rem;
+ background: #402aa4;
+ }
+}
+
+.added-members {
+ display: flex;
+ flex-direction: row;
+ gap: 2rem;
+ flex-wrap: wrap;
+ width: 100%;
+ .member-card {
+ display: inline-flex;
+ padding: 0.4375rem 0.875rem 0.625rem 0.875rem;
+ justify-content: center;
+ align-items: center;
+ gap: 0.5625rem;
+ color: #8989ce;
+ border-radius: 0.75rem;
+ background: #26264e;
+ .member-avatar {
+ width: 40px;
+ height: 40px;
+ }
+ .btn-cross {
+ appearance: none;
+ border: none;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ background-color: transparent;
+ }
+ }
+}
+
+@media (min-width: $breakpoint-tablet) {
+ .main_aworkspace_container {
+ padding: 2rem 5rem;
+ .addworkspace-form-container {
+ padding: 2rem 5rem;
+ }
+ }
+}
diff --git a/src/features/AddWorkspace/index.tsx b/src/features/AddWorkspace/index.tsx
index 92a1009..9a5814d 100644
--- a/src/features/AddWorkspace/index.tsx
+++ b/src/features/AddWorkspace/index.tsx
@@ -1,34 +1,32 @@
-import { getAllUser, getUser } from 'app/api/user';
-import React, { ChangeEvent, useState } from 'react';
+import { getAllUser } from 'app/api/user';
+import { ChangeEvent, useContext, useEffect, useState } from 'react';
import { useNavigate } from 'react-router-dom';
-import { useQuery } from 'react-query';
import toast from 'react-hot-toast';
-import { addOrg, getAllOrgs } from 'app/api/organization';
+import { addOrg, addOrgMembers, getAllOrgs } from 'app/api/organization';
import { uploadIcon } from 'app/api/file';
-import { useSelector } from 'react-redux';
-import { Organization } from 'app/state/reducers/orgReducers';
-import { RootState } from 'app/state/reducers';
-
+import './index.scss';
+import UserContext from 'app/context/user/userContext';
+import { AVATAR_URL } from 'app/constants/api';
+import { AVATAR_API } from 'envConstants';
const AddWorkspace = () => {
const navigate = useNavigate();
const token = localStorage.getItem('token');
+ const userContext = useContext(UserContext);
const [selectedFile, setSelectedFile] = useStateProject link
{
onChange={linkChange}
placeholder='Github link of project'
/>
+ {!link ? 'Link feild should not be empty' : <>}
+ {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'}
-
-
-
- (null);
+ const [description, setDescription] = useState(null);
+ const [link, setLink] = useState(null);
+ const [orgProject, setOrgProjects] = useState(null);
+
+ const { spaceName, projectName } = useParams();
+
+ const fetchData = async () => {
+ if (token && spaceName && projectName) {
+ try {
+ const res = await getOrgProjects(token, spaceName);
+ setOrgProjects(res.data.projects);
+ const proRes = await getProject(token, projectName, spaceName);
+ setName(projectName);
+ setDescription(proRes.data.description);
+ setLink(proRes.data.link);
+ } catch (e) {}
+ }
+ };
+
+ useEffect(() => {
+ fetchData();
+ }, [spaceName]);
+
+ const linkChange = async (event: ChangeEvent) => {
+ setLink(event.target.value);
+ };
+
+ const nameChange = async (event: ChangeEvent) => {
+ setName(event.target.value);
+ };
+
+ function isGitHubRepositoryLink(link: string): boolean {
+ // Define a regular expression pattern for a GitHub repository URL
+ const githubRepoPattern =
+ /^https:\/\/github\.com\/[a-zA-Z0-9-]+\/[a-zA-Z0-9-]+(\.git)?$/;
+
+ // Check if the provided link matches the pattern
+ return githubRepoPattern.test(link);
+ }
+
+ function isValidName(input: string): boolean {
+ // Regular expression to match only alphanumeric characters, hyphens, and underscores
+ const regex = /^[a-zA-Z0-9-_]+$/;
+
+ // Test if the input string matches the regular expression
+ return regex.test(input);
+ }
+
+ const isUnique = (name: string) => {
+ if (orgProject && name in orgProject) {
+ return false;
+ }
+ return true;
+ };
+
+ const SubmitHandler = async () => {
+ if (
+ spaceName &&
+ token &&
+ name &&
+ link &&
+ projectName &&
+ isValidName(name) &&
+ isGitHubRepositoryLink(link) &&
+ description &&
+ description?.length < 200
+ ) {
+ const func = async () => {
+ const res = await updateProject(token, projectName, spaceName, {
+ name: name,
+ description: description,
+ link: link,
+ });
+ navigate(`/workspace/${spaceName}`);
+ };
+ toast.promise(func(), {
+ loading: 'Saving Project',
+ success: Project saved,
+ error: Could not save,
+ });
+ } else {
+ toast.error('Invalid inputs');
+ }
+ };
+
+ return (
+ (null);
+ const [name, SetName] = useState(null);
+ const [description, setDiscription] = useState(null);
+ const [validDescription, setValidDescription] = useState(true);
+ const [validName, setValidName] = useState(false);
+ const [uniqueName, setUniqueName] = useState(false);
+
+
+ const [users, setUsers] = useState([]);
+ const [orgs, setOrgs] = useState([]);
+
+ const dataFetch = async () => {
+ try {
+ if (token && spaceName) {
+ const users_aray: string[] = [];
+ const org_aray: string[] = [];
+ const allUser = await getAllUser(token);
+ const allOrgs = await getAllOrgs(token);
+ allUser.data.users.forEach((user) => {
+ users_aray.push(user.username);
+ });
+
+ allOrgs.data.organizations.forEach((org) => {
+ org_aray.push(org.name);
+ });
+
+ setUsers(users_aray);
+ setOrgs(org_aray);
+ }
+ if (token && spaceName) {
+ SetName(spaceName);
+ setUniqueName(true);
+ setValidName(true);
+ }
+ if (token && spaceName) {
+ const Org = await getOrg(token, spaceName);
+ setDiscription(Org.data.description);
+ }
+ } catch (e) {}
+ };
+
+ useEffect(() => {
+ dataFetch();
+ }, []);
+
+ const allowedFieTypes = ['image/jpeg', 'image/jpg', 'image/png'];
+
+ const handleFileChange = (event: ChangeEvent) => {
+ const file = event.target.files?.[0];
+
+ if (file) {
+ if (allowedFieTypes.includes(file.type)) {
+ setSelectedFile(file);
+ } else {
+ setSelectedFile(null);
+ toast.error('Invalid file type');
+ }
+ }
+ };
+
+ function valid_name(str: string): boolean {
+ // Define a regular expression for special characters (excluding letters, digits, and spaces)
+ const specialCharacters = /^[a-zA-Z0-9_-]+$/;
+
+ // Check if the string contains any special characters
+ return specialCharacters.test(str) && !str.endsWith('-userspace');
+ }
+
+ function isUniqueName(str: string): boolean {
+ return !orgs.includes(str);
+ }
+
+ const handleNameChange = (event: ChangeEvent) => {
+ SetName(event.target.value);
+ setUniqueName(() => isUniqueName(event.target.value));
+ setValidName(() => valid_name(event.target.value));
+ };
+
+ const handleDesriptionChange = (event: ChangeEvent) => {
+ setDiscription(event.target.value);
+ if (description?.length) {
+ setValidDescription(description.length < 200);
+ }
+ };
+
+ const SubmitHandler = async (): Promise => {
+ if (
+ description &&
+ token &&
+ name &&
+ spaceName &&
+ validName &&
+ uniqueName &&
+ validDescription
+ ) {
+ const func = async (): Promise => {
+ const dataRes = await updateOrg(token, spaceName, {
+ name: name,
+ description: description,
+ });
+
+ try {
+ if (selectedFile != null) {
+ const fileRes = uploadIcon(token, name, selectedFile);
+ }
+ } catch (e) {}
+
+ navigate('/');
+ };
+
+ toast.promise(func(), {
+ loading: 'Saving Workspace',
+ success: Workspace saved,
+ error: Could not save,
+ });
+ } else {
+ toast.error('Invalid inputs');
+ }
+ };
+
+ return (
+ ([]);
+ const [memberName, setMemberName] = useState(null);
+
+ const { spaceName, projectName } = useParams();
+ const [projectMembers, setProjectMembers] = useState([]);
+ const [orgMembers, setOrgMembers] = useState([
+ 'kituuu',
+ 'karthik',
+ 'kartik',
+ 'kartar',
+ ]);
+ const [searchedMembers, setSearchedMembers] = useState([]);
+
+ const filterMembers = (search: string) => {
+ let temp: string[] = [];
+ orgMembers.forEach((member) => {
+ if (member.includes(search)) {
+ temp.push(member);
+ }
+ });
+
+ setSearchedMembers(temp);
+ };
+
+ const dataFetch = async () => {
+ try {
+ if (token && spaceName && projectName) {
+ const projectMemRes = await getMembers(token, projectName, spaceName);
+ const orgMemRes = await getOrgMembers(token, spaceName);
+
+ setProjectMembers(Object.keys(projectMemRes.data.members));
+ setOrgMembers(Object.keys(orgMemRes.data.members));
+ }
+ } catch (e) {}
+ };
+
+ useEffect(() => {
+ dataFetch();
+ }, [memberName]);
+
+ const addMembers = () => {
+ if (memberName) {
+ if (
+ orgMembers.includes(memberName) &&
+ !members.includes(memberName) &&
+ !projectMembers.includes(memberName)
+ ) {
+ setMembers([...members, memberName]);
+ setMemberName(null);
+ } else if (projectMembers.includes(memberName)) {
+ toast.error('Member already exists in the project');
+ }
+ }
+ };
+
+ const removeMembers = (member: string) => {
+ const indexToRemove = members.indexOf(member);
+
+ if (indexToRemove !== -1) {
+ const updatedMembers = [
+ ...members.slice(0, indexToRemove),
+ ...members.slice(indexToRemove + 1),
+ ];
+
+ setMembers(updatedMembers);
+ } else {
+ console.warn(`Member "${member}" not found in the members array.`);
+ }
+ };
+ const SubmitHandler = async (): Promise => {
+ if (token) {
+ const func = async (): Promise => {
+ if (members.length > 0 && spaceName && projectName) {
+ try {
+ const addMmebersRes = await addProjectsMembers(
+ token,
+ projectName,
+ spaceName,
+ members
+ );
+ } catch (e) {}
+ }
+ navigate(`/projectMembers/${spaceName}/${projectName}`);
+ };
+
+ toast.promise(func(), {
+ loading: 'On Progress',
+ success: Members added,
+ error: Could not add,
+ });
+ } else {
+ toast.error('Invalid inputs');
+ }
+ };
+
+ return (
+ ([]);
+ const [memberName, setMemberName] = useState(null);
+ const [orgMembers, setOrgMembers] = useState([]);
+ const [users, setUsers] = useState([]);
+ const { spaceName } = useParams();
+
+ const dataFetch = async () => {
+ try {
+ if (token && spaceName) {
+ const users_aray: string[] = [];
+
+ const allUser = await getAllUser(token);
+ const orgMembers = await getOrgMembers(token, spaceName);
+ allUser.data.users.forEach((user) => {
+ users_aray.push(user.username);
+ });
+ setOrgMembers(Object.keys(orgMembers.data.members));
+
+ setUsers(users_aray);
+ }
+ } catch (e) {}
+ };
+
+ useEffect(() => {
+ dataFetch();
+ }, []);
+
+ const addMembers = () => {
+ if (memberName) {
+ if (
+ users.includes(memberName) &&
+ memberName != userContext?.username &&
+ !members.includes(memberName) &&
+ !orgMembers.includes(memberName)
+ ) {
+ setMembers([...members, memberName]);
+ setMemberName(null);
+ }
+ }
+ };
+
+ const removeMembers = (member: string) => {
+ const indexToRemove = members.indexOf(member);
+
+ if (indexToRemove !== -1) {
+ const updatedMembers = [
+ ...members.slice(0, indexToRemove),
+ ...members.slice(indexToRemove + 1),
+ ];
+
+ setMembers(updatedMembers);
+ } else {
+ console.warn(`Member "${member}" not found in the members array.`);
+ }
+ };
+ const SubmitHandler = async (): Promise => {
+ if (token) {
+ const func = async (): Promise => {
+ if (members.length > 0 && spaceName) {
+ try {
+ const addMmebersRes = await addOrgMembers(
+ token,
+ spaceName,
+ members
+ );
+ } catch (e) {}
+ }
+ navigate(`/workspaceMembers/${spaceName}`);
+ };
+
+ toast.promise(func(), {
+ loading: 'On Progress',
+ success: Members added,
+ error: Could not add,
+ });
+ } else {
+ toast.error('Invalid inputs');
+ }
+ };
+
+ return (
+ = ({projectName,orgName ,status, githubData}) => {
- const token= localStorage.getItem('token')
-
- const [ProjectData,SetProjectData]= useState(null)
- const [projectMembers,setProjectMembers]= useState(null)
-
-const fetchProjectData= async()=>{
- if(token!=null){
- const project_data= await getProject(token,projectName, orgName);
- SetProjectData(project_data.data)
- return project_data.data
- }else{
- return null
- }
-}
-
-const fetchProjectMembers=async()=>{
- if(token!=null){
- const members= await getMembers(token,projectName,orgName);
- setProjectMembers(members.data)
- return members.data
-
- }
-}
-
-
-const {data:project_data}= useQuery(`${projectName}${orgName}`,fetchProjectData)
-const {data: project_members}= useQuery(`${projectName}${orgName}Members`, fetchProjectMembers);
-
-
-
- return (
- = ({weekly,orgName ,orgProjects, monthlyOrgProjectsData, weeklyOrgProjectsData}) => {
-
-
- const [archeive,setArcheive]= useState(false);
- return (
- <>
- (null);
- const [weekly,setWeekly]= useState(true);
- const [orgProjects, setOrgProjects] = useState(null);
- const [monthlyOrgRank, setMonthlyOrgRank] = useState(
- null
- );
- const [weeklyOrgRank, setWeeklyOrgRank] = useState(null);
- const [monthlyOrgProjectsData, setMOnthyOrgProjectsData] =
- useState(null);
- const [weeklyOrgProjectsData, setWeeklyOrgProjectsData] =
- useState(null);
- const orgName = 'fordev';
- const checklogin = async () => {
- if (token != null) {
- try {
- const userData = await getUser(token);
-
- setUserData(userData.data.message);
- } catch (e) {
- toast.error('Session expired');
- navigate('/login');
- }
- } else {
- toast.error('Not authorized');
- navigate('/login');
- }
- };
-
- useEffect(() => {
- checklogin();
- }, []);
-
- const fetchOrgProjects = async () => {
- if (token) {
- const orgProjects = await getOrgProjects(token, orgName);
-
- setOrgProjects(orgProjects.data.projects);
-
-
- return {
- orgProjects: orgProjects.data.projects,
-
- };
- }
- };
-
-
- const fetchWeeklyData= async()=>{
- if(token){
- const weeklyOrgRank = await getOrgRank(token, orgName, true);
- const weeklyOrgProjectsData = await getOrgGithubData(
- token,
- orgName,
- false
- );
- setWeeklyOrgProjectsData(weeklyOrgProjectsData.data.projects);
- setWeeklyOrgRank(weeklyOrgRank.data.contributors);
- return {
- weeklyOrgRank: weeklyOrgRank.data.contributors,
- weeklyOrgProjectsData: weeklyOrgProjectsData.data.projects,
- }
-
- }
- }
-
- const fetchMonthlyData= async()=>{
- if(token){
- const monthlyOrgRank = await getOrgRank(token, orgName, true);
- const monthlyOrgProjectsData = await getOrgGithubData(
- token,
- orgName,
- true
- );
- setMonthlyOrgRank(monthlyOrgRank.data.contributors);
- setMOnthyOrgProjectsData(monthlyOrgProjectsData.data.projects);
- return{
- monthlyOrgProjectsData: monthlyOrgProjectsData.data.projects,
- monthlyOrgRank: monthlyOrgRank.data.contributors,
- }
- }
- }
-
- const { isLoading } = useQuery({
- queryFn: () => fetchOrgProjects(),
- queryKey: 'OrgProjects',
- });
-
- const {} = useQuery({
- queryFn: ()=> fetchWeeklyData(),
- queryKey: "weeklyData"
- })
-
- const {}= useQuery({
- queryFn: ()=>fetchMonthlyData(),
- queryKey: "monthlyData"
- })
-
-
- return (
- <>
- 
+ if (searchParam.get('code') != null) {
+ return ;
}
return (
<>
-
Selected File: {selectedFile?.name}
- - - - )=>{setMemberName(e.target.value)}} - placeholder='Enter membername' - /> - -{members}
- +
+
);
};
diff --git a/src/features/EditProject/index.scss b/src/features/EditProject/index.scss
new file mode 100644
index 0000000..f1e4f07
--- /dev/null
+++ b/src/features/EditProject/index.scss
@@ -0,0 +1,75 @@
+.add-project-container {
+ width: 70vw;
+ height: 76.5vh;
+ margin: 60px auto;
+ background: linear-gradient(110.51deg, #141432 0.9%, #2a2a4b 101.51%);
+ border-radius: 20px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ position: relative;
+}
+
+.add-project-form input {
+ box-sizing: border-box;
+
+ /* Auto layout */
+ border: 0.8px solid #402aa4;
+ border-radius: 14px;
+ background: linear-gradient(110.51deg, #141432 0.9%, #2a2a4b 101.51%);
+ display: flex;
+ flex-direction: row;
+ align-items: flex-start;
+ padding: 20px 100px 20px 30px;
+ margin: 20px 0;
+ font-family: 'Poppins';
+ font-style: normal;
+ font-weight: 400;
+ font-size: 20px;
+ line-height: 30px;
+ /* identical to box height */
+
+ color: rgba(173, 173, 255, 0.75);
+}
+
+.input-title {
+ font-family: 'Poppins';
+ font-style: normal;
+ font-weight: 700;
+ font-size: 20px;
+ line-height: 30px;
+ /* identical to box height */
+
+ color: #8181ff;
+}
+
+.add-project-btn {
+ position: absolute;
+ right: 66px;
+ bottom: 44px;
+ font-family: 'Poppins';
+ font-style: normal;
+ font-weight: 400;
+ font-size: 15px;
+ line-height: 22px;
+ /* identical to box height */
+
+ display: flex;
+ align-items: center;
+ display: flex;
+ flex-direction: row;
+ align-items: flex-start;
+ padding: 10px 16px;
+ gap: 2px;
+ flex: none;
+ order: 1;
+ flex-grow: 0;
+ background: #402aa4;
+ border-radius: 14px;
+ color: #ffffff;
+}
+
+.add-project-btn img {
+ padding-top: 3px;
+ padding-right: 4px;
+}
diff --git a/src/features/EditProject/index.tsx b/src/features/EditProject/index.tsx
new file mode 100644
index 0000000..3fc9ad5
--- /dev/null
+++ b/src/features/EditProject/index.tsx
@@ -0,0 +1,154 @@
+import { ChangeEvent, useEffect, useState } from 'react';
+import './index.scss';
+import tick from '../../app/assets/images/tick.png';
+import { useNavigate, useParams } from 'react-router-dom';
+import toast from 'react-hot-toast';
+import {
+ getProject,
+ updateProject,
+} from 'app/api/project';
+import UserContext from 'app/context/user/userContext';
+import { Projects, getOrgProjects } from 'app/api/organization';
+
+
+
+const EditProject = () => {
+ const navigate = useNavigate();
+ const token = localStorage.getItem('token');
+ const [name, setName] = useState
+
+
+
+
+
+
+
+ Supported formats: JPEG, JPG, PNG
+Selected File: {selectedFile?.name}
+
+
+
+ {!name ?
+ Name feild should not be empty
: <>} + {!validName && name ?Not a valid name
: <>} + {!uniqueName && name ? ( +Name already taken. Try another name
+ ) : ( + <> + )} +
+
+
+ {!description ?
+ Description feild should not be empty
: <>} + {!validDescription ? ( +Characters length should be less than 200
+ ) : ( + <> + )} +
+ ) => {
+ setMemberName(e.target.value);
+ }}
+ placeholder='Github ID of user'
+ />
+
+
+
+ {members.map((member, index) => {
+ return (
+
+
+
+
+ 
{member}{' '}
+
+
+ );
+ })}
+
+
+ );
+};
+
+export default EditProject;
diff --git a/src/features/EditWorkspace/index.scss b/src/features/EditWorkspace/index.scss
new file mode 100644
index 0000000..f6f5ed5
--- /dev/null
+++ b/src/features/EditWorkspace/index.scss
@@ -0,0 +1,162 @@
+$breakpoint-tablet: 768px;
+.main_aworkspace_container {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ width: 100%;
+ height: max-content;
+ padding: 2rem;
+ .addworkspace-form-container {
+ background: linear-gradient(110.51deg, #141432 0.9%, #2a2a4b 101.51%);
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ width: 100%;
+ height: 100%;
+ padding: 2rem 1rem;
+ border-radius: 1.25rem;
+ gap: 2rem;
+ .submit {
+ display: flex;
+ padding: 1rem 2rem;
+ align-self: flex-end;
+ font-size: 1.5rem;
+ border-radius: 0.875rem;
+ background: #402aa4;
+ color: white;
+ outline: none;
+ border: none;
+ }
+ }
+
+ .single-form-element-container {
+ display: flex;
+ flex-direction: column;
+ gap: 1rem;
+ width: 100%;
+ .label {
+ color: #8181ff;
+ font-size: 1.5rem;
+ font-weight: 900;
+ }
+ }
+}
+
+.custom-input {
+ box-sizing: border-box;
+ border: 0.8px solid #402aa4;
+ border-radius: 14px;
+ background-color: transparent;
+ align-items: flex-start;
+ color: rgba(173, 173, 255, 0.75);
+ padding: 1.5rem 1rem;
+ font-size: 1.25rem;
+ font-family: 'Poppins';
+ outline: none;
+}
+
+.custom-input::placeholder {
+ color: rgba(173, 173, 255, 0.75);
+ font-family: Poppins;
+ font-size: 1.25rem;
+ font-weight: 100;
+ line-height: normal;
+}
+
+.file-input-container {
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ width: 100%;
+ max-width: 30rem;
+ padding: 2rem;
+ border-radius: 1.25rem;
+ background: linear-gradient(
+ 138deg,
+ rgba(20, 20, 50, 0.7) 5.19%,
+ rgba(20, 20, 50, 0.7) 97.11%
+ );
+ backdrop-filter: blur(25px);
+
+ .custom-file-input {
+ visibility: hidden;
+ }
+ .file-label {
+ width: fit-content;
+ padding: 0.4375rem 0.5625rem;
+ border-radius: 1.75rem;
+ background: #402aa4;
+ color: white;
+ }
+}
+
+.add-member-container {
+ position: relative;
+ box-sizing: border-box;
+ border: 0.8px solid #402aa4;
+ border-radius: 14px;
+ display: flex;
+ flex-direction: row;
+ outline: #141432;
+ .custom-input {
+ display: flex;
+ width: 100%;
+ border: none;
+ outline: none;
+ }
+ button {
+ border: none;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ font-size: 1.25rem;
+ margin: 0.75rem 1rem;
+ color: white;
+ width: 7rem;
+ font-weight: 100 !important;
+ border-radius: 2.3125rem;
+ background: #402aa4;
+ }
+}
+
+.added-members {
+ display: flex;
+ flex-direction: row;
+ gap: 2rem;
+ flex-wrap: wrap;
+ width: 100%;
+ .member-card {
+ display: inline-flex;
+ padding: 0.4375rem 0.875rem 0.625rem 0.875rem;
+ justify-content: center;
+ align-items: center;
+ gap: 0.5625rem;
+ color: #8989ce;
+ border-radius: 0.75rem;
+ background: #26264e;
+ .member-avatar {
+ width: 40px;
+ height: 40px;
+ }
+ .btn-cross {
+ appearance: none;
+ border: none;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ background-color: transparent;
+ }
+ }
+}
+
+@media (min-width: $breakpoint-tablet) {
+ .main_aworkspace_container {
+ padding: 2rem 5rem;
+ .addworkspace-form-container {
+ padding: 2rem 5rem;
+ }
+ }
+}
diff --git a/src/features/EditWorkspace/index.tsx b/src/features/EditWorkspace/index.tsx
new file mode 100644
index 0000000..f708b96
--- /dev/null
+++ b/src/features/EditWorkspace/index.tsx
@@ -0,0 +1,212 @@
+import { getAllUser, getUser } from 'app/api/user';
+import { ChangeEvent, useContext, useEffect, useState } from 'react';
+import { useNavigate, useParams } from 'react-router-dom';
+import toast from 'react-hot-toast';
+import {
+
+ getAllOrgs,
+ getOrg,
+ updateOrg,
+} from 'app/api/organization';
+import { uploadIcon } from 'app/api/file';
+
+import './index.scss';
+import UserContext from 'app/context/user/userContext';
+
+const EditWorkspace = () => {
+ const navigate = useNavigate();
+ const token = localStorage.getItem('token');
+ const { spaceName } = useParams();
+
+ const [selectedFile, setSelectedFile] = useState
+
+
+
+
+
+ );
+};
+
+export default EditWorkspace;
diff --git a/src/features/ProjectAddMember /index.scss b/src/features/ProjectAddMember /index.scss
new file mode 100644
index 0000000..e47491f
--- /dev/null
+++ b/src/features/ProjectAddMember /index.scss
@@ -0,0 +1,189 @@
+$breakpoint-tablet: 768px;
+.main_aworkspace_container {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ width: 100%;
+ height: max-content;
+ padding: 2rem;
+ .addworkspace-form-container {
+ background: linear-gradient(110.51deg, #141432 0.9%, #2a2a4b 101.51%);
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ width: 100%;
+ height: 100%;
+ padding: 2rem 1rem;
+ border-radius: 1.25rem;
+ gap: 2rem;
+ .submit {
+ display: flex;
+ padding: 1rem 2rem;
+ align-self: flex-end;
+ font-size: 1.5rem;
+ border-radius: 0.875rem;
+ background: #402aa4;
+ color: white;
+ outline: none;
+ border: none;
+ }
+ }
+
+ .single-form-element-container {
+ display: flex;
+ position: relative;
+ flex-direction: column;
+ gap: 1rem;
+ width: 100%;
+ .member-search-result {
+ position: absolute;
+ border: 2px solid #8989ce;
+ top: 6rem;
+ background-color: #1414325b;
+ gap: 1rem;
+ width: fit-content;
+ backdrop-filter: blur(25px);
+ display: flex;
+ flex-direction: column;
+ padding: 1rem 1rem;
+ z-index: 1000;
+ p {
+ color: #8989ce;
+ width: fit-content;
+ font-size: 1.25rem;
+ font-weight: 900;
+ padding: 0.1rem 1rem;
+ border-radius: 1rem;
+ }
+ P:hover {
+ color: #8181ff;
+ cursor: pointer;
+ background-color: black;
+ }
+ }
+ .label {
+ color: #8181ff;
+ font-size: 1.5rem;
+ font-weight: 900;
+ }
+ }
+}
+
+.custom-input {
+ box-sizing: border-box;
+ border: 0.8px solid #402aa4;
+ border-radius: 14px;
+ background-color: transparent;
+ align-items: flex-start;
+ color: rgba(173, 173, 255, 0.75);
+ padding: 1.5rem 1rem;
+ font-size: 1.25rem;
+ font-family: 'Poppins';
+ outline: none;
+}
+
+.custom-input::placeholder {
+ color: rgba(173, 173, 255, 0.75);
+ font-family: Poppins;
+ font-size: 1.25rem;
+ font-weight: 100;
+ line-height: normal;
+}
+
+.file-input-container {
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ width: 100%;
+ max-width: 30rem;
+ padding: 2rem;
+ border-radius: 1.25rem;
+ background: linear-gradient(
+ 138deg,
+ rgba(20, 20, 50, 0.7) 5.19%,
+ rgba(20, 20, 50, 0.7) 97.11%
+ );
+ backdrop-filter: blur(25px);
+
+ .custom-file-input {
+ visibility: hidden;
+ }
+ .file-label {
+ width: fit-content;
+ padding: 0.4375rem 0.5625rem;
+ border-radius: 1.75rem;
+ background: #402aa4;
+ color: white;
+ }
+}
+
+.add-member-container {
+ position: relative;
+ box-sizing: border-box;
+ border: 0.8px solid #402aa4;
+ border-radius: 14px;
+ display: flex;
+ flex-direction: row;
+ outline: #141432;
+ .custom-input {
+ display: flex;
+ width: 100%;
+ border: none;
+ outline: none;
+ }
+ button {
+ border: none;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ font-size: 1.25rem;
+ margin: 0.75rem 1rem;
+ color: white;
+ width: 7rem;
+ font-weight: 100 !important;
+ border-radius: 2.3125rem;
+ background: #402aa4;
+ }
+}
+
+.added-members {
+ display: flex;
+ flex-direction: row;
+ gap: 2rem;
+ flex-wrap: wrap;
+ width: 100%;
+ .member-card {
+ display: inline-flex;
+ padding: 0.4375rem 0.875rem 0.625rem 0.875rem;
+ justify-content: center;
+ align-items: center;
+ gap: 0.5625rem;
+ color: #8989ce;
+ border-radius: 0.75rem;
+ background: #26264e;
+ .member-avatar {
+ width: 40px;
+ height: 40px;
+ }
+ .btn-cross {
+ appearance: none;
+ border: none;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ background-color: transparent;
+ }
+ }
+}
+
+@media (min-width: $breakpoint-tablet) {
+ .main_aworkspace_container {
+ padding: 2rem 5rem;
+ .addworkspace-form-container {
+ padding: 2rem 5rem;
+ }
+ }
+}
diff --git a/src/features/ProjectAddMember /index.tsx b/src/features/ProjectAddMember /index.tsx
new file mode 100644
index 0000000..b08ff09
--- /dev/null
+++ b/src/features/ProjectAddMember /index.tsx
@@ -0,0 +1,194 @@
+
+import { ChangeEvent, useContext, useEffect, useState } from 'react';
+import { useNavigate, useParams } from 'react-router-dom';
+import { AVATAR_API } from 'envConstants';
+import { AVATAR_URL } from 'app/constants/api';
+import toast from 'react-hot-toast';
+import {
+ getOrgMembers,
+} from 'app/api/organization';
+
+import './index.scss';
+import UserContext from 'app/context/user/userContext';
+import { addProjectsMembers, getMembers } from 'app/api/project';
+
+const ProjectAddMember = () => {
+ const navigate = useNavigate();
+ const token = localStorage.getItem('token');
+ const userContext = useContext(UserContext);
+
+ const [members, setMembers] = useState
+
+
+
+
+
+
+
+
+ Supported formats: JPEG, JPG, PNG
+Selected File: {selectedFile?.name}
+
+
+
+ {!name ?
+ Name feild should not be empty
: <>} + {name != spaceName && !validName && name ? ( +Not a valid name
+ ) : ( + <> + )} + {name != spaceName && !uniqueName && name ? ( +Name already taken. Try another name
+ ) : ( + <> + )} +
+
+
+ {!description ?
+
+
+ Description feild should not be empty
: <>} + {!validDescription ? ( +Characters length should be less than 200
+ ) : ( + <> + )} +
+
+ );
+};
+
+export default ProjectAddMember;
diff --git a/src/features/WorkspaceAddMember/index.scss b/src/features/WorkspaceAddMember/index.scss
new file mode 100644
index 0000000..f6f5ed5
--- /dev/null
+++ b/src/features/WorkspaceAddMember/index.scss
@@ -0,0 +1,162 @@
+$breakpoint-tablet: 768px;
+.main_aworkspace_container {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ width: 100%;
+ height: max-content;
+ padding: 2rem;
+ .addworkspace-form-container {
+ background: linear-gradient(110.51deg, #141432 0.9%, #2a2a4b 101.51%);
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ width: 100%;
+ height: 100%;
+ padding: 2rem 1rem;
+ border-radius: 1.25rem;
+ gap: 2rem;
+ .submit {
+ display: flex;
+ padding: 1rem 2rem;
+ align-self: flex-end;
+ font-size: 1.5rem;
+ border-radius: 0.875rem;
+ background: #402aa4;
+ color: white;
+ outline: none;
+ border: none;
+ }
+ }
+
+ .single-form-element-container {
+ display: flex;
+ flex-direction: column;
+ gap: 1rem;
+ width: 100%;
+ .label {
+ color: #8181ff;
+ font-size: 1.5rem;
+ font-weight: 900;
+ }
+ }
+}
+
+.custom-input {
+ box-sizing: border-box;
+ border: 0.8px solid #402aa4;
+ border-radius: 14px;
+ background-color: transparent;
+ align-items: flex-start;
+ color: rgba(173, 173, 255, 0.75);
+ padding: 1.5rem 1rem;
+ font-size: 1.25rem;
+ font-family: 'Poppins';
+ outline: none;
+}
+
+.custom-input::placeholder {
+ color: rgba(173, 173, 255, 0.75);
+ font-family: Poppins;
+ font-size: 1.25rem;
+ font-weight: 100;
+ line-height: normal;
+}
+
+.file-input-container {
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ width: 100%;
+ max-width: 30rem;
+ padding: 2rem;
+ border-radius: 1.25rem;
+ background: linear-gradient(
+ 138deg,
+ rgba(20, 20, 50, 0.7) 5.19%,
+ rgba(20, 20, 50, 0.7) 97.11%
+ );
+ backdrop-filter: blur(25px);
+
+ .custom-file-input {
+ visibility: hidden;
+ }
+ .file-label {
+ width: fit-content;
+ padding: 0.4375rem 0.5625rem;
+ border-radius: 1.75rem;
+ background: #402aa4;
+ color: white;
+ }
+}
+
+.add-member-container {
+ position: relative;
+ box-sizing: border-box;
+ border: 0.8px solid #402aa4;
+ border-radius: 14px;
+ display: flex;
+ flex-direction: row;
+ outline: #141432;
+ .custom-input {
+ display: flex;
+ width: 100%;
+ border: none;
+ outline: none;
+ }
+ button {
+ border: none;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ font-size: 1.25rem;
+ margin: 0.75rem 1rem;
+ color: white;
+ width: 7rem;
+ font-weight: 100 !important;
+ border-radius: 2.3125rem;
+ background: #402aa4;
+ }
+}
+
+.added-members {
+ display: flex;
+ flex-direction: row;
+ gap: 2rem;
+ flex-wrap: wrap;
+ width: 100%;
+ .member-card {
+ display: inline-flex;
+ padding: 0.4375rem 0.875rem 0.625rem 0.875rem;
+ justify-content: center;
+ align-items: center;
+ gap: 0.5625rem;
+ color: #8989ce;
+ border-radius: 0.75rem;
+ background: #26264e;
+ .member-avatar {
+ width: 40px;
+ height: 40px;
+ }
+ .btn-cross {
+ appearance: none;
+ border: none;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ background-color: transparent;
+ }
+ }
+}
+
+@media (min-width: $breakpoint-tablet) {
+ .main_aworkspace_container {
+ padding: 2rem 5rem;
+ .addworkspace-form-container {
+ padding: 2rem 5rem;
+ }
+ }
+}
diff --git a/src/features/WorkspaceAddMember/index.tsx b/src/features/WorkspaceAddMember/index.tsx
new file mode 100644
index 0000000..0126778
--- /dev/null
+++ b/src/features/WorkspaceAddMember/index.tsx
@@ -0,0 +1,171 @@
+import { getAllUser, getUser } from 'app/api/user';
+import { ChangeEvent, useContext, useEffect, useState } from 'react';
+import { useNavigate, useParams } from 'react-router-dom';
+import toast from 'react-hot-toast';
+import {
+ addOrgMembers,
+ getOrgMembers,
+} from 'app/api/organization';
+
+
+import './index.scss';
+import UserContext from 'app/context/user/userContext';
+import { AVATAR_URL } from 'app/constants/api';
+import { AVATAR_API } from 'envConstants';
+
+const WorkspaceAddMember = () => {
+ const navigate = useNavigate();
+ const token = localStorage.getItem('token');
+ const userContext = useContext(UserContext);
+
+ const [members, setMembers] = useState
+
+
+
+
+ ) => {
+ setMemberName(e.target.value);
+ if (memberName) filterMembers(memberName);
+ }}
+ placeholder='Github ID of user'
+ />
+
+
+ {memberName && searchedMembers.length > 0 && (
+
+ {searchedMembers.map((member, index) => {
+ return (
+
+ )}
+ { + setMemberName(member); + setSearchedMembers([]); + }} + key={index} + > + {member} +
+ ); + })} +
+ {members.map((member, index) => {
+ return (
+
+
+
+
+ {member}{' '}
+
+
+ );
+ })}
+
+
+ );
+};
+
+export default WorkspaceAddMember;
diff --git a/src/features/home/components/leaderboard/index.tsx b/src/features/home/components/leaderboard/index.tsx
deleted file mode 100644
index ea38cd4..0000000
--- a/src/features/home/components/leaderboard/index.tsx
+++ /dev/null
@@ -1,87 +0,0 @@
-import React, { useState } from 'react';
-import gold from 'app/assets/images/gold.svg';
-import silver from 'app/assets/images/silver.svg';
-import bronze from 'app/assets/images/bronze.svg';
-import { mockData } from 'app/utils/data';
-import { sortJSON } from 'app/utils/sort';
-import leftNavButton from 'app/assets/images/left_navigation_button.svg';
-import rightNavButton from 'app/assets/images/right_navigation_button.svg';
-import mockdatatypes from 'app/models/mockDataTypes';
-import './index.scss';
-
-
-
-const LeaderBoard = () => {
- const [itemOffset, setItemOffset] = useState(0);
- const [pageNumber, setPageNumber] = useState(1);
- const newMockData = sortJSON(mockData);
-
- const [items] = useState(newMockData);
- const itemsPerPage = 4;
- const itemsLength = newMockData.length;
- const pageCount = Math.ceil(itemsLength / itemsPerPage);
-
- const handlePageClick = (_pageNumber: number) => {
- if (_pageNumber >= 1 && _pageNumber <= pageCount) {
- const newOffset = ((_pageNumber - 1) * itemsPerPage) % itemsLength;
- setItemOffset(newOffset);
- setPageNumber(_pageNumber);
- }
- };
-
- return (
-
+
+
+
+
+ ) => {
+ setMemberName(e.target.value);
+ }}
+ placeholder='Github ID of user'
+ />
+
+
+
+ {members.map((member, index) => {
+ return (
+
+
+
+
+ {member}{' '}
+
+
+ );
+ })}
+
-
- );
-};
-
-export default LeaderBoard;
diff --git a/src/features/home/components/projectCard/index.tsx b/src/features/home/components/projectCard/index.tsx
deleted file mode 100644
index fefe3cb..0000000
--- a/src/features/home/components/projectCard/index.tsx
+++ /dev/null
@@ -1,97 +0,0 @@
-import React, { useState } from 'react';
-import './index.scss';
-import axios from 'axios';
-import { getMembers, getProject } from 'app/api/project';
-import { useQuery } from 'react-query';
-import { GetProject } from 'app/api/project';
-import { ProjectMembers } from 'app/api/project';
-import { AVATAR_URL } from 'app/constants/api';
-import { AVATAR_API } from 'envConstants';
- interface Props{
- projectName: string,
- orgName: string,
- status: {
- archeive: boolean,
- bookmark: boolean,
- },
- githubData:{
- pulls: number,
- commits: number,
- issues: number
- } | null
-
-}
-
-
-
-
-
-const ProjectCard: React.FC
-
-
-
-
-
- {items
- .slice(itemOffset, itemOffset + itemsPerPage)
- .map((e: mockdatatypes) => {
- if (e.Rank <= 3) {
- return (
- Name
- Work
-
-
- );
- } else {
- return (
-
- 
-
- {e.Name}
- {e.PR}
-
-
- );
- }
- })}
- {e.Rank}
- {e.Name}
- {e.PR}
-
-
-
- 
handlePageClick(pageNumber - 1)}
- />
- {pageNumber}
- 
handlePageClick(pageNumber + 1)}
- />
-
-
-
- );
-};
-
-export default ProjectCard;
diff --git a/src/features/home/components/projectCardContainer/index.tsx b/src/features/home/components/projectCardContainer/index.tsx
deleted file mode 100644
index 4e98788..0000000
--- a/src/features/home/components/projectCardContainer/index.tsx
+++ /dev/null
@@ -1,54 +0,0 @@
-import React, { useState } from 'react';
-import ProjectCard from '../projectCard';
-import './index.scss';
-import { Projects } from 'app/api/organization';
-import { ProjectsGithubData } from 'app/api/githubData';
-
-const arr = [1, 2, 3, 4, 5];
-interface Props{
- weekly: boolean,
- orgName: string,
- orgProjects: Projects | null,
- monthlyOrgProjectsData:ProjectsGithubData | null,
- weeklyOrgProjectsData: ProjectsGithubData | null
-}
-
-const ProjectCardCont: React.FC{projectName}
-- {project_data?project_data.description:<>} -
-
-
-
-
- Pull Requests
- {githubData?githubData.pulls:<>}
-
-
- Commits
- {githubData?githubData.commits:<>}
-
-
- Issues
- {githubData?githubData.issues:<>}
-
- -
- {/*
- A -
- B -
- C -
- D */} - { - project_members&&Object.entries(project_members).slice(0,4).map(([key,value])=>{ - const url= AVATAR_URL+"/"+key+".png?apikey="+AVATAR_API - return
-
-
-
-
-
- {orgProjects&&Object.entries(orgProjects).map(([key, value])=>{
- if(archeive&&value.archeive){
- if(weekly){
- let githubData=null
- if(weeklyOrgProjectsData){
- githubData= weeklyOrgProjectsData[key]
- }
-
- return ;
- }else{
- let githubData=null
- if(monthlyOrgProjectsData){
- githubData= monthlyOrgProjectsData[key]
- }
- return ;
-
- }
- }
- })}
-
-
-
-
- );
-};
-
-export default ProjectCardCont;
diff --git a/src/features/home/index.tsx b/src/features/home/index.tsx
deleted file mode 100644
index ea2fac3..0000000
--- a/src/features/home/index.tsx
+++ /dev/null
@@ -1,143 +0,0 @@
-import React, { useEffect, useState } from 'react';
-import SearchBar from 'app/components/search';
-import TimeRangeSwitch from 'app/components/timeRangeSwitch';
-import ProjectCardCont from './components/projectCardContainer';
-import LeaderBoard from './components/leaderboard';
-import './index.scss';
-import { Navigate, useNavigate } from 'react-router-dom';
-import { getUser } from 'app/api/user';
-import toast from 'react-hot-toast';
-import { Query, useQuery } from 'react-query';
-import { getAllOrgs, getOrgProjects } from 'app/api/organization';
-import {
- getOrgGithubData,
- getOrgRank,
- getProjectGithubData,
-} from 'app/api/githubData';
-import { Projects } from 'app/api/organization';
-import { ProjectsGithubData } from 'app/api/githubData';
-import { Contributors } from 'app/api/githubData';
-import loader from '../../app/assets/gifs/loader.gif';
-
-const Home = () => {
- const navigate = useNavigate();
- const token = localStorage.getItem('token');
- const [userData, setUserData] = useState
-
- {isLoading?
-
-
:
-
-
-
-
- }
-
-
- );
-};
-
-export default Home;
diff --git a/src/features/login/index.scss b/src/features/login/index.scss
index cc68ed4..b7666e5 100644
--- a/src/features/login/index.scss
+++ b/src/features/login/index.scss
@@ -1,68 +1,65 @@
.login_wrapper {
- display: flex;
- flex-direction: row;
- height: 100vh;
- position: absolute;
- z-index: -2;
- top: -6vh;
+ display: flex;
+ flex-direction: row;
+ height: 100vh;
+ position: absolute;
+ z-index: -2;
+ top: -6vh;
}
.hero_content {
- display: flex;
- align-items: center;
- justify-content: center;
- flex-direction: column;
- row-gap: 5vh;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ flex-direction: column;
+ row-gap: 5vh;
}
.hero_content h1 {
- color: rgba(255, 255, 255, 0.80);
- font-family: Montserrat;
- font-size: 59.815px;
- font-style: normal;
- font-weight: 700;
- line-height: normal;
- text-align: center;
- text-transform: uppercase;
+ color: rgba(255, 255, 255, 0.8);
+ font-family: Montserrat;
+ font-size: 59.815px;
+ font-style: normal;
+ font-weight: 700;
+ line-height: normal;
+ text-align: center;
+ text-transform: uppercase;
}
.hero_content h3 {
- color: rgba(223, 223, 223, 0.80);
- text-align: center;
- font-family: Poppins;
- font-size: 24px;
- font-style: normal;
- font-weight: 400;
- line-height: normal;
+ color: rgba(223, 223, 223, 0.8);
+ text-align: center;
+ font-family: Poppins;
+ font-size: 24px;
+ font-style: normal;
+ font-weight: 400;
+ line-height: normal;
}
.hero_content button {
- display: flex;
- width: 372px;
- height: 81px;
- padding: 20px 0px 20px 30px;
- align-items: center;
- gap: 20px;
- flex-shrink: 0;
- border-radius: 14px;
- border: 0.8px solid var(--Button, #402AA4);
- background: #402AA4;
- color: #ADADFF;
- font-family: Poppins;
- font-size: 20px;
- font-style: normal;
- font-weight: 500;
- line-height: normal;
+ display: flex;
+ width: 372px;
+ height: 81px;
+ padding: 20px 0px 20px 30px;
+ align-items: center;
+ gap: 20px;
+ flex-shrink: 0;
+ border-radius: 14px;
+ border: 0.8px solid var(--Button, #402aa4);
+ background: #402aa4;
+ color: #adadff;
+ font-family: Poppins;
+ font-size: 20px;
+ font-style: normal;
+ font-weight: 500;
+ line-height: normal;
}
-
.hero_image img {
- height: 105vh;
+ height: 105vh;
}
-
-.loader{
-
- height: 50px;
- width: 50px;
-}
\ No newline at end of file
+.loader {
+ height: 50px;
+ width: 50px;
+}
diff --git a/src/features/login/index.tsx b/src/features/login/index.tsx
index 417b83e..4d45ee5 100644
--- a/src/features/login/index.tsx
+++ b/src/features/login/index.tsx
@@ -1,11 +1,10 @@
-import { useEffect } from 'react';
+
import { CLIENT_ID } from '../../envConstants';
import { useNavigate, useSearchParams } from 'react-router-dom';
import { login } from 'app/api/login';
import { useQuery } from 'react-query';
-import {getUser } from 'app/api/user';
import toast from 'react-hot-toast';
-import loader from '../../app/assets/gifs/loader.gif'
+import loader from '../../app/assets/gifs/loader.gif';
import heroImg from 'app/assets/images/login2.png';
import github from 'app/assets/images/github.png';
@@ -14,82 +13,56 @@ import './index.scss';
const Login = () => {
const [searchParam] = useSearchParams();
const navigate = useNavigate();
-
-
- const token=localStorage.getItem('token')
- const checklogin=async()=>{
- if(token!=null){
- try{
- const userData= await getUser(token);
- navigate('/')
-
- }catch(e){
- localStorage.removeItem('token')
- navigate('/login')
- }
-
- }
- }
-
- useEffect(() => {
- checklogin();
- }, []);
-
-
const loginFunc = async () => {
if (searchParam.get('code') !== null) {
- const code: string = searchParam.get('code')!;
- const loginData = await login(code);
- const token = loginData.data.token;
- localStorage.setItem('token', token);
- toast.success("Login success")
- navigate('/');
+ try {
+ const code: string = searchParam.get('code')!;
+ const loginData = await login(code);
+ const token = loginData.data.token;
+ localStorage.setItem('token', token);
+ toast.success('Login success');
+ navigate('/');
+ } catch (e) {
+ toast.error('Some error occured');
+ navigate('/login');
+ }
}
};
- const { isError } = useQuery({
- queryFn: () => loginFunc(),
- queryKey: 'loginData',
+ const {} = useQuery('loginData', loginFunc, {
+ enabled: true,
+ staleTime: Infinity,
});
-
- if(isError){
- toast.error('Some error occured')
- navigate("/login")
-
- }
-
-
function loginWithGithub() {
window.location.assign(
'https://github.com/login/oauth/authorize?client_id=' + CLIENT_ID
);
}
- if(searchParam.get('code')!=null){
- return
- = ({ spaceName }) => {
+ const navigate = useNavigate();
+ return (
+ ) => {
+ const new_role = event.target.value;
+ if (
+ token &&
+ spaceName &&
+ orgMembers &&
+ projectMembers &&
+ new_role != role
+ ) {
+ const func = async () => {
+ const res = await changeProjectMembersStatus(
+ token,
+ projectName,
+ spaceName,
+ { [name]: new_role }
+ );
+ projectMembers[name] = new_role;
+ setProjectMembers(projectMembers);
+ };
+ toast.promise(func(), {
+ loading: 'Changing Role',
+ success: Role changed,
+ error: Unable to change,
+ });
+ }
+ };
+
+ return (
+ = ({
+ spaceName,
+ projectName,
+ projectMembers,
+ orgMembers,
+}) => {
+ const navigate = useNavigate();
+ const userContext = useContext(UserContext);
+ return (
+
- 
+
);
- }
-
+};
export default Login;
diff --git a/src/features/project-members /components/BackNavigation.tsx b/src/features/project-members /components/BackNavigation.tsx
new file mode 100644
index 0000000..3d0761f
--- /dev/null
+++ b/src/features/project-members /components/BackNavigation.tsx
@@ -0,0 +1,46 @@
+import React from 'react';
+import { useNavigate } from 'react-router-dom';
+
+interface Prop {
+ spaceName: string | undefined;
+}
+const BackNavigation: React.FC
+
-
+
+
+
+
ACTIVITY LEADERBOARD
++ Track your progress, healthy competition in organization others, and + unleash your GitHub potential" +
+ + +
-
- ACTIVITY LEADERBOARD
-- Track your progress, healthy competition in organization others, and - unleash your GitHub potential" -
- - -
+
+
+ );
+};
+
+export default BackNavigation;
diff --git a/src/features/project-members /components/MemberCard.tsx b/src/features/project-members /components/MemberCard.tsx
new file mode 100644
index 0000000..88c24d7
--- /dev/null
+++ b/src/features/project-members /components/MemberCard.tsx
@@ -0,0 +1,128 @@
+
+import {
+ changeProjectMembersStatus,
+ removeProjectMembers,
+} from 'app/api/project';
+import UserContext from 'app/context/user/userContext';
+import {
+ ChangeEvent,
+ useContext,
+} from 'react';
+import toast from 'react-hot-toast';
+
+const MemberCard = ({
+ image,
+ name,
+ role,
+ orgMembers,
+ setProjectMembers,
+ projectMembers,
+ projectName,
+ spaceName,
+}: {
+ image: string;
+ name: string;
+ role: string;
+ spaceName: string;
+ projectName: string;
+ orgMembers: { [username: string]: string } | null;
+ projectMembers: { [username: string]: string } | null;
+ setProjectMembers: (projectMembers: { [username: string]: string }) => void;
+}) => {
+ const token = localStorage.getItem('token');
+ const userContext = useContext(UserContext);
+ const handleRemove = async () => {
+ if (token && spaceName && projectName && projectMembers) {
+ const func = async () => {
+ const res = await removeProjectMembers(token, projectName, spaceName, [
+ name,
+ ]);
+ delete projectMembers[name];
+ setProjectMembers(projectMembers);
+ };
+ toast.promise(func(), {
+ loading: 'Removing',
+ success: Successfully removed,
+ error: Unable to remove,
+ });
+ }
+ };
+
+ const HandleRoleChange = async (event: ChangeEvent+ Project {'->'} Manage +
+
+
+ );
+};
+
+export default MemberCard;
diff --git a/src/features/project-members /components/Options.tsx b/src/features/project-members /components/Options.tsx
new file mode 100644
index 0000000..ecf9975
--- /dev/null
+++ b/src/features/project-members /components/Options.tsx
@@ -0,0 +1,44 @@
+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;
+}
+
+const Options: React.FC
+ 
+
+ {name}
+
+
+
+ {orgMembers &&
+ projectMembers &&
+ userContext?.username &&
+ (orgMembers[userContext?.username.toString()] ==
+ ('admin' || 'manager') ||
+ userContext.username != name) &&
+ (orgMembers[userContext?.username.toString()] ==
+ ('admin' || 'manager') ||
+ projectMembers[userContext?.username.toString()] == 'admin') ? (
+
+ ) : (
+
+ {orgMembers &&
+ projectMembers &&
+ userContext?.username &&
+ (orgMembers[userContext?.username.toString()] ==
+ ('admin' || 'manager') ||
+ userContext.username != name) &&
+ (orgMembers[userContext?.username.toString()] ==
+ ('admin' || 'manager') ||
+ projectMembers[userContext?.username.toString()] == 'admin') && (
+
+ )}
+
+ {role.charAt(0).toUpperCase() + role.slice(1).toLowerCase()}
+
+ )}
+
+ {orgMembers &&
+ projectMembers &&
+ spaceName &&
+ projectName &&
+ userContext?.username &&
+ (orgMembers[userContext?.username?.toString()] ==
+ ('admin' || 'manager') ||
+ projectMembers[userContext?.username.toString()] == 'admin') && (
+
+ )}
+ {/* */}
+
+ );
+};
+
+export default Options;
diff --git a/src/features/project-members /index.scss b/src/features/project-members /index.scss
new file mode 100644
index 0000000..5344489
--- /dev/null
+++ b/src/features/project-members /index.scss
@@ -0,0 +1,181 @@
+.members-page-container {
+ margin: 0rem 2rem;
+ margin-top: 2rem;
+
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ height: 100%;
+
+ .back-title-container {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ width: 100%;
+ }
+}
+
+.options {
+ width: 100%;
+ display: flex;
+ flex-direction: row;
+ justify-content: space-between;
+}
+
+.button {
+ outline: none;
+ border: none;
+ color: white;
+ font-size: 1.4rem;
+ padding: 1rem 2rem;
+ border-radius: 3rem;
+ background: #402aa4;
+}
+
+.add-people {
+ font-size: 1.2rem;
+ padding: 0.6rem 1.4rem;
+}
+
+.title {
+ color: rgba(237, 237, 237, 0.7);
+ font-family: Poppins;
+ font-size: 20px;
+ font-style: normal;
+ font-weight: 400;
+ line-height: normal;
+ letter-spacing: 1.6px;
+ text-transform: capitalize;
+ .arrow {
+ color: rgba(237, 237, 237, 0.7);
+ font-family: Poppins;
+ font-size: 20px;
+ font-style: normal;
+ font-weight: 400;
+ line-height: normal;
+ letter-spacing: -7.6px;
+ text-transform: capitalize;
+ }
+}
+
+.member-view {
+ margin-top: 1rem;
+ width: 60%;
+}
+
+.members-list {
+ background: transparent;
+ margin-top: 2rem;
+ display: flex;
+ flex-direction: column;
+ gap: 2rem;
+}
+.member-card {
+ border-radius: 20px;
+ border: 0.5px solid #406a80;
+ background: #191938;
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ justify-content: space-between;
+ gap: 1rem;
+ padding: 1rem 2rem;
+ position: relative;
+
+ .member-info {
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ justify-content: space-between;
+ width: 40%;
+ gap: 0.5rem;
+ img {
+ width: 80px;
+ height: 80px;
+ border-radius: 50%;
+ }
+ .member-name {
+ font-size: 20px;
+ font-style: normal;
+ font-weight: 400;
+ line-height: normal;
+ letter-spacing: 1.6px;
+ text-transform: capitalize;
+ }
+ }
+
+ .member-actions {
+ width: 50%;
+ padding: 1rem;
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ justify-content: space-between;
+ .member-remove-btn {
+ right: 1rem;
+ text-decoration: none;
+ background: transparent;
+ border: none;
+ outline: none;
+ color: #db1b24;
+ font-size: 1.2rem;
+ }
+ .select-overlay {
+ padding-right: 1rem;
+ background: #402aa4;
+ cursor: pointer;
+ }
+ select {
+ border: none;
+ outline: none;
+ color: white;
+ font-size: 1.2rem;
+ padding: 0.6rem 1.4rem;
+ background: #402aa4;
+ cursor: pointer;
+ }
+ option {
+ padding: 1rem;
+ margin: 2rem;
+ }
+ }
+}
+
+@media only screen and (max-width: 1400px) {
+ .member-view {
+ width: 80%;
+ }
+}
+
+@media only screen and (max-width: 1100px) {
+ .member-card {
+ flex-direction: column;
+ .member-info {
+ width: 100%;
+ }
+ .member-actions {
+ width: 100%;
+ }
+ }
+}
+
+.role {
+ border: none;
+ outline: none;
+ color: white;
+ font-size: 1.2rem;
+ padding: 0.6rem 1rem;
+ background: #402aa4;
+ cursor: pointer;
+ width: 100%;
+ display: flex;
+ flex-direction: row;
+ justify-content: space-between;
+}
+
+@media only screen and (max-width: 600px) {
+ .member-view {
+ width: 90%;
+ }
+}
diff --git a/src/features/project-members /index.tsx b/src/features/project-members /index.tsx
new file mode 100644
index 0000000..5af9b6d
--- /dev/null
+++ b/src/features/project-members /index.tsx
@@ -0,0 +1,71 @@
+import { useParams } from 'react-router-dom';
+import BackNavigation from './components/BackNavigation';
+import MemberCard from './components/MemberCard';
+import Options from './components/Options';
+import './index.scss';
+import { useEffect, useState } from 'react';
+import { getOrgMembers } from 'app/api/organization';
+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 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) {}
+ };
+ useEffect(() => {
+ dataFetch();
+ }, [setOrgMembers, setProjectMembers]);
+
+ return (
+
+
+ (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);
+ }
+ };
+
+ useEffect(() => {
+ fetchData();
+ }, []);
+
return (
<>
) => {
+ const new_role = event.target.value;
+ if (token && spaceName && orgMembers && new_role != role) {
+ const func = async () => {
+ const res = await changeOrgMembersStatus(token, spaceName, {
+ [name]: new_role,
+ });
+ orgMembers[name] = new_role;
+ setOrgMembers(orgMembers);
+
+ toast.promise(func(), {
+ loading: 'Changing Role',
+ success: Role changed,
+ error: Unable to change,
+ });
+ orgMembers[name] = new_role;
+ setOrgMembers(orgMembers);
+ };
+ toast.promise(func(), {
+ loading: 'Changing Role',
+ success: Role changed,
+ error: Unable to change,
+ });
+ }
+ };
+
+ return (
+ = ({ spaceName }) => {
+ const navigate = useNavigate();
+ return (
+
+ {orgMembers &&
+ projectMembers &&
+ Object.entries(projectMembers).map(([key, value]) => {
+ return (
+ {
- const { Name } = props;
+ const { Name, PR, Commits, Issues } = props;
+ const url = AVATAR_URL + '/' + Name + '.png?apikey=' + AVATAR_API;
return (
= ({ 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 initialProcess = () => {
+ if (monthlyData) {
+ const contributorsArray = Object.entries(monthlyData).map(
+ ([username, data], index) => ({
+ index,
+ username,
+ ...data,
+ })
+ );
+ contributorsArray.sort((a, b) => b.pulls - a.pulls);
+ setMonthlyDataArray(contributorsArray);
+ }
+ if (weeklyData) {
+ const contributorsArray = Object.entries(weeklyData).map(
+ ([username, data], index) => ({
+ index,
+ username,
+ ...data,
+ })
+ );
+ contributorsArray.sort((a, b) => b.pulls - a.pulls);
+ setWeeklyDataArray(contributorsArray);
+ }
+ };
+
+ useEffect(() => {
+ initialProcess();
+ }, [weekly, monthlyData, weeklyData]);
+
return (
diff --git a/src/features/project/index.tsx b/src/features/project/index.tsx
index ef0f46d..17d9e85 100644
--- a/src/features/project/index.tsx
+++ b/src/features/project/index.tsx
@@ -1,14 +1,60 @@
-import React from 'react';
+import { useEffect, useState } from 'react';
import Contributors from './components/contributors';
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';
const ProjectPage = () => {
+ const { spaceName, projectName } = useParams();
+ const token = localStorage.getItem('token');
+ const [project, setProject] = useState
- 
+ 
diff --git a/src/features/project/components/contributors/index.tsx b/src/features/project/components/contributors/index.tsx
index 99a063e..17c8100 100644
--- a/src/features/project/components/contributors/index.tsx
+++ b/src/features/project/components/contributors/index.tsx
@@ -1,11 +1,10 @@
-import React, { useState } from 'react';
+import React, { useEffect, useState } from 'react';
import './index.scss';
import ContributorCard from '../contributorCard';
import next_contributor from 'app/assets/images/next_contributor.svg';
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';
const btn_style = {
alignSelf: 'center',
@@ -13,8 +12,62 @@ const btn_style = {
border: 'none',
};
-const Contributors = () => {
+interface Props {
+ weekly: boolean;
+ monthlyData: contri | null;
+ weeklyData: contri | null;
+}
+
+const Contributors: React.FC{Name}
Pull Requests
- 2
+ {PR}
Commits
- 2
+ {Commits}
Issues
- 2
+ {Issues}
Contributors
@@ -62,24 +115,43 @@ const Contributors = () => { speed={400} easing='linear' > - {mockData.map((e: mockdatatypes) => { - return ( -
-
- );
- })}
+ {weekly
+ ? weeklyDataArray.map((e) => {
+ return (
+
+
+ );
+ })
+ : monthlyDataArray.map((e) => {
+ return (
+
+
+ );
+ })}
-
);
diff --git a/src/features/workspace-members /components/BackNavigation.tsx b/src/features/workspace-members /components/BackNavigation.tsx
new file mode 100644
index 0000000..15a19bf
--- /dev/null
+++ b/src/features/workspace-members /components/BackNavigation.tsx
@@ -0,0 +1,39 @@
+import { useNavigate } from 'react-router-dom';
+
+const BackNavigation = () => {
+ const navigate = useNavigate();
+ return (
+
+
+
+ );
+};
+
+export default BackNavigation;
diff --git a/src/features/workspace-members /components/MemberCard.tsx b/src/features/workspace-members /components/MemberCard.tsx
new file mode 100644
index 0000000..d8b0ac4
--- /dev/null
+++ b/src/features/workspace-members /components/MemberCard.tsx
@@ -0,0 +1,108 @@
+import { changeOrgMembersStatus, removeOrgMembers } from 'app/api/organization';
+import UserContext from 'app/context/user/userContext';
+import {
+ ChangeEvent,
+ useContext,
+} from 'react';
+import toast from 'react-hot-toast';
+
+const MemberCard = ({
+ image,
+ name,
+ role,
+ orgMembers,
+ setOrgMembers,
+ spaceName,
+}: {
+ image: string;
+ name: string;
+ role: string;
+ spaceName: string;
+ orgMembers: { [username: string]: string } | null;
+ setOrgMembers: (orgMembers: { [username: string]: string }) => void;
+}) => {
+ const token = localStorage.getItem('token');
+ const userContext = useContext(UserContext);
+ const handleRemove = async () => {
+ if (token && spaceName && orgMembers) {
+ const func = async () => {
+ const res = await removeOrgMembers(token, spaceName, [name]);
+ delete orgMembers[name];
+ setOrgMembers(orgMembers);
+ };
+ toast.promise(func(), {
+ loading: 'Removing',
+ success: Successfully removed,
+ error: Unable to remove,
+ });
+ }
+ };
+
+ const HandleRoleChange = async (event: ChangeEvent+ Organization {'->'} Manage +
+
+
+ );
+};
+
+export default MemberCard;
diff --git a/src/features/workspace-members /components/Options.tsx b/src/features/workspace-members /components/Options.tsx
new file mode 100644
index 0000000..da8fed5
--- /dev/null
+++ b/src/features/workspace-members /components/Options.tsx
@@ -0,0 +1,22 @@
+import { useNavigate } from 'react-router-dom';
+
+interface Props {
+ spaceName: string;
+}
+
+const Options: React.FC
+
+
+ {name}
+
+
+
+ {orgMembers &&
+ userContext?.username &&
+ userContext.username != name &&
+ orgMembers[userContext?.username.toString()] == 'admin' ? (
+
+ ) : (
+
+ {orgMembers &&
+ userContext?.username &&
+ userContext.username != name &&
+ orgMembers[userContext?.username.toString()] == 'admin' && (
+
+ )}
+
+ {role.charAt(0).toUpperCase() + role.slice(1).toLowerCase()}
+
+ )}
+
+
+ {/* */}
+
+ );
+};
+
+export default Options;
diff --git a/src/features/workspace-members /index.scss b/src/features/workspace-members /index.scss
new file mode 100644
index 0000000..5344489
--- /dev/null
+++ b/src/features/workspace-members /index.scss
@@ -0,0 +1,181 @@
+.members-page-container {
+ margin: 0rem 2rem;
+ margin-top: 2rem;
+
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ height: 100%;
+
+ .back-title-container {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ width: 100%;
+ }
+}
+
+.options {
+ width: 100%;
+ display: flex;
+ flex-direction: row;
+ justify-content: space-between;
+}
+
+.button {
+ outline: none;
+ border: none;
+ color: white;
+ font-size: 1.4rem;
+ padding: 1rem 2rem;
+ border-radius: 3rem;
+ background: #402aa4;
+}
+
+.add-people {
+ font-size: 1.2rem;
+ padding: 0.6rem 1.4rem;
+}
+
+.title {
+ color: rgba(237, 237, 237, 0.7);
+ font-family: Poppins;
+ font-size: 20px;
+ font-style: normal;
+ font-weight: 400;
+ line-height: normal;
+ letter-spacing: 1.6px;
+ text-transform: capitalize;
+ .arrow {
+ color: rgba(237, 237, 237, 0.7);
+ font-family: Poppins;
+ font-size: 20px;
+ font-style: normal;
+ font-weight: 400;
+ line-height: normal;
+ letter-spacing: -7.6px;
+ text-transform: capitalize;
+ }
+}
+
+.member-view {
+ margin-top: 1rem;
+ width: 60%;
+}
+
+.members-list {
+ background: transparent;
+ margin-top: 2rem;
+ display: flex;
+ flex-direction: column;
+ gap: 2rem;
+}
+.member-card {
+ border-radius: 20px;
+ border: 0.5px solid #406a80;
+ background: #191938;
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ justify-content: space-between;
+ gap: 1rem;
+ padding: 1rem 2rem;
+ position: relative;
+
+ .member-info {
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ justify-content: space-between;
+ width: 40%;
+ gap: 0.5rem;
+ img {
+ width: 80px;
+ height: 80px;
+ border-radius: 50%;
+ }
+ .member-name {
+ font-size: 20px;
+ font-style: normal;
+ font-weight: 400;
+ line-height: normal;
+ letter-spacing: 1.6px;
+ text-transform: capitalize;
+ }
+ }
+
+ .member-actions {
+ width: 50%;
+ padding: 1rem;
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ justify-content: space-between;
+ .member-remove-btn {
+ right: 1rem;
+ text-decoration: none;
+ background: transparent;
+ border: none;
+ outline: none;
+ color: #db1b24;
+ font-size: 1.2rem;
+ }
+ .select-overlay {
+ padding-right: 1rem;
+ background: #402aa4;
+ cursor: pointer;
+ }
+ select {
+ border: none;
+ outline: none;
+ color: white;
+ font-size: 1.2rem;
+ padding: 0.6rem 1.4rem;
+ background: #402aa4;
+ cursor: pointer;
+ }
+ option {
+ padding: 1rem;
+ margin: 2rem;
+ }
+ }
+}
+
+@media only screen and (max-width: 1400px) {
+ .member-view {
+ width: 80%;
+ }
+}
+
+@media only screen and (max-width: 1100px) {
+ .member-card {
+ flex-direction: column;
+ .member-info {
+ width: 100%;
+ }
+ .member-actions {
+ width: 100%;
+ }
+ }
+}
+
+.role {
+ border: none;
+ outline: none;
+ color: white;
+ font-size: 1.2rem;
+ padding: 0.6rem 1rem;
+ background: #402aa4;
+ cursor: pointer;
+ width: 100%;
+ display: flex;
+ flex-direction: row;
+ justify-content: space-between;
+}
+
+@media only screen and (max-width: 600px) {
+ .member-view {
+ width: 90%;
+ }
+}
diff --git a/src/features/workspace-members /index.tsx b/src/features/workspace-members /index.tsx
new file mode 100644
index 0000000..1c83020
--- /dev/null
+++ b/src/features/workspace-members /index.tsx
@@ -0,0 +1,58 @@
+import { useParams } from 'react-router-dom';
+import BackNavigation from './components/BackNavigation';
+import MemberCard from './components/MemberCard';
+import Options from './components/Options';
+import './index.scss';
+import { useEffect, useState } from 'react';
+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 dataFetch = async () => {
+ try {
+ if (spaceName && token) {
+ const memRes = await getOrgMembers(token, spaceName);
+
+ setOrgMembers(memRes.data.members);
+ }
+ } catch (e) {}
+ };
+ useEffect(() => {
+ dataFetch();
+ }, [setOrgMembers]);
+
+ return (
+
+
+
+ {orgMembers &&
+ Object.entries(orgMembers).map(([key, value]) => {
+ return (
+ {
+ 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);
+ }
+ };
+ const searchValue = useSelector((state: any) => state.searchKeyword.value);
+
+ useEffect(() => {
+ fetchData();
+ }, [
+ userContext?.setUsername,
+ userContext?.username,
+ navigate,
+ userContext?.setUserOrgs,
+ searchValue,
+ ]);
+
+ const LogoutHandler = async () => {
+ try {
+ localStorage.removeItem('token');
+ toast.success('Logout successful!');
+ navigate('/login');
+ } catch (e) {}
+ };
return (
(null);
const [showPopUp, setShowPopUp] = useState(false);
+ const token = localStorage.getItem('token');
+ const [imageSrc, setImageSrc] = useState(null);
+ const [members, setMembers] = useState(null);
+ const [membersArray, setMembersArray] = useState<{ username: string }[]>([]);
+
+ 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) {}
+ 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);
+ } catch (e) {}
+
+ try {
+ const iconRes = await getIconName(token, workspaceName);
+ const fileName = iconRes.data.message;
+ const deleteRes = await deleteFile(token, fileName);
+ } catch (e) {}
+ }
+ };
+
+ 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,
+ });
+ }
+ };
+ 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 () => {
+ 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();
+ userContext?.setUserOrgs(orgs);
+ }
+ };
+ if (initBmk) {
+ toast.promise(func(), {
+ loading: 'Unpinning',
+ success: Successfully unpinned,
+ error: Error while unpinning,
+ });
+ } 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 status: { [key: string]: boolean } = {
+ [workspaceName]: !archeive,
+ };
+
+ const res = await setOrgArcheiveStatus(token, status);
+
+ const orgs = userContext?.userOrgs;
+ if (orgs?.userOrgs.hasOwnProperty(workspaceName)) {
+ orgs.userOrgs[workspaceName].archeive = (!archeive).toString();
+ userContext?.setUserOrgs(orgs);
+ }
+ };
+ if (!initArc) {
+ toast.promise(func(), {
+ loading: 'Archiving',
+ success: Successfully archived,
+ error: Error,
+ });
+ } else {
+ toast.promise(func(), {
+ loading: 'Unarchiving',
+ success: Successfully unarchived,
+ error: Error,
+ });
+ }
+ }
+ };
+ useEffect(() => {
+ workSpaceData();
+ }, [userContext?.setUserOrgs, userContext?.setUsername]);
+
return (
-
+
);
diff --git a/src/features/workspace-view/workspace-card/index.scss b/src/features/workspace-view/workspace-card/index.scss
index c826b6c..d65e41f 100644
--- a/src/features/workspace-view/workspace-card/index.scss
+++ b/src/features/workspace-view/workspace-card/index.scss
@@ -3,9 +3,10 @@
position: relative;
border: 2px solid #402aa4;
border-radius: 20px;
- width: 454px;
- height: 256px;
- padding: 12px 32px;
+ max-width: 554px;
+ width: 100%;
+ height: 306px;
+ padding: 2rem 3rem;
}
.workspace-logo img {
background: #402aa4;
@@ -18,17 +19,27 @@
.workspace-card-utils {
display: flex;
}
+.members-view-container {
+ display: flex;
+ flex-direction: row;
+ gap: 2rem;
+ align-items: center;
+}
.workspace-members {
- padding: 10px 17px;
+ margin-left: 2rem;
+ display: flex;
+ flex-direction: column;
+ gap: 1rem;
+ width: 100%;
+}
+.workspace-description {
+ height: 100%;
+ font-size: 1.1rem;
+ height: 100%;
}
.workspace-title {
- font-family: 'Poppins';
- font-style: normal;
- font-weight: 600;
- font-size: 20px;
- line-height: 30px;
- /* identical to box height */
-
+ font-weight: 900 !important;
+ font-size: 1.6rem;
color: #ededed;
}
.workspace-card-body {
@@ -36,10 +47,11 @@
.workspace-details-btn {
display: flex;
justify-content: end;
- height: 30px;
+ height: 50px;
}
.workspace-details-btn img {
- border-radius: 20px;
+ border-radius: 2rem;
+ font-size: 1rem;
}
.hide {
@@ -61,9 +73,10 @@
position: absolute;
width: 111px;
- height: 110px;
+ height: fit-content !important;
background: rgba(26, 26, 57, 0.5);
+ background: black;
border: 1px solid #402aa4;
backdrop-filter: blur(2px);
/* Note: backdrop-filter has minimal browser support */
@@ -84,3 +97,7 @@
opacity: 1;
}
}
+
+.image-stack {
+ margin-left: 1rem;
+}
diff --git a/src/features/workspace-view/workspace-card/index.tsx b/src/features/workspace-view/workspace-card/index.tsx
index 12ce276..c95457d 100644
--- a/src/features/workspace-view/workspace-card/index.tsx
+++ b/src/features/workspace-view/workspace-card/index.tsx
@@ -1,45 +1,271 @@
-import React, { useState } from 'react';
+import React, { useContext, useEffect, useState } from 'react';
import './index.scss';
import rightNavbtn from '../../../app/assets/images/right_navigation_button.svg';
-import workspaceCardProps from 'app/models/workSpaceCardTypes';
-const WorkspaceCard = (props: workspaceCardProps) => {
- const { imgURL, title, description } = props;
+import { deleteOrg, getOrg, getOrgMembers } from 'app/api/organization';
+import { deleteFile, getIcon, getIconName } from 'app/api/file';
+import UserContext from 'app/context/user/userContext';
+import toast from 'react-hot-toast';
+import { FaBookmark } from "react-icons/fa";
+
+
+import {
+ UserOrgDetails,
+ setOrgArcheiveStatus,
+ setOrgBookmarkStatus,
+} from 'app/api/user';
+import { useNavigate } from 'react-router-dom';
+import { AVATAR_API } from 'envConstants';
+import { AVATAR_URL } from 'app/constants/api';
+type workspaceCardProps = {
+ workspaceName: string;
+ role: string;
+ archeive: boolean;
+ bookmark: boolean;
+ archeives: boolean;
+};
+
+interface members {
+ [username: string]: string;
+}
+const WorkspaceCard = (props: workspaceCardProps) => {
+ const { workspaceName, role, archeive, bookmark, archeives } = props;
+ const [description, setDescription] = useState
- {workSpaceData.map((workspace) => {
- return (
-
-
- = ({
+ weekly,
+ weeklyOrgRank,
+ monthlyOrgRank,
+}) => {
+ const [itemOffset, setItemOffset] = useState(0);
+ const [pageNumber, setPageNumber] = useState(1);
+
+ // const newMockData = sortJSON(mockData);
+
+ const [items, setItems] = useState<
+ {
+ index: number;
+ name: string;
+ issues: number;
+ commits: number;
+ pulls: number;
+ }[]
+ >([]);
+
+ const itemsPerPage = 4;
+
+ const [itemsLength, setItemsLength] = useState(0);
+ const [pageCount, setPageCount] = useState(0);
+ // const pageCount = Math.ceil(itemsLength / itemsPerPage);
+
+ const handlePageClick = (_pageNumber: number) => {
+ if (_pageNumber >= 1 && _pageNumber <= pageCount) {
+ const newOffset = ((_pageNumber - 1) * itemsPerPage) % itemsLength;
+ setItemOffset(newOffset);
+ setPageNumber(_pageNumber);
+ }
+ };
+
+ 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(monthlyOrgRank).length);
+ setPageCount(
+ Math.ceil(Object.keys(monthlyOrgRank).length / itemsPerPage)
+ );
+ }
+ }, [weekly, weeklyOrgRank, monthlyOrgRank]);
+
+ return (
+ = ({
+ projectName,
+ orgName,
+
+ status,
+ githubData,
+}) => {
+ const token = localStorage.getItem('token');
+ const [showPopUp, setShowPopUp] = useState(false);
+ const userContext = useContext(UserContext);
+ const navigate = useNavigate();
+ const [pin, setPin] = useState(status.bookmark);
+ const [archive, setArchive] = useState(status.archeive);
+ 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);
+ }
+ };
+
+ const fetchProjectMembers = async () => {
+ if (token != null) {
+ const members = await getMembers(token, projectName, orgName);
+ const myArray = Object.entries(members.data.members).map(
+ ([key, value]) => ({ key, value })
+ );
+
+ setProjectMembers(myArray);
+ }
+ };
+
+ const PinHandler = async () => {
+ if (token && orgName) {
+ let initial = pin;
+ const func = async () => {
+ const res = await setBookmarkStatus(token, orgName, {
+ [projectName]: !pin,
+ });
+ setPin(!pin);
+ };
+
+ if (initial) {
+ toast.promise(func(), {
+ loading: 'On progress',
+ success: Project Unpinned,
+ error: unable to unpin,
+ });
+ } else {
+ toast.promise(func(), {
+ loading: 'On progress',
+ success: Project pinned,
+ error: unable to pin,
+ });
+ }
+ }
+ };
+
+ const ArchiveHandler = async () => {
+ if (token && orgName) {
+ let initial = archive;
+ const func = async () => {
+ const res = await setArcheiveStatus(token, orgName, {
+ [projectName]: !archive,
+ });
+ setArchive(!archive);
+ };
+
+ if (initial) {
+ toast.promise(func(), {
+ loading: 'On progress',
+ success: Project Unarchived,
+ error: unable to Unarchive,
+ });
+ } else {
+ toast.promise(func(), {
+ loading: 'On progress',
+ success: Project archived,
+ error: Unable to arhive,
+ });
+ }
+ }
+ };
+
+ 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,
+ });
+ }
+ };
+ useEffect(() => {
+ fetchProjectData();
+ fetchProjectMembers();
+ }, [userContext?.setUsername, userContext?.setUserOrgs]);
+
+ return (
+ = ({
+ weekly,
+ orgName,
+ orgProjects,
+ monthlyOrgProjectsData,
+ weeklyOrgProjectsData,
+ archives,
+}) => {
+ const searchValue = useSelector((state: any) => state.searchKeyword.value);
+
+ useEffect(() => {}, [weekly, searchValue]);
+
+ return (
+ <>
+ (true);
+ const [orgProjects, setOrgProjects] = useState(null);
+ const [archives, setArcheives] = useState(false);
+ const [monthlyOrgRank, setMonthlyOrgRank] = useState(
+ null
+ );
+ const [weeklyOrgRank, setWeeklyOrgRank] = useState(null);
+ const [monthlyOrgProjectsData, setMOnthyOrgProjectsData] =
+ useState(null);
+ const [weeklyOrgProjectsData, setWeeklyOrgProjectsData] =
+ useState(null);
+ const { spaceName } = useParams();
+ const [isLoading, setIsLoading] = useState(true);
+ const fetchOrgProjects = async () => {
+ setIsLoading(true);
+ if (token && spaceName) {
+ try {
+ const orgProjects = await getOrgProjects(token, spaceName);
+ setOrgProjects(orgProjects.data.projects);
+ } catch (e) {
+ navigate('/');
+ }
+ }
+ 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) {}
+ };
+
+ 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) {}
+ };
+
+ useEffect(() => {
+ fetchOrgProjects();
+ fetchWeeklyData();
+ fetchMonthlyData();
+ }, [weekly, userContext?.setUsername, userContext?.setUserOrgs]);
+
+ return (
+ <>
+ ) => {
+ searchAction: (state: any, action: PayloadAction) => {
state.value = action.payload;
},
},
diff --git a/src/index.tsx b/src/index.tsx
index 062718b..f4dc382 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -6,23 +6,24 @@ import { BrowserRouter } from 'react-router-dom';
import { store } from 'app/state/store';
import { Provider } from 'react-redux';
import { QueryClient, QueryClientProvider } from 'react-query';
+import UserState from 'app/context/user/userState';
-
-const queryClient= new QueryClient()
+const queryClient = new QueryClient();
const root = ReactDOM.createRoot(
document.getElementById('root') as HTMLElement
);
-
root.render(
-
-
-
-
+
+
+
+
+
+
);
setShowPopUp(showPopUp ? false : true)}
- >
- 
-
-
-
- Pin
- archive
- delete
-
-
+ )}
+
);
};
diff --git a/src/features/home/components/leaderboard/index.scss b/src/features/workspace/components/leaderboard/index.scss
similarity index 100%
rename from src/features/home/components/leaderboard/index.scss
rename to src/features/workspace/components/leaderboard/index.scss
diff --git a/src/features/workspace/components/leaderboard/index.tsx b/src/features/workspace/components/leaderboard/index.tsx
new file mode 100644
index 0000000..76de64c
--- /dev/null
+++ b/src/features/workspace/components/leaderboard/index.tsx
@@ -0,0 +1,132 @@
+import React, { useEffect, useState } from 'react';
+import gold from 'app/assets/images/gold.svg';
+import silver from 'app/assets/images/silver.svg';
+import bronze from 'app/assets/images/bronze.svg';
+import leftNavButton from 'app/assets/images/left_navigation_button.svg';
+import rightNavButton from 'app/assets/images/right_navigation_button.svg';
+import './index.scss';
+import { Contributors } from 'app/api/githubData';
+
+interface Prop {
+ weekly: boolean;
+ weeklyOrgRank: Contributors | null;
+ monthlyOrgRank: Contributors | null;
+}
+
+const LeaderBoard: React.FC
- 
-
-
-
-
- {title}
- img
+ <>
+ {archeive == archeives && (
+
+
+
-
+ {bookmark&&
setShowPopUp(showPopUp ? false : true)}
+ >
+ {!workspaceName.endsWith('-userspace') && (
+
+ )}
+
+
+
+
+ {bookmark ? 'UnPin' : 'Pin'}
+
+
+ {archeive ? 'Unarchive' : 'archive'}
+
+ {members &&
+ userContext?.username &&
+ members[userContext?.username.toString()] === 'admin' && (
+
+ delete
+
+ )}
+
+ {members &&
+ userContext?.username &&
+ members[userContext?.username.toString()] === 'admin' && (
+ navigate(`/editWorkspace/${workspaceName}`)}
+ >
+ edit
+
+ )}
+
+
+
+ 
+
+
+
+
+ {workspaceName.endsWith('-userspace')
+ ? "USER's WORKSPACE"
+ : workspaceName}
+
+ navigate(`/workspaceMembers/${workspaceName}`)}>
+
+
+
+
+
+ {membersArray.length > 0 ? (
+ membersArray.slice(0, 4).map((obj) => {
+ const url =
+ AVATAR_URL +
+ '/' +
+ obj.username +
+ '.png?apikey=' +
+ AVATAR_API;
+ return (
+
+ );
+ })
+ ) : (
+ <>
+
+
+ )}
+
+ {members ? Object.keys(members).length : 0} members
+
+ {workspaceName.endsWith('-userspace') &&
+ "User's private workspace"}
+ {description ? description.substring(0, 120) + '...' : <>}
+
+
+ 
navigate(`/workspace/${workspaceName}`)}
+ alt=''
+ />
+
- {description.substring(0, 120) + '...'}
-
-
-
-
-
+
+ );
+};
+
+export default LeaderBoard;
diff --git a/src/features/home/components/projectCard/index.scss b/src/features/workspace/components/projectCard/index.scss
similarity index 52%
rename from src/features/home/components/projectCard/index.scss
rename to src/features/workspace/components/projectCard/index.scss
index a50a842..eb9be42 100644
--- a/src/features/home/components/projectCard/index.scss
+++ b/src/features/workspace/components/projectCard/index.scss
@@ -1,13 +1,19 @@
.projectcard {
+ position: relative;
border-radius: 1em;
background-color: var(--home-page-card-bg);
+ max-width: 554px;
+ width: 90%;
+ height: 100%;
+ min-height: 257px;
padding: 1em;
-}
-.projectcard:hover {
- cursor: pointer;
}
+// .projectcard:hover {
+// cursor: pointer;
+// }
+
.projectcard h1 {
color: #ededed;
margin-bottom: 0.2em;
@@ -18,6 +24,10 @@
margin-bottom: 0.6em;
}
+.invisible-height {
+ height: 30px;
+}
+
.projectcard-status {
display: flex;
justify-content: space-between;
@@ -81,3 +91,78 @@
.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%;
+}
+
+.hide {
+ display: none;
+}
+.workspace-popup {
+ position: absolute;
+ right: 50px;
+ top: 50px;
+ box-sizing: border-box;
+
+ /* Auto layout */
+
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ padding: 18px 33px;
+ gap: 10px;
+
+ position: absolute;
+ width: 111px;
+ height: 110px;
+
+ background: rgba(26, 26, 57, 0.5);
+ border: 1px solid #402aa4;
+ backdrop-filter: blur(2px);
+ /* Note: backdrop-filter has minimal browser support */
+
+ border-radius: 12px;
+}
+
+.workspace-popup-btn {
+ position: absolute;
+ right: 20px;
+ top: 20px;
+}
+.workspace-popup-btn img {
+ color: white;
+}
+@keyframes fadeIn {
+ from {
+ opacity: 0;
+ }
+ to {
+ opacity: 1;
+ }
+}
+
+.workspace-details-btn {
+ display: flex;
+ justify-content: end;
+ height: 50px;
+}
+.workspace-details-btn img {
+ border-radius: 2rem;
+ font-size: 1rem;
+}
+
+.pinDiv{
+ height: 12px;
+
+}
\ No newline at end of file
diff --git a/src/features/workspace/components/projectCard/index.tsx b/src/features/workspace/components/projectCard/index.tsx
new file mode 100644
index 0000000..8d28722
--- /dev/null
+++ b/src/features/workspace/components/projectCard/index.tsx
@@ -0,0 +1,220 @@
+import React, { useContext, useEffect, useState } from 'react';
+import './index.scss';
+import { deleteProject, getMembers, getProject } from 'app/api/project';
+import { FaBookmark } from "react-icons/fa";
+import { GetProject } from 'app/api/project';
+import { AVATAR_URL } from 'app/constants/api';
+import { AVATAR_API } from 'envConstants';
+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';
+interface Props {
+ projectName: string;
+ orgName: string;
+ status: {
+ archeive: boolean;
+ bookmark: boolean;
+ };
+ githubData: {
+ pulls: number;
+ commits: number;
+ issues: number;
+ } | null;
+}
+
+const ProjectCard: React.FC
+
+
+
+
+
+ {items &&
+ items.slice(itemOffset, itemOffset + itemsPerPage).map((e) => {
+ if (e.index + 1 <= 3) {
+ return (
+ Name
+ PR
+
+
+ );
+ } else {
+ return (
+
+
+
+ {e.name}
+ {e.pulls}
+
+
+ );
+ }
+ })}
+ {e.index + 1}
+ {e.name}
+ {e.pulls}
+
+
+
+ handlePageClick(pageNumber - 1)}
+ />
+ {pageNumber}
+ handlePageClick(pageNumber + 1)}
+ />
+
+
+
+
+ );
+};
+
+export default ProjectCard;
diff --git a/src/features/home/components/projectCardContainer/index.scss b/src/features/workspace/components/projectCardContainer/index.scss
similarity index 70%
rename from src/features/home/components/projectCardContainer/index.scss
rename to src/features/workspace/components/projectCardContainer/index.scss
index a3d0b26..d392ece 100644
--- a/src/features/home/components/projectCardContainer/index.scss
+++ b/src/features/workspace/components/projectCardContainer/index.scss
@@ -1,4 +1,5 @@
.projectcard-cont {
+ width: 100%;
display: grid;
grid-template-columns: repeat(2, 1fr);
row-gap: 2em;
@@ -13,3 +14,9 @@
grid-template-columns: 1fr;
}
}
+
+@media only screen and (max-width: 860px) {
+ .projectcard-cont {
+ grid-template-columns: 1fr;
+ }
+}
diff --git a/src/features/workspace/components/projectCardContainer/index.tsx b/src/features/workspace/components/projectCardContainer/index.tsx
new file mode 100644
index 0000000..bd64cd2
--- /dev/null
+++ b/src/features/workspace/components/projectCardContainer/index.tsx
@@ -0,0 +1,60 @@
+import React, { useEffect, useState } from 'react';
+import ProjectCard from '../projectCard';
+import './index.scss';
+import { Projects } from 'app/api/organization';
+import { ProjectsGithubData } from 'app/api/githubData';
+import { useSelector } from 'react-redux';
+
+interface Props {
+ weekly: boolean;
+ orgName: string;
+ orgProjects: Projects | null;
+ monthlyOrgProjectsData: ProjectsGithubData | null;
+ weeklyOrgProjectsData: ProjectsGithubData | null;
+ archives: boolean;
+}
+
+const ProjectCardCont: React.FC
+ {pin&&
+ {projectName}
+{project ? project.description : <>}
+ + {(userContext?.userOrgs?.userOrgs[orgName].role === 'admin' || + userContext?.userOrgs?.userOrgs[orgName].role === 'manager') && ( + <> + + setShowPopUp(showPopUp ? false : true)}
+ >
+
+
+
+
+
+ )}
+
+ {pin ? 'Unpin' : 'Pin'}
+
+
+ {archive ? 'Unarchive' : 'Archive'}
+
+ navigate(`/editProject/${orgName}/${projectName}`)}
+ >
+ Edit
+
+
+ Delete
+
+
+
+
+ {orgName && !orgName.endsWith('-userspace') && (
+
+ Pull Requests
+ {githubData ? githubData.pulls : <>}
+
+
+ Commits
+ {githubData ? githubData.commits : <>}
+
+
+ Issues
+ {githubData ? githubData.issues : <>}
+
+ 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 ;
+ })
+ ) : (
+ <>
+
+ )}
+ {orgName && !orgName.endsWith('-userspace') && (
+ add Members
+
+ )}
+
+ navigate(`/project/${orgName}/${projectName}`)}
+ alt=''
+ />
+
+ )}
+
+ {orgProjects &&
+ Object.entries(orgProjects)
+ .filter(([key, value]) => {
+ if (key.toLowerCase().includes(searchValue.toLowerCase()))
+ return [key, value];
+ })
+ .map(([key, value]) => {
+ return (
+ archives === value.archeive && (
+
+
+ );
+};
+
+export default ProjectCardCont;
diff --git a/src/features/home/index.scss b/src/features/workspace/index.scss
similarity index 52%
rename from src/features/home/index.scss
rename to src/features/workspace/index.scss
index 3fcdedb..899d134 100644
--- a/src/features/home/index.scss
+++ b/src/features/workspace/index.scss
@@ -2,6 +2,7 @@
display: flex;
justify-content: space-between;
align-items: center;
+ gap: 0.5rem;
padding-left: 1.3em;
margin-top: 0.8em;
margin-bottom: 0.8em;
@@ -19,21 +20,54 @@
flex-grow: 1;
}
-.loader{
+.loader {
width: 10px;
height: 10px;
position: absolute;
top: 50%;
left: 50%;
-
}
-.loader-container{
+.loader-container {
width: 50px;
height: 50px;
position: relative;
padding: 50px;
}
+.home-header button {
+ border: none;
+ outline: none;
+ margin-right: 1em;
+ padding: 0.7em;
+ padding-left: 1.5em;
+ padding-right: 1.5em;
+ border-radius: 2em;
+ color: white;
+ font-size: 0.9rem;
+ background: var(--timerange-switch-btn-bg);
+
+}
+
+.loader-container {
+ position: absolute;
+ top: 0;
+ left: 0;
+ background-color: rgba(0, 0, 0, 0.31);
+ z-index: 1;
+ width: 100vw;
+ height: 100vh;
+ padding: 0px;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ .loading {
+ margin: 0;
+ padding: 0;
+ height: 4rem;
+ width: 4rem;
+ }
+}
@media only screen and (max-width: 860px) {
.home-header {
@@ -54,5 +88,3 @@
width: 90%;
}
}
-
-
diff --git a/src/features/workspace/index.tsx b/src/features/workspace/index.tsx
new file mode 100644
index 0000000..40ae173
--- /dev/null
+++ b/src/features/workspace/index.tsx
@@ -0,0 +1,143 @@
+import React, { useContext, useEffect, useState } from 'react';
+import SearchBar from 'app/components/search';
+import TimeRangeSwitch from 'app/components/timeRangeSwitch';
+import ProjectCardCont from './components/projectCardContainer';
+import LeaderBoard from './components/leaderboard';
+import './index.scss';
+import { useNavigate, useParams } from 'react-router-dom';
+import { getOrgProjects } from 'app/api/organization';
+import {
+ getOrgGithubData,
+ getOrgRank,
+} from 'app/api/githubData';
+import { Projects } from 'app/api/organization';
+import { ProjectsGithubData } from 'app/api/githubData';
+import { Contributors } from 'app/api/githubData';
+import loader from '../../app/assets/gifs/loader.gif';
+import UserContext from 'app/context/user/userContext';
+
+
+const Workspace = () => {
+ const navigate = useNavigate();
+ const token = localStorage.getItem('token');
+ const userContext = useContext(UserContext);
+ const [weekly, setWeekly] = useState
+
+ {isLoading ? (
+
+
+
+ ) : (
+
+ {spaceName && (
+
+ )}
+
+ );
+};
+
+export default Workspace;
diff --git a/src/features/home/slices/projectSearchSlice.ts b/src/features/workspace/slices/projectSearchSlice.ts
similarity index 84%
rename from src/features/home/slices/projectSearchSlice.ts
rename to src/features/workspace/slices/projectSearchSlice.ts
index ff31d91..4bbee7b 100644
--- a/src/features/home/slices/projectSearchSlice.ts
+++ b/src/features/workspace/slices/projectSearchSlice.ts
@@ -7,7 +7,7 @@ export const searchSlice = createSlice({
value: '',
},
reducers: {
- searchAction: (state, action: PayloadAction