feat: sort by completed

App.tsx

@@ -15,9 +15,9 @@ import { useItems } from './src/hooks/useItems';
 import { mainStyles } from './src/styles/styles';
 import { ListItem } from './src/components/ListItem';
 
-export default function App() {
+const App = () => {
   const [itemText, setItemText] = useState('');
-  const { itemsArray, addItemIntoArray, removeItemIntoArray } = useItems();
+  const { itemsArray, addItemIntoArray } = useItems();
 
   const addItem = (item: string) => {
     if (item.trim() === '') return;
@@ -38,8 +38,9 @@ export default function App() {
       <FlatList
         style={mainStyles.list}
         data={ itemsArray }
-        renderItem={({ item }) => <ListItem item={ item } handleRemoveItem={ removeItemIntoArray } />}
+        renderItem={({ item }) => <ListItem item={ item } />}
         keyExtractor={item => item.id}
+        showsVerticalScrollIndicator={false}
       />
       <View style={mainStyles.inputContainer}>
         <TextInput
@@ -58,4 +59,6 @@ export default function App() {
       <StatusBar style="light" backgroundColor='#282A36' />
     </KeyboardAvoidingView>
   );
-}
+};
+
+export default App;

src/components/ListItem.tsx

@@ -3,25 +3,26 @@ import { ListItemType } from '../types';
 import { Pressable, Text, Alert } from 'react-native';
 import BouncyCheckbox from 'react-native-bouncy-checkbox';
 import { listItemStyles } from '../styles/styles';
-
+import { useItems } from '../hooks/useItems';
 
 type ListItemProps = {
   item: ListItemType;
-  handleRemoveItem: (id: string) => void;
 };
 
-export const ListItem: React.FC<ListItemProps> = ({ item, handleRemoveItem }) => {
+export const ListItem: React.FC<ListItemProps> = ({ item }) => {
+  const { toggleCompletedItem, removeItemIntoArray } = useItems();
+
   const showConfirmDeleteModal = (id: string) => {
     Alert.alert('Delete item', 'would you like to delete this?', [
+      {
+        text: 'Cancel',
+        style: 'cancel',
+      },
       {
         text: 'Yes',
-        onPress: () => handleRemoveItem(id),
+        onPress: () => removeItemIntoArray(id),
         style: 'destructive',
       },
-      {
-        text: 'Cancel',
-        style: 'cancel',
-      }
     ]);
   }; 
 
@@ -33,6 +34,7 @@ export const ListItem: React.FC<ListItemProps> = ({ item, handleRemoveItem }) =>
       <Text style={listItemStyles.itemText}>{ item.title }</Text>
       <BouncyCheckbox
         fillColor='#5DAF50'
+        onPress={(checked) => toggleCompletedItem(checked, item.id)}
       />
     </Pressable>
   );

src/hooks/useItems.ts

@@ -1,5 +1,6 @@
 import { useMMKV, useMMKVString } from 'react-native-mmkv';
 import { ListItemType } from '../types';
+import { sortByCompleted } from '../utils/sortUtils';
 
 export const useItems = () => {
   const storage = useMMKV();
@@ -16,10 +17,23 @@ export const useItems = () => {
     setItemsString(JSON.stringify(newItemsArray));
   };
 
+  const toggleCompletedItem = (completed: boolean, itemId: string) => {
+    const updatedItems = itemsArray.map((item) => {
+      if (item.id !== itemId) return item;
+
+      return { ...item, completed }
+    });
+
+    const sortedItems = sortByCompleted(updatedItems);
+
+    setItemsString(JSON.stringify(sortedItems));
+  };
+
   return {
     storage,
     itemsArray,
     addItemIntoArray,
     removeItemIntoArray,
+    toggleCompletedItem,
   };
 };

src/styles/styles.ts

@@ -11,7 +11,7 @@ export const mainStyles = StyleSheet.create({
     flexDirection: 'row',
     justifyContent: 'space-between',
     alignItems: 'center',
-    padding: 10,
+    padding: 15,
     width: '100%',
   },
   input: {

src/utils/sortUtils.ts

@@ -0,0 +1,9 @@
+import { ListItemType } from '../types';
+
+export const sortByCompleted = (items: ListItemType[]) => {
+  return items.sort((a, b) => {
+    if (a.completed === b.completed) return 0;
+    if (a.completed) return 1;
+    return -1;
+  });
+};