refactor selecting pages + animation transition

src/App.css

@@ -1,5 +1,5 @@
 #root {
-  margin: 0 auto;
+  margin: 0;
   text-align: center;
 }
 
@@ -16,25 +16,3 @@
   filter: drop-shadow(0 0 2em #61dafbaa);
 }
 
-@keyframes logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}
-
-@media (prefers-reduced-motion: no-preference) {
-  a:nth-of-type(2) .logo {
-    animation: logo-spin infinite 20s linear;
-  }
-}
-
-.card {
-  padding: 2em;
-}
-
-.read-the-docs {
-  color: #888;
-}

src/App.jsx

@@ -1,36 +1,14 @@
 // src/App.jsx
 
-import React, { useState } from "react";
+import React from "react";
 import "./App.css";
-import HomePage from "./components/HomePage/HomePage";
-import RecommendationPage from "./components/Recommendation/RecommendationPage";
 import { IsHomeProvider } from "./contexts/IsHomeContext";
+import PageSelector from "./components/PageSelector/PageSelector";
 
 function App() {
-  const [recommendations, setRecommendations] = useState([]);
-
-  const handleAPICall = (data) => {
-    // Simulez des données recommandées
-    const simulatedRecommendations = [
-      { artistName: "Becky G", songName: "Arranca (feat. Omega)" },
-      { artistName: "Sound Of Legend", songName: "God is a Girl" },
-      { artistName: "Dua Lipa", songName: "Dance The Night" },
-      { artistName: "Loreen", songName: "Tattoo" },
-      { artistName: "Calema", songName: "A Nossa Dança" },
-      { artistName: "Loi", songName: "Gold" },
-      { artistName: "Maluma", songName: "COCO LOCO" },
-      { artistName: "Marnik, Naeleck & VINAI", songName: "Boyz In Paris" },
-      { artistName: "Calvin Harris & Sam Smith", songName: "Desire" },
-      { artistName: "Doja Cat", songName: "Paint The Town Red" },
-    ];
-    setRecommendations(simulatedRecommendations);
-  };
-
   return (
     <IsHomeProvider>
-      <div className="app-container">
-        <HomePage parentOnClick={handleAPICall} />
-      </div>
+      <PageSelector />
     </IsHomeProvider>
   );
 }

src/components/HomePage/HomePage.css

@@ -1,11 +1,11 @@
 /* src/components/HomePage.css */
 
 .home-container {
+  position: relative;
   display: flex;
   flex-direction: column;
   height: 100vh;
   width: 100vw;
-  font-family: "Montserrat", sans-serif;
 }
 
 .brand {
@@ -84,8 +84,8 @@
 .footer-fade {
   position: absolute;
   bottom: 0;
-  height: 50vh;
+  height: 80vh;
   width: 100vw;
-  background: linear-gradient(to top, rgba(0, 1, 15, 1), rgba(0, 1, 15, 0));
+  background: linear-gradient(to top, rgba(0, 1, 15, 1), 60%,rgba(0, 1, 15, 0));
   z-index: -1;
 }

src/components/HomePage/HomePage.jsx

@@ -4,23 +4,13 @@ import React, { useState } from 'react';
 import './HomePage.css';
 import TextInput from '../TextInput/TextInput';
 import ButtonSubmit from '../ButtonSubmit/ButtonSubmit';
-import { useIsHome, useIsHomeUpdate } from '../../contexts/IsHomeContext';
 
 function HomePage({ parentOnClick }) {
   const [artist, setArtist] = useState('');
   const [song, setSong] = useState('');
 
-  const toggleIsHome = useIsHomeUpdate();
-
-  // TODO: add a proper API call
   const handleSubmit = () => {
-    setTimeout(() => {
-      parentOnClick(artist, song);
-      console.log('API responded')
-      toggleIsHome();
-    }, 2000);
-
-
+    parentOnClick(artist, song); 
   };
 
   return (

src/components/PageSelector/PageSelector.css

@@ -0,0 +1,9 @@
+.container {
+    position: relative;
+    overflow: hidden;
+  }
+
+  .home-container {
+    position:absolute;
+    transition: all 1.5s ease-in-out;
+  }

src/components/PageSelector/PageSelector.jsx

@@ -0,0 +1,61 @@
+// src/components/PageSelector
+
+import React, { useState } from "react";
+import "./PageSelector.css";
+import HomePage from "../HomePage/HomePage"
+import RecommendationPage from "../Recommendation/RecommendationPage";
+import { useIsHome, useIsHomeUpdate } from "../../contexts/IsHomeContext";
+
+const PageSelector = () => {
+    const simulatedRecommendations = [
+        { artistName: "Becky G", songName: "Arranca (feat. Omega)" },
+        { artistName: "Sound Of Legend", songName: "God is a Girl" },
+        { artistName: "Dua Lipa", songName: "Dance The Night" },
+        { artistName: "Loreen", songName: "Tattoo" },
+        { artistName: "Calema", songName: "A Nossa Dança" },
+        { artistName: "Loi", songName: "Gold" },
+        { artistName: "Maluma", songName: "COCO LOCO" },
+        { artistName: "Marnik, Naeleck & VINAI", songName: "Boyz In Paris" },
+        { artistName: "Calvin Harris & Sam Smith", songName: "Desire" },
+        { artistName: "Doja Cat", songName: "Paint The Town Red" },
+        ];
+    const [showHome, setShowHome] = useState(true);
+
+    const homePage = useIsHome();
+    const toggleHomePage = useIsHomeUpdate();
+
+
+    // TODO: replace this with API call but keep the nested timeout for animation
+    const handleAPICall = () => {
+        setTimeout(() => {
+            toggleHomePage();
+            console.log('API responded')
+
+            // keep this for animation
+            setTimeout(() => {
+                setShowHome(false);
+            }, 1600)
+        }, 2000);
+
+
+    };
+
+    React.useEffect(() => {console.log(homePage)}, [homePage]) // debug
+
+    return (
+        <div className="container">
+            {
+                showHome ? 
+                <div className="home-container" style={{transform: homePage ? 'translateY(0)' : 'translateY(-100vh)', opacity: homePage ? '100%' : '0%'}}>
+                    <HomePage parentOnClick={handleAPICall} />
+                </div>
+                :
+                <div>
+                    <RecommendationPage recommendations={simulatedRecommendations}/>
+                </div>
+            }
+        </div>
+    );
+}
+
+export default PageSelector;

src/components/Recommendation/RecommendationPage.css

@@ -1,8 +1,18 @@
 /* src/components/RecommendationPage.css */
 
-.recommendation-container {
-  padding: 20px;
-  font-family: "Montserrat", sans-serif;
+.container {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  height: 100vh;
+  width: 100vw;
+
+  background: linear-gradient(to bottom, #010311, 60%, #00010f);
+}
+
+.animation-container {
+  margin: auto auto;
+  transition: all 2s ease-in-out;
 }
 
 .recommendation-table {
@@ -34,4 +44,4 @@
 
 .back-button:hover {
   background-color: #005f5f;
-}
+}

src/components/Recommendation/RecommendationPage.jsx

@@ -3,28 +3,39 @@
 import React from "react";
 import "./RecommendationPage.css";
 
-function RecommendationPage({ recommendations, onBack }) {
+function RecommendationPage({ recommendations }) {
+  const [justLoaded, setJustLoaded] = React.useState(false);
+
+  React.useEffect(() => { // just animation purposes
+    setTimeout(() => {
+      setJustLoaded(true);
+    }
+    , 100)
+  }, [])
+
   return (
-    <div className="recommendation-container">
-      <button onClick={onBack} className="back-button">
-        Retour
-      </button>
-      <table className="recommendation-table">
-        <thead>
-          <tr>
-            <th>Artiste</th>
-            <th>Titre</th>
-          </tr>
-        </thead>
-        <tbody>
-          {recommendations.map((rec, index) => (
-            <tr key={index}>
-              <td>{rec.artistName}</td>
-              <td>{rec.songName}</td>
+    <div className="container">
+      <div className="animation-container" style={{opacity: justLoaded ? '100%' : '0%'}}>
+        <button className="back-button">
+          Retour
+        </button>
+        <table className="recommendation-table">
+          <thead>
+            <tr>
+              <th>Artiste</th>
+              <th>Titre</th>
             </tr>
-          ))}
-        </tbody>
-      </table>
+          </thead>
+          <tbody>
+            {recommendations.map((rec, index) => (
+              <tr key={index}>
+                <td>{rec.artistName}</td>
+                <td>{rec.songName}</td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
     </div>
   );
 }

src/contexts/IsHomeContext.jsx

@@ -12,7 +12,7 @@ export const useIsHomeUpdate = () => {
 }
 
 export const IsHomeProvider = ({ children }) => {
-    const [isHome, setIsHome] = useState(true);
+    const [isHome, setIsHome] = useState(true); // change for debugging
 
     const toggleIsHome = () => {
         setIsHome(isHome => !isHome);

src/index.css

@@ -20,22 +20,4 @@ body {
   place-items: center;
   min-width: 320px;
   min-height: 100vh;
-}
-
-h1 {
-  font-size: 3.2em;
-  line-height: 1.1;
-}
-
-@media (prefers-color-scheme: light) {
-  :root {
-    color: #213547;
-    background-color: #ffffff;
-  }
-  a:hover {
-    color: #747bff;
-  }
-  button {
-    background-color: #f9f9f9;
-  }
-}
+}

src/main.jsx

@@ -3,6 +3,7 @@ import ReactDOM from 'react-dom/client'
 import App from './App.jsx'
 import './index.css'
 
+
 ReactDOM.createRoot(document.getElementById('root')).render(
   <React.StrictMode>
     <App />