Refactored funnel report. Made BarChart more generic.

components/input/LanguageButton.js

@@ -9,9 +9,9 @@ export function LanguageButton() {
   const { locale, saveLocale, dir } = useLocale();
   const items = Object.keys(languages).map(key => ({ ...languages[key], value: key }));
 
-  function handleSelect(value) {
-    //saveLocale(value);
-    console.log('WTFFFF');
+  function handleSelect(value, close) {
+    saveLocale(value);
+    close();
   }
 
   return (
@@ -22,24 +22,28 @@ export function LanguageButton() {
         </Icon>
       </Button>
       <Popup position="bottom" alignment={dir === 'rtl' ? 'start' : 'end'}>
-        <div className={styles.menu}>
-          {items.map(({ value, label }) => {
-            return (
-              <div
-                key={value}
-                className={classNames(styles.item, { [styles.selected]: value === locale })}
-                onClick={handleSelect.bind(null, value)}
-              >
-                <Text>{label}</Text>
-                {value === locale && (
-                  <Icon className={styles.icon}>
-                    <Icons.Check />
-                  </Icon>
-                )}
-              </div>
-            );
-          })}
-        </div>
+        {close => {
+          return (
+            <div className={styles.menu}>
+              {items.map(({ value, label }) => {
+                return (
+                  <div
+                    key={value}
+                    className={classNames(styles.item, { [styles.selected]: value === locale })}
+                    onClick={handleSelect.bind(null, value, close)}
+                  >
+                    <Text>{label}</Text>
+                    {value === locale && (
+                      <Icon className={styles.icon}>
+                        <Icons.Check />
+                      </Icon>
+                    )}
+                  </div>
+                );
+              })}
+            </div>
+          );
+        }}
       </Popup>
     </PopupTrigger>
   );

components/input/ThemeButton.js

@@ -5,7 +5,7 @@ import Icons from 'components/icons';
 import styles from './ThemeButton.module.css';
 
 export function ThemeButton() {
-  const [theme, setTheme] = useTheme();
+  const { theme, saveTheme } = useTheme();
 
   const transitions = useTransition(theme, {
     initial: { opacity: 1 },
@@ -21,7 +21,7 @@ export function ThemeButton() {
   });
 
   function handleClick() {
-    setTheme(theme === 'light' ? 'dark' : 'light');
+    saveTheme(theme === 'light' ? 'dark' : 'light');
   }
 
   return (