Merge pull request #133 from spacedriveapp/132-fix-toggle-logic

extract experimental toggle change logic

packages/interface/src/components/primitive/Toggle.tsx

@@ -1,43 +1,37 @@
-import React, { useState } from 'react';
+import React from 'react';
 import { Switch } from '@headlessui/react';
 import clsx from 'clsx';
-import { useStore } from '../device/Stores';
 
-export const Toggle = (
-  props: { initialState: boolean; size: 'sm' | 'md'; type: string } = {
-    initialState: false,
-    size: 'sm',
-    type: ''
-  }
-) => {
-  const [enabled, setEnabled] = useState(props.initialState || false);
-  if (enabled && props.type == 'experimental') {
-    useStore.setState({ experimental: true });
-  } else {
-    useStore.setState({ experimental: false });
-  }
+export interface ToggleProps {
+  value: boolean;
+  onChange: (value: boolean) => void;
+  size?: 'sm' | 'md';
+}
+
+export const Toggle: React.FC<ToggleProps> = (props) => {
+  const { value: isEnabled = false, onChange = (val) => null, size = 'sm' } = props;
 
   return (
     <Switch
-      checked={enabled}
-      onChange={setEnabled}
+      checked={isEnabled}
+      onChange={onChange}
       className={clsx(
         'transition relative flex-shrink-0 inline-flex items-center h-6 w-11 rounded-full bg-gray-200 dark:bg-gray-550',
         {
-          'bg-primary-500 dark:bg-primary-500': enabled,
-          'h-6 w-11': props.size === 'sm',
-          'h-8 w-[55px]': props.size === 'md'
+          'bg-primary-500 dark:bg-primary-500': isEnabled,
+          'h-6 w-11': size === 'sm',
+          'h-8 w-[55px]': size === 'md'
         }
       )}
     >
       <span
         className={clsx(
           'transition inline-block w-4 h-4 transform bg-white rounded-full',
-          enabled ? 'translate-x-6' : 'translate-x-1',
+          isEnabled ? 'translate-x-6' : 'translate-x-1',
           {
-            'w-4 h-4': props.size === 'sm',
-            'h-6 w-6': props.size === 'md',
-            'translate-x-7': props.size === 'md' && enabled
+            'w-4 h-4': size === 'sm',
+            'h-6 w-6': size === 'md',
+            'translate-x-7': size === 'md' && isEnabled
           }
         )}
       />

packages/interface/src/screens/settings/ExperimentalSettings.tsx

@@ -22,7 +22,15 @@ export default function ExperimentalSettings() {
         description="Shows data about Spacedrive such as Jobs, Job History and Client State."
       >
         <div className="flex items-center h-full">
-          <Toggle initialState={experimental} size={'sm'} type="experimental" />
+          <Toggle
+            value={experimental}
+            size={'sm'}
+            onChange={(newValue) => {
+              useStore.setState({
+                experimental: newValue
+              });
+            }}
+          />
         </div>
       </InputContainer>
     </div>

packages/interface/src/screens/settings/LibrarySettings.tsx

@@ -1,5 +1,4 @@
 import React from 'react';
-import { Button } from '@sd/ui';
 import { InputContainer } from '../../components/primitive/InputContainer';
 import { Toggle } from '../../components/primitive';
 
@@ -7,6 +6,7 @@ type LibrarySecurity = 'public' | 'password' | 'vault';
 
 export default function LibrarySettings() {
   // const locations = useBridgeQuery("SysGetLocation")
+  const [encryptOnCloud, setEncryptOnCloud] = React.useState<boolean>(false);
 
   return (
     <div className="flex flex-col flex-grow max-w-4xl space-y-4">
@@ -23,7 +23,7 @@ export default function LibrarySettings() {
         description="Enable if library contains sensitive data and should not be synced to the cloud without full encryption."
       >
         <div className="flex items-center h-full">
-          <Toggle initialState={true} size={'sm'} />
+          <Toggle value={encryptOnCloud} onChange={setEncryptOnCloud} size={'sm'} />
         </div>
       </InputContainer>
     </div>