Merge pull request #37 from infoshareacademy/halyna-riabokonenko/type…

…-script Halyna riabokonenko/type script
infoshareacademy · Feb 11, 2024 · cfb83cf · cfb83cf
2 parents 1472087 + 6c0f881
commit cfb83cf
Show file tree

Hide file tree

Showing 26 changed files with 326 additions and 161 deletions.
diff --git a/my-app/package-lock.json b/my-app/package-lock.json
diff --git a/my-app/package.json b/my-app/package.json
@@ -18,6 +18,7 @@
   "devDependencies": {
     "@types/react": "^18.2.43",
     "@types/react-dom": "^18.2.17",
+    "@types/webpack-env": "^1.18.4",
     "@vitejs/plugin-react": "^4.2.1",
     "eslint": "^8.55.0",
     "eslint-plugin-react": "^7.33.2",

diff --git a/my-app/src/App.jsx b/my-app/src/App.jsx
@@ -1,13 +1,13 @@
 import "./App.css";
 import { Header } from "./Components/Header/Header";
-import { LandingPage } from "./Components/LandingPage/LandingPage";
-import { Portfolio } from "./Components/Portfolio/Portfolio";
+import { LandingPage } from "./Components/LandingPage/LandingPage.tsx";
+import { Portfolio } from "./Components/Portfolio/Portfolio.tsx";
 import { Pricing } from "./Components/Pricing/Pricing";
 import { ContactForm } from "./Components/ContactForm/ContactForm";
 import { BrowserRouter, Route, Routes } from "react-router-dom";
 import { PortfolioImage } from "./Components/Portfolio/PortfolioImage/portfolioimage";
 import { NotFound } from "./Components/NotFound/NotFound";
-import { ThemeProvider } from "./providers/theme";
+import { ThemeProvider } from "./providers/theme.tsx";
 import { Footer } from "./Components/Footer/Footer";
 
 function App() {
@@ -41,4 +41,4 @@ function App() {
   );
 }
 
-export default App;
+export default App;
diff --git a/my-app/src/Components/BasketModal/BasketModal.jsx b/my-app/src/Components/BasketModal/BasketModal.jsx
@@ -1,7 +1,7 @@
 import styles from "./BasketModal.module.css";
 import { Modal } from "../Modal/Modal.jsx";
 import { useContext, useEffect } from "react";
-import { ThemeContext } from "../../providers/theme.jsx";
+import { ThemeContext } from "../../providers/theme.tsx";
 
 export const BasketModal = ({ isOpen, onClose }) => {
   const { theme } = useContext(ThemeContext);

diff --git a/my-app/src/Components/ContactForm/ContactForm.jsx b/my-app/src/Components/ContactForm/ContactForm.jsx
@@ -2,7 +2,7 @@ import styles from "./ContactForm.module.css";
 import classnames from "classnames";
 import { validateEmail } from "../../utils/validationEmail.js";
 import { useContext, useRef, useState } from "react";
-import { ThemeContext } from "../../providers/theme.jsx";
+import { ThemeContext } from "../../providers/theme.tsx";
 
 export const ContactForm = () => {
   const [emailMessage, setEmailMessage] = useState("");

diff --git a/my-app/src/Components/Footer/Footer.jsx b/my-app/src/Components/Footer/Footer.jsx
@@ -1,5 +1,5 @@
 import styles from "./Footer.module.css";
-import { ThemeContext } from "../../providers/theme";
+import { ThemeContext } from "../../providers/theme.tsx";
 import { useContext } from "react";
 import classnames from "classnames";
 
@@ -14,4 +14,4 @@ export const Footer = () => {
       </p>
     </div>
   );
-};
+};
diff --git a/my-app/src/Components/Header/Header.jsx b/my-app/src/Components/Header/Header.jsx
@@ -3,7 +3,7 @@ import classnames from "classnames";
 import React, { useContext, useState } from "react";
 import { BasketModal } from "../BasketModal/BasketModal";
 import { NavLink } from "react-router-dom";
-import { ThemeContext } from "../../providers/theme";
+import { ThemeContext } from "../../providers/theme.tsx";
 
 export const Header = () => {
   const [isCartModalOpen, setCartModalOpen] = useState(false);

diff --git a/...rc/Components/LandingPage/LandingPage.jsx → ...rc/Components/LandingPage/LandingPage.tsx b/...rc/Components/LandingPage/LandingPage.jsx → ...rc/Components/LandingPage/LandingPage.tsx
@@ -1,9 +1,11 @@
-import { useState, useEffect, useContext } from "react";
+import {ReactElement, useState, useEffect, useContext } from "react";
 import styles from "./LandingPage.module.css";
-import { ThemeContext } from "../../providers/theme";
+import { ThemeContext } from "../../providers/theme.tsx";
+import { LandingPageProps } from "./LandingPage.types";
+
+export const LandingPage = ({ quotes }:LandingPageProps):ReactElement => {
+  const [quote, setQuote] = useState<string>(quotes[0]);
 
-export const LandingPage = ({ quotes }) => {
-  const [quote, setQuote] = useState(quotes[0]);
   const { theme } = useContext(ThemeContext);
 
   useEffect(() => {
@@ -36,4 +38,4 @@ export const LandingPage = ({ quotes }) => {
       </div>
     </div>
   );
-};
+};
diff --git a/my-app/src/Components/LandingPage/LandingPage.types.ts b/my-app/src/Components/LandingPage/LandingPage.types.ts
@@ -0,0 +1,3 @@
+export interface LandingPageProps {
+    quotes: string[];
+  }
diff --git a/my-app/src/Components/Modal/Modal.jsx b/my-app/src/Components/Modal/Modal.jsx
@@ -1,5 +1,5 @@
 import styles from "./Modal.module.css";
-import { ThemeContext } from "../../providers/theme";
+import { ThemeContext } from "../../providers/theme.tsx";
 import { useContext } from "react";
 
 export const Modal = ({ children }) => {
@@ -10,4 +10,4 @@ export const Modal = ({ children }) => {
       <div className={styles["modal__content"]}>{children}</div>
     </div>
   );
-};
+};
diff --git a/my-app/src/Components/NotFound/NotFound.jsx b/my-app/src/Components/NotFound/NotFound.jsx
@@ -1,5 +1,5 @@
 import styles from "./NotFound.module.css";
-import { ThemeContext } from "../../providers/theme";
+import { ThemeContext } from "../../providers/theme.tsx";
 import { useContext } from "react";
 import classnames from "classnames";
 

diff --git a/my-app/src/Components/Portfolio/Portfolio.jsx b/my-app/src/Components/Portfolio/Portfolio.jsx
@@ -1,42 +1,53 @@
 import styles from "./Portfolio.module.css";
-import portfolioData from "../../../public/photos.json";
-import { useContext, useState } from "react";
+import { useContext, useEffect, useState } from "react";
 import { Link } from "react-router-dom";
-import { ThemeContext } from "../../providers/theme";
+import { ThemeContext } from "../../providers/theme.tsx";
 
 export const Portfolio = () => {
   const [imageId, setImageId] = useState(null);
   const { theme } = useContext(ThemeContext);
 
+  const [portfolioData, setPortfolioData] = useState(null);
+
+  useEffect(() => {
+    fetch("/photos.json")
+      .then((res) => res.json())
+      .then((data) => {
+        setPortfolioData(data);
+        console.log(data);
+      });
+  }, []);
   return (
-    <div className={`${styles["portfolio__container"]} ${styles[theme]}`}>
-      <h1 className={`${styles["portfolio__header"]} ${styles[theme]}`}>
-        Our portfolio
-      </h1>
-      <div className={styles["portfolio"]}>
-        <h3 className={`${styles["portfolio__info"]} ${styles[theme]}`}>
-          We are experienced in taking photos for all kinds of circumstances.
-          <br />
-          Below is a summary of our extensive portfolio, with us you will always
-          look good!
-        </h3>
-      </div>
-      <div className={styles["portfolio__photos"]}>
-        {portfolioData.photos.map((photo) => (
-          <div key={photo.id} className={styles["portfolio__items"]}>
-            <Link to={`/portfolio/${photo.id}`}>
-              <img
-                src={photo.url}
-                className={styles["portfolio__photo"]}
-                data-id={photo.id}
-                onClick={() => {
-                  setImageId(photo.id);
-                }}
-              />
-            </Link>
-          </div>
-        ))}
+    portfolioData && (
+      <div className={`${styles["portfolio__container"]} ${styles[theme]}`}>
+        <h1 className={`${styles["portfolio__header"]} ${styles[theme]}`}>
+          Our portfolio
+        </h1>
+        <div className={styles["portfolio"]}>
+          <h3 className={`${styles["portfolio__info"]} ${styles[theme]}`}>
+            We are experienced in taking photos for all kinds of circumstances.
+            <br />
+            Below is a summary of our extensive portfolio, with us you will
+            always look good!
+          </h3>
+        </div>
+        <div className={styles["portfolio__photos"]}>
+          {portfolioData.photos.map((photo) => (
+            <div key={photo.id} className={styles["portfolio__items"]}>
+              <Link to={`/portfolio/${photo.id}`}>
+                <img
+                  src={photo.url}
+                  className={styles["portfolio__photo"]}
+                  data-id={photo.id}
+                  onClick={() => {
+                    setImageId(photo.id);
+                  }}
+                />
+              </Link>
+            </div>
+          ))}
+        </div>
       </div>
-    </div>
+    )
   );
 };
diff --git a/my-app/src/Components/Portfolio/Portfolio.tsx b/my-app/src/Components/Portfolio/Portfolio.tsx
@@ -0,0 +1,54 @@
+import styles from "./Portfolio.module.css";
+import { useContext, useEffect, useState } from "react";
+import { Link } from "react-router-dom";
+import { ThemeContext } from "../../providers/theme.tsx";
+import { PortfolioInterface } from "./Portfolio.types";
+
+
+export const Portfolio = () => {
+  const [setImageId] = useState(null);
+  const { theme } = useContext(ThemeContext);
+
+  const [portfolioData, setPortfolioData] = useState<PortfolioInterface | null>(null);
+
+  useEffect(() => {
+    fetch("/photos.json")
+      .then((res) => res.json())
+      .then((data) => 
+        setPortfolioData(data)
+      );
+  }, []);
+  return (
+    portfolioData && (
+      <div className={`${styles["portfolio__container"]} ${styles[theme]}`}>
+        <h1 className={`${styles["portfolio__header"]} ${styles[theme]}`}>
+          Our portfolio
+        </h1>
+        <div className={styles["portfolio"]}>
+          <h3 className={`${styles["portfolio__info"]} ${styles[theme]}`}>
+            We are experienced in taking photos for all kinds of circumstances.
+            <br />
+            Below is a summary of our extensive portfolio, with us you will
+            always look good!
+          </h3>
+        </div>
+        <div className={styles["portfolio__photos"]}>
+          {portfolioData.photos.map((photo) => (
+            <div key={photo.id} className={styles["portfolio__items"]}>
+              <Link to={`/portfolio/${photo.id}`}>
+                <img
+                  src={photo.url}
+                  className={styles["portfolio__photo"]}
+                  data-id={photo.id}
+                  onClick={() => {
+                    setImageId(photo.id);
+                  }}
+                />
+              </Link>
+            </div>
+          ))}
+        </div>
+      </div>
+    )
+  );
+};
diff --git a/my-app/src/Components/Portfolio/Portfolio.types.ts b/my-app/src/Components/Portfolio/Portfolio.types.ts
@@ -0,0 +1,8 @@
+export interface PortfolioInterface {
+    author: string;
+    height: number;
+    id: number;
+    price: number;
+    url: string;
+    width: number;
+  }
diff --git a/my-app/src/Components/Portfolio/PortfolioImage/PortfolioImage.jsx b/my-app/src/Components/Portfolio/PortfolioImage/PortfolioImage.jsx
@@ -1,7 +1,7 @@
 import { useParams } from "react-router-dom";
 import portfolioData from "../../../../public/photos.json";
 import styles from "./PortfolioImage.module.css";
-import { ThemeContext } from "../../../providers/theme";
+import { ThemeContext } from "../../../providers/theme.tsx";
 import { useContext } from "react";
 import classnames from "classnames";
 

diff --git a/my-app/src/Components/PortfolioModal/PortfolioModal.jsx b/my-app/src/Components/PortfolioModal/PortfolioModal.jsx
@@ -1,49 +1,49 @@
-import styles from "./PortfolioModal.module.css";
-import { Modal } from "../Modal/Modal.jsx";
-import { useEffect } from "react";
+// import styles from "./PortfolioModal.module.css";
+// import { Modal } from "../Modal/Modal.jsx";
+// import { useEffect } from "react";
 
-export const PortfolioModal = ({ isOpen, onClose }) => {
-  useEffect(() => {
-    const handleKeyDown = (event) => {
-      if (event.key === "Escape") {
-        onClose();
-      }
-    };
+// export const PortfolioModal = ({ isOpen, onClose }) => {
+//   useEffect(() => {
+//     const handleKeyDown = (event) => {
+//       if (event.key === "Escape") {
+//         onClose();
+//       }
+//     };
 
-    window.addEventListener("keydown", handleKeyDown);
+//     window.addEventListener("keydown", handleKeyDown);
 
-    return () => {
-      window.removeEventListener("keydown", handleKeyDown);
-    };
-  }, [onClose]);
+//     return () => {
+//       window.removeEventListener("keydown", handleKeyDown);
+//     };
+//   }, [onClose]);
 
-  useEffect(() => {
-    document.body.style.overflow = isOpen ? "hidden" : "auto";
+//   useEffect(() => {
+//     document.body.style.overflow = isOpen ? "hidden" : "auto";
 
-    return () => {
-      document.body.style.overflow = "auto";
-    };
-  }, [isOpen]);
+//     return () => {
+//       document.body.style.overflow = "auto";
+//     };
+//   }, [isOpen]);
 
-  return (
-    <>
-      <div style={{ display: isOpen ? "block" : "none" }}>
-        {isOpen && (
-          <div className="portfolio-modal__overlay" onClick={onClose}></div>
-        )}
+//   return (
+//     <>
+//       <div style={{ display: isOpen ? "block" : "none" }}>
+//         {isOpen && (
+//           <div className="portfolio-modal__overlay" onClick={onClose}></div>
+//         )}
 
-        <Modal>
-          <button
-            className={styles["portfolio-modal__button-close"]}
-            onClick={onClose}
-          >
-            x
-          </button>
-          <div>
-            <h1>Portfolio modal </h1>
-          </div>
-        </Modal>
-      </div>
-    </>
-  );
-};
+//         <Modal>
+//           <button
+//             className={styles["portfolio-modal__button-close"]}
+//             onClick={onClose}
+//           >
+//             x
+//           </button>
+//           <div>
+//             <h1>Portfolio modal </h1>
+//           </div>
+//         </Modal>
+//       </div>
+//     </>
+//   );
+// };