From ed6c2b7ba2794dfaeb41ba72776cdf58981e84c8 Mon Sep 17 00:00:00 2001
From: Rajarshee Chatterjee <rajarshee.adm@gmail.com>
Date: Sat, 13 Jul 2024 10:53:25 +0530
Subject: [PATCH] feat: Add Empty State in Available Plugins Tab

---
 src/components/EmptyView/EmptyView.tsx        |  1 +
 src/components/ThemePicker/ThemePicker.tsx    |  1 +
 src/screens/browse/components/BrowseTabs.tsx  | 29 +++++++++++++++++--
 .../SettingsRepositoryScreen.tsx              |  2 +-
 strings/languages/en/strings.json             |  5 +++-
 strings/types/index.ts                        |  1 +
 6 files changed, 35 insertions(+), 4 deletions(-)

diff --git a/src/components/EmptyView/EmptyView.tsx b/src/components/EmptyView/EmptyView.tsx
index 6bfc1415..85061d43 100644
--- a/src/components/EmptyView/EmptyView.tsx
+++ b/src/components/EmptyView/EmptyView.tsx
@@ -60,6 +60,7 @@ const styles = StyleSheet.create({
     fontWeight: 'bold',
   },
   text: {
+    textAlign: 'center',
     marginTop: 16,
   },
   buttonWrapper: {
diff --git a/src/components/ThemePicker/ThemePicker.tsx b/src/components/ThemePicker/ThemePicker.tsx
index fc051858..ce43befd 100644
--- a/src/components/ThemePicker/ThemePicker.tsx
+++ b/src/components/ThemePicker/ThemePicker.tsx
@@ -52,6 +52,7 @@ export const ThemePicker = ({
               elevation: 2,
               borderRadius: 50,
               padding: 1.6,
+              zIndex: 1,
             }}
           />
         ) : null}
diff --git a/src/screens/browse/components/BrowseTabs.tsx b/src/screens/browse/components/BrowseTabs.tsx
index 3c403f4a..721ce695 100644
--- a/src/screens/browse/components/BrowseTabs.tsx
+++ b/src/screens/browse/components/BrowseTabs.tsx
@@ -9,6 +9,7 @@ import {
   RefreshControl,
   ListRenderItem,
 } from 'react-native';
+import { useNavigation } from '@react-navigation/native';
 import { useBrowseSettings, usePlugins } from '@hooks/persisted';
 import { PluginItem } from '@plugins/types';
 import {
@@ -20,8 +21,8 @@ import { coverPlaceholderColor } from '@theme/colors';
 import { ThemeColors } from '@theme/types';
 import { Swipeable } from 'react-native-gesture-handler';
 import { getString } from '@strings/translations';
-import { BrowseScreenProps } from '@navigators/types';
-import { Button, IconButtonV2 } from '@components';
+import { BrowseScreenProps, MoreStackScreenProps } from '@navigators/types';
+import { Button, EmptyView, IconButtonV2 } from '@components';
 import TrackerCard from '../discover/TrackerCard';
 import { showToast } from '@utils/showToast';
 import Animated, {
@@ -325,6 +326,8 @@ const AvailablePluginCard = ({
 };
 
 export const AvailableTab = memo(({ searchText, theme }: AvailableTabProps) => {
+  const navigation = useNavigation<MoreStackScreenProps['navigation']>();
+
   const [refreshing, setRefreshing] = useState(false);
   const {
     filteredAvailablePlugins,
@@ -373,6 +376,28 @@ export const AvailableTab = memo(({ searchText, theme }: AvailableTabProps) => {
       showsVerticalScrollIndicator={false}
       removeClippedSubviews={true}
       keyExtractor={item => item.id + '_available'}
+      contentContainerStyle={{ flexGrow: 1 }}
+      ListEmptyComponent={
+        <EmptyView
+          icon="(･Д･。"
+          description=" No repositories yet. Add your first plugin repository to get
+            started."
+          actions={[
+            {
+              iconName: 'cog-outline',
+              title: 'Add Repository',
+              onPress: () =>
+                navigation.navigate('MoreStack', {
+                  screen: 'SettingsStack',
+                  params: {
+                    screen: 'RespositorySettings',
+                  },
+                }),
+            },
+          ]}
+          theme={theme}
+        />
+      }
       refreshControl={
         <RefreshControl
           refreshing={refreshing}
diff --git a/src/screens/settings/SettingsRepositoryScreen/SettingsRepositoryScreen.tsx b/src/screens/settings/SettingsRepositoryScreen/SettingsRepositoryScreen.tsx
index f2a14c56..c659768f 100644
--- a/src/screens/settings/SettingsRepositoryScreen/SettingsRepositoryScreen.tsx
+++ b/src/screens/settings/SettingsRepositoryScreen/SettingsRepositoryScreen.tsx
@@ -65,7 +65,7 @@ const SettingsBrowseScreen = () => {
           ListEmptyComponent={
             <EmptyView
               icon="Σ(ಠ_ಠ)"
-              description={getString('categories.emptyMsg')}
+              description={getString('repositories.emptyMsg')}
               theme={theme}
             />
           }
diff --git a/strings/languages/en/strings.json b/strings/languages/en/strings.json
index 8cd9d36c..0f19ba79 100644
--- a/strings/languages/en/strings.json
+++ b/strings/languages/en/strings.json
@@ -165,6 +165,9 @@
     "setCategories": "Set categories",
     "setModalEmptyMsg": "You have no categories. Tap the Edit button to create one for organizing your library"
   },
+  "repositories": {
+    "emptyMsg": "You have no repositories. Add your first plugin repository to get started."
+  },
   "common": {
     "about": "About",
     "add": "Add",
@@ -508,4 +511,4 @@
     "updatesLower": "updates",
     "updatingLibrary": "Updating library"
   }
-}
\ No newline at end of file
+}
diff --git a/strings/types/index.ts b/strings/types/index.ts
index ffbb389c..b08cfb2c 100644
--- a/strings/types/index.ts
+++ b/strings/types/index.ts
@@ -143,6 +143,7 @@ export interface StringMap {
   'categories.local': 'string';
   'categories.setCategories': 'string';
   'categories.setModalEmptyMsg': 'string';
+  'repositories.emptyMsg': 'string';
   'common.about': 'string';
   'common.add': 'string';
   'common.all': 'string';