From 6a0722a69783eecc8e8878b763ca86083c778b0a Mon Sep 17 00:00:00 2001
From: David Ralph <me@davidcralph.co.uk>
Date: Sun, 28 Aug 2022 22:50:34 +0100
Subject: [PATCH] fix: translation display bug, marketplace error, cleanup
 carousel

---
 .gitignore                                    |  1 +
 src/components/helpers/carousel/Carousel.jsx  | 70 +++++++++++++------
 .../helpers/carousel/CarouselButtons.jsx      | 14 ----
 .../modals/main/settings/sections/Weather.jsx |  2 +-
 src/index.jsx                                 |  6 +-
 5 files changed, 52 insertions(+), 41 deletions(-)
 delete mode 100644 src/components/helpers/carousel/CarouselButtons.jsx

diff --git a/.gitignore b/.gitignore
index dfcf9fd0..c6e8c984 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,5 +1,6 @@
 # Directories
 node_modules/
+.history/
 .vscode/
 build/
 .idea/
diff --git a/src/components/helpers/carousel/Carousel.jsx b/src/components/helpers/carousel/Carousel.jsx
index 7582f81f..1c223202 100644
--- a/src/components/helpers/carousel/Carousel.jsx
+++ b/src/components/helpers/carousel/Carousel.jsx
@@ -1,39 +1,47 @@
 import React, { useState, useEffect, useCallback, useRef } from 'react';
-import { PrevButton, NextButton } from './CarouselButtons';
+import { MdOutlineArrowForwardIos, MdOutlineArrowBackIos } from 'react-icons/md';
 import useEmblaCarousel from 'embla-carousel-react';
 import Autoplay from 'embla-carousel-autoplay';
-import './carousel.scss';
-import { FaPhotoVideo } from 'react-icons/fa';
 
-const EmblaCarousel = ({ data, options = { loop: false } }) => {
+import './carousel.scss';
+
+export default function EmblaCarousel({ data }) {
   const autoplay = useRef(
     Autoplay({ delay: 3000, stopOnInteraction: false }, (emblaRoot) => emblaRoot.parentElement),
   );
 
-  const [emblaRef, emblaApi] = useEmblaCarousel(options, [autoplay.current]);
+  const [emblaRef, emblaApi] = useEmblaCarousel({ loop: false }, [autoplay.current]);
   const [prevBtnEnabled, setPrevBtnEnabled] = useState(false);
   const [nextBtnEnabled, setNextBtnEnabled] = useState(false);
 
-  const scrollNext = useCallback(() => {
-    if (!emblaApi) return;
-    emblaApi.scrollNext();
-    autoplay.current.reset();
-  }, [emblaApi]);
+  const scroll = useCallback(
+    (direction) => {
+      if (!emblaApi) {
+        return;
+      }
 
-  const scrollPrev = useCallback(() => {
-    if (!emblaApi) return;
-    emblaApi.scrollPrev();
-    autoplay.current.reset();
-  }, [emblaApi]);
+      if (direction === 'next') {
+        emblaApi.scrollNext();
+      } else {
+        emblaApi.scrollPrev();
+      }
+      autoplay.current.reset();
+    },
+    [emblaApi],
+  );
 
   const onSelect = useCallback(() => {
-    if (!emblaApi) return;
+    if (!emblaApi) {
+      return;
+    }
     setPrevBtnEnabled(emblaApi.canScrollPrev());
     setNextBtnEnabled(emblaApi.canScrollNext());
   }, [emblaApi]);
 
   useEffect(() => {
-    if (!emblaApi) return;
+    if (!emblaApi) {
+      return;
+    }
     onSelect();
     emblaApi.on('select', onSelect);
   }, [emblaApi, onSelect]);
@@ -45,16 +53,32 @@ const EmblaCarousel = ({ data, options = { loop: false } }) => {
           {data.map((photo, index) => (
             <div className="embla__slide" key={index}>
               <div className="embla__slide__inner">
-                <img className="embla__slide__img" src={photo.url.default} alt="A cool cat." />
+                <img
+                  className="embla__slide__img"
+                  src={photo.url.default}
+                  alt="Marketplace example screenshot"
+                />
               </div>
             </div>
           ))}
         </div>
       </div>
-      <PrevButton onClick={scrollPrev} enabled={prevBtnEnabled} />
-      <NextButton onClick={scrollNext} enabled={nextBtnEnabled} />
+      <button
+        className="embla__button embla__button--prev"
+        onClick={() => scroll('prev')}
+        disabled={!prevBtnEnabled}
+        title="Previous"
+      >
+        <MdOutlineArrowBackIos />
+      </button>
+      <button
+        className="embla__button embla__button--next"
+        onClick={() => scroll('next')}
+        disabled={!nextBtnEnabled}
+        title="Next"
+      >
+        <MdOutlineArrowForwardIos />
+      </button>
     </div>
   );
-};
-
-export default EmblaCarousel;
+}
diff --git a/src/components/helpers/carousel/CarouselButtons.jsx b/src/components/helpers/carousel/CarouselButtons.jsx
deleted file mode 100644
index dc08847d..00000000
--- a/src/components/helpers/carousel/CarouselButtons.jsx
+++ /dev/null
@@ -1,14 +0,0 @@
-import React from 'react';
-import { MdOutlineArrowForwardIos, MdOutlineArrowBackIos } from 'react-icons/md';
-
-export const PrevButton = ({ enabled, onClick }) => (
-  <button className="embla__button embla__button--prev" onClick={onClick} disabled={!enabled}>
-    <MdOutlineArrowBackIos />
-  </button>
-);
-
-export const NextButton = ({ enabled, onClick }) => (
-  <button className="embla__button embla__button--next" onClick={onClick} disabled={!enabled}>
-    <MdOutlineArrowForwardIos />
-  </button>
-);
diff --git a/src/components/modals/main/settings/sections/Weather.jsx b/src/components/modals/main/settings/sections/Weather.jsx
index c6f453b9..81f322a0 100644
--- a/src/components/modals/main/settings/sections/Weather.jsx
+++ b/src/components/modals/main/settings/sections/Weather.jsx
@@ -122,7 +122,7 @@ export default class TimeSettings extends PureComponent {
             category="weather"
           />
         </SettingsItem>
-        {localStorage.getItem('weatherType') == 4 && (
+        {localStorage.getItem('weatherType') === 4 && (
           <SettingsItem title="Custom Settings">
             <Checkbox
               name="weatherdescription"
diff --git a/src/index.jsx b/src/index.jsx
index 87329c4c..32c6b98d 100644
--- a/src/index.jsx
+++ b/src/index.jsx
@@ -1,4 +1,4 @@
-import { createRoot } from 'react-dom/client';
+import { render } from 'react-dom';
 import * as Sentry from '@sentry/react';
 
 import App from './App';
@@ -40,7 +40,7 @@ variables.language = new I18n(variables.languagecode, {
   tr_TR: translations.tr_TR,
 });
 
-variables.getMessage = (text) => variables.language.getMessage(variables.languagecode, text);
+variables.getMessage = (text, optional) => variables.language.getMessage(variables.languagecode, text, optional || {});
 
 // set html language tag
 if (variables.languagecode !== 'en_GB' || variables.languagecode !== 'en_US') {
@@ -61,4 +61,4 @@ Sentry.init({
   autoSessionTracking: false,
 });
 
-createRoot(document.getElementById('root')).render(<App />);
+render(<App />, document.getElementById('root'));