project shifted from .js to .tsx

jsconfig.json

@@ -1,7 +0,0 @@
-{
-    "compilerOptions": {
-      "baseUrl": "./src",
-      "checkJs": true,
-      "jsx": "react"
-    }
-  }

package-lock.json

@@ -24,6 +24,9 @@
         "react-router-dom": "^6.19.0",
         "react-scripts": "5.0.1",
         "web-vitals": "^2.1.4"
+      },
+      "devDependencies": {
+        "typescript": "^5.3.3"
       }
     },
     "node_modules/@aashutoshrathi/word-wrap": {
@@ -17428,16 +17431,15 @@
       }
     },
     "node_modules/typescript": {
-      "version": "4.9.5",
+      "version": "5.3.3",
-      "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.9.5.tgz",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.3.3.tgz",
-      "integrity": "sha512-1FXk9E2Hm+QzZQ7z+McJiHL4NW1F2EzMu9Nq9i3zAaGqibafqYwCVU6WyWAuyQRRzOlxou8xZSyXLEN8oKj24g==",
+      "integrity": "sha512-pXWcraxM0uxAS+tN0AG/BF2TyqmHO014Z070UsJ+pFvYuRSq8KH8DmWpnbXe0pEPDHXZV3FcAbJkijJ5oNEnWw==",
-      "peer": true,
       "bin": {
         "tsc": "bin/tsc",
         "tsserver": "bin/tsserver"
       },
       "engines": {
-        "node": ">=4.2.0"
+        "node": ">=14.17"
       }
     },
     "node_modules/unbox-primitive": {

package.json

@@ -43,5 +43,8 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
+  },
+  "devDependencies": {
+    "typescript": "^5.3.3"
   }
 }

public/config/config.json

@@ -0,0 +1,42 @@
+{
+    "userName" : "Vipeesh",
+    "apiUrl" : "http://localhost:8080/SonyMusicRights",
+    "facebook" : "https://www.facebook.com",
+    "twiter" : "https://twitter.com",
+    "instagram" : "https://www.instagram.com",
+    "youtube" : "https://www.youtube.com",
+    "downloadRole": "admin",
+    "projectLevelDataDownloadFileName": "Project data",
+    "assetLevelDataDownloadFileName": "Project and Asset data",
+    "menuList" : [{
+        "name": "Home",
+        "link": "/SonyMusicRights",
+        "type": "intern"
+      },
+      {
+        "name": "Projects",
+        "link": "/SonyMusicRights/projects",
+        "type": "intern"
+      },
+      {
+        "name": "Search",
+        "link": "/SonyMusicRights/search",
+        "type": "intern"
+      },
+      {
+        "name": "Admin",
+        "link": "/SonyMusicRights/admin",
+        "type": "intern"
+      },
+      {
+        "name": "Manage Users",
+        "link": "/SonyMusicRights/user-management",
+        "type": "intern"
+      },
+      {
+        "name": "Intranet Users",
+        "link": "/SonyMusicRights/intranet-user-management",
+        "type": "intern"
+      }
+    ]
+}

src/APIs/ProjectScreenAPIs/getAutoLinkedProjectsAssets.tsx

@@ -1,7 +1,7 @@
 import { useQuery } from '@tanstack/react-query';
 import axios from 'axios';
 
-export const fetchPublishedProjects = (searchBy, config) => {
+export const fetchAutolinkedAssets = (searchBy:any, config:any) => {
   const fetchData = async () => {
     const response = await axios.get(`${config.apiUrl}/autolinked-assets`, {
       params: {

src/APIs/ProjectScreenAPIs/getLinkedProject.tsx

@@ -1,7 +1,7 @@
 import { useQuery } from '@tanstack/react-query';
 import axios from 'axios';
 
-export const fetchLinkedProjects = (searchBy, config) => {
+export const fetchLinkedProjects = (searchBy:any, config:any) => {
   const fetchData = async () => {
     const response = await axios.get(`${config.apiUrl}/linked-project`, {
       params: {

src/APIs/ProjectScreenAPIs/getProject.tsx

@@ -1,9 +1,9 @@
 import { useQuery } from '@tanstack/react-query';
 import axios from 'axios';
 
-export const fetchProjects = (searchBy, config) => {
+export const fetchProjects = (searchBy:any, config:any) => {
   const fetchData = async () => {
-    const response = await axios.get(`${config.apiUrl}/project-list`, {
+    const response = await axios.post(`${config.apiUrl}/project-list`, {
       params: {
         searchBy
       }

src/APIs/ProjectScreenAPIs/getPublishedProject.tsx

@@ -1,7 +1,7 @@
 import { useQuery } from '@tanstack/react-query';
 import axios from 'axios';
 
-export const fetchPublishedProjects = (searchBy, config) => {
+export const fetchPublishedProjects = (searchBy:any, config:any) => {
   const fetchData = async () => {
     const response = await axios.get(`${config.apiUrl}/published-project`, {
       params: {

src/APIs/ProjectScreenAPIs/getUnlinkedProject.tsx

@@ -1,7 +1,7 @@
 import { useQuery } from '@tanstack/react-query';
 import axios from 'axios';
 
-export const fetchUnlinkedProjects = (searchBy, config) => {
+export const fetchUnlinkedProjects = (searchBy:any, config:any) => {
   const fetchData = async () => {
     const response = await axios.get(`${config.apiUrl}/unlinked-project`, {
       params: {

src/App.tsx

@@ -1,13 +1,11 @@
-import logo from './logo.svg';
 import './App.css';
 import Header from './components/Header';
 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 Dashboard from 'components/Dashboard';
+import Dashboard from './components/Dashboard';
-import { Counter } from 'components/counterC';
+import Projects from './components/projects/Projects';
-import Projects from 'components/projects/Projects';
 
 
 function App() {

src/components/Dashboard.tsx

@@ -1,15 +1,14 @@
 import { Box, Card, CardContent, Grid, Paper, Typography, styled } from "@mui/material";
 import React, { useEffect } from "react";
-import { getLinkedProjects, useGetLinkedProjects } from "APIs/getLinkedProjects";
+// import { getLinkedProjects, useGetLinkedProjects } from "APIs/getLinkedProjects";
-import { useGetUnlinkedProjects } from "APIs/getUnlinkedProjects";
+// import { useGetUnlinkedProjects } from "APIs/getUnlinkedProjects";
-import { useGetProjectData } from "APIs/getProject";
+// import { useGetProjectData } from "APIs/getProject";
 
 export default function Dashboard(){
 
   const [linkedProjectData, setLinkedProjectData] = React.useState()
-  const { data: getLinkedProjectList } = useGetLinkedProjects();
+//   const { data: getLinkedProjectList } = useGetLinkedProjects();
-  const { data: getUnlinkedProjectList } = useGetUnlinkedProjects();
+//   const { data: getUnlinkedProjectList } = useGetUnlinkedProjects();
-  const { data: getProjectDataList } = useGetProjectData();
 
   const Item = styled(Paper)(({ theme }) => ({
     backgroundColor: '#1e1e1e',
@@ -18,7 +17,6 @@ export default function Dashboard(){
     textAlign: 'left',
    
   }));
-  console.log('sdfsds',getProjectDataList)
 
     return (
         <Paper square className="app-background app-screen-heights">
@@ -29,7 +27,7 @@ export default function Dashboard(){
                         <Grid container spacing={2} sx={{flexDirection:'row', flexWrap:'nowrap'}}>
                             <Grid item>
                             <Typography component="h2" variant="h2" style={{color: '#C00243', fontWeight: 'bold'}}>
-                                {getUnlinkedProjectList && getUnlinkedProjectList.length}
+                                {/* {getUnlinkedProjectList && getUnlinkedProjectList.length} */}
                             </Typography>
                             </Grid>
                             <Grid item>
@@ -45,7 +43,7 @@ export default function Dashboard(){
                     <Grid container sx={{flexDirection:'row', flexWrap:'nowrap'}}>
                             <Grid item>
                             <Typography component="h2" variant="h2" style={{color: '#E1AB1A', fontWeight: 'bold'}}>
-                                {getLinkedProjectList && getLinkedProjectList.length}
+                                {/* {getLinkedProjectList && getLinkedProjectList.length} */}
                             </Typography>
                             </Grid>
                             <Grid item>

src/components/Header.tsx

@@ -22,10 +22,10 @@ function Header() {
   const [anchorElNav, setAnchorElNav] = React.useState(null);
   const [anchorElUser, setAnchorElUser] = React.useState(null);
 
-  const handleOpenNavMenu = (event) => {
+  const handleOpenNavMenu = (event:any) => {
     setAnchorElNav(event.currentTarget);
   };
-  const handleOpenUserMenu = (event) => {
+  const handleOpenUserMenu = (event:any) => {
     setAnchorElUser(event.currentTarget);
   };
 

src/components/projects/Projects.tsx

@@ -1,17 +1,32 @@
 import React from "react";
 import ProjectList from "./ProjectsList";
-import { useGetProjectData } from "APIs/getProject";
+import { useGetProjectData } from "../../APIs/getProject";
-import ProjectFilter from "./ProjectFilter";
+// import ProjectFilter from "./ProjectFilter";
 import { useState } from "react";
 import { useEffect } from "react";
 import { Box, Card, CardContent, FormControl, Grid, InputLabel, MenuItem, Paper, Select, TextField } from "@mui/material";
+import { useMutation } from "@tanstack/react-query";
+// import { fetchProjects } from "APIs/ProjectScreenAPIs/getProject";
+// import { useGetProjectData } from 'APIs/getProject';
 
 
 export default function Projects(){
     const { data: getProjectDataList } = useGetProjectData();
-    const [selectedContractFilter, setSelectedContractFilter] = useState('All');
+    const [selectedContractFilter, setSelectedContractFilter] = useState<any>('All');
     const [searchBy, setSearchBy] = useState('');
 
+    // const { mutate } = useMutation(fetchProjects, {
+    //     onSuccess: (data) => {
+    //     },
+    //     onError: () => {
+    //       alert('There was an error');
+    //     },
+    //     onSettled: () => {},
+    //   });
+
+    // useEffect(()=>{
+
+    // })
     // useEffect(() => {
     //   setSelectedContractFilter(props.location.state ? props.location.state.type : 'All');
     //   setSearchBy('');

src/components/projects/ProjectsList.tsx

@@ -37,7 +37,7 @@ const columns = [
   {
     id: 'term',
     label: 'Term',
-    Cell: ({ row }) => (
+    Cell: (row:any) => (
       (row.perpetuity !== '' && row.perpetuity !== null)
         ? (row.perpetuity !== "Yes" ? <span>{row.effective_from1} - {row.effective_to1}</span> : `${row.effective_from1} - Perpetual`)
         : ""
@@ -46,7 +46,7 @@ const columns = [
   {
     id: 'link',
     label: 'Link',
-    Cell: ({ row }) => (
+    Cell: (row:any) => (
       (row.cid === null || row.cid === 0 || row.effective_from1 === null)
         ? <Button component={Link} to={{ pathname: `${process.env.PUBLIC_URL}/${row.id}/project-details` }} variant="contained"  size="small">Link</Button>
         : (row.published === 1
@@ -59,16 +59,20 @@ const columns = [
   },
 ];
 
+type Props={
+  projectData:any
+}
 
-export default function ProjectList({projectData}) {
+
+export default function ProjectList({projectData}:Props) {
   const [page, setPage] = React.useState(0);
   const [rowsPerPage, setRowsPerPage] = React.useState(10);
 
-  const handleChangePage = (event, newPage) => {
+  const handleChangePage = (event:any, newPage:any) => {
     setPage(newPage);
   };
 
-  const handleChangeRowsPerPage = (event) => {
+  const handleChangeRowsPerPage = (event:any) => {
     setRowsPerPage(+event.target.value);
     setPage(0);
   };
@@ -95,10 +99,10 @@ export default function ProjectList({projectData}) {
           <TableBody>
             {projectData && projectData
               .slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage)
-              .map((row) => {
+              .map((row:any) => {
                 return (
                   <TableRow hover role="checkbox" tabIndex={-1} key={row.code}>
-                    {columns.map((column) => {
+                    {columns.map((column:any) => {
                       const value = row[column.id];
                       return (
                         <TableCell key={column.id} 

tsconfig.json

@@ -0,0 +1,11 @@
+{
+  "compilerOptions": {
+    "target": "es2016",                                  /* Set the JavaScript language version for emitted JavaScript and include compatible library declarations. */
+    "module": "commonjs",                                /* Specify what module code is generated. */
+    "esModuleInterop": true,                             /* Emit additional JavaScript to ease support for importing CommonJS modules. This enables 'allowSyntheticDefaultImports' for type compatibility. */
+    "forceConsistentCasingInFileNames": true,            /* Ensure that casing is correct in imports. */
+    "strict": true,                                      /* Enable all strict type-checking options. */
+    "skipLibCheck": true  , 
+    "jsx": "react",                               /* Skip type checking all .d.ts files. */
+  }
+}