From 50694185ef97563bae9190cbaf27f48898754e52 Mon Sep 17 00:00:00 2001
From: Mahesh Mahajan <mahajanmahesh935@gmail.com>
Date: Wed, 3 Apr 2024 11:16:08 +0530
Subject: [PATCH] Task : #216126 Content search API integration

---
 packages/nulp_elite/src/components/search.js |  52 ++-
 packages/nulp_elite/src/pages/Contents.js    | 370 ++++---------------
 2 files changed, 120 insertions(+), 302 deletions(-)

diff --git a/packages/nulp_elite/src/components/search.js b/packages/nulp_elite/src/components/search.js
index 99464353..10a7a8a3 100644
--- a/packages/nulp_elite/src/components/search.js
+++ b/packages/nulp_elite/src/components/search.js
@@ -1,14 +1,48 @@
-import React from "react";
-import { Button } from '@mui/base/Button';
-import Box from '@mui/material/Box';
+import React, { useState } from "react";
+import { Button } from "@mui/base/Button";
+import Box from "@mui/material/Box";
 
+function Search({ onSearch }) {
+  const [query, setQuery] = useState("");
+
+  const handleSearchClick = () => {
+    onSearch(query);
+  };
 
-export default function Search({  }) {
-  
   return (
-      <Box style={{display: 'flex', alignItems: 'center', marginBottom: '1rem' }}>
-        <input type="text" placeholder="Search..." style={{ width:'100%',flex: 1, marginRight: '0.5rem', padding: '0.5rem', borderRadius: '4px', border: '1px solid #CACACA' }} />
-        <Button style={{ padding:'11px 9px', borderRadius: '4px', backgroundColor: '#004367', color: 'white', border: '1px', cursor: 'pointer' ,fontSize:'12px'}}>Search</Button>
-      </Box>
+    <Box
+      style={{ display: "flex", alignItems: "center", marginBottom: "1rem" }}
+    >
+      <input
+        type="text"
+        // value={query}
+        onChange={(e) => setQuery(e.target.value)}
+        placeholder="Search..."
+        style={{
+          width: "100%",
+          flex: 1,
+          marginRight: "0.5rem",
+          padding: "0.5rem",
+          borderRadius: "4px",
+          border: "1px solid #CACACA",
+        }}
+      />
+      <Button
+        onClick={handleSearchClick}
+        style={{
+          padding: "11px 9px",
+          borderRadius: "4px",
+          backgroundColor: "#004367",
+          color: "white",
+          border: "1px",
+          cursor: "pointer",
+          fontSize: "12px",
+        }}
+      >
+        Search
+      </Button>
+    </Box>
   );
 }
+
+export default Search;
diff --git a/packages/nulp_elite/src/pages/Contents.js b/packages/nulp_elite/src/pages/Contents.js
index 239bc34d..ac2bf21d 100644
--- a/packages/nulp_elite/src/pages/Contents.js
+++ b/packages/nulp_elite/src/pages/Contents.js
@@ -1,316 +1,100 @@
 import React, { useState, useEffect } from "react";
 import axios from "axios";
-import { contentService } from "@shiksha/common-lib";
-import URLSConfig from "../configs/urlConfig.json";
-import { useTranslation } from "react-i18next";
-import{changeLanguage} from "i18next";
-import { frameworkService } from "@shiksha/common-lib";
-
-import {
-  Layout,
-  IconByName,
-  SearchLayout,
-  FilterButton,
-  overrideColorTheme,
-} from "@shiksha/common-lib";
-import {
-  NativeBaseProvider,
-  Box,
-  Stack,
-  VStack,
-  Text,
-  HStack,
-  Button,
-  extendTheme,
-  Actionsheet,
-  ScrollView,
-  Heading,
-  useDisclose,
-  Menu,
-  Image,
-} from "native-base";
-
-import { Link, useParams,useNavigate } from "react-router-dom";
+import Search from "../components/search";
+import getAllContents from "../services/contentService";
 
 const Contents = () => {
-   const { t } = useTranslation();
-  const [search, setSearch] = React.useState(true);
-  const [searchState, setSearchState] = React.useState(false);
-  // const theme = extendTheme(DEFAULT_THEME);
-  const colors = "";
-  const [sortArray, setSortArray] = React.useState([]);
-
-  const [data, setData] = useState([]);
-  const [filters, setFilters] = useState({});
+  const [searchResults, setSearchResults] = useState([]);
   const [isLoading, setIsLoading] = useState(false);
   const [error, setError] = useState(null);
-  const navigate = useNavigate();
 
-  // Example of API Call   
-  useEffect(() => {  
-    fetchDataFramework();
-    fetchData();
-  }, [filters]);
-
-  const fetchData = async () => {
+  const handleSearch = async (query) => {
     setIsLoading(true);
     setError(null);
-    // Filters for API
-    let data = JSON.stringify({
-      request: {
-        filters: {
-          status: ["Live"],
-          contentType: [
-            "Collection",
-            "TextBook",
-            "Course",
-            "LessonPlan",
-            "Resource",
-            "SelfAssess",
-            "PracticeResource",
-            "LearningOutcomeDefinition",
-            "ExplanationResource",
-            "ExperientialResource",
-            "eTextBook",
-            "TVLesson",
+    try {
+      const url =
+        "http://localhost:3000/api/content/v1/search?orgdetails=orgName,email&licenseDetails=name,description,url";
+      const data = {
+        request: {
+          filters: {
+            primaryCategory: [
+              "Collection",
+              "Resource",
+              "Content Playlist",
+              "Course",
+              "Course Assessment",
+              "Digital Textbook",
+              "eTextbook",
+              "Explanation Content",
+              "Learning Resource",
+              "Lesson Plan Unit",
+              "Practice Question Set",
+              "Teacher Resource",
+              "Textbook Unit",
+              "LessonPlan",
+              "FocusSpot",
+              "Learning Outcome Definition",
+              "Curiosity Questions",
+              "MarkingSchemeRubric",
+              "ExplanationResource",
+              "ExperientialResource",
+              "Practice Resource",
+              "TVLesson",
+              "Course Unit",
+              "Exam Question",
+            ],
+            visibility: ["Default", "Parent"],
+          },
+          limit: 100,
+          query: query,
+          sort_by: {
+            lastPublishedOn: "desc",
+          },
+          fields: [
+            "name",
+            "appIcon",
+            "mimeType",
+            "gradeLevel",
+            "identifier",
+            "medium",
+            "pkgVersion",
+            "board",
+            "subject",
+            "resourceType",
+            "primaryCategory",
+            "contentType",
+            "channel",
+            "organisation",
+            "trackable",
           ],
+          facets: [
+            "se_boards",
+            "se_gradeLevels",
+            "se_subjects",
+            "se_mediums",
+            "primaryCategory",
+          ],
+          offset: 0,
         },
-        offset: null,
-        sort_by: {
-          lastUpdatedOn: "desc",
-        },
-      },
-    });
-
-    // Headers
-    const headers = {
-      "Content-Type": "application/json",
-    };
-
-    const url = `http://localhost:3000/content/${URLSConfig.URLS.CONTENT.SEARCH}?orgdetails=orgName,email`;
-    try {
-      const response = await contentService.getAllContents(
-        url,
-        data,
-        headers
-      );
-      console.log(response.data.result);
-      setData(response.data.result);
-    } catch (error) {
-      console.log("error---",error);
-
-      setError(error.message);
-    } finally {
-      console.log("finally---");
-      setIsLoading(false);
-    }
-  };
-
-
-
-  const fetchDataFramework = async () => {
-    setIsLoading(true);
-    setError(null);
+      };
 
-    // Headers
-    const headers = {
-      "Content-Type": "application/json",
-      Cookie: `connect.sid=${getCookieValue("connect.sid")}`,
-    };
-    const url = `https://nulp.niua.org/api/channel/v1/read/0130701891041689600`;
-    try {
-      const response = await frameworkService.getChannel(url, headers);
-      console.log("channel---",response.data.result);
-      setData(response.data.result);
+      const response = await getAllContents(url, data);
+      setSearchResults(response.data.result);
     } catch (error) {
+      console.error("Error fetching search results:", error);
       setError(error.message);
     } finally {
       setIsLoading(false);
     }
-    try {
-      const url = `http://localhost:3000/api/framework/v1/read/nulp?categories=board,gradeLevel,medium,class,subject`;
-
-      const response = await frameworkService.getSelectedFrameworkCategories(
-        url,
-        headers
-      );
-      console.log("nulp---",response.data.result);
-      setData(response.data.result);
-    } catch (error) {
-      console.log("nulp--  error-",error);
-
-      setError(error.message);
-    } finally {
-      console.log("nulp finally---");
-
-      setIsLoading(false);
-    }
-  }
-
-  const navigateToCourse = () => {};
-  const handleFilterChange = (field, value) => {
-    setFilters({ ...filters, [field]: value });
-  };
-
-  const getCookieValue = (name) => {
-    const cookies = document.cookie.split("; ");
-    for (let i = 0; i < cookies.length; i++) {
-      const cookie = cookies[i];
-      const [cookieName, cookieValue] = cookie.split("=");
-      if (cookieName === name) {
-        return cookieValue;
-      }
-    }
-    return "";
   };
 
-  // const changeLanguage = (lng) => {
-  //   changeLanguage(lng);
-   
-  // };
-  
   return (
-    <Layout
-      isDisabledAppBar={true}
-      _header={{
-        rightIcon: (
-          <HStack paddingBottom={"25px"}>
-            <IconByName name="CloseCircleFillIcon" />
-          </HStack>
-        ),
-        customeComponent: (
-          <Box flex={1} minH={"40px"}>
-            <HStack>
-              <VStack position={"relative"} padding="10px" top={"10px"}>
-                <Menu
-                  w="160"
-                  trigger={(triggerProps) => {
-                    return (
-                      <Button
-                        alignSelf="center"
-                        variant="solid"
-                        {...triggerProps}
-                      >
-                        <IconByName size="20px" name="MenuFillIcon" />
-                      </Button>
-                    );
-                  }}
-                >
-                   <Menu.Item onPress={(item) => navigate("/help")}>
-                    {t("HELP")}
-                  </Menu.Item>
-                  <Menu.Item onPress={(item) => navigate("/logoff")}>
-                    {t("LOGOUT")}                    
-                  </Menu.Item>
-                </Menu>
-              </VStack>
-              <VStack></VStack>
-              <VStack>
-                <Image
-                  source={require("../assets/nulp_logo.jpeg")}
-                  alt=""
-                  size="sm"
-                />
-              </VStack>
-            </HStack>
-
-            {/* <Right> */}
-            <Box position={"absolute"} right={"20px"} top={"10px"}>
-              <Menu
-                w="160"
-                trigger={(triggerProps) => {
-                  return (
-                    <Button
-                      alignSelf="center"
-                      variant="solid"
-                      {...triggerProps}
-                    >
-                      {t("LANGUAGE")}
-                    </Button>
-                  );
-                  // }}>
-                }}
-              >
-                <Menu.Item onPress={(item) => changeLanguage('en')}>{t("ENGLISH")}</Menu.Item>
-                <Menu.Item onPress={(item) => changeLanguage('hi')}>{t("HINDI")}</Menu.Item>
-              </Menu>
-            </Box>
-          </Box>
-        ),
-      }}
-      subHeader={
-        <Link to="/" style={{ textDecoration: "none" }}>
-          <HStack space="4" justifyContent="space-between">
-            <VStack>
-              <SearchLayout
-                {...{
-                  search,
-                  setSearch,
-                  // minStringLenght: 3,
-                  notFoundMessage: "TYPE_TO_START_SEARCHING_LEARNING",
-                  onCloseSearch: setSearchState,
-                }}
-              ></SearchLayout>
-            </VStack>
-          </HStack>
-        </Link>
-      }
-      _subHeader={{ size: "20px" }}
-      _footer={{
-        menues: [
-          {
-            title: "Search",
-            icon: "SearchLineIcon",
-            route: "/contents",
-          },
-          {
-            title: "Contents",
-            icon: "BookOpenLineIcon",
-            route: "/all",
-          },
-          {
-            title: "Connections",
-            icon: "TeamLineIcon",
-            route: "/home",
-          },
-          {
-            title: "Profie",
-            icon: "AccountCircleLineIcon",
-            route: "/profile",
-          },
-        ],
-      }}
-    >
-      <Box textAlign="center" padding="10">
-        <Heading as="h1" size="2xl" marginBottom="4">
-          {t("WELCOME_TEXT")}
-        </Heading>
-        {/* <Text fontSize="xl" marginBottom="8">
-          Enhance your knowledge and skills with our diverse range of courses
-          and content.
-        </Text> */}
-        <Button colorScheme="blue" size="lg" onClick={navigateToCourse()}>
-         {t( "EXPLORE_COURSES")}
-        </Button>
-
-        {isLoading && <p>Loading...</p>}
-        {error && <p>Error: {error}</p>}
-        {Object.keys(data).map((key) => (
-          <div key={key}>
-            <p>
-              {key}: {JSON.stringify(data[key])}
-            </p>
-          </div>
-        ))}
-      </Box>
-       {/* <Routes>
-      //  <Route path="/" element={<Home />} />
-      //  <Route path="/Contents" element={<Contents />} />
-      //  <Route path="/Courses" element={<Courses />} />
-      //  <Route path="/Sample" element={<Sample />} />
-      // </Routes>     */}
-     </Layout>
-    //  <Box>HERE</Box>
+    <div>
+      <Search onSearch={handleSearch} />
+      {isLoading && <p>Loading...</p>}
+      {error && <p>Error: {error}</p>}
+      <pre>{JSON.stringify(searchResults, null, 2)}</pre>
+    </div>
   );
 };