[Platform] Use React for state management in literature section

packages/sections/src/common/Literature/Body.jsx

@@ -1,62 +1,71 @@
 import { useEffect, useState } from "react";
+import {
+  LiteratureProvider,
+  useLiterature,
+  useLiteratureDispatch,
+  defaultLiteratureState,
+} from "./LiteratureContext";
+import { fetchSimilarEntities } from "./requests"; 
 import { Box } from "@mui/material";
-import { useSetRecoilState, useRecoilValue, useResetRecoilState, RecoilRoot } from "recoil";
 import { SectionItem } from "ui";
 import PublicationsList from "./PublicationsList";
 import Description from "./Description";
-import { literatureState, updateLiteratureState, fetchSimilarEntities } from "./atoms";
 import Entities from "./Entities";
 import Category from "./Category";
 import CountInfo from "./CountInfo";
 import { DateFilter } from "./DateFilter";
 
-function LiteratureList({ id, name, entity, BODY_QUERY, definition }) {
-  const [requestObj, setRequestObj] = useState({});
+// type LiteratureListParameter = {
+//   id: string,
+//   name: string,
+//   entity: any,  // ADD LATER
+//   BODY_QUERY: string,
+//   definition: any,  // ADD LATER
+// };
 
-  const setLiteratureUpdate = useSetRecoilState(updateLiteratureState);
-  const resetLiteratureState = useResetRecoilState(literatureState);
+function LiteratureList(
+    { id, name, entity, BODY_QUERY, definition }) {
+    // { id, name, entity, BODY_QUERY, definition }: LiteratureListParameter) {
 
-  const bibliographyState = useRecoilValue(literatureState);
-  const { category, startYear, startMonth, endYear, endMonth } = bibliographyState;
+  const [requestObj, setRequestObj] = useState({});
+  const literature = useLiterature();
+  const { category, startYear, startMonth, endYear, endMonth } = literature;
+  const literatureDispatch = useLiteratureDispatch();
 
-  useEffect(
-    () => {
-      async function startRequest() {
-        const inintRequest = await fetchSimilarEntities({
-          id,
-          query: BODY_QUERY,
-          category,
-          startYear,
-          startMonth,
-          endYear,
-          endMonth,
-        });
-        setRequestObj(inintRequest);
-        const data = inintRequest.data[entity];
-        const update = {
-          entities: data.similarEntities,
-          litsIds: data.literatureOcurrences?.rows?.map(({ pmid }) => ({
-            id: pmid,
-            status: "ready",
-            publication: null,
-          })),
-          litsCount: data.literatureOcurrences?.filteredCount,
-          earliestPubYear: data.literatureOcurrences?.earliestPubYear,
-          cursor: data.literatureOcurrences?.cursor,
-          id,
-          query: BODY_QUERY,
-          globalEntity: entity,
-        };
-        setLiteratureUpdate(update);
-      }
-      startRequest();
-      return function cleanUp() {
-        resetLiteratureState();
+  useEffect(() => {
+    async function startRequest() {
+      const initRequest = await fetchSimilarEntities({
+        id,
+        query: BODY_QUERY,
+        category,
+        startYear,
+        startMonth,
+        endYear,
+        endMonth,
+      });
+      setRequestObj(initRequest);
+      const data = initRequest.data[entity];
+      const update = {
+        entities: data.similarEntities,
+        litsIds: data.literatureOcurrences?.rows?.map(({ pmid }) => pmid),
+        litsCount: data.literatureOcurrences?.filteredCount,
+        earliestPubYear: data.literatureOcurrences?.earliestPubYear,
+        cursor: data.literatureOcurrences?.cursor,
+        id,
+        query: BODY_QUERY,
+        globalEntity: entity,
       };
-    },
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    []
-  );
+      literatureDispatch({ type: 'stateUpdate', value: update });
+    }
+    startRequest();
+      // return function cleanUp() {
+      //   literatureDispatch({
+      //     type: 'stateUpdate',
+      //     value: defaultLiteratureState
+      //   });
+      // };
+  }, []);
+
   return (
     <SectionItem
       definition={definition}
@@ -82,16 +91,16 @@ function LiteratureList({ id, name, entity, BODY_QUERY, definition }) {
 
 function Body({ definition, name, id, entity, BODY_QUERY }) {
   return (
-    <RecoilRoot>
+    <LiteratureProvider>
       <LiteratureList
         id={id}
         name={name}
         entity={entity}
         BODY_QUERY={BODY_QUERY}
         definition={definition}
-      />
-    </RecoilRoot>
+      />  
+    </LiteratureProvider>
   );
 }
 
-export default Body;
+export default Body;

packages/sections/src/common/Literature/Category.jsx

@@ -1,12 +1,8 @@
-import { InputLabel, FormGroup, Checkbox, FormControlLabel } from "@mui/material";
-import { useRecoilState, useRecoilValue, useSetRecoilState } from "recoil";
-import {
-  selectedCategoriesState,
-  loadingEntitiesState,
-  literatureState,
-  fetchSimilarEntities,
-  updateLiteratureState,
-} from "./atoms";
+import { InputLabel, FormGroup, Checkbox, FormControlLabel }
+  from "@mui/material";
+import { useLiterature, useSelectedCategories, useLiteratureDispatch }
+  from "./LiteratureContext";
+import { fetchSimilarEntities } from "./requests";
 
 const toggleValue = (selected, categories) => {
   const isChecked = categories.indexOf(selected) !== -1;
@@ -21,11 +17,10 @@ const categories = [
 ];
 
 export default function Category() {
-  const category = useRecoilValue(selectedCategoriesState);
-  const setLiteratureUpdate = useSetRecoilState(updateLiteratureState);
-  const [loadingEntities, setLoadingEntities] = useRecoilState(loadingEntitiesState);
 
-  const bibliographyState = useRecoilValue(literatureState);
+  const literature = useLiterature();
+  const category = useSelectedCategories();
+  const literatureDispatch = useLiteratureDispatch();
 
   const handleChange = async event => {
     const {
@@ -39,12 +34,10 @@ export default function Category() {
       endMonth,
       startYear,
       startMonth,
-    } = bibliographyState;
-    const {
-      target: { name: clicked },
-    } = event;
+    } = literature;
+    const { target: { name: clicked }  } = event;
     const newCategories = toggleValue(clicked, bibliographyCategory);
-    setLoadingEntities(true);
+    literatureDispatch({ type: 'loadingEntities', value: true });
     const request = await fetchSimilarEntities({
       query,
       id,
@@ -57,15 +50,14 @@ export default function Category() {
       startMonth,
     });
     const data = request.data[globalEntity];
-
     const update = {
       entities: data.similarEntities,
       earliestPubYear: data.literatureOcurrences?.earliestPubYear,
       litsCount: data.literatureOcurrences?.filteredCount,
       loadingEntities: false,
       category: newCategories,
     };
-    setLiteratureUpdate(update);
+    literatureDispatch({ type: 'stateUpdate', value: update });
   };
 
   return (
@@ -88,7 +80,7 @@ export default function Category() {
                 onChange={handleChange}
                 name={name}
                 color="primary"
-                disabled={loadingEntities}
+                disabled={literature.loadingEntities}
               />
             }
             label={label}

packages/sections/src/common/Literature/CountInfo.jsx

@@ -1,7 +1,6 @@
 import { InputLabel, Box } from "@mui/material";
 import { makeStyles } from "@mui/styles";
-import { useRecoilValue } from "recoil";
-import { litsCountState, loadingEntitiesState, tablePageSizeState } from "./atoms";
+import { useLiterature } from "./LiteratureContext";
 
 const useStyles = makeStyles(() => ({
   resultCount: {
@@ -11,14 +10,12 @@ const useStyles = makeStyles(() => ({
 }));
 
 function CountInfo() {
+  const { pageSize, litsCount, loadingEntities } = useLiterature();
   const classes = useStyles();
-  const pageSize = useRecoilValue(tablePageSizeState);
-  const count = useRecoilValue(litsCountState);
-  const loadingEntities = useRecoilValue(loadingEntitiesState);
-
   const getLabelText = () => {
     if (loadingEntities) return "Loading count...";
-    return `Showing ${count > pageSize ? pageSize : count} of ${count} results`;
+    return `Showing ${
+      litsCount > pageSize ? pageSize : litsCount} of ${litsCount} results`;
   };
 
   return (
@@ -28,4 +25,4 @@ function CountInfo() {
   );
 }
 
-export default CountInfo;
+export default CountInfo;