From 9abbf7f47f708d382151b3cffee514908cc8cca4 Mon Sep 17 00:00:00 2001 From: yash Date: Fri, 29 Dec 2023 02:00:44 +0530 Subject: [PATCH] feat: projectCard data fetching done --- src/app/api/project.ts | 23 +++++-- src/app/constants/api.ts | 1 + src/envConstants.ts | 1 + .../home/components/projectCard/index.tsx | 65 +++++++++++++++---- .../components/projectCardContainer/index.tsx | 7 +- src/features/home/index.tsx | 2 +- src/features/login/index.tsx | 1 + 7 files changed, 80 insertions(+), 20 deletions(-) create mode 100644 src/app/constants/api.ts diff --git a/src/app/api/project.ts b/src/app/api/project.ts index 63d78e8..e604a3d 100644 --- a/src/app/api/project.ts +++ b/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> => { const url = BACKEND_URL + '/api/protected/project/getProject/' + projectName + '/' + orgName; - const response = await axios.get(url, { + const response = await axios.get(url, { headers: { Accept: 'application/json', Authorization: `Bearer ${authorizationToken}`, @@ -166,14 +179,14 @@ export const getMembers = async ( authorizationToken: string, projectName: string, orgName: string -) => { +) : Promise>=> { const url = BACKEND_URL + '/api/protected/project/getMembers/' + projectName + '/' + orgName; - const response = await axios.get(url, { + const response = await axios.get(url, { headers: { Accept: 'application/json', Authorization: `Bearer ${authorizationToken}`, diff --git a/src/app/constants/api.ts b/src/app/constants/api.ts new file mode 100644 index 0000000..1dff1ff --- /dev/null +++ b/src/app/constants/api.ts @@ -0,0 +1 @@ +export const AVATAR_URL="https://api.multiavatar.com" diff --git a/src/envConstants.ts b/src/envConstants.ts index 5a95f31..efcb05a 100644 --- a/src/envConstants.ts +++ b/src/envConstants.ts @@ -1,2 +1,3 @@ export const CLIENT_ID = '149d2857118e05e729a8'; export const BACKEND_URL = 'http://localhost:8080'; +export const AVATAR_API= "w9zrqHdDa4MsYB"; \ No newline at end of file diff --git a/src/features/home/components/projectCard/index.tsx b/src/features/home/components/projectCard/index.tsx index 320c450..fefe3cb 100644 --- a/src/features/home/components/projectCard/index.tsx +++ b/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 = ({projectName, status, githubData}) => { + + + +const ProjectCard: React.FC = ({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 (

{projectName}

- 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:<>}

@@ -41,12 +78,18 @@ const ProjectCard: React.FC = ({projectName, status, githubData}) => {
- {/*
    -
  • A
    • +
      + {/*
    • A
    • B
    • C
      • -
    • D
      • -
    */} +
  • D
    • */} + { + project_members&&Object.entries(project_members).slice(0,4).map(([key,value])=>{ + const url= AVATAR_URL+"/"+key+".png?apikey="+AVATAR_API + return
    • + }) + } +
); }; diff --git a/src/features/home/components/projectCardContainer/index.tsx b/src/features/home/components/projectCardContainer/index.tsx index b64f222..4e98788 100644 --- a/src/features/home/components/projectCardContainer/index.tsx +++ b/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 = ({weekly, orgProjects, monthlyOrgProjectsData, weeklyOrgProjectsData}) => { +const ProjectCardCont: React.FC = ({weekly,orgName ,orgProjects, monthlyOrgProjectsData, weeklyOrgProjectsData}) => { const [archeive,setArcheive]= useState(false); @@ -32,13 +33,13 @@ const ProjectCardCont: React.FC = ({weekly, orgProjects, monthlyOrgProjec githubData= weeklyOrgProjectsData[key] } - return ; + return ; }else{ let githubData=null if(monthlyOrgProjectsData){ githubData= monthlyOrgProjectsData[key] } - return ; + return ; } } diff --git a/src/features/home/index.tsx b/src/features/home/index.tsx index 45451aa..ea2fac3 100644 --- a/src/features/home/index.tsx +++ b/src/features/home/index.tsx @@ -131,7 +131,7 @@ const Home = () => { :
- +
} diff --git a/src/features/login/index.tsx b/src/features/login/index.tsx index 51bd02d..417b83e 100644 --- a/src/features/login/index.tsx +++ b/src/features/login/index.tsx @@ -24,6 +24,7 @@ const Login = () => { navigate('/') }catch(e){ + localStorage.removeItem('token') navigate('/login') }