project shifted from .js to .tsx

2023-12-15 12:26:53 +05:30 · 2023-12-15 12:26:53 +05:30 · f93488aa71
commit f93488aa71
parent fff24db214
16 changed files with 110 additions and 44 deletions
--- a/jsconfig.json
+++ b/jsconfig.json
@ -1,7 +0,0 @@
-{
-    "compilerOptions": {
-      "baseUrl": "./src",
-      "checkJs": true,
-      "jsx": "react"
-    }
-  }
--- a/package-lock.json
+++ b/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",
-      "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.9.5.tgz",
-      "integrity": "sha512-1FXk9E2Hm+QzZQ7z+McJiHL4NW1F2EzMu9Nq9i3zAaGqibafqYwCVU6WyWAuyQRRzOlxou8xZSyXLEN8oKj24g==",
-      "peer": true,
+      "version": "5.3.3",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.3.3.tgz",
+      "integrity": "sha512-pXWcraxM0uxAS+tN0AG/BF2TyqmHO014Z070UsJ+pFvYuRSq8KH8DmWpnbXe0pEPDHXZV3FcAbJkijJ5oNEnWw==",
      "bin": {
        "tsc": "bin/tsc",
        "tsserver": "bin/tsserver"
      },
      "engines": {
-        "node": ">=4.2.0"
+        "node": ">=14.17"
      }
    },
    "node_modules/unbox-primitive": {
--- a/package.json
+++ b/package.json
@ -43,5 +43,8 @@
      "last 1 firefox version",
      "last 1 safari version"
    ]
+  },
+  "devDependencies": {
+    "typescript": "^5.3.3"
  }
 }
--- a/public/config/config.json
+++ b/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"
+      }
+    ]
+}
--- a/src/APIs/ProjectScreenAPIs/getAutoLinkedProjectsAssets.tsx
+++ b/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: {
--- a/src/APIs/ProjectScreenAPIs/getLinkedProject.tsx
+++ b/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: {
--- a/src/APIs/ProjectScreenAPIs/getProject.tsx
+++ b/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
      }
--- a/src/APIs/ProjectScreenAPIs/getPublishedProject.tsx
+++ b/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: {
--- a/src/APIs/ProjectScreenAPIs/getUnlinkedProject.tsx
+++ b/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: {
--- a/src/APIs/getProject.tsx
+++ b/src/APIs/getProject.tsx
--- a/src/App.tsx
+++ b/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 { Counter } from 'components/counterC';
-import Projects from 'components/projects/Projects';
+import Dashboard from './components/Dashboard';
+import Projects from './components/projects/Projects';


 function App() {
--- a/src/components/Dashboard.tsx
+++ b/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 { useGetUnlinkedProjects } from "APIs/getUnlinkedProjects";
-import { useGetProjectData } from "APIs/getProject";
+// import { getLinkedProjects, useGetLinkedProjects } from "APIs/getLinkedProjects";
+// import { useGetUnlinkedProjects } from "APIs/getUnlinkedProjects";
+// import { useGetProjectData } from "APIs/getProject";

 export default function Dashboard(){

  const [linkedProjectData, setLinkedProjectData] = React.useState()
-  const { data: getLinkedProjectList } = useGetLinkedProjects();
-  const { data: getUnlinkedProjectList } = useGetUnlinkedProjects();
-  const { data: getProjectDataList } = useGetProjectData();
+//   const { data: getLinkedProjectList } = useGetLinkedProjects();
+//   const { data: getUnlinkedProjectList } = useGetUnlinkedProjects();

  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>
--- a/src/components/Header.tsx
+++ b/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);
  };

--- a/src/components/projects/Projects.tsx
+++ b/src/components/projects/Projects.tsx
@ -1,17 +1,32 @@
 import React from "react";
 import ProjectList from "./ProjectsList";
-import { useGetProjectData } from "APIs/getProject";
-import ProjectFilter from "./ProjectFilter";
+import { useGetProjectData } from "../../APIs/getProject";
+// 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('');
--- a/src/components/projects/ProjectsList.tsx
+++ b/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} 
--- a/tsconfig.json
+++ b/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. */
+  }
+}