From 690df86b3d01f2fec7aec4b3270c2b7fed785f4e Mon Sep 17 00:00:00 2001
From: Fedor Katurov <gotham48@gmail.com>
Date: Fri, 19 Mar 2021 14:25:37 +0700
Subject: [PATCH] #23 made clickable superpower captions

---
 .../boris/BorisSuperpowers/index.tsx          | 40 ++++++++++++-------
 1 file changed, 25 insertions(+), 15 deletions(-)

diff --git a/src/components/boris/BorisSuperpowers/index.tsx b/src/components/boris/BorisSuperpowers/index.tsx
index 513e36be..db95c548 100644
--- a/src/components/boris/BorisSuperpowers/index.tsx
+++ b/src/components/boris/BorisSuperpowers/index.tsx
@@ -1,4 +1,4 @@
-import React, { FC } from 'react';
+import React, { FC, useCallback } from 'react';
 import styles from './styles.module.scss';
 import { Toggle } from '~/components/input/Toggle';
 
@@ -7,21 +7,31 @@ interface IProps {
   onChange?: (val: boolean) => void;
 }
 
-const BorisSuperpowers: FC<IProps> = ({ active, onChange }) => (
-  <div className={styles.wrap}>
-    <div className={styles.toggle}>
-      <Toggle value={active} handler={onChange} />
-    </div>
+const BorisSuperpowers: FC<IProps> = ({ active, onChange }) => {
+  const onToggle = useCallback(() => {
+    if (!onChange) {
+      return;
+    }
 
-    <div className={styles.left}>
-      <div className={styles.title}>Суперспособности</div>
-      {active ? (
-        <div className={styles.subtitle}>Включи, чтобы видеть будущее</div>
-      ) : (
-        <div className={styles.subtitle}>Ты видишь всё, что скрыто</div>
-      )}
+    onChange(!active);
+  }, [onChange, active]);
+
+  return (
+    <div className={styles.wrap}>
+      <div className={styles.toggle}>
+        <Toggle value={active} handler={onChange} />
+      </div>
+
+      <div className={styles.left} onClick={onToggle}>
+        <div className={styles.title}>Суперспособности</div>
+        {active ? (
+          <div className={styles.subtitle}>Включи, чтобы видеть будущее</div>
+        ) : (
+          <div className={styles.subtitle}>Ты видишь всё, что скрыто</div>
+        )}
+      </div>
     </div>
-  </div>
-);
+  );
+};
 
 export { BorisSuperpowers };