From 5c2966ae4d71b31d3241b7a84b7ca23c3dd4c17c Mon Sep 17 00:00:00 2001
From: Ricardo Casares <ricardocasares@gmail.com>
Date: Fri, 30 Oct 2020 15:20:40 +0100
Subject: [PATCH] fix: simplify toggles

---
 src/components/Card/index.tsx               | 24 +++---------
 src/components/Toggle/index.tsx             | 14 -------
 src/components/Toggles/index.tsx            | 43 +++++++++++++++++++++
 src/components/{Toggle => Toggles}/style.ts |  0
 src/pages/settings.tsx                      |  4 +-
 5 files changed, 50 insertions(+), 35 deletions(-)
 delete mode 100644 src/components/Toggle/index.tsx
 create mode 100644 src/components/Toggles/index.tsx
 rename src/components/{Toggle => Toggles}/style.ts (100%)

diff --git a/src/components/Card/index.tsx b/src/components/Card/index.tsx
index 76ec246d..020668b4 100644
--- a/src/components/Card/index.tsx
+++ b/src/components/Card/index.tsx
@@ -1,15 +1,8 @@
 import { FC } from "react";
-import { PlayCircle, Heart, HeartFill } from "@geist-ui/react-icons";
+import { PlayCircle } from "@geist-ui/react-icons";
+import { HeartToggle } from "@/components/Toggles";
 import { Container, Cover, Button, Title, Subtitle, Body } from "./style";
 
-export const HeartToggle: FC<{ active: boolean }> = ({ active }) => {
-  if (active) {
-    return <HeartFill color="var(--highlight-magenta)" />;
-  }
-
-  return <Heart color="var(--accents-3)" />;
-};
-
 const DEFAULT_SUBTITLE = "Global";
 
 export type Card = {
@@ -42,16 +35,9 @@ export const Card: FC<Card> = ({
         <Title>{title}</Title>
         <Subtitle>{subtitle || DEFAULT_SUBTITLE}</Subtitle>
       </div>
-      {!isFaved && (
-        <Button onClick={onFaved}>
-          <HeartToggle active={false} />
-        </Button>
-      )}
-      {isFaved && (
-        <Button onClick={onUnFaved}>
-          <HeartToggle active={true} />
-        </Button>
-      )}
+      <Button onClick={!isFaved ? onFaved : onUnFaved}>
+        <HeartToggle active={isFaved} />
+      </Button>
     </Body>
   </Container>
 );
diff --git a/src/components/Toggle/index.tsx b/src/components/Toggle/index.tsx
deleted file mode 100644
index 6f9ed554..00000000
--- a/src/components/Toggle/index.tsx
+++ /dev/null
@@ -1,14 +0,0 @@
-import { FC } from "react";
-import { ToggleLeft, ToggleRight } from "@geist-ui/react-icons";
-
-export { ToggleItem } from "./style";
-
-export type Toggle = { active: boolean };
-
-export const Toggle: FC<Toggle> = ({ active }) => {
-  if (active) {
-    return <ToggleRight color="var(--cyan)" />;
-  }
-
-  return <ToggleLeft color="var(--accents-5)" />;
-};
diff --git a/src/components/Toggles/index.tsx b/src/components/Toggles/index.tsx
new file mode 100644
index 00000000..219d47cd
--- /dev/null
+++ b/src/components/Toggles/index.tsx
@@ -0,0 +1,43 @@
+import { FC, ReactElement } from "react";
+import {
+  Heart,
+  HeartFill,
+  ToggleLeft,
+  ToggleRight,
+} from "@geist-ui/react-icons";
+
+export { ToggleItem } from "./style";
+
+export type Toggable = {
+  on: ReactElement;
+  off: ReactElement;
+};
+
+export type Activable = {
+  active: boolean;
+};
+
+export type Toggle = Toggable & Activable;
+
+export const Toggle: FC<Toggle> = ({ on, off, active }) => (
+  <>
+    {active && on}
+    {!active && off}
+  </>
+);
+
+export const HeartToggle: FC<Activable> = (props) => (
+  <Toggle
+    on={<HeartFill color="var(--highlight-magenta)" />}
+    off={<Heart color="var(--accents-5)" />}
+    {...props}
+  />
+);
+
+export const RightLeftToggle: FC<Activable> = (props) => (
+  <Toggle
+    on={<ToggleRight color="var(--cyan)" />}
+    off={<ToggleLeft color="var(--accents-5)" />}
+    {...props}
+  />
+);
diff --git a/src/components/Toggle/style.ts b/src/components/Toggles/style.ts
similarity index 100%
rename from src/components/Toggle/style.ts
rename to src/components/Toggles/style.ts
diff --git a/src/pages/settings.tsx b/src/pages/settings.tsx
index d5b009f4..93ff2897 100644
--- a/src/pages/settings.tsx
+++ b/src/pages/settings.tsx
@@ -1,7 +1,7 @@
 import Link from "next/link";
 import { Box } from "@/components/Box";
 import { Stack } from "@/components/Stack";
-import { Toggle, ToggleItem } from "@/components/Toggle";
+import { RightLeftToggle, ToggleItem } from "@/components/Toggles";
 import { Heading } from "@/components/Typography";
 import { useTranslation } from "@/lib/hooks/useTranslation";
 import { localesMap } from "@/lib/utils";
@@ -25,7 +25,7 @@ export const Index = () => {
             <Link href="/settings" locale={lang}>
               <a>
                 <ToggleItem>
-                  {localesMap[lang]} <Toggle active={locale == lang} />
+                  {localesMap[lang]} <RightLeftToggle active={locale == lang} />
                 </ToggleItem>
               </a>
             </Link>