Merge pull request #139 from OCA-UFCG/refact/menu-states

Refactoring map page to make a better use of state control and context
OCA-UFCG · Nov 7, 2024 · 58c1afa · 58c1afa
2 parents 234c318 + d126d6e
commit 58c1afa
Show file tree

Hide file tree

Showing 20 changed files with 529 additions and 680 deletions.
diff --git a/next-env.d.ts b/next-env.d.ts
@@ -2,4 +2,4 @@
 /// <reference types="next/image-types/global" />
 
 // NOTE: This file should not be edited
-// see https://nextjs.org/docs/app/building-your-application/configuring/typescript for more information.
+// see https://nextjs.org/docs/basic-features/typescript for more information.
diff --git a/src/app/map/page.tsx b/src/app/map/page.tsx
@@ -6,7 +6,7 @@ export const revalidate = 60;
 const MapPage = async () => {
   const { tiffInfo } = await getContent(["tiffInfo"]);
 
-  return <MapSection mapsData={tiffInfo} />;
+  return <MapSection tiffs={tiffInfo} />;
 };
 
 export default MapPage;
diff --git a/src/app/page.tsx b/src/app/page.tsx
@@ -5,6 +5,8 @@ import MapsSection from "@/components/MapsSection/MapsSection";
 import Template from "@/templates/hubTemplate";
 import { getContent } from "@/utils/functions";
 import AboutHomeSection from "@/components/AboutHomeSection/AboutHomeSection";
+import { MapTiffProvider } from "@/contexts/MapContext";
+import { Suspense } from "react";
 
 export const revalidate = 60;
 
@@ -31,7 +33,11 @@ export default async function Home() {
         content={content[0].fields?.about}
         photos={content[0].fields?.album}
       />
-      <MapsSection sectionHead={sectionHead} tiffInfo={tiffInfo} />
+      <Suspense>
+        <MapTiffProvider tiffs={tiffInfo}>
+          <MapsSection sectionHead={sectionHead} />
+        </MapTiffProvider>
+      </Suspense>
       <PublicationsSection
         sectionHead={sectionHead}
         publications={publications}

diff --git a/src/components/CollabTable/CollabTable.tsx b/src/components/CollabTable/CollabTable.tsx
@@ -34,7 +34,6 @@ const CollabTable = ({ content }: { content: any[] }) => {
         {content.map(({ fields }, index) => {
           const { name, institution, fieldWork, github, linkedin, lattes } =
             fields;
-          console.log("fieldWork:", fieldWork);
 
           return (
             <Row key={index}>

diff --git a/src/components/DateInput/DateInput.tsx b/src/components/DateInput/DateInput.tsx
@@ -1,7 +1,6 @@
 "use client";
 
-import { IImageData, IMapInfo } from "@/utils/interfaces";
-import { ChangeEvent, useEffect, useRef } from "react";
+import { useContext, useMemo, useRef } from "react";
 import {
   Wrapper,
   RangeInput,
@@ -10,75 +9,68 @@ import {
   DateSpan,
   Divider,
 } from "./DateInput.styles";
+import { MapTiffContext } from "@/contexts/MapContext";
 
-const DateInput = ({
-  mapId,
-  dates,
-  isLoading,
-  onChange,
-}: {
-  mapId: string;
-  isLoading: boolean;
-  initialYear?: string;
-  dates: IImageData;
-  onChange: (newValues: IMapInfo) => void;
-}) => {
-  const inputRef = useRef<HTMLInputElement>(null);
-  const dateKeys: string[] = Object.keys(dates);
-  const hasGeneralDate = "general" in dates;
+const DateInput = () => {
+  const { tiffs, loading, currentVisu, setCurrentVisu } =
+    useContext(MapTiffContext);
+  const dates = useMemo(
+    () =>
+      tiffs.find((tiff) => tiff.fields.id === currentVisu.id)?.fields
+        .imageData || {},
 
-  const handleRangeChange = (event: ChangeEvent<HTMLInputElement>) => {
-    const newDate = Object.keys(dates)[Number(event.target.value) - 1];
-    onChange({ name: mapId, year: newDate });
-  };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [currentVisu.id],
+  );
 
-  const updateFields = (year: string) => {
-    if (inputRef.current)
-      inputRef.current.value = [dateKeys.indexOf(year) + 1].toString();
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  const updateFields = (index: number) => {
+    const year = Object.keys(dates)[Number(index)];
+    if (inputRef.current) inputRef.current.value = [index + 1].toString();
     inputRef?.current?.focus();
 
-    onChange({ name: mapId, year: year });
+    const { id } = currentVisu;
+    setCurrentVisu({ id, year });
   };
 
-  useEffect(() => {
-    dateKeys.map((date: string) => {
-      if (dates[date].default) {
-        updateFields(date);
-      }
-    });
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [mapId]);
-
   return (
-    <Wrapper disabled={isLoading.toString()}>
-      {!hasGeneralDate && (
-        <InputWrapper>
-          <RangeInput
-            disabled={isLoading}
-            type="range"
-            ref={inputRef}
-            min={1}
-            max={Object.keys(dates).length}
-            onChange={handleRangeChange}
-          />
-          <DateContainer>
-            {Object.keys(dates).map((date, index) => (
-              <div key={date}>
-                <DateSpan
-                  isCurrent={(
-                    (index + 1).toString() === inputRef?.current?.value || false
-                  ).toString()}
-                  active={isLoading.toString()}
-                  onClick={() => updateFields(date)}
-                >
-                  {date}
-                </DateSpan>
-                <Divider />
-              </div>
-            ))}
-          </DateContainer>
-        </InputWrapper>
-      )}
+    <Wrapper disabled={loading.toString()}>
+      {Object.keys(dates).length > 0 &&
+        !(Object.keys(dates)[0] === "general") && (
+          <InputWrapper>
+            <RangeInput
+              disabled={loading}
+              type="range"
+              ref={inputRef}
+              min={1}
+              value={
+                Object.keys(dates).findIndex(
+                  (date) => date === currentVisu.year,
+                ) + 1
+              }
+              max={Object.keys(dates).length}
+              onChange={(e) => updateFields(Number(e.target.value) - 1)}
+            />
+            <DateContainer>
+              {Object.keys(dates).map((date, index) => (
+                <div key={date}>
+                  <DateSpan
+                    isCurrent={(
+                      (index + 1).toString() === inputRef?.current?.value ||
+                      false
+                    ).toString()}
+                    active={loading.toString()}
+                    onClick={() => updateFields(index)}
+                  >
+                    {date}
+                  </DateSpan>
+                  <Divider />
+                </div>
+              ))}
+            </DateContainer>
+          </InputWrapper>
+        )}
     </Wrapper>
   );
 };

diff --git a/src/components/MapDescription/MapDescription.tsx b/src/components/MapDescription/MapDescription.tsx
@@ -1,29 +1,23 @@
-import { IEEInfo } from "@/utils/interfaces";
 import MenuModal from "../MenuModal/MenuModal";
 import { ContentWrapper, Title, Description } from "./MapDescription.styles";
+import { MapTiffContext } from "@/contexts/MapContext";
+import { useContext } from "react";
 
-const MapDescription = ({
-  imageInfo,
-  retracted,
-  setRetracted = () => {},
-}: {
-  imageInfo: IEEInfo;
-  retracted: boolean;
-  setRetracted: (retracted: boolean) => void;
-}) => {
-  const { name, description } = imageInfo;
+const MapDescription = () => {
+  const { currentDescription, descRetracted, setDescRetracted } =
+    useContext(MapTiffContext);
 
   return (
     <MenuModal
       hasIcon={false}
       hasBackground={false}
       position="right"
-      retracted={retracted}
-      setRetracted={setRetracted}
+      retracted={descRetracted}
+      setRetracted={setDescRetracted}
     >
       <ContentWrapper>
-        <Title>{name}</Title>
-        <Description>{description}</Description>
+        <Title>{currentDescription.name}</Title>
+        <Description>{currentDescription.description}</Description>
       </ContentWrapper>
     </MenuModal>
   );

diff --git a/src/components/MapLegend/MapLegend.styles.tsx b/src/components/MapLegend/MapLegend.styles.tsx
@@ -1,7 +1,13 @@
 import styled from "styled-components";
 import { Icon } from "../Icon/Icon";
 
-export const Wrapper = styled.div`
+export const SubtractImage = styled(Icon)`
+  transition: 0.3s;
+  width: 0.75rem;
+  height: fit-content;
+`;
+
+export const Wrapper = styled.details`
   display: flex;
   flex-flow: column;
   width: fit-content;
@@ -13,9 +19,13 @@ export const Wrapper = styled.div`
   box-sizing: border-box;
   padding: 0.75rem;
   z-index: 4;
+
+  &:not([open]) ${SubtractImage} {
+    transform: rotate(180deg);
+  }
 `;
 
-export const HeaderContainer = styled.div`
+export const HeaderContainer = styled.summary`
   display: flex;
   gap: 1rem;
   width: 100%;
@@ -29,18 +39,11 @@ export const Title = styled.h3`
   font-size: 0.9rem;
 `;
 
-export const SubtractImage = styled(Icon)<{ retracted: string }>`
-  ${({ retracted }) =>
-    retracted === "retracted" && "transform: rotate(180deg)"};
-  transition: 0.3s;
-  width: 0.75rem;
-  height: fit-content;
-`;
-
-export const ContentContainer = styled.div<{ retracted: string }>`
-  display: ${({ retracted }) => (retracted !== "retracted" ? "flex" : "none")};
+export const ContentContainer = styled.div`
+  display: flex;
   flex-flow: column;
   gap: 0.5rem;
+  margin-top: 1rem;
 `;
 
 export const DataLegendContainer = styled.div`
@@ -96,6 +99,6 @@ export const MetaInfoContainer = styled.div`
 `;
 
 export const MetaInfo = styled.span`
-  font-size: 0.6rem;
+  font-size: 0.75rem;
   opacity: 0.7;
 `;
diff --git a/src/components/MapLegend/MapLegend.tsx b/src/components/MapLegend/MapLegend.tsx
@@ -1,4 +1,4 @@
-import { IEEInfo, IImageParam } from "@/utils/interfaces";
+import { IImageParam } from "@/utils/interfaces";
 import {
   DataLegendContainer,
   DataContainer,
@@ -13,57 +13,49 @@ import {
   MetaInfoContainer,
   ContentContainer,
 } from "./MapLegend.styles";
-import { useState } from "react";
+import { useContext, useMemo } from "react";
+import { MapTiffContext } from "@/contexts/MapContext";
 
-interface MapLegendProps {
-  imageInfo: IEEInfo;
-  year: string;
-}
+export const MapLegend = () => {
+  const { tiffs, currentVisu } = useContext(MapTiffContext);
 
-export const MapLegend = ({ imageInfo, year = "general" }: MapLegendProps) => {
-  const [retracted, setRetracted] = useState<string>("open");
-
-  const { name, imageData, measurementUnit, extraInfo, graphLegendTitle } =
-    imageInfo;
+  const imageInfo = useMemo(
+    () => tiffs.find((tiff) => tiff.fields.id === currentVisu.id)?.fields,
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [currentVisu.id],
+  );
 
   return (
-    <Wrapper>
-      <HeaderContainer
-        onClick={() =>
-          setRetracted((previous) =>
-            previous === "retracted" ? "open" : "retracted",
-          )
-        }
-      >
-        <Title>{graphLegendTitle || name}</Title>
-        <SubtractImage
-          retracted={retracted}
-          id="subtract"
-          height={16}
-          width={16}
-        />
+    <Wrapper open={true}>
+      <HeaderContainer>
+        <Title>{imageInfo?.graphLegendTitle || imageInfo?.name}</Title>
+        <SubtractImage id="subtract" height={16} width={16} />
       </HeaderContainer>
-      <ContentContainer retracted={retracted}>
+      <ContentContainer>
         <DataLegendContainer>
-          {imageData[year]?.imageParams.map(({ color, label }: IImageParam) => {
+          {imageInfo?.imageData[
+            currentVisu?.year || "general"
+          ]?.imageParams.map(({ color, label }: IImageParam) => {
             return (
               <DataContainer
                 key={color}
-                title={`${label} ${measurementUnit !== "classes" ? measurementUnit : ""}`}
+                title={`${label} ${imageInfo?.measurementUnit !== "classes" ? imageInfo?.measurementUnit : ""}`}
               >
                 <Color color={color} />
                 <ColorLabel>{label}</ColorLabel>
 
                 <Measurement>
-                  {measurementUnit !== "classes" ? measurementUnit : ""}
+                  {imageInfo?.measurementUnit !== "classes"
+                    ? imageInfo?.measurementUnit
+                    : ""}
                 </Measurement>
               </DataContainer>
             );
           })}
         </DataLegendContainer>
-        {extraInfo && (
+        {imageInfo?.extraInfo && (
           <MetaInfoContainer>
-            {extraInfo.map((info: string) => (
+            {imageInfo?.extraInfo.map((info: string) => (
               <MetaInfo key={info}>{info}</MetaInfo>
             ))}
           </MetaInfoContainer>