Add Pins & App-wide refactoring (#18)

* Upgrade RN from 0.71.1 to 0.71.4

* Add Pinned apps & Refactor existing codebase

* Refactor

* Bump app version & remove un-needed font

.node-version

@@ -1 +1 @@
-16
+18

android/app/build.gradle

@@ -95,8 +95,8 @@ android {
         applicationId "com.razinj.context_launcher"
         minSdkVersion rootProject.ext.minSdkVersion
         targetSdkVersion rootProject.ext.targetSdkVersion
-        versionCode 12
-        versionName "1.4.8"
+        versionCode 13
+        versionName "1.5.0"
         archivesBaseName = "context-launcher-v$versionName-$versionCode"
     }
 
@@ -176,7 +176,7 @@ dependencies {
 apply from: file("../../node_modules/@react-native-community/cli-platform-android/native_modules.gradle"); applyNativeModulesAppBuildGradle(project)
 
 project.ext.vectoricons = [
-        iconFontNames: ['MaterialIcons.ttf', 'MaterialCommunityIcons.ttf']
+    iconFontNames: ['MaterialCommunityIcons.ttf']
 ]
 
 apply from: "../../node_modules/react-native-vector-icons/fonts.gradle"

build.sh

@@ -1,6 +1,6 @@
 #!/usr/bin/env bash
 
-cd ./android
+cd ./android || exit
 
 echo "[!] Current directory $(pwd)"
 

jest.config.js

@@ -17,9 +17,7 @@ module.exports = {
   testPathIgnorePatterns: ['\\.snap$', '<rootDir>/node_modules/'],
   transformIgnorePatterns: ['node_modules/(?!(@react-native|react-native|react-native-vector-icons))'],
   cacheDirectory: '.jest/cache',
-  setupFiles: [
-    './jest-setup.js',
-  ],
+  setupFiles: ['./jest-setup.js'],
   setupFilesAfterEnv: [
     './jest-tests-setup.ts',
     './node_modules/react-native-gesture-handler/jestSetup.js', // src: https://docs.swmansion.com/react-native-gesture-handler/docs/guides/testing

package.json

@@ -1,6 +1,6 @@
 {
   "name": "context_launcher",
-  "version": "1.4.8",
+  "version": "1.5.0",
   "private": false,
   "scripts": {
     "android": "react-native run-android",
@@ -17,9 +17,10 @@
   "dependencies": {
     "@gorhom/bottom-sheet": "^4.4.5",
     "@react-native-async-storage/async-storage": "^1.17.11",
+    "@react-native-community/datetimepicker": "^6.7.5",
     "@reduxjs/toolkit": "^1.9.1",
     "react": "18.2.0",
-    "react-native": "0.71.1",
+    "react-native": "0.71.4",
     "react-native-draggable-flatlist": "^4.0.0",
     "react-native-gesture-handler": "^2.9.0",
     "react-native-reanimated": "^2.14.4",
@@ -48,7 +49,7 @@
     "eslint-config-prettier": "^8.5.0",
     "eslint-plugin-react-native": "^4.0.0",
     "jest": "^29.2.1",
-    "metro-react-native-babel-preset": "0.74.1",
+    "metro-react-native-babel-preset": "0.73.8",
     "prettier": "^2.4.1",
     "ts-jest": "^29.0.5",
     "typescript": "4.9.4"

src/Home.tsx

@@ -67,6 +67,7 @@ const styles = StyleSheet.create({
   wrapper: {
     flex: 1,
     padding: 5,
+    overflow: 'hidden',
     marginTop: StatusBar.currentHeight,
     justifyContent: 'flex-end',
   },

src/components/AllApps.tsx

@@ -34,7 +34,11 @@ const AllApps = () => {
   }
 
   const renderItem: ListRenderItem<AppDetails> = ({ item }: ListRenderItemInfo<AppDetails>) => (
-    <AppItem appDetails={item} renderedIn={RenderedIn.ALL_APPS} />
+    <AppItem
+      appDetails={item}
+      renderedIn={RenderedIn.ALL_APPS}
+      pressableStyle={{ borderRadius: 0, paddingHorizontal: 7.5 }}
+    />
   )
 
   return (
@@ -57,7 +61,8 @@ const AllApps = () => {
 
 const styles = StyleSheet.create({
   wrapper: {
-    borderRadius: 10,
+    marginTop: 50,
+    borderRadius: 5,
     paddingVertical: 5,
     position: 'relative',
     backgroundColor: BACKGROUND_COLOR,

src/components/AllAppsIcon.tsx

@@ -1,45 +1,25 @@
 // React
 import React, { useContext } from 'react'
 // React Native
-import { Pressable, PressableAndroidRippleConfig, StyleSheet, View } from 'react-native'
+import { Pressable, View } from 'react-native'
+// Components
+import CustomIcon from './shared/CustomIcon'
 // Contexts
 import GlobalContext from '../contexts/GlobalContext'
-// Icon
-import Icon from 'react-native-vector-icons/MaterialCommunityIcons'
 // Constants
-import { PRIMARY_HEX_COLOR, SECONDARY_HEX_COLOR } from '../constants'
-
-const rippleConfig: PressableAndroidRippleConfig = {
-  color: SECONDARY_HEX_COLOR,
-  borderless: true,
-  foreground: true,
-  radius: 20,
-}
+import { PRIMARY_COLOR } from '../constants'
+import { iconsStyle, iconsPressableConfig } from '../shared/bottom-container'
 
 const AllAppsIcon = () => {
   const { toggleDisplayAllApps } = useContext(GlobalContext)
 
   return (
-    <View style={styles.wrapper}>
-      <Pressable
-        testID='all-apps-toggle-button'
-        onPress={toggleDisplayAllApps}
-        android_disableSound={true}
-        android_ripple={rippleConfig}>
-        <Icon name='hexagon-outline' size={34} style={styles.icon} color={PRIMARY_HEX_COLOR} />
+    <View style={iconsStyle.wrapper}>
+      <Pressable testID='all-apps-toggle-button' onPress={toggleDisplayAllApps} {...iconsPressableConfig}>
+        <CustomIcon name='hexagon-outline' size={34} style={iconsStyle.icon} color={PRIMARY_COLOR} />
       </Pressable>
     </View>
   )
 }
 
-const styles = StyleSheet.create({
-  wrapper: {
-    alignItems: 'center',
-    flexDirection: 'row',
-  },
-  icon: {
-    margin: 5,
-  },
-})
-
 export default AllAppsIcon

src/components/AppItem.tsx

@@ -1,7 +1,7 @@
 // React
 import React, { useContext, useEffect, useMemo, useState } from 'react'
 // React Native
-import { Image, Pressable, StyleSheet, View } from 'react-native'
+import { Image, Pressable, StyleSheet, View, StyleProp, ViewStyle } from 'react-native'
 // Components
 import HighlightText from './HighlightText'
 // Redux
@@ -19,52 +19,54 @@ import GlobalContext from '../contexts/GlobalContext'
 import { RenderedIn } from '../models/rendered-in'
 import { AppItemProps as Props } from '../models/props'
 
-const AppItem = ({ appDetails, renderedIn, appIcon }: Props) => {
+const AppItem = ({ appDetails, renderedIn, appIcon, wrapperStyle, pressableStyle }: Props) => {
   const dispatch = useDispatch()
   const [icon, setIcon] = useState<string | undefined>(undefined)
-  const { searchAppLaunchProcedure } = useContext(SearchContext)
+  const { searchAppLaunchProcedure, searchInputRef } = useContext(SearchContext)
   const { setAppItemMenuDetails, displayAppItemMenuBottomSheet, globalAppLaunchProcedure } = useContext(GlobalContext)
 
   const onPress = () => {
     // Reset views and values
     globalAppLaunchProcedure()
     searchAppLaunchProcedure()
+    searchInputRef?.current?.clear()
     dispatch(resetAppsSearchState())
-
     // Add app to recent apps list
     if (renderedIn === RenderedIn.FILTERED_APPS || renderedIn === RenderedIn.ALL_APPS) {
       dispatch(addRecentApp({ ...appDetails, icon }))
     }
-
     // Launch app
     launchApp(appDetails.name)
   }
 
-  const displayLabel = useMemo(() => renderedIn !== RenderedIn.FAVORITE_APPS, [renderedIn])
+  const displayLabel = useMemo(
+    () => renderedIn !== RenderedIn.FAVORITE_APPS && renderedIn !== RenderedIn.PINNED_APPS,
+    [renderedIn]
+  )
 
   const onLongPress = () => {
     setAppItemMenuDetails({ ...appDetails, icon })
     displayAppItemMenuBottomSheet()
   }
 
-  const pressableStyles = ({ pressed }: { pressed: boolean }) => {
-    return {
-      ...styles.pressable,
-      borderRadius: 10,
-      backgroundColor: pressed ? 'rgba(255, 255, 255, .25)' : 'transparent',
-    }
+  const pressableStyles = ({ pressed }: { pressed: boolean }): StyleProp<ViewStyle> => {
+    return [{ backgroundColor: pressed ? 'rgba(255, 255, 255, .25)' : 'transparent' }, styles.pressable, pressableStyle]
   }
 
   useEffect(() => {
-    if (renderedIn === RenderedIn.RECENT_APPS || renderedIn === RenderedIn.FAVORITE_APPS) {
+    if (
+      renderedIn === RenderedIn.RECENT_APPS ||
+      renderedIn === RenderedIn.FAVORITE_APPS ||
+      renderedIn === RenderedIn.PINNED_APPS
+    ) {
       setIcon(appIcon)
     } else if (renderedIn === RenderedIn.ALL_APPS || renderedIn === RenderedIn.FILTERED_APPS) {
       AppsModule.getApplicationIcon(appDetails.name, (nativeAppIcon: string) => setIcon(nativeAppIcon))
     }
   }, [])
 
   return (
-    <View>
+    <View style={wrapperStyle}>
       <Pressable onPress={onPress} onLongPress={onLongPress} style={pressableStyles}>
         <Image
           resizeMode={'contain'}
@@ -79,11 +81,10 @@ const AppItem = ({ appDetails, renderedIn, appIcon }: Props) => {
 
 const styles = StyleSheet.create({
   pressable: {
-    display: 'flex',
+    padding: 5,
+    borderRadius: 5,
     alignItems: 'center',
     flexDirection: 'row',
-    padding: 5,
-    marginHorizontal: 5,
   },
   icon: {
     width: 50,