feat: addProject pinProject ArchiveProject DeleteProject

Author: yp969803

src/app/components/buttonBar/index.tsx

@@ -1,13 +1,14 @@
-import React from 'react';
+import React, { useState } from 'react';
 import TimeRangeSwitch from 'app/components/timeRangeSwitch';
 
 import './index.scss';
 const ButtonBar = () => {
+  const [weeky, setWeekly]= useState<boolean>(true);
   return (
     <div className='project-upper-cont'>
       <div className='button-bar'>
         <button className='back-btn'>&larr; Back</button>
-        <TimeRangeSwitch />
+        <TimeRangeSwitch weekly={weeky} setWeekly={setWeekly}/>
       </div>
       <h1>Appetizer</h1>
       <p>

src/app/components/search/index.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { useDispatch } from 'react-redux';
-import { searchAction } from 'features/home/slices/projectSearchSlice';
+import { searchAction } from 'features/workspace/slices/projectSearchSlice';
 import search_icon from 'app/assets/images/search_icon.svg';
 import './index.scss';
 

src/app/components/timeRangeSwitch/index.tsx

@@ -4,21 +4,26 @@ import { timeRangeModel } from 'features/project/components/contributorCard/type
 import { weekAction, monthAction } from './timeRangeSlice';
 import './index.scss';
 
-const TimeRangeSwitch = () => {
+interface Props{
+  weekly: boolean,
+  setWeekly: (bool: boolean)=>void
+}
+
+const TimeRangeSwitch:React.FC<Props> = ({weekly, setWeekly}) => {
   const dispatch = useDispatch();
   const isWeekly = useSelector((state: timeRangeModel) => state.isWeekly.value);
 
   return (
     <div className='timerange-cont'>
       <button
-        onClick={() => dispatch(weekAction())}
-        className={isWeekly ? 'active' : ''}
+        onClick={() => setWeekly(!weekly)}
+        className={weekly ? 'active' : ''}
       >
         Weekly{' '}
       </button>
       <button
-        onClick={() => dispatch(monthAction())}
-        className={isWeekly ? '' : 'active'}
+        onClick={() => setWeekly(!weekly)}
+        className={weekly ? '' : 'active'}
       >
         Monthly{' '}
       </button>

src/app/routes/BasicRoutes.tsx

@@ -1,19 +1,19 @@
 import React from 'react';
 import { Routes, Route } from 'react-router-dom';
-import Home from 'features/home';
 import ProjectPage from 'features/project';
 import AddProject from 'features/AddProject';
 import Error from 'features/Error';
 import WorkspaceView from 'features/workspace-view';
 import Login from 'features/login';
 import AddWorkspace from 'features/AddWorkspace';
+import Workspace from 'features/workspace';
 const BasicRoutes = () => {
   return (
     <Routes>
-      <Route path={'/'} element={<Home />} />
-      <Route path={'/projects/:projectid'} element={<ProjectPage />} />
-      <Route path={'/addproject'} element={<AddProject />} />
-      <Route path={'/workspace-view'} element={<WorkspaceView />} />
+      <Route path={'/'} element={<WorkspaceView />} />
+      <Route path={'/projects/:projectName'} element={<ProjectPage />} />
+      <Route path={'/addproject/:spaceName'} element={<AddProject />} />
+      <Route path={'/workspace/:spaceName'} element={<Workspace />} />
       <Route path={'/login'} element={<Login />} />
       <Route path={'/addWorkspace'} element={<AddWorkspace />} />
       <Route path={'/*'} element={<Error />} />

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({

src/features/AddProject/index.tsx

@@ -1,43 +1,46 @@
-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 { useNavigate, useParams } from 'react-router-dom';
 import { getUser } from 'app/api/user';
 import toast from 'react-hot-toast';
 import { useQuery } from 'react-query';
 import axios from 'axios';
 import { addProject } from 'app/api/project';
+import UserContext from 'app/context/user/userContext';
+import { OrgProjects, Projects, getOrgProjects } from 'app/api/organization';
 const AddProject = () => {
   const navigate = useNavigate();
+  const userContext = useContext(UserContext);
   const token = localStorage.getItem('token');
-  const orgName = 'orgName';
+  const { spaceName } = useParams();
   const [name, setName] = useState<string | null>(null);
   const [description, setDescription] = useState<string | null>(null);
   const [link, setLink] = useState<string | null>(null);
 
-  const [validLink, setValidLink] = useState<boolean>(false);
 
-  const [validName, setValidName] = useState<boolean>(false);
+  const [orgProject, setOrgProjects] = useState<Projects | null>(null);
 
-
-
-  const linkChange = async (event: ChangeEvent<HTMLInputElement>) => {
-    setLink(event.target.value);
-
-    if (isGitHubRepositoryLink(event.target.value)) {
+  const fetchData = async () => {
+    if (token && spaceName) {
       try {
-        const response = await axios.get(event.target.value);
-        setValidLink(true);
-        return;
+        const res = await getOrgProjects(token, spaceName);
+        console.log(res.data.projects)
+        setOrgProjects(res.data.projects);
       } catch (e) {}
     }
+  };
 
-    setValidLink(false);
+  useEffect(() => {
+    fetchData();
+  }, [spaceName]);
+
+  const linkChange = async (event: ChangeEvent<HTMLInputElement>) => {
+    setLink(event.target.value);
   };
 
   const nameChange = async (event: ChangeEvent<HTMLInputElement>) => {
     setName(event.target.value);
-    setValidName(true);
   };
 
   function isGitHubRepositoryLink(link: string): boolean {
@@ -49,39 +52,51 @@ 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: <b>Project saved</b>,
+        error: <b>Could not save</b>,
+      });
+    } else {
+      toast.error('Invalid inputs');
     }
-
-    toast.error('Invalid inputs');
   };
 
-
-  toast.promise(
-    SubmitHandler(),{
-      loading: 'Saving Project',
-      success: <b>Project saved</b>,
-      error:<b>Could not save</b>
-    }
-  )
-
   return (
     <div>
       <div className='add-project-container'>
@@ -93,13 +108,18 @@ 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"}
           <div className='input-title'>Project link</div>
           <input
             type='text'
             value={link ? link : ''}
             onChange={linkChange}
             placeholder='Github link of project'
           />
+          {!link ? 'Link feild should not be empty' : <></>}
+          {link&&!isGitHubRepositoryLink(link)&&"Not a valid github repository link"}
           <div className='input-title'>Description</div>
           <input
             type='text'
@@ -109,8 +129,10 @@ const AddProject = () => {
             }
             placeholder='Details about project'
           />
+          {!description ? 'Description feild should not be empty' : <></>}
+          {description&&description.length>=200&&"Description length should not be greater than 200"}
         </form>
-        <button className='add-project-btn'>
+        <button className='add-project-btn' onClick={SubmitHandler}>
           <img src={tick} alt='' /> Done
         </button>
       </div>

src/features/AddWorkspace/index.tsx

@@ -148,7 +148,7 @@ const AddWorkspace = () => {
           }
 
         }
-        navigate('/workspace-view');
+        navigate('/');
       };
 
       toast.promise(func(), {