refactor

apps/mobile/src/components/ActionSheetComponent/index.js

@@ -5,8 +5,6 @@ import {
   TouchableOpacity,
   Dimensions,
   TextInput,
-  FlatList,
-  Platform,
 } from 'react-native';
 import {
   SIZE,
@@ -21,6 +19,7 @@ import NavigationService from '../../services/NavigationService';
 import {db} from '../../../App';
 import {useAppContext} from '../../provider/useAppContext';
 import FastStorage from 'react-native-fast-storage';
+import {useTracked} from '../../provider';
 const w = Dimensions.get('window').width;
 const h = Dimensions.get('window').height;
 
@@ -34,7 +33,13 @@ export const ActionSheetComponent = ({
   rowItems = [],
   columnItems = [],
 }) => {
-  const {colors, changeColorScheme} = useAppContext();
+  const [state, dispatch] = useTracked();
+  const {colors} = state;
+
+  // Todo
+
+  const changeColorScheme = () => {};
+
   const [focused, setFocused] = useState(false);
   const [note, setNote] = useState(
     item
@@ -149,7 +154,7 @@ export const ActionSheetComponent = ({
       }
     }
 
-    setWillRefresh(toAdd);
+    dispatch({type: 'updateNotes'});
     setNote({...toAdd});
   };
 
@@ -279,73 +284,47 @@ export const ActionSheetComponent = ({
     },
   ];
 
-  return (
-    <View
-      style={{
-        paddingBottom: 15,
-        backgroundColor: colors.bg,
-      }}>
-      <View
-        style={{
-          width: w - 24,
-          justifyContent: 'space-between',
-          alignItems: 'center',
-          marginHorizontal: 12,
-          paddingVertical: 10,
-          flexDirection: 'row',
-          borderBottomWidth: 1,
-          borderBottomColor: colors.nav,
-        }}>
-        {rowItemsData.map(rowItem =>
-          rowItems.includes(rowItem.name) ? (
+  const _renderTag = tag => (
     <TouchableOpacity
-              onPress={rowItem.func}
-              key={rowItem.name}
-              style={{
-                alignItems: 'center',
-                width: (w - 24) / rowItems.length,
-              }}>
-              <Icon
-                style={{
-                  width: 50,
-                  height: 40,
-                  borderRadius: 100,
-                  justifyContent: 'center',
-                  alignItems: 'center',
-                  textAlign: 'center',
-                  textAlignVertical: 'center',
-                }}
-                name={rowItem.icon}
-                size={SIZE.lg}
-                color={colors.accent}
-              />
+      key={tag}
+      onPress={() => {
+        let oldProps = {...note};
 
+        oldProps.tags.splice(oldProps.tags.indexOf(tag), 1);
+        db.addNote({
+          dateCreated: note.dateCreated,
+          content: note.content,
+          title: note.title,
+          tags: oldProps.tags,
+        });
+        localRefresh(item.type);
+      }}
+      style={{
+        flexDirection: 'row',
+        justifyContent: 'flex-start',
+        alignItems: 'center',
+        margin: 1,
+        paddingHorizontal: 5,
+        paddingVertical: 2.5,
+      }}>
       <Text
         style={{
           fontFamily: WEIGHT.regular,
-                  fontSize: SIZE.xs + 1,
+          fontSize: SIZE.sm,
           color: colors.pri,
         }}>
-                {rowItem.name}
+        <Text
+          style={{
+            color: colors.accent,
+          }}>
+          {tag.slice(0, 1)}
+        </Text>
+        {tag.slice(1)}
       </Text>
     </TouchableOpacity>
-          ) : null,
-        )}
-      </View>
+  );
 
-      {hasColors ? (
-        <View
-          style={{
-            flexDirection: 'row',
-            flexWrap: 'wrap',
-            paddingHorizontal: 12,
-            width: '100%',
-            marginVertical: 10,
-            alignItems: 'center',
-            justifyContent: 'space-between',
-          }}>
-          {['red', 'yellow', 'green', 'blue', 'purple', 'orange', 'gray'].map(
-            color => (
+  const _renderColor = color => (
     <TouchableOpacity
       key={color}
       onPress={() => {
@@ -385,98 +364,44 @@ export const ActionSheetComponent = ({
         ) : null}
       </View>
     </TouchableOpacity>
-            ),
-          )}
-        </View>
-      ) : null}
+  );
 
-      {hasTags ? (
-        <View
-          style={{
-            flexDirection: 'row',
-            flexWrap: 'wrap',
-            marginHorizontal: 12,
-            marginBottom: 0,
-            borderRadius: 5,
-            borderWidth: 1.5,
-            borderColor: focused ? colors.accent : colors.nav,
-            paddingVertical: 5,
-          }}>
-          {note && note.tags
-            ? note.tags.map(tag => (
+  const _renderRowItem = rowItem =>
+    rowItems.includes(rowItem.name) ? (
       <TouchableOpacity
-                  key={tag}
-                  onPress={() => {
-                    let oldProps = {...note};
-
-                    oldProps.tags.splice(oldProps.tags.indexOf(tag), 1);
-                    db.addNote({
-                      dateCreated: note.dateCreated,
-                      content: note.content,
-                      title: note.title,
-                      tags: oldProps.tags,
-                    });
-                    localRefresh(item.type);
-                  }}
+        onPress={rowItem.func}
+        key={rowItem.name}
         style={{
-                    flexDirection: 'row',
-                    justifyContent: 'flex-start',
           alignItems: 'center',
-                    margin: 1,
-                    paddingHorizontal: 5,
-                    paddingVertical: 2.5,
+          width: (w - 24) / rowItems.length,
         }}>
+        <Icon
+          style={{
+            width: 50,
+            height: 40,
+            borderRadius: 100,
+            justifyContent: 'center',
+            alignItems: 'center',
+            textAlign: 'center',
+            textAlignVertical: 'center',
+          }}
+          name={rowItem.icon}
+          size={SIZE.lg}
+          color={colors.accent}
+        />
+
         <Text
           style={{
             fontFamily: WEIGHT.regular,
-                      fontSize: SIZE.sm,
+            fontSize: SIZE.xs + 1,
             color: colors.pri,
           }}>
-                    <Text
-                      style={{
-                        color: colors.accent,
-                      }}>
-                      {tag.slice(0, 1)}
-                    </Text>
-                    {tag.slice(1)}
+          {rowItem.name}
         </Text>
       </TouchableOpacity>
-              ))
-            : null}
-          <TextInput
-            style={{
-              backgroundColor: 'transparent',
-              minWidth: 100,
-              fontFamily: WEIGHT.regular,
-              color: colors.pri,
-              paddingHorizontal: 5,
-              paddingVertical: 1.5,
-              margin: 1,
-            }}
-            blurOnSubmit={false}
-            ref={ref => (tagsInputRef = ref)}
-            placeholderTextColor={colors.icon}
-            onFocus={() => {
-              setFocused(true);
-            }}
-            selectionColor={colors.accent}
-            onBlur={() => {
-              setFocused(false);
-            }}
-            placeholder="#hashtag"
-            onChangeText={value => {
-              tagToAdd = value;
-              if (tagToAdd.length > 0) backPressCount = 0;
-            }}
-            onSubmitEditing={_onSubmit}
-            onKeyPress={_onKeyPress}
-          />
-        </View>
-      ) : null}
+    ) : null;
 
-      {columnItems.length > 0 ? (
-        <View>
-          {columnItemsData.map(item =>
+  const _renderColumnItem = item =>
     columnItems.includes(item.name) ? (
       <TouchableOpacity
         key={item.name}
@@ -537,19 +462,97 @@ export const ActionSheetComponent = ({
               paddingTop: 3,
             }}>
             {item.on ? (
-                      <Icon
-                        size={SIZE.sm - 2}
-                        color={colors.accent}
-                        name="check"
-                      />
+              <Icon size={SIZE.sm - 2} color={colors.accent} name="check" />
             ) : null}
           </TouchableOpacity>
         ) : null}
       </TouchableOpacity>
-            ) : null,
+    ) : null;
+
+  return (
+    <View
+      style={{
+        paddingBottom: 15,
+        backgroundColor: colors.bg,
+      }}>
+      <View
+        style={{
+          width: w - 24,
+          justifyContent: 'space-between',
+          alignItems: 'center',
+          marginHorizontal: 12,
+          paddingVertical: 10,
+          flexDirection: 'row',
+          borderBottomWidth: 1,
+          borderBottomColor: colors.nav,
+        }}>
+        {rowItemsData.map(_renderRowItem)}
+      </View>
+
+      {hasColors ? (
+        <View
+          style={{
+            flexDirection: 'row',
+            flexWrap: 'wrap',
+            paddingHorizontal: 12,
+            width: '100%',
+            marginVertical: 10,
+            alignItems: 'center',
+            justifyContent: 'space-between',
+          }}>
+          {['red', 'yellow', 'green', 'blue', 'purple', 'orange', 'gray'].map(
+            _renderColor,
           )}
         </View>
       ) : null}
+
+      {hasTags ? (
+        <View
+          style={{
+            flexDirection: 'row',
+            flexWrap: 'wrap',
+            marginHorizontal: 12,
+            marginBottom: 0,
+            borderRadius: 5,
+            borderWidth: 1.5,
+            borderColor: focused ? colors.accent : colors.nav,
+            paddingVertical: 5,
+          }}>
+          {note && note.tags ? note.tags.map(_renderTag) : null}
+          <TextInput
+            style={{
+              backgroundColor: 'transparent',
+              minWidth: 100,
+              fontFamily: WEIGHT.regular,
+              color: colors.pri,
+              paddingHorizontal: 5,
+              paddingVertical: 1.5,
+              margin: 1,
+            }}
+            blurOnSubmit={false}
+            ref={ref => (tagsInputRef = ref)}
+            placeholderTextColor={colors.icon}
+            onFocus={() => {
+              setFocused(true);
+            }}
+            selectionColor={colors.accent}
+            onBlur={() => {
+              setFocused(false);
+            }}
+            placeholder="#hashtag"
+            onChangeText={value => {
+              tagToAdd = value;
+              if (tagToAdd.length > 0) backPressCount = 0;
+            }}
+            onSubmitEditing={_onSubmit}
+            onKeyPress={_onKeyPress}
+          />
+        </View>
+      ) : null}
+
+      {columnItems.length > 0 ? (
+        <View>{columnItemsData.map(_renderColumnItem)}</View>
+      ) : null}
     </View>
   );
 };