🔨 Switch Badges to use useOvermind

Author: MichaelDeBoey

packages/app/src/app/overmind/namespaces/preferences/actions.ts

@@ -1,6 +1,8 @@
+import { Badge } from '@codesandbox/common/lib/types';
+import { json } from 'overmind';
+
 import { Action, AsyncAction } from 'app/overmind';
 import { setVimExtensionEnabled } from 'app/vscode/initializers';
-import { json } from 'overmind';
 
 export const viewModeChanged: Action<{
   showEditor: boolean;
@@ -59,13 +61,11 @@ export const settingChanged: Action<{
   });
 };
 
-export const setBadgeVisibility: AsyncAction<{
-  id: string;
-  visible: boolean;
-}> = async ({ state, effects }, { id, visible }) => {
-  const { badges } = state.user;
-
-  badges.forEach((badge, index) => {
+export const setBadgeVisibility: AsyncAction<Pick<
+  Badge,
+  'id' | 'visible'
+>> = async ({ effects, state }, { id, visible }) => {
+  state.user.badges.forEach((badge, index) => {
     if (badge.id === id) {
       state.user.badges[index].visible = visible;
     }

packages/app/src/app/pages/common/Modals/PreferencesModal/Badges/index.tsx

@@ -8,37 +8,35 @@ import { Title } from '../elements';
 
 export const Badges: FunctionComponent = () => {
   const {
-    state: {
-      user: { badges },
-    },
     actions: {
       preferences: { setBadgeVisibility },
     },
+    state: {
+      user: { badges },
+    },
   } = useOvermind();
-  const badgesCount = badges.length;
 
   return (
     <div>
       <Title>Badges</Title>
+
       <strong>
-        You currently have {badgesCount} badge
-        {badgesCount === 1 ? '' : 's'}. You can click on the badges to toggle
+        You currently have {badges.length} badge
+        {badges.length === 1 ? '' : 's'}. You can click on the badges to toggle
         visibility.
       </strong>
+
       <Margin top={2}>
         {badges.map(badge => (
           <Badge
+            badge={badge}
+            onClick={({ id, visible }) =>
+              setBadgeVisibility({ id, visible: !visible })
+            }
             key={badge.id}
+            size={128}
             tooltip={false}
-            onClick={b =>
-              setBadgeVisibility({
-                ...b,
-                visible: !b.visible,
-              })
-            }
-            badge={badge}
             visible={badge.visible}
-            size={128}
           />
         ))}
       </Margin>