Finish Video

Author: WebDevSimplified

src/1-20/1-useToggle/ToggleComponent.js renamed to src/1-useToggle/ToggleComponent.js

@@ -1,4 +1,4 @@
-import useEventListener from "../1-20/13-useEventListener/useEventListener"
+import useEventListener from "../13-useEventListener/useEventListener"
 
 export default function useClickOutside(ref, cb) {
   useEventListener(

src/1-20/1-useToggle/useToggle.js renamed to src/1-useToggle/useToggle.js

@@ -1,6 +1,6 @@
 import { useEffect } from "react"
-import useMediaQuery from "../1-20/16-useMediaQuery/useMediaQuery"
-import { useLocalStorage } from "../1-20/8-useStorage/useStorage"
+import useMediaQuery from "../16-useMediaQuery/useMediaQuery"
+import { useLocalStorage } from "../8-useStorage/useStorage"
 
 export default function useDarkMode() {
   const [darkMode, setDarkMode] = useLocalStorage("useDarkMode")

src/1-20/10-useFetch/FetchComponent.js renamed to src/10-useFetch/FetchComponent.js

@@ -11,6 +11,7 @@ export default function TranslationComponent() {
       <div>{t("nested.value")}</div>
       <button onClick={() => setLanguage("sp")}>Change To Spanish</button>
       <button onClick={() => setLanguage("en")}>Change To English</button>
+      <button onClick={() => setFallbackLanguage("sp")}>Change FB Lang</button>
     </>
   )
 }

src/1-20/10-useFetch/useFetch.js renamed to src/10-useFetch/useFetch.js

@@ -1,4 +1,4 @@
-import { useLocalStorage } from "../1-20/8-useStorage/useStorage"
+import { useLocalStorage } from "../8-useStorage/useStorage"
 import * as translations from "./translations"
 
 export default function useTranslation() {

src/1-20/11-useScript/ScriptComponent.js renamed to src/11-useScript/ScriptComponent.js

@@ -1,23 +1,23 @@
-import ToggleComponent from "./1-20/1-useToggle/ToggleComponent"
-import TimeoutComponent from "./1-20/2-useTimeout/TimeoutComponent"
-import DebounceComponent from "./1-20/3-useDebounce/DebounceComponent"
-import UpdateEffectComponent from "./1-20/4-useUpdateEffect/UpdateEffectComponent"
-import ArrayComponent from "./1-20/5-useArray/ArrayComponent"
-import PreviousComponent from "./1-20/6-usePrevious/PreviousComponent"
-import StateWithHistoryComponent from "./1-20/7-useStateWithHistory/StateWithHistoryComponent"
-import StorageComponent from "./1-20/8-useStorage/StorageComponent"
-import AsyncComponent from "./1-20/9-useAsync/AsyncComponent"
-import FetchComponent from "./1-20/10-useFetch/FetchComponent"
-import ScriptComponent from "./1-20/11-useScript/ScriptComponent"
-import DeepCompareEffectComponent from "./1-20/12-useDeepCompareEffect/DeepCompareEffectComponent"
-import EventListenerComponent from "./1-20/13-useEventListener/EventListenerComponent"
-import OnScreenComponentComponent from "./1-20/14-useOnScreen/OnScreenComponent"
-import WindowSizeComponent from "./1-20/15-useWindowSize/WindowSizeComponent"
-import MediaQueryComponent from "./1-20/16-useMediaQuery/MediaQueryComponent"
-import GeolocationComponent from "./1-20/17-useGeolocation/GeolocationComponent"
-import StateWithValidationComponent from "./1-20/18-useStateWithValidation/StateWithValidationComponent"
-import SizeComponent from "./1-20/19-useSize/SizeComponent"
-import EffectOnceComponent from "./1-20/20-useEffectOnce/EffectOnceComponent"
+import ToggleComponent from "./1-useToggle/ToggleComponent"
+import TimeoutComponent from "./2-useTimeout/TimeoutComponent"
+import DebounceComponent from "./3-useDebounce/DebounceComponent"
+import UpdateEffectComponent from "./4-useUpdateEffect/UpdateEffectComponent"
+import ArrayComponent from "./5-useArray/ArrayComponent"
+import PreviousComponent from "./6-usePrevious/PreviousComponent"
+import StateWithHistoryComponent from "./7-useStateWithHistory/StateWithHistoryComponent"
+import StorageComponent from "./8-useStorage/StorageComponent"
+import AsyncComponent from "./9-useAsync/AsyncComponent"
+import FetchComponent from "./10-useFetch/FetchComponent"
+import ScriptComponent from "./11-useScript/ScriptComponent"
+import DeepCompareEffectComponent from "./12-useDeepCompareEffect/DeepCompareEffectComponent"
+import EventListenerComponent from "./13-useEventListener/EventListenerComponent"
+import OnScreenComponentComponent from "./14-useOnScreen/OnScreenComponent"
+import WindowSizeComponent from "./15-useWindowSize/WindowSizeComponent"
+import MediaQueryComponent from "./16-useMediaQuery/MediaQueryComponent"
+import GeolocationComponent from "./17-useGeolocation/GeolocationComponent"
+import StateWithValidationComponent from "./18-useStateWithValidation/StateWithValidationComponent"
+import SizeComponent from "./19-useSize/SizeComponent"
+import EffectOnceComponent from "./20-useEffectOnce/EffectOnceComponent"
 import ClickOutsideComponent from "./21-useClickOutside/ClickOutsideComponent"
 import DarkModeComponent from "./22-useDarkMode/DarkModeComponent"
 import CopyToClipboardComponent from "./23-useCopyToClipboard/CopyToClipboardComponent"
@@ -45,11 +45,11 @@ function App() {
   // return <StateWithValidationComponent />
   // return <SizeComponent />
   // return <EffectOnceComponent />
-  return <ClickOutsideComponent />
+  // return <ClickOutsideComponent />
   // return <DarkModeComponent />
   // return <CopyToClipboardComponent />
   // return <CookieComponent />
-  // return <TranslationComponent />
+  return <TranslationComponent />
 }
 
 export default App