Filter API calls and logic

src/APIs/ProjectScreenAPIs/getAutoLinkedProjectsAssets.js

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

src/APIs/ProjectScreenAPIs/getLinkedProject.js

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

src/APIs/ProjectScreenAPIs/getProject.js

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

src/APIs/ProjectScreenAPIs/getPublishedProject.js

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

src/APIs/ProjectScreenAPIs/getUnlinkedProject.js

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

src/components/projects/ProjectFilter.js

@@ -5,7 +5,7 @@ export default function ProjectFilter(){
 
     return(
         <>
-         <Card style={{margin: '1%'}}>
+         <Card style={{margin: '1%', backgroundColor:'rgb(24 24 23)'}}>
             <CardContent>
                 <FormControl className="select-field" variant="standard" style={{marginTop: '1%'}}>
                     <InputLabel htmlFor="contract-list" >Select Contract</InputLabel>
@@ -28,6 +28,7 @@ export default function ProjectFilter(){
                     variant="standard"
                     label="Search By"
                     value={''}
+                    sx={{input: { color: 'red' }}}
                     placeholder="Search By Title, Project Title, Contract No, Asset Title, Track Grid, ISRC"
                     // onChange={props.handleSearchByChange}
                     style={{marginLeft: '10%', width: '45%'}}
@@ -39,8 +40,3 @@ export default function ProjectFilter(){
         </>
     )
 }
-
-/* 
-.select-field {
-  width : 35%;
-} */

src/components/projects/Projects.js

@@ -2,13 +2,153 @@ import React from "react";
 import ProjectList from "./ProjectsList";
 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";
+
 
 export default function Projects(){
     const { data: getProjectDataList } = useGetProjectData();
+    const [selectedContractFilter, setSelectedContractFilter] = useState('All');
+    const [searchBy, setSearchBy] = useState('');
+  
+    // useEffect(() => {
+    //   setSelectedContractFilter(props.location.state ? props.location.state.type : 'All');
+    //   setSearchBy('');
+    //   try {
+    //     switch (props.location.state.type) {
+    //       case 'linked':
+    //         props.fetchLinkedProject(searchBy, props.config);
+    //         break;
+    //       case 'unlinked':
+    //         props.fetchUnLinkedProject(searchBy, props.config);
+    //         break;
+    //       case 'published':
+    //         props.fetchPublishedProject(searchBy, props.config);
+    //         break;
+    //       case 'autolinked':
+    //         props.fetchAutoLinkedProjectAssets(searchBy, props.config);
+    //         break;
+    //       default:
+    //         props.fetchProjects(searchBy, props.config);
+    //         break;
+    //     }
+    //   } catch (e) {
+    //     props.fetchProjects(searchBy, props.config);
+    //   }
+    // }, [props.location.state, searchBy, props.config, props]);
+  
+    // const handleContractFilterChange = (event) => {
+    //   setSelectedContractFilter(event.target.value);
+    //   setSearchBy('');
+    //   try {
+    //     switch (event.target.value) {
+    //       case 'linked':
+    //         props.fetchLinkedProject(searchBy, props.config);
+    //         break;
+    //       case 'unlinked':
+    //         props.fetchUnLinkedProject(searchBy, props.config);
+    //         break;
+    //       case 'published':
+    //         props.fetchPublishedProject(searchBy, props.config);
+    //         break;
+    //       case 'autolinked':
+    //         props.fetchAutoLinkedProjectAssets(searchBy, props.config);
+    //         break;
+    //       default:
+    //         props.fetchProjects(searchBy, props.config);
+    //         break;
+    //     }
+    //   } catch (e) {
+    //     props.fetchProjects(searchBy, props.config);
+    //   }
+    // };
+  
+    // const handleSearchByChange = (event) => {
+    //   setSearchBy(event.target.value);
+    //   try {
+    //     switch (selectedContractFilter) {
+    //       case 'linked':
+    //         props.fetchLinkedProject(searchBy, props.config);
+    //         break;
+    //       case 'unlinked':
+    //         props.fetchUnLinkedProject(searchBy, props.config);
+    //         break;
+    //       case 'published':
+    //         props.fetchPublishedProject(searchBy, props.config);
+    //         break;
+    //       case 'autolinked':
+    //         props.fetchAutoLinkedProjectAssets(searchBy, props.config);
+    //         break;
+    //       default:
+    //         props.fetchProjects(searchBy, props.config);
+    //         break;
+    //     }
+    //   } catch (e) {
+    //     props.fetchProjects(searchBy, props.config);
+    //   }
+    // };
+  
+    // let projects = [];
+    // console.log("Console in Props List :", props);
+    // try {
+    //   switch (selectedContractFilter) {
+    //     case 'linked':
+    //       projects = props.linkedProjects ? props.linkedProjects : [];
+    //       break;
+    //     case 'unlinked':
+    //       projects = props.unLinkedProjects ? props.unLinkedProjects : [];
+    //       break;
+    //     case 'published':
+    //       projects = props.publishedProjects ? props.publishedProjects : [];
+    //       break;
+    //     case 'autolinked':
+    //       projects = props.autoLinkedProjects ? props.autoLinkedProjects : [];
+    //       break;
+    //     default:
+    //       projects = props.projects ? props.projects : [];
+    //       break;
+    //   }
+    // } catch (e) {
+    //   projects = props.projects ? props.projects : [];
+    // }
+    
     
     return(
         <>
-        <ProjectFilter/>
+        <Card style={{margin: '1%', backgroundColor:'rgb(24 24 23)'}}>
+            <CardContent>
+                <FormControl className="select-field" variant="standard" style={{marginTop: '1%'}}>
+                    <InputLabel htmlFor="contract-list" >Select Contract</InputLabel>
+                    <Select
+                        sx={{input: { color: 'white' }}}
+                        value={''}
+                        // onChange={props.handleContractFilterChange}
+                        inputProps={{
+                        name: 'contracts',
+                        id: 'contract-type',
+                        }}
+                    >
+                        <MenuItem value="All">All</MenuItem>
+                        <MenuItem value="unlinked">Contract Pending</MenuItem>
+                        <MenuItem value="linked">Contract Linked</MenuItem>
+                        <MenuItem value="published">Contract Published</MenuItem>
+                    </Select>
+                </FormControl>
+                <TextField
+                    id="standard-name"
+                    variant="standard"
+                    label="Search By"
+                    value={''}
+                    sx={{input: { color: 'white' }}}
+                    placeholder="Search By Title, Project Title, Contract No, Asset Title, Track Grid, ISRC"
+                    // onChange={props.handleSearchByChange}
+                    style={{marginLeft: '10%', width: '45%'}}
+                    margin="normal"
+                />
+            </CardContent>
+        </Card>
+       
         <ProjectList projectData={getProjectDataList}/>
         </>
     )