Sudo (#130)

Workspace card Data fetching done

src/app/api/project.ts

@@ -1,4 +1,4 @@
-import axios from 'axios';
+import axios, { AxiosResponse } from 'axios';
 import { BACKEND_URL } from 'envConstants';
 
 export interface projectBody {
@@ -7,6 +7,19 @@ export interface projectBody {
   link: string;
 }
 
+export interface GetProject{
+  id: number,
+  name: string, 
+  description: string
+}
+
+export interface Member{
+  [key: string]:string
+}
+export interface ProjectMembers{
+  members:Member
+}
+
 export const addProject = async (
   authorizationToken: string,
   orgName: string,
@@ -146,14 +159,14 @@ export const getProject = async (
   authorizationToken: string,
   projectName: string,
   orgName: string
-) => {
+):Promise<AxiosResponse<GetProject>> => {
   const url =
     BACKEND_URL +
     '/api/protected/project/getProject/' +
     projectName +
     '/' +
     orgName;
-  const response = await axios.get(url, {
+  const response = await axios.get<GetProject>(url, {
     headers: {
       Accept: 'application/json',
       Authorization: `Bearer ${authorizationToken}`,
@@ -166,14 +179,14 @@ export const getMembers = async (
   authorizationToken: string,
   projectName: string,
   orgName: string
-) => {
+) : Promise<AxiosResponse<ProjectMembers>>=> {
   const url =
     BACKEND_URL +
     '/api/protected/project/getMembers/' +
     projectName +
     '/' +
     orgName;
-  const response = await axios.get(url, {
+  const response = await axios.get<ProjectMembers>(url, {
     headers: {
       Accept: 'application/json',
       Authorization: `Bearer ${authorizationToken}`,

src/app/constants/api.ts

@@ -0,0 +1 @@
+export const AVATAR_URL="https://api.multiavatar.com"

src/envConstants.ts

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

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

@@ -1,8 +1,15 @@
-import React from 'react';
+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,
@@ -16,15 +23,45 @@ import './index.scss';
 }
 
 
-const ProjectCard: React.FC<Props> = ({projectName, status, githubData}) => {
+
+
+
+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)
+
+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 (
     <div className='projectcard'>
       <h1>{projectName}</h1>
       <p>
-        Lorem ipsum dolor sit amet consectetur, adipisicing elit. Cum
-        repudiandae ex corporis quasi sequi porro est, tenetur ipsam assumenda
-        ab ratione recusandae atque quaerat. Voluptatem incidunt illo optio
-        aperiam consequuntur.
+        {project_data?project_data.description:<></>}
       </p>
       <div className='projectcard-status'>
         <div>
@@ -41,12 +78,18 @@ const ProjectCard: React.FC<Props> = ({projectName, status, githubData}) => {
         </div>
       </div>
 
-      {/* <ul className='projectcard-contributor'>
-        <li>A</li>
+      <ul className='projectcard-contributor'>
+        {/* <li>A</li>
         <li>B</li>
         <li>C</li>
-        <li>D</li>
-      </ul> */}
+        <li>D</li> */}
+        {
+            project_members&&Object.entries(project_members).slice(0,4).map(([key,value])=>{
+              const url= AVATAR_URL+"/"+key+".png?apikey="+AVATAR_API
+              return <li><img src={url} /></li>
+            })
+        }
+      </ul>
     </div>
   );
 };

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

@@ -7,12 +7,13 @@ 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<Props> = ({weekly, orgProjects, monthlyOrgProjectsData, weeklyOrgProjectsData}) => {
+const ProjectCardCont: React.FC<Props> = ({weekly,orgName ,orgProjects, monthlyOrgProjectsData, weeklyOrgProjectsData}) => {
 
 
   const [archeive,setArcheive]= useState<boolean>(false);
@@ -32,13 +33,13 @@ const ProjectCardCont: React.FC<Props> = ({weekly, orgProjects, monthlyOrgProjec
                githubData= weeklyOrgProjectsData[key]
               }
 
-          return <ProjectCard key={key}  projectName={key} status={value} githubData={githubData}/>;
+          return <ProjectCard key={key} orgName={orgName}  projectName={key} status={value} githubData={githubData}/>;
             }else{
               let githubData=null
               if(monthlyOrgProjectsData){
                githubData= monthlyOrgProjectsData[key]
               }
-              return <ProjectCard key={key}  projectName={key} status={value} githubData={githubData}/>;
+              return <ProjectCard key={key} orgName={orgName}  projectName={key} status={value} githubData={githubData}/>;
 
             }
           }

src/features/home/index.tsx

@@ -131,7 +131,7 @@ const Home = () => {
       </div>:
 
       <div className='home-main-cont'>
-        <ProjectCardCont weekly={weekly}  orgProjects={orgProjects}   monthlyOrgProjectsData={monthlyOrgProjectsData}  weeklyOrgProjectsData={weeklyOrgProjectsData}/>
+        <ProjectCardCont weekly={weekly} orgName={orgName}  orgProjects={orgProjects}   monthlyOrgProjectsData={monthlyOrgProjectsData}  weeklyOrgProjectsData={weeklyOrgProjectsData}/>
         <LeaderBoard />
       </div>
       }

src/features/login/index.tsx

@@ -24,6 +24,7 @@ const Login = () => {
        navigate('/')
 
      }catch(e){
+      localStorage.removeItem('token')
        navigate('/login')
      }