Dashboard API integration

package-lock.json

@@ -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",

package.json

@@ -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",

src/APIs/getLinkedProjects.js

@@ -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,
+    });
+  };
+
+
+  

src/APIs/getUnlinkedProjects.js

@@ -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,
+    });
+  };
+
+
+  

src/App.js

@@ -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>

src/components/Dashboard.js

@@ -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>
+
+         
+    )
+}

src/components/Home.js

@@ -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>
-    )
-}