Dashboard API integration
This commit is contained in:
Sonika
parent
aaa299a477
commit
977f2986d9
29
package-lock.json
generated
29
package-lock.json
generated
@ -16,6 +16,7 @@
|
||||
"@testing-library/jest-dom": "^5.17.0",
|
||||
"@testing-library/react": "^13.4.0",
|
||||
"@testing-library/user-event": "^13.5.0",
|
||||
"axios": "^1.6.2",
|
||||
"react": "^18.2.0",
|
||||
"react-dom": "^18.2.0",
|
||||
"react-router-dom": "^6.19.0",
|
||||
@ -5832,6 +5833,29 @@
|
||||
"node": ">=4"
|
||||
}
|
||||
},
|
||||
"node_modules/axios": {
|
||||
"version": "1.6.2",
|
||||
"resolved": "https://registry.npmjs.org/axios/-/axios-1.6.2.tgz",
|
||||
"integrity": "sha512-7i24Ri4pmDRfJTR7LDBhsOTtcm+9kjX5WiY1X3wIisx6G9So3pfMkEiU7emUBe46oceVImccTEM3k6C5dbVW8A==",
|
||||
"dependencies": {
|
||||
"follow-redirects": "^1.15.0",
|
||||
"form-data": "^4.0.0",
|
||||
"proxy-from-env": "^1.1.0"
|
||||
}
|
||||
},
|
||||
"node_modules/axios/node_modules/form-data": {
|
||||
"version": "4.0.0",
|
||||
"resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.0.tgz",
|
||||
"integrity": "sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==",
|
||||
"dependencies": {
|
||||
"asynckit": "^0.4.0",
|
||||
"combined-stream": "^1.0.8",
|
||||
"mime-types": "^2.1.12"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">= 6"
|
||||
}
|
||||
},
|
||||
"node_modules/axobject-query": {
|
||||
"version": "3.2.1",
|
||||
"resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-3.2.1.tgz",
|
||||
@ -14975,6 +14999,11 @@
|
||||
"node": ">= 0.10"
|
||||
}
|
||||
},
|
||||
"node_modules/proxy-from-env": {
|
||||
"version": "1.1.0",
|
||||
"resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
|
||||
"integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg=="
|
||||
},
|
||||
"node_modules/psl": {
|
||||
"version": "1.9.0",
|
||||
"resolved": "https://registry.npmjs.org/psl/-/psl-1.9.0.tgz",
|
||||
|
||||
@ -11,6 +11,7 @@
|
||||
"@testing-library/jest-dom": "^5.17.0",
|
||||
"@testing-library/react": "^13.4.0",
|
||||
"@testing-library/user-event": "^13.5.0",
|
||||
"axios": "^1.6.2",
|
||||
"react": "^18.2.0",
|
||||
"react-dom": "^18.2.0",
|
||||
"react-router-dom": "^6.19.0",
|
||||
|
||||
20
src/APIs/getLinkedProjects.js
Normal file
20
src/APIs/getLinkedProjects.js
Normal file
@ -0,0 +1,20 @@
|
||||
import { useQuery } from "@tanstack/react-query";
|
||||
|
||||
export const getLinkedProjects = async () => {
|
||||
const response = await fetch('http://localhost:8080/SonyMusicRights/linked-project?searchBy=');
|
||||
if (!response.ok) {
|
||||
throw new Error('Failed to get UploadStatus data');
|
||||
}
|
||||
const LinkedProjectsdata = await response.json();
|
||||
return LinkedProjectsdata;
|
||||
};
|
||||
|
||||
export const useGetLinkedProjects = () => {
|
||||
return useQuery({
|
||||
queryKey: ['LnikedProject-list'],
|
||||
queryFn: getLinkedProjects,
|
||||
});
|
||||
};
|
||||
|
||||
|
||||
|
||||
20
src/APIs/getUnlinkedProjects.js
Normal file
20
src/APIs/getUnlinkedProjects.js
Normal file
@ -0,0 +1,20 @@
|
||||
import { useQuery } from "@tanstack/react-query";
|
||||
|
||||
export const getUnlinkedProjects = async () => {
|
||||
const response = await fetch('http://localhost:8080/SonyMusicRights/unlinked-project?searchBy=');
|
||||
if (!response.ok) {
|
||||
throw new Error('Failed to get UploadStatus data');
|
||||
}
|
||||
const UnlinkedProjectsdata = await response.json();
|
||||
return UnlinkedProjectsdata;
|
||||
};
|
||||
|
||||
export const useGetUnlinkedProjects = () => {
|
||||
return useQuery({
|
||||
queryKey: ['UnlinkedProject-list'],
|
||||
queryFn: getUnlinkedProjects,
|
||||
});
|
||||
};
|
||||
|
||||
|
||||
|
||||
@ -5,7 +5,7 @@ import React from 'react';
|
||||
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
|
||||
import { Container } from '@mui/material';
|
||||
import { BrowserRouter as Router, Routes, Route, BrowserRouter} from 'react-router-dom'
|
||||
import Home from 'components/Home';
|
||||
import Dashboard from 'components/Dashboard';
|
||||
|
||||
|
||||
function App() {
|
||||
@ -18,7 +18,7 @@ function App() {
|
||||
<Header/>
|
||||
{/* <Home/> */}
|
||||
<Routes>
|
||||
<Route path='/home' element={<Home/>} />
|
||||
<Route path='/home' element={<Dashboard/>} />
|
||||
</Routes>
|
||||
</BrowserRouter>
|
||||
</div>
|
||||
|
||||
53
src/components/Dashboard.js
Normal file
53
src/components/Dashboard.js
Normal file
@ -0,0 +1,53 @@
|
||||
import { Card, CardContent, Grid, Paper, Typography } from "@mui/material";
|
||||
import React, { useEffect } from "react";
|
||||
import { useMutation } from "@tanstack/react-query";
|
||||
import { useQuery } from '@tanstack/react-query';
|
||||
import {Link} from 'react-router-dom';
|
||||
import { getLinkedProjects, useGetLinkedProjects } from "APIs/getLinkedProjects";
|
||||
import { useGetUnlinkedProjects } from "APIs/getUnlinkedProjects";
|
||||
|
||||
export default function Dashboard(){
|
||||
|
||||
const [linkedProjectData, setLinkedProjectData] = React.useState()
|
||||
const { data: getLinkedProjectList } = useGetLinkedProjects();
|
||||
const { data: getUnlinkedProjectList } = useGetUnlinkedProjects();
|
||||
|
||||
console.log('sdfsds',getLinkedProjectList,getUnlinkedProjectList)
|
||||
|
||||
return (
|
||||
// <Paper sx={{bgcolor:'#1e1e1e', height:600, color:'white'}}>
|
||||
<div className="home-page">
|
||||
<div className="navbar-margin stories" style={{minHeight : '500px'}}>
|
||||
<h1 className="mobile-heading">home</h1>
|
||||
<div style={{marginTop: '5%', marginLeft: '1%', marginRight: '1%', display: 'flex', flexDirection: 'row', justifyContent:'space-between'}}>
|
||||
<Card style={{paddingTop: '5px', height: '170px', width: '49.5%'}}>
|
||||
{/* <Link to={{ pathname: `${process.env.PUBLIC_URL}/projects`, state: { type: 'unlinked'} }}> */}
|
||||
<CardContent style={{margin: '6%', display: 'flex'}}>
|
||||
<Typography component="h2" variant="h2" style={{color: '#C00243', fontWeight: 'bold'}}>
|
||||
{getLinkedProjectList.length}
|
||||
</Typography>
|
||||
<Typography component="h6" variant="h6" style={{color: '#C00243', margin: '3%'}}>
|
||||
New Projects That needs Contract Linkage
|
||||
</Typography>
|
||||
</CardContent>
|
||||
{/* </Link> */}
|
||||
</Card>
|
||||
<Card style={{paddingTop: '5px', height: '170px', width: '49.5%'}}>
|
||||
{/* <Link to={{ pathname: `${process.env.PUBLIC_URL}/projects`, state: { type: 'linked'} }}> */}
|
||||
<CardContent style={{margin: '6%', display: 'flex'}}>
|
||||
<Typography component="h2" variant="h2" style={{color: '#E1AB1A', fontWeight: 'bold'}}>
|
||||
{getUnlinkedProjectList.length}
|
||||
</Typography>
|
||||
<Typography component="h6" variant="h6" style={{color: '#E1AB1A', margin: '3%'}}>
|
||||
Projects That needs To Be Published
|
||||
</Typography>
|
||||
</CardContent>
|
||||
{/* </Link> */}
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
)
|
||||
}
|
||||
@ -1,12 +0,0 @@
|
||||
import { Grid, Paper } from "@mui/material";
|
||||
import React from "react";
|
||||
|
||||
export default function Home(){
|
||||
return (
|
||||
|
||||
<Paper sx={{bgcolor:'#1e1e1e', height:600}}>
|
||||
<h1>hi</h1>
|
||||
|
||||
</Paper>
|
||||
)
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user