first commit

package.json

@@ -7,17 +7,20 @@
   "license": "GPL-3.0",
   "dependencies": {
     "@cypress/react": "^5.12.4",
+    "@types/react-router": "^5.1.20",
     "bulma": "^0.9.3",
+    "classnames": "^2.3.2",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
+    "react-router-dom": "^6.15.0",
     "react-scripts": "^4.0.3"
   },
   "devDependencies": {
     "@cypress/webpack-dev-server": "^1.8.4",
     "@mate-academy/cypress-tools": "^1.0.4",
     "@mate-academy/eslint-config-react": "*",
     "@mate-academy/eslint-config-react-typescript": "*",
-    "@mate-academy/scripts": "^1.2.1",
+    "@mate-academy/scripts": "^1.2.8",
     "@mate-academy/students-ts-config": "*",
     "@mate-academy/stylelint-config": "*",
     "@types/node": "^17.0.23",

src/App.scss

@@ -1 +1,37 @@
-// not empty
+@font-face {
+  font-family: Mont;
+  src: url(../src/fonts/Mont-Regular.otf);
+}
+
+@font-face {
+  font-family: Mont;
+  src: url(../src/fonts/Mont-SemiBold.otf);
+  font-weight: 700;
+}
+
+@font-face {
+  font-family: Mont;
+  src: url(../src/fonts/Mont-Bold.otf);
+  font-weight: 800;
+}
+
+@import "../src/styles/utils/vars";
+@import "../src/styles/utils/mixins";
+
+@import "../src/styles/page.scss";
+@import "../src/styles/nav.scss";
+@import "../src/styles/container.scss";
+@import "../src/styles/button.scss";
+@import "../src/styles/shop.scss";
+@import "../src/styles/category.scss";
+@import "../src/styles/icon.scss";
+@import "../src/styles/footer.scss";
+@import "../src/styles/filter.scss";
+@import "../src/styles/error.scss";
+@import "../src/styles/basket.scss";
+@import "../src/styles/header.scss";
+@import "../src/styles/item.scss";
+@import "../src/styles/pagination.scss";
+@import "../src/styles/slider.scss";
+@import "../src/styles/notFound.scss";
+@import "../src/styles/loader.scss";

src/App.tsx

@@ -1,9 +1,194 @@
 import './App.scss';
+import {
+  Route, Routes, Navigate,
+} from 'react-router-dom';
+import { useEffect, useState } from 'react';
+import { Header } from './Header';
+import { Footer } from './Footer';
+import { Iphone } from './types/Iphone';
+import { PhonesPage } from './PhonesPage';
+import { HomePage } from './HomePage';
+import { NotImplemented } from './PageNotImplemented';
+import { Favorites } from './Favorites';
+import { Basket } from './Basket';
+import { PhoneDescription } from './PhoneDescription';
+import { getAll } from './api/iphones';
 
-const App = () => (
-  <div className="App">
-    <h1>React Phone Catalog</h1>
-  </div>
-);
+const App = () => {
+  const [iphones, setIphones] = useState<Iphone[]>([]); // -
+  const [selectedIphoneId] = useState<null | string>(null); // - set
+  const [favorites, setFavorites] = useState<Iphone[]>([]);
+  const [selectedIphoneIdToBuy] = useState<null | string>(null);
+  const [iphonesToBuy, setIphonesToBuy] = useState<Iphone[]>([]);
+  const [iphoneTitle, setIphoneTitle] = useState('');
+
+  useEffect(() => {
+    getAll().then((items) => setIphones(items));
+  }, []);
+
+  const handleRemoveIphone = (iphoneId: string) => {
+    setIphonesToBuy(iphonesToBuy.filter(iphone => iphoneId !== iphone.id));
+  };
+
+  const handleSetInputText = (event: React.ChangeEvent<HTMLInputElement>) => {
+    setIphoneTitle(event.target.value);
+  };
+
+  const handleSelectPhone = (iphoneId: string | undefined) => {
+    const selectedIphone = iphones.find((iphone) => iphone.id === iphoneId); // was visibleItems before instead of iphones
+
+    if (selectedIphone) {
+      const isFavorite = favorites
+        .some((iphone) => iphone.id === selectedIphone.id);
+
+      if (isFavorite) {
+        const updatedFavorites = favorites
+          .filter((iphone) => iphone.id !== selectedIphone.id);
+
+        setFavorites(updatedFavorites);
+      } else {
+        const updatedFavorites = [...favorites, selectedIphone];
+
+        setFavorites(updatedFavorites);
+      }
+    }
+  };
+
+  const handleSelectPhoneToBuy = (iphoneId: string | undefined) => {
+    const selectedIphoneToBuy = iphones
+      .find((iphone) => iphone.id === iphoneId);
+
+    if (selectedIphoneToBuy) {
+      const isInBasket = iphonesToBuy
+        .some((iphone) => iphone.id === selectedIphoneToBuy.id);
+
+      if (isInBasket) {
+        const updatedInBasket = iphonesToBuy
+          .filter((iphone) => iphone.id !== selectedIphoneToBuy.id);
+
+        setIphonesToBuy(updatedInBasket);
+      } else {
+        const updatedInBasket = [...iphonesToBuy, selectedIphoneToBuy];
+
+        setIphonesToBuy(updatedInBasket);
+      }
+    }
+  };
+
+  const svgLike = document.querySelector('.icon--path');
+
+  if (favorites.length > 0) {
+    svgLike?.setAttribute('fill', '#EB5757');
+    svgLike?.removeAttribute('stroke');
+    svgLike?.removeAttribute('stroke-width');
+  } else {
+    svgLike?.setAttribute('fill', 'white');
+    svgLike?.setAttribute('stroke', 'black');
+    svgLike?.setAttribute('stroke-width', '1');
+  }
+
+  return (
+    <>
+      <Header
+        inputText={iphoneTitle}
+        setInputText={handleSetInputText}
+        favoritesCount={favorites.length}
+        basketCount={iphonesToBuy.length}
+      />
+      <main className="page">
+        <div className="container">
+          <Routes>
+            <Route
+              path="/"
+              element={(
+                <HomePage
+                  selectPhone={handleSelectPhone}
+                  selectedIphoneId={selectedIphoneId}
+                  selectPhoneToBuy={handleSelectPhoneToBuy}
+                  selectedIphoneIdToBuy={selectedIphoneIdToBuy}
+                />
+              )}
+            />
+
+            <Route path="/home" element={<Navigate to="/" replace />} />
+            <Route
+              path="phones"
+              element={(
+                <PhonesPage
+                  selectedIphoneId={selectedIphoneId}
+                  selectPhone={handleSelectPhone}
+                  selectPhoneToBuy={handleSelectPhoneToBuy}
+                  selectedIphoneIdToBuy={selectedIphoneIdToBuy}
+                  iphoneTitle={iphoneTitle}
+                />
+              )}
+            />
+            <Route
+              path="tablets"
+              element={(
+                <NotImplemented />)}
+            />
+            <Route
+              path="accessories"
+              element={(
+                <NotImplemented />)}
+            />
+
+            <Route
+              path="liked"
+              element={(
+                <Favorites
+                  favorites={favorites}
+                  selectedIphoneIdToBuy={selectedIphoneIdToBuy}
+                  selectPhoneToBuy={handleSelectPhoneToBuy}
+                  selectedIphoneId={selectedIphoneId}
+                  selectPhone={handleSelectPhone}
+                />
+              )}
+            />
+
+            <Route
+              path="basket"
+              element={(
+                <Basket
+                  phonesToBuy={iphonesToBuy}
+                  removeIphone={handleRemoveIphone}
+                />
+              )}
+            />
+
+            <Route path="phones">
+              <Route
+                index
+                element={(
+                  <PhonesPage
+                    selectedIphoneId={selectedIphoneId}
+                    selectPhone={handleSelectPhone}
+                    selectPhoneToBuy={handleSelectPhoneToBuy}
+                    selectedIphoneIdToBuy={selectedIphoneIdToBuy}
+                    iphoneTitle={iphoneTitle} // +
+                  />
+                )}
+              />
+              <Route
+                path=":iphoneId"
+                element={(
+                  <PhoneDescription
+                    selectedIphoneId={selectedIphoneId}
+                    selectPhone={handleSelectPhone}
+                    selectPhoneToBuy={handleSelectPhoneToBuy}
+                    selectedIphoneIdToBuy={selectedIphoneIdToBuy}
+                  />
+                )}
+              />
+            </Route>
+
+          </Routes>
+        </div>
+      </main>
+      <Footer />
+    </>
+  );
+};
 
 export default App;