Develop2

src/common/FilterList.jsx

@@ -16,18 +16,19 @@ import {
   Checkbox,
   Grid,
 } from "@mui/material";
-import { useSelector } from "react-redux";
+import { useDispatch, useSelector } from "react-redux";
+import { useEffect } from "react";
 
 const FilterList = ({
   id,
   open,
   anchorEl,
   currentFilters,
-  updateFilters,
-  taskList,
   handleClose,
+  updateFilters,
 }) => {
   const classes = DatasetStyle();
+  const dispatch = useDispatch();
 
   const transcriptionLanguage = useSelector(
     (state) => state.getSupportedLanguages.transcriptionLanguage
@@ -36,23 +37,28 @@ const FilterList = ({
     (state) => state.getSupportedLanguages.translationLanguage
   );
 
-  const [selectedType, setSelectedType] = useState(currentFilters.taskType);
-  const [selectedStatus, setSelectedStatus] = useState(currentFilters.status);
-  const [selectedSrcLanguage, setSelectedSrcLanguage] = useState(
-    currentFilters.srcLanguage
-  );
-  const [selectedTgtLanguage, setSelectedTgtLanguage] = useState(
-    currentFilters.tgtLanguage
-  );
+  const [selectedType, setSelectedType] = useState([]);
+  const [selectedStatus, setSelectedStatus] = useState([]);
+  const [selectedSrcLanguage, setSelectedSrcLanguage] = useState([]);
+  const [selectedTgtLanguage, setSelectedTgtLanguage] = useState([]);
+
+  useEffect(() => {
+    setSelectedType(currentFilters.taskType);
+    setSelectedStatus(currentFilters.status);
+    setSelectedSrcLanguage(currentFilters.srcLanguage);
+    setSelectedTgtLanguage(currentFilters.tgtLanguage);
+  }, [currentFilters]);
 
-  const handleChange = (e) => {
-    updateFilters({
-      ...currentFilters,
-      taskType: selectedType,
-      status: selectedStatus,
-      srcLanguage: selectedSrcLanguage,
-      tgtLanguage: selectedTgtLanguage,
-    });
+  const handleChange = () => {
+    dispatch(
+      updateFilters({
+        ...currentFilters,
+        taskType: selectedType,
+        status: selectedStatus,
+        srcLanguage: selectedSrcLanguage,
+        tgtLanguage: selectedTgtLanguage,
+      })
+    );
     handleClose();
   };
 
@@ -124,12 +130,14 @@ const FilterList = ({
   };
 
   const handleChangeCancelAll = () => {
-    updateFilters({
-      taskType: [],
-      status: [],
-      srcLanguage: [],
-      tgtLanguage: [],
-    });
+    dispatch(
+      updateFilters({
+        taskType: [],
+        status: [],
+        srcLanguage: [],
+        tgtLanguage: [],
+      })
+    );
     handleClose();
   };
 

src/common/TabPanel.jsx

@@ -12,7 +12,7 @@ export const TabPanel = (props) => {
       aria-labelledby={`simple-tab-${index}`}
       {...other}
     >
-      {value === index && <Box sx={{ p: 3 }}>{children}</Box>}
+      {value === index && <Box sx={{ py: 3 }}>{children}</Box>}
     </div>
   );
 };

src/common/TableSearchPopover.jsx

@@ -1,5 +1,6 @@
 import React, { useState } from "react";
 import { Button, Divider, Popover, Box, TextField } from "@mui/material";
+import { useDispatch } from "react-redux";
 
 const TableSearchPopover = ({
   open,
@@ -9,24 +10,32 @@ const TableSearchPopover = ({
   currentFilters,
   updateFilters,
 }) => {
+  const dispatch = useDispatch();
+
   const [searchValue, setSearchValue] = useState(
     currentFilters[searchedCol.name]
   );
 
   const handleSubmitSearch = async (e) => {
     document.getElementById(searchedCol.name + "_btn").style.color = "#2C2799";
-    updateFilters({
-      ...currentFilters,
-      [searchedCol.name]: searchValue,
-    });
+
+    dispatch(
+      updateFilters({
+        ...currentFilters,
+        [searchedCol.name]: searchValue,
+      })
+    );
+
     handleClose();
   };
 
-  const handleClearSearch = (e) => {
-    updateFilters({
-      ...currentFilters,
-      [searchedCol.name]: "",
-    });
+  const handleClearSearch = () => {
+    dispatch(
+      updateFilters({
+        ...currentFilters,
+        [searchedCol.name]: "",
+      })
+    );
     setSearchValue("");
     document.getElementById(searchedCol.name + "_btn").style.color =
       "rgba(0, 0, 0, 0.54)";

src/common/UnsubscribeHeader.jsx

@@ -0,0 +1,40 @@
+import { AppBar, Box, Container, Toolbar, Typography } from "@mui/material";
+import React from "react";
+import { useNavigate } from "react-router-dom";
+import { headerStyle } from "styles";
+
+const UnsubscribeHeader = () => {
+  const classes = headerStyle();
+  const navigate = useNavigate();
+
+  return (
+    <AppBar position="fixed">
+      <Container maxWidth="xl">
+        <Toolbar disableGutters className={classes.toolbar}>
+          <Box
+            className={classes.logoContainer}
+            onClick={() => navigate("/login")}
+          >
+            <Box className={classes.imageBox}>
+              <img
+                src={"Chitralekha_Logo_Transparent.png"}
+                alt="ai4bharat"
+                className={classes.Logo}
+              />
+              <Typography variant="h4" sx={{ color: "black" }}>
+                Chitralekha
+              </Typography>
+            </Box>
+            <Box>
+              <Typography className={classes.poweredByText}>
+                Powered by EkStep Foundation
+              </Typography>
+            </Box>
+          </Box>
+        </Toolbar>
+      </Container>
+    </AppBar>
+  );
+};
+
+export default UnsubscribeHeader;