From 977851d4fc0acbc721a6b1b64f6343e721016a1c Mon Sep 17 00:00:00 2001
From: Andrea Matsunaga <andreamizuno@gmail.com>
Date: Fri, 13 Jan 2023 16:45:30 -0300
Subject: [PATCH] feat: cria widthContext e altera componente List

---
 src/components/List/List.tsx  | 19 ++++++++++++------
 src/contexts/WidthContext.tsx | 36 +++++++++++++++++++++++++++++++++++
 src/index.tsx                 |  9 ++++++---
 3 files changed, 55 insertions(+), 9 deletions(-)
 create mode 100644 src/contexts/WidthContext.tsx

diff --git a/src/components/List/List.tsx b/src/components/List/List.tsx
index 83ad562..f62f783 100644
--- a/src/components/List/List.tsx
+++ b/src/components/List/List.tsx
@@ -3,7 +3,7 @@ import { Link } from "react-router-dom";
 
 interface ListProps {
   className: string;
-  itemsList: { value: string; name: string }[];
+  itemsList: { value: string; name: string; phoneNumber?: string }[];
 }
 
 const List = (props: ListProps) => {
@@ -11,11 +11,18 @@ const List = (props: ListProps) => {
 
   return (
     <ul className={className}>
-      {itemsList.map((item, index) => (
-        <li key={index}>
-          <Link to={item.value}>{item.name}</Link>
-        </li>
-      ))}
+      {itemsList.map((item, index) =>
+        item.phoneNumber ? (
+          <li key={index}>
+            <p>{item.name}</p>
+            <Link to={item.value}>{item.phoneNumber}</Link>
+          </li>
+        ) : (
+          <li key={index}>
+            <Link to={item.value}>{item.name}</Link>
+          </li>
+        )
+      )}
     </ul>
   );
 };
diff --git a/src/contexts/WidthContext.tsx b/src/contexts/WidthContext.tsx
new file mode 100644
index 0000000..14b2fed
--- /dev/null
+++ b/src/contexts/WidthContext.tsx
@@ -0,0 +1,36 @@
+import { createContext, useState, useEffect } from "react";
+
+interface WidthContextData {
+  width: number;
+  isMobile: boolean;
+}
+
+interface Props {
+  children: React.ReactNode;
+}
+
+export const WidthContext = createContext({} as WidthContextData);
+
+export const WidthProvider: React.FC<Props> = ({ children }) => {
+  const [width, setWidth] = useState(window.innerWidth);
+  const [isMobile, setIsMobile] = useState(width <= 1024);
+
+  const updateWidth = () => {
+    setWidth(window.innerWidth);
+    console.log("atualizou width");
+  };
+
+  useEffect(() => {
+    window.addEventListener("resize", updateWidth);
+  }, []);
+
+  useEffect(() => {
+    width <= 1024 ? setIsMobile(true) : setIsMobile(false);
+  }, [width]);
+
+  return (
+    <WidthContext.Provider value={{ width: width, isMobile: isMobile }}>
+      {children}
+    </WidthContext.Provider>
+  );
+};
diff --git a/src/index.tsx b/src/index.tsx
index aa1a139..f7e1235 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -5,14 +5,17 @@ import Institucional from "./pages/Institucional";
 
 import "./global.scss";
 import { ModalProvider } from "./contexts/ModalContext";
+import { WidthProvider } from "./contexts/WidthContext";
 
 const root = ReactDOM.createRoot(
   document.getElementById("root") as HTMLElement
 );
 root.render(
   <React.StrictMode>
-    <ModalProvider>
-      <Institucional />
-    </ModalProvider>
+    <WidthProvider>
+      <ModalProvider>
+        <Institucional />
+      </ModalProvider>
+    </WidthProvider>
   </React.StrictMode>
 );