feat: workspace veiw card initial fetch done

src/app/api/user.ts

@@ -5,6 +5,19 @@ export interface UserData {
   message: string;
 }
 
+
+export interface UserOrgs {
+  [userName: string]: UserOrgDetails;
+}
+
+export interface UserOrgDetails {
+  bookmark: string;
+  role: string;
+  archive: string;
+}
+
+
+
 export interface AllUserData {
   users: {
     id: number;
@@ -84,12 +97,12 @@ export const setOrgArcheiveStatus = async (
 export const getUserOrgs = async (
   authorizationToken: string,
   username: string
-) => {
+):Promise<AxiosResponse<UserOrgs>> => {
   const url =
     BACKEND_URL +
-    '/api/protected/user/setArcheiveStatus/getUserOrgs/' +
+    '/api/protected/user/getUserOrgs/' +
     username;
-  const respnse = await axios.get(url, {
+  const respnse = await axios.get<UserOrgs>(url, {
     headers: {
       Accept: 'application/json',
       Authorization: `Bearer ${authorizationToken}`,

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<UserContextType | undefined>(undefined);
+
+export default UserContext;

src/app/context/user/userState.tsx

@@ -0,0 +1,23 @@
+import { FC, ReactNode, useState } from "react";
+import UserContext from "./userContext";
+import { UserOrgs } from "app/api/user";
+
+interface Props{
+    children: ReactNode
+}
+
+const UserState: FC<Props>= ({children})=>{
+
+    const [username, setUsername] = useState<String | null>(null);
+    const [userOrgs, setUserOrgs] = useState<UserOrgs|null>(null)
+
+    return (
+        <UserContext.Provider  value={{username, setUsername, userOrgs, setUserOrgs}} >
+
+        {children}
+
+        </UserContext.Provider>
+    )
+}
+
+export default UserState

src/app/index.tsx

@@ -1,9 +1,47 @@
-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 (
     <>
       <Navbar />

src/envConstants.ts

@@ -1,3 +1,3 @@
 export const CLIENT_ID = '149d2857118e05e729a8';
-export const BACKEND_URL = 'http://13.233.127.61:808';
+export const BACKEND_URL = 'http://13.233.127.61:8080';
 export const AVATAR_API= "w9zrqHdDa4MsYB";

src/features/AddProject/index.tsx

@@ -19,25 +19,7 @@ const AddProject = () => {
 
   const [validName, setValidName] = useState<boolean>(false);
 
-  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 linkChange = async (event: ChangeEvent<HTMLInputElement>) => {
     setLink(event.target.value);

src/features/home/components/projectCard/index.tsx

@@ -28,7 +28,6 @@ import { AVATAR_API } from 'envConstants';
 
 const ProjectCard: React.FC<Props> = ({projectName,orgName ,status, githubData}) => {
   const token= localStorage.getItem('token')
-
   const [ProjectData,SetProjectData]= useState<GetProject|null>(null)
   const [projectMembers,setProjectMembers]= useState<ProjectMembers|null>(null)
 

src/features/home/index.tsx

@@ -34,30 +34,10 @@ const Home = () => {
   const [weeklyOrgProjectsData, setWeeklyOrgProjectsData] =
     useState<ProjectsGithubData | null>(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);
 
 

src/features/login/index.tsx

@@ -14,29 +14,7 @@ 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');
-      }
-      localStorage.removeItem('token');
-
-    }
-  };
-
-  useEffect(() => {
-    checklogin();
-  }, []);
-
-
+  const navigate = useNavigate(); 
   const loginFunc = async () => {
     if (searchParam.get('code') !== null) {
      try{

src/features/workspace-view/index.tsx

@@ -1,28 +1,58 @@
 import SearchBar from 'app/components/search';
-import React from 'react';
+import React, { useContext, useEffect, useState } from 'react';
 import './index.scss';
 import WorkspaceCard from './workspace-card';
 import { workSpaceData } from 'app/utils/workspaceData';
+import UserContext from 'app/context/user/userContext';
+import { UserOrgDetails, getUserOrgs } from 'app/api/user';
+import loader from '../../app/assets/gifs/loader.gif'
 
 const WorkspaceView = () => {
+  const userContext= useContext(UserContext);
+  const [isLoad, setIsLoad]= useState<boolean>(true)
+  const [archeives, setArcheives]= useState<boolean>(false);
+  const token= localStorage.getItem('token')
+  const fetchData=async()=>{
+
+    if(token&&userContext?.username&&!userContext.userOrgs){
+      setIsLoad(true)
+       try{
+         const userOrgs= await getUserOrgs(token, userContext?.username.toString());
+         userContext?.setUserOrgs(userOrgs.data)
+       }catch(e){
+
+       }
+       setIsLoad(false)
+    }
+  }
+
+
+   useEffect(()=>{
+    fetchData();
+   },[userContext?.setUsername, userContext?.username])
+
   return (
     <div className='workspaceview-container'>
       <div className='workspaceview-header'>
         <SearchBar />
+
+        <button onClick={()=>setArcheives(!archeives)}>Archeives</button>
         <button>Create a workspace</button>
+
       </div>
+
       <div className='workspaceview-card-container'>
-        {workSpaceData.map((workspace) => {
-          return (
-            <WorkspaceCard
-              key={workspace.id}
-              id={workspace.id}
-              description={workspace.description}
-              title={workspace.title}
-              imgURL={workspace.imgURL}
-            />
-          );
-        })}
+        {isLoad?<img src={loader}className='loader'/>:userContext?.userOrgs&&Object.entries(userContext.userOrgs.userOrgs).map(([orgName, details])=>{
+
+          return <WorkspaceCard 
+          key={orgName}
+          workspaceName={orgName}
+          archeive={"true"===details.archeive}
+          bookmark={"true"===details.bookmark}
+          role={details.role}
+          archeives={archeives}
+           />
+         })}
       </div>
     </div>
   );

src/features/workspace-view/workspace-card/index.tsx

@@ -1,13 +1,22 @@
 import React, { 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;
 
+type workspaceCardProps = {
+  workspaceName: string;
+  role: string;
+  archeive: boolean;
+  bookmark: boolean;
+  archeives: boolean;
+}
+
+const WorkspaceCard = (props: workspaceCardProps) => {
+  const { workspaceName, role, archeive, bookmark ,archeives} = props;
+
   const [showPopUp, setShowPopUp] = useState(false);
   return (
-    <div className='workspace-card'>
+    <>
+ { (archeive==archeives)&&<div className='workspace-card'>
       <div className='workspace-card-body'>
         <div
           className='workspace-popup-btn'
@@ -25,21 +34,22 @@ const WorkspaceCard = (props: workspaceCardProps) => {
         </div>
         <div className='workspace-card-utils'>
           <div className='workspace-logo'>
-            <img src={imgURL} alt='' />
+            <img src={"https://pngimg.com/uploads/github/github_PNG80.png"} alt='' />
           </div>
           <div className='workspace-members'>
-            <div className='workspace-title'>{title}</div>
+            <div className='workspace-title'>{workspaceName}</div>
             <div className='workspace-members-imgs'>img</div>
           </div>
         </div>
         <div className='workspace-description'>
-          {description.substring(0, 120) + '...'}
+          {/* {description.substring(0, 120) + '...'} */}
         </div>
         <div className='workspace-details-btn'>
           <img src={rightNavbtn} alt='' />
         </div>
       </div>
-    </div>
+    </div>}
+    </>
   );
 };
 

src/index.tsx

@@ -6,6 +6,7 @@ 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();
 
@@ -18,7 +19,9 @@ root.render(
     <BrowserRouter>
       <QueryClientProvider client={queryClient}>
         <Provider store={store}>
+          <UserState>
           <App />
+          </UserState>
         </Provider>
       </QueryClientProvider>
     </BrowserRouter>