refactor nesting functions + create context

src/App.jsx

@@ -4,12 +4,12 @@ import React, { useState } from "react";
 import "./App.css";
 import HomePage from "./components/HomePage/HomePage";
 import RecommendationPage from "./components/Recommendation/RecommendationPage";
+import { IsHomeProvider } from "./contexts/IsHomeContext";
 
 function App() {
-  const [page, setPage] = useState("home");
   const [recommendations, setRecommendations] = useState([]);
 
-  const handleSend = (data) => {
+  const handleAPICall = (data) => {
     // Simulez des données recommandées
     const simulatedRecommendations = [
       { artistName: "Becky G", songName: "Arranca (feat. Omega)" },
@@ -23,25 +23,15 @@ function App() {
       { artistName: "Calvin Harris & Sam Smith", songName: "Desire" },
       { artistName: "Doja Cat", songName: "Paint The Town Red" },
     ];
-
     setRecommendations(simulatedRecommendations);
-    console.log('done')
-  };
-
-  const handleBack = () => {
-    setPage("home");
   };
 
   return (
+    <IsHomeProvider>
       <div className="app-container">
-        {page === "home" && <HomePage onSend={handleSend} />}
-        {page === "recommendation" && (
-          <RecommendationPage
-            recommendations={recommendations}
-            onBack={handleBack}
-          />
-        )}
+        <HomePage parentOnClick={handleAPICall} />
       </div>
+    </IsHomeProvider>
   );
 }
 

src/components/ButtonSubmit/ButtonSubmit.jsx

@@ -1,21 +1,22 @@
-import React, { useState } from 'react';
+import React, { useState, useContext } from 'react';
 import './ButtonSubmit.css';
 import BeatLoader from "react-spinners/BeatLoader";
+import { useIsHome, useIsHomeUpdate } from '../../contexts/IsHomeContext';
 
-function ButtonSubmit({ song, artist, onSubmit, placeholder}) {
-
+function ButtonSubmit({ parentOnClick, placeholder}) {
     const [isDisabled, setIsDisabled] = useState(false);
-
-    const handleSubmit = () => {
-        setIsDisabled(() => true);
-        onSubmit({ song, artist });
+    const isHome = useIsHome();
+
+    const handleMouseUp = () => {
+        parentOnClick();
+        setIsDisabled(true);
     }
 
     return (
         <button className='button' 
-        onClick={handleSubmit} 
         disabled={isDisabled}
         style={{width: !isDisabled ? '17rem' : '7rem'}}
+        onMouseUp={handleMouseUp}
         >
             {!isDisabled ? placeholder : <BeatLoader color={'#ffffff'} size={5} />}
         </button>

src/components/HomePage/HomePage.jsx

@@ -4,16 +4,23 @@ 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({ onSend }) {
+function HomePage({ parentOnClick }) {
   const [artist, setArtist] = useState('');
   const [song, setSong] = useState('');
 
+  const toggleIsHome = useIsHomeUpdate();
+
+  // TODO: add a proper API call
   const handleSubmit = () => {
-    //wait 2s
     setTimeout(() => {
-      onSend({ artist, song });
+      parentOnClick(artist, song);
+      console.log('API responded')
+      toggleIsHome();
     }, 2000);
+
+
   };
 
   return (
@@ -28,7 +35,7 @@ function HomePage({ onSend }) {
         <div className='form-container'>
           <TextInput setState={setSong} placeholder={'Enter a song name'}/>
           <TextInput setState={setArtist} placeholder={'Enter an artist'}/>
-          <ButtonSubmit onSubmit={handleSubmit} placeholder={'Recommend songs'}/>
+          <ButtonSubmit parentOnClick={handleSubmit} placeholder={'Recommend songs'}/>
         </div>
       </div>
       <div className='footer-fade'></div>

src/contexts/IsHomeContext.jsx

@@ -0,0 +1,28 @@
+import React, { useState, createContext, useContext} from "react";
+
+const IsHomeContext = createContext();
+const IsHomeUpdateContext = createContext();
+
+export const useIsHome = () => {
+    return useContext(IsHomeContext);
+}
+
+export const useIsHomeUpdate = () => {
+    return useContext(IsHomeUpdateContext);
+}
+
+export const IsHomeProvider = ({ children }) => {
+    const [isHome, setIsHome] = useState(true);
+
+    const toggleIsHome = () => {
+        setIsHome(isHome => !isHome);
+    }
+
+    return (
+        <IsHomeContext.Provider value={isHome}>
+            <IsHomeUpdateContext.Provider value={toggleIsHome}>
+                {children}
+            </IsHomeUpdateContext.Provider>
+        </IsHomeContext.Provider>
+    )
+}