Merge branch 'release-1.0.0' of github.com:tekdi/shiksha-workspace

tekdi · Dec 2, 2024 · cbf740d · cbf740d
2 parents 6d8f4d1 + 85a239c
commit cbf740d
Show file tree

Hide file tree

Showing 11 changed files with 275 additions and 91 deletions.
diff --git a/package.json b/package.json
@@ -38,6 +38,7 @@
     "next-transpile-modules": "^10.0.1",
     "react": "^18",
     "react-dom": "^18",
+    "react-hot-toast": "^2.4.1",
     "reflect-metadata": "^0.1.13",
     "svg2img": "^1.0.0-beta.2",
     "url": "^0.11.3",

diff --git a/src/components/KaTableComponent.tsx b/src/components/KaTableComponent.tsx
@@ -237,10 +237,10 @@ const KaTableComponent: React.FC<CustomTableProps> = ({ data, columns, tableTitl
             else if(props.column.key === "create-by")
             {
               console.log('props.rowData ====>', props.rowData)
-              if(props.rowData.creator || props.rowData.author)
+              if(props?.rowData?.creator || props?.rowData?.author)
               return (
                 <Typography sx={{ fontSize: '14px', fontWeight: 500 }} variant="body2" color={'#987100'}>
-                  {props.rowData.creator || props.rowData.author}
+                  {props?.rowData?.creator || props?.rowData?.author}
                 </Typography>
               )
               else

diff --git a/src/components/Layout.tsx b/src/components/Layout.tsx
@@ -1,6 +1,9 @@
-import React from "react";
-import { Box } from "@mui/material";
+import React, { useEffect, useState } from "react";
+import { Box, Button } from "@mui/material";
 import Sidebar from "./SideBar";
+import { Toaster, toast } from "react-hot-toast";
+import CloseIcon from '@mui/icons-material/Close';
+import PersonalVideoIcon from '@mui/icons-material/PersonalVideo';
 
 interface LayoutProps {
   children: React.ReactNode;
@@ -9,14 +12,85 @@ interface LayoutProps {
 }
 
 const Layout: React.FC<LayoutProps> = ({ children, selectedKey, onSelect }) => {
+  const [toastShown, setToastShown] = useState(false);
+
+  useEffect(() => {
+    const handleResize = () => {
+      if (window.innerWidth < 768 && !toastShown) {
+        toast((t) => (
+          <Box style={{ display: "flex", alignItems: "center", gap:'15px', justifyContent: "space-between" }}>
+            <Box sx={{display:'flex', alignItems:'flex-start', gap:'15px'}}>
+              <PersonalVideoIcon sx={{ color:'#FFFFFF'}}/>
+              <Box sx={{ fontSize: '14px', color: '#F4F4F4', fontWeight: '500' }}>Switch to desktop for a better experience</Box>
+            </Box>
+            <Button
+              onClick={() => toast.dismiss(t.id)}
+              style={{
+                marginLeft: "10px",
+                background: "transparent",
+                border: "none",
+                color: "#fff",
+                cursor: "pointer",
+              }}
+            >
+              <CloseIcon/>
+            </Button>
+          </Box>
+        ), {
+          position: "top-center",
+          duration: Infinity,
+          style: {
+            background: "green",
+            color: "#fff",
+          },
+        });
+        setToastShown(true); // Mark toast as shown
+      }
+    };
+
+    handleResize();
+
+    window.addEventListener("resize", handleResize);
+
+    return () => {
+      window.removeEventListener("resize", handleResize);
+    };
+  }, [toastShown]);
+
   return (
-    <Box display="flex" sx={{ overflowX: 'hidden !important' }} minHeight={"100vh"}>
-      <Box sx={{ maxHeight: '132vh', minHeight: '100vh', '@media (max-width: 900px)': { position: 'absolute', top:"3px" }, '@media (min-width: 900px)': { background: "linear-gradient(to bottom, white, #F8EFDA)", position:'fixed' } }}>
+    <Box display="flex" sx={{ overflowX: "hidden !important" }} minHeight="100vh">
+      <Toaster />
+      <Box
+        sx={{
+          maxHeight: "132vh",
+          minHeight: "100vh",
+          "@media (max-width: 900px)": {
+            position: "absolute",
+            top: "3px",
+          },
+          "@media (min-width: 900px)": {
+            background: "linear-gradient(to bottom, white, #F8EFDA)",
+            position: "fixed",
+          },
+        }}
+      >
         <Sidebar selectedKey={selectedKey} onSelect={onSelect} />
       </Box>
-      <Box sx={{ flex: 1, background: '#F3F5F8', '@media (min-width: 900px)': { width: 'calc(100% - 251px)', marginLeft:'284px' }, width: '100%' }}>{children}</Box>
+      <Box
+        sx={{
+          flex: 1,
+          background: "#F3F5F8",
+          "@media (min-width: 900px)": {
+            width: "calc(100% - 251px)",
+            marginLeft: "284px",
+          },
+          width: "100%",
+        }}
+      >
+        {children}
+      </Box>
     </Box>
-  )
+  );
 };
 
-export default Layout;
+export default Layout;
diff --git a/src/components/SearchBox.tsx b/src/components/SearchBox.tsx
@@ -17,9 +17,12 @@ import {
 } from "@mui/material";
 import SearchIcon from "@mui/icons-material/Search";
 import ClearIcon from "@mui/icons-material/Clear";
-import { debounce } from "@/utils/Helper";
-import { getPrimaryCategory } from "@/services/ContentService";
-import { SortOptions , StatusOptions} from "@/utils/app.constant";
+import { debounce, getOptionsByCategory } from "@/utils/Helper";
+import {
+  getFrameworkDetails,
+  getPrimaryCategory,
+} from "@/services/ContentService";
+import { SortOptions, StatusOptions } from "@/utils/app.constant";
 
 export interface SearchBarProps {
   onSearch: (value: string) => void;
@@ -29,7 +32,10 @@ export interface SearchBarProps {
   onFilterChange?: (selectedFilters: string[]) => void;
   onSortChange?: (sortBy: string) => void;
   onStatusChange?: (status: string) => void;
-  allContents?: boolean
+  onStateChange?: (state: string) => void;
+
+  allContents?: boolean;
+  discoverContents?: boolean;
 }
 
 const sortOptions = SortOptions;
@@ -41,13 +47,17 @@ const SearchBox: React.FC<SearchBarProps> = ({
   onFilterChange,
   onSortChange,
   onStatusChange,
-  allContents=false
+  onStateChange,
+  allContents = false,
+  discoverContents = false,
 }) => {
   const theme = useTheme<any>();
   const [searchTerm, setSearchTerm] = useState(value);
   const [selectedFilters, setSelectedFilters] = useState<string[]>([]);
   const [sortBy, setSortBy] = useState<string>("Modified On");
   const [status, setStatus] = useState<string>("All");
+  const [state, setState] = useState<string>("All");
+  const [stateOptions, setStateOptions] = useState<string[]>([]);
 
   const [primaryCategory, setPrimaryCategory] = useState<string[]>();
 
@@ -70,6 +80,27 @@ const SearchBox: React.FC<SearchBarProps> = ({
   }, []);
 
   const filterOptions = primaryCategory;
+  useEffect(() => {
+    const fetchStates = async (stateName?: string) => {
+      try {
+        const data = await getFrameworkDetails();
+        const framework = data?.result?.framework;
+
+        const states = await getOptionsByCategory(framework, "state");
+
+        {
+          const stateNames = states.map((state: any) => state.name);
+          setStateOptions(["All", ...stateNames]);
+
+          console.log("stateNames", stateNames);
+        }
+      } catch (err) {
+        console.error(err);
+      } finally {
+      }
+    };
+    fetchStates();
+  }, []);
 
   const handleSearchClear = () => {
     onSearch("");
@@ -87,17 +118,12 @@ const SearchBox: React.FC<SearchBarProps> = ({
     const searchTerm = event.target.value;
     setSearchTerm(searchTerm);
 
-    if(searchTerm.length>=3)
-    {
+    if (searchTerm.length >= 3) {
+      handleSearch(searchTerm);
+    } else if (searchTerm.length === 0 || searchTerm === "") {
+      handleSearchClear();
       handleSearch(searchTerm);
     }
-   else if(searchTerm.length===0|| searchTerm==="")
-    {
-
-      handleSearchClear()
-      handleSearch(searchTerm)
-    }
-
   };
 
   const handleFilterChange = (event: SelectChangeEvent<string[]>) => {
@@ -117,6 +143,11 @@ const SearchBox: React.FC<SearchBarProps> = ({
     setStatus(value);
     onStatusChange && onStatusChange(value);
   };
+  const handleStateChange = (event: SelectChangeEvent<string>) => {
+    const value = event.target.value as string;
+    setState(value);
+    onStateChange && onStateChange(value);
+  };
   return (
     <Box sx={{ mx: 2 }}>
       <Grid container spacing={2} alignItems="center">
@@ -159,7 +190,13 @@ const SearchBox: React.FC<SearchBarProps> = ({
           </Box>
         </Grid>
 
-        <Grid item xs={12} md={12} lg={allContents ? 2 : 3} justifySelf={"end"}>
+        <Grid
+          item
+          xs={12}
+          md={12}
+          lg={allContents || discoverContents ? 2 : 3}
+          justifySelf={"end"}
+        >
           <FormControl sx={{ width: "100%", mt: 2 }}>
             <InputLabel sx={{ color: "#000000DB" }}>Filter By</InputLabel>
             <Select
@@ -187,7 +224,9 @@ const SearchBox: React.FC<SearchBarProps> = ({
                     color: "#000",
                     "& .MuiCheckbox-root": {
                       color: "#000",
-                      "&.Mui-checked, &.MuiCheckbox-indeterminate": { color: "#000" },
+                      "&.Mui-checked, &.MuiCheckbox-indeterminate": {
+                        color: "#000",
+                      },
                     },
                     "& .MuiSvgIcon-root": { fontSize: "20px" },
                   }}
@@ -196,7 +235,9 @@ const SearchBox: React.FC<SearchBarProps> = ({
                     checked={selectedFilters.indexOf(option) > -1}
                     sx={{
                       color: "#000",
-                      "&.Mui-checked, &.MuiCheckbox-indeterminate": { color: "#000" },
+                      "&.Mui-checked, &.MuiCheckbox-indeterminate": {
+                        color: "#000",
+                      },
                     }}
                   />
                   <ListItemText primary={option} />
@@ -206,7 +247,13 @@ const SearchBox: React.FC<SearchBarProps> = ({
           </FormControl>
         </Grid>
 
-        <Grid item xs={12} md={12} lg={allContents? 2 : 3} justifySelf={"end"}>
+        <Grid
+          item
+          xs={12}
+          md={12}
+          lg={allContents || discoverContents ? 2 : 3}
+          justifySelf={"end"}
+        >
           <FormControl sx={{ width: "100%", mt: 2 }}>
             <InputLabel>Sort By</InputLabel>
             <Select
@@ -241,9 +288,26 @@ const SearchBox: React.FC<SearchBarProps> = ({
             </FormControl>
           </Grid>
         )}
+        {discoverContents && (
+          <Grid item xs={12} md={12} lg={2} justifySelf={"end"}>
+            <FormControl sx={{ width: "100%", mt: 2 }}>
+              <InputLabel>Filter By State</InputLabel>
+              <Select
+                value={state}
+                onChange={handleStateChange}
+                input={<OutlinedInput label="Filter By State" />}
+              >
+                {stateOptions?.map((option: any) => (
+                  <MenuItem key={option} value={option}>
+                    {option}
+                  </MenuItem>
+                ))}
+              </Select>
+            </FormControl>
+          </Grid>
+        )}
       </Grid>
     </Box>
-
   );
 };
 

diff --git a/src/components/players/PlayerConfig.js b/src/components/players/PlayerConfig.js
@@ -19,7 +19,7 @@ export const playerConfig = {
     userData: { firstName: "Guest", lastName: "User"},
 
     //telemetry
-    host: "https://telemetry.prathamdigital.org",
+    host: "",
     endpoint: "/v1/telemetry",
   },
   config: {
@@ -82,7 +82,7 @@ export const V1PlayerConfig = {
       bgImage: "assets/icons/splacebackground_1.png",
       webLink: "",
     },
-    apislug: "/action",
+    apislug: "",
     repos: ["/sunbird-plugins/renderer"],
     plugins: [
       {

diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx
@@ -7,8 +7,12 @@ import "../styles/global.css";
 
 import { AppProps } from "next/app";
 import customTheme from "@/styles/CustomTheme";
+import { useEffect, useState } from "react";
 
 export default function App({ Component, pageProps }: AppProps) {
+
+
+
   return (
     <CssVarsProvider theme={customTheme}>
       <Component {...pageProps} />;

diff --git a/src/pages/workspace/content/create/index.tsx b/src/pages/workspace/content/create/index.tsx
@@ -127,7 +127,7 @@ const CreatePage = () => {
         >
           <Grid container spacing={2}>
             {cardData.map((card, index) => (
-              <Grid item xs={12} sm={6} md={4} lg={4} xl={3} key={index}>
+              <Grid item xs={12} sm={6} md={4} lg={4} xl={4} key={index}>
                 <Paper
                   key={index}
                   elevation={3}