From 914617172466cdc6efd18f0b330e110364beb26f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Nikolai=20R=C3=B8ed=20Kristiansen?=
 <nikolai.kristiansen@remarkable.no>
Date: Mon, 22 Jul 2024 13:46:24 +0200
Subject: [PATCH] remove remaining native-base usage

---
 src/App.tsx                               |  3 --
 src/Dusken.tsx                            |  7 +---
 src/Navigation.tsx                        | 16 ++++-----
 src/components/PrivacyButton.tsx          |  2 +-
 src/modules/about/About.tsx               |  3 +-
 src/modules/events/EventDetail.tsx        |  5 ++-
 src/modules/events/EventList.tsx          | 36 ++++++++++----------
 src/modules/login/Login.tsx               |  6 ++--
 src/modules/membership/Membership.tsx     | 41 ++---------------------
 src/modules/membership/MembershipInfo.tsx |  3 +-
 src/modules/membership/Proof.tsx          |  3 +-
 src/modules/register/UserRegister.tsx     |  3 +-
 12 files changed, 37 insertions(+), 91 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index 5422c8b..b9f7ecc 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -2,7 +2,6 @@ import { ApolloClient, HttpLink, InMemoryCache, ApolloProvider } from '@apollo/c
 import { StripeProvider } from '@stripe/stripe-react-native';
 import Constants from 'expo-constants';
 import React from 'react';
-import { LogBox } from 'react-native';
 import { GestureHandlerRootView } from 'react-native-gesture-handler';
 import { Provider } from 'react-redux';
 import { PersistGate } from 'redux-persist/integration/react';
@@ -16,8 +15,6 @@ const apolloClient = new ApolloClient({
   link: new HttpLink({ uri: `${process.env.EXPO_PUBLIC_DUSKEN_API_URL}/api/graphql/` }),
   cache: new InMemoryCache(),
 });
-// FIXME: Replace unmaintained native-base with https://wix.github.io/react-native-ui-lib/ which produces this warning
-LogBox.ignoreLogs(['In React 18, SSRProvider is not necessary and is a noop. You can remove it from your app.']);
 
 loadTheme();
 
diff --git a/src/Dusken.tsx b/src/Dusken.tsx
index 79ee5cf..72caab4 100644
--- a/src/Dusken.tsx
+++ b/src/Dusken.tsx
@@ -1,4 +1,3 @@
-import { NativeBaseProvider } from 'native-base';
 import React, { useEffect } from 'react';
 
 import Navigation from './Navigation';
@@ -17,11 +16,7 @@ const Dusken = () => {
     }
   });
 
-  return (
-    <NativeBaseProvider>
-      <Navigation />
-    </NativeBaseProvider>
-  );
+  return <Navigation />;
 };
 
 export default Dusken;
diff --git a/src/Navigation.tsx b/src/Navigation.tsx
index 3453db2..a90a4c5 100644
--- a/src/Navigation.tsx
+++ b/src/Navigation.tsx
@@ -4,14 +4,14 @@ import { NavigationContainer } from '@react-navigation/native';
 import { createNativeStackNavigator } from '@react-navigation/native-stack';
 import React from 'react';
 
-import About from './modules/about/About';
-import EventDetail from './modules/events/EventDetail';
-import EventList from './modules/events/EventList';
-import Login from './modules/login/Login';
-import Membership from './modules/membership/Membership';
-import UserRegister from './modules/register/UserRegister';
-import theme from './theme';
-import type { EventStackParamList, HomeTabParamList, UserStackParamList } from './types/navigation';
+import About from 'src/modules/about/About';
+import EventDetail from 'src/modules/events/EventDetail';
+import EventList from 'src/modules/events/EventList';
+import Login from 'src/modules/login/Login';
+import Membership from 'src/modules/membership/Membership';
+import UserRegister from 'src/modules/register/UserRegister';
+import theme from 'src/theme';
+import type { EventStackParamList, HomeTabParamList, UserStackParamList } from 'src/types/navigation';
 
 // This looks ugly, even though it's a recommended style from the branding profile.
 // TODO: Change this
diff --git a/src/components/PrivacyButton.tsx b/src/components/PrivacyButton.tsx
index d2e2f8e..0b66c51 100644
--- a/src/components/PrivacyButton.tsx
+++ b/src/components/PrivacyButton.tsx
@@ -6,7 +6,7 @@ import theme from 'src/theme';
 const PrivacyButton = () => (
   <TouchableOpacity
     style={styles.button}
-    onPress={() => Linking.openURL(process.env.EXPO_PUBLIC_DUSKEN_PRIVACY_POLICY_URL)}
+    onPress={() => Linking.openURL(process.env.EXPO_PUBLIC_DUSKEN_PRIVACY_POLICY_URL || '')}
   >
     <Text style={styles.linkText}>Personvern</Text>
   </TouchableOpacity>
diff --git a/src/modules/about/About.tsx b/src/modules/about/About.tsx
index 9742628..cc10b16 100644
--- a/src/modules/about/About.tsx
+++ b/src/modules/about/About.tsx
@@ -72,7 +72,7 @@ const openMap = () => {
 /** FIXME: Values here are pretty hardcoded. Should fetch config from a JSON-file or API */
 const About = () => (
   <ScrollView>
-    <View style={styles.card}>
+    <View style={theme.card}>
       <Text style={[styles.header, { marginTop: 8 }]}>Det Norske Studentersamfund</Text>
       <TouchableOpacity onPress={() => Linking.openURL('https://www.studentersamfundet.no/')}>
         <Image style={styles.logo} source={logo} />
@@ -167,7 +167,6 @@ const styles = StyleSheet.create({
     paddingBottom: 10,
     lineHeight: 25,
   },
-  card: theme.card,
   featuredImage: {
     height: 230,
     width: null,
diff --git a/src/modules/events/EventDetail.tsx b/src/modules/events/EventDetail.tsx
index f537bee..87d5150 100644
--- a/src/modules/events/EventDetail.tsx
+++ b/src/modules/events/EventDetail.tsx
@@ -166,11 +166,11 @@ const EventDetail = ({
   return (
     <ScrollView>
       {event.thumbnail.medium_large && <Image source={{ uri: event.thumbnail.medium_large }} style={styles.image} />}
-      <View style={styles.card}>
+      <View style={theme.card}>
         {/* Date and title */}
         <View style={styles.dateAndTitle}>
           <View style={styles.dateContainer}>
-            <View style={[styles.card, styles.dateCard]}>
+            <View style={[theme.card, styles.dateCard]}>
               <Text style={styles.day}>{format(event.start_time, FORMAT_DAY)}</Text>
               <Text style={styles.month}>{format(event.start_time, FORMAT_MONTH)}</Text>
               <Year startTime={event.start_time} />
@@ -229,7 +229,6 @@ const styles = StyleSheet.create({
     fontWeight: 'bold',
     color: theme.colors.neufBlack,
   },
-  card: theme.card,
   image: {
     height: 260,
     width: null,
diff --git a/src/modules/events/EventList.tsx b/src/modules/events/EventList.tsx
index 6a623e7..532e96d 100644
--- a/src/modules/events/EventList.tsx
+++ b/src/modules/events/EventList.tsx
@@ -1,7 +1,7 @@
+import { SimpleLineIcons as Icon } from '@expo/vector-icons';
 import moment from 'moment';
-import { Card, Text, Spinner, ArrowForwardIcon, HStack } from 'native-base';
 import React from 'react';
-import { StyleSheet, View, Platform, SectionList, TouchableOpacity } from 'react-native';
+import { StyleSheet, View, Platform, SectionList, TouchableOpacity, ActivityIndicator, Text } from 'react-native';
 import { Button } from 'react-native-ui-lib';
 import 'moment/locale/nb';
 
@@ -33,7 +33,7 @@ const EventList = () => {
       }}
       style={styles.listItem}
     >
-      <HStack>
+      <View style={styles.row}>
         <View style={{ flex: 5 }}>
           <Text style={styles.listItemTitle} numberOfLines={1}>
             {item.title.decoded}
@@ -41,9 +41,9 @@ const EventList = () => {
           <Text style={styles.listItemTime}>{formatTime(item.start_time)}</Text>
         </View>
         <View style={styles.arrow}>
-          <ArrowForwardIcon size={4} color={theme.colors.neufBlack} marginTop={3} />
+          <Icon name="arrow-right" style={{ color: theme.colors.neufBlack, marginTop: 3 }} />
         </View>
-      </HStack>
+      </View>
     </TouchableOpacity>
   );
 
@@ -52,23 +52,21 @@ const EventList = () => {
   const Footer = () =>
     !loading && (
       <View style={{ paddingVertical: 20 }}>
-        <Spinner color={theme.colors.neufOrange} />
+        <ActivityIndicator color={theme.colors.neufOrange} />
       </View>
     );
 
   if (error) {
     return (
-      <View>
-        <Card style={{ margin: 4 }}>
-          <View>
-            <Text style={styles.loadingText}>Kunne ikke hente programmet...</Text>
-          </View>
-          <View>
-            <Button onPress={handleRefresh}>
-              <Text>Prøv igjen</Text>
-            </Button>
-          </View>
-        </Card>
+      <View style={theme.card}>
+        <View>
+          <Text style={styles.loadingText}>Kunne ikke hente programmet...</Text>
+        </View>
+        <View>
+          <Button onPress={handleRefresh}>
+            <Text>Prøv igjen</Text>
+          </Button>
+        </View>
       </View>
     );
   }
@@ -85,7 +83,7 @@ const EventList = () => {
       onEndReachedThreshold={10}
       initialNumToRender={10}
       ListFooterComponent={Footer}
-      style={[styles.card, styles.list]}
+      style={[theme.card, styles.list]}
       ListHeaderComponent={Header}
     />
   );
@@ -125,7 +123,6 @@ const styles = StyleSheet.create({
     textAlign: 'center',
     paddingBottom: 8,
   },
-  card: theme.card,
   list: {
     padding: 0,
     marginTop: 0,
@@ -139,4 +136,5 @@ const styles = StyleSheet.create({
     flex: 1,
     alignItems: 'flex-end',
   },
+  row: { flex: 1, flexDirection: 'row' },
 });
diff --git a/src/modules/login/Login.tsx b/src/modules/login/Login.tsx
index 530c60c..55571ce 100644
--- a/src/modules/login/Login.tsx
+++ b/src/modules/login/Login.tsx
@@ -1,6 +1,5 @@
-import { ScrollView } from 'native-base';
 import React from 'react';
-import { ActivityIndicator, Linking, StyleSheet, View, Text } from 'react-native';
+import { ActivityIndicator, Linking, StyleSheet, View, Text, ScrollView } from 'react-native';
 import { Button } from 'react-native-ui-lib';
 
 import FormErrors from 'src/components/FormErrors';
@@ -14,7 +13,7 @@ const Login = () => {
 
   return (
     <ScrollView>
-      <View style={styles.card}>
+      <View style={theme.card}>
         <FormErrors errors={errors} />
         <FormInput
           name="email"
@@ -67,5 +66,4 @@ const styles = StyleSheet.create({
     marginTop: 32,
     marginBottom: 16,
   },
-  card: theme.card,
 });
diff --git a/src/modules/membership/Membership.tsx b/src/modules/membership/Membership.tsx
index accd3ef..7cbcfc0 100644
--- a/src/modules/membership/Membership.tsx
+++ b/src/modules/membership/Membership.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { View, StyleSheet, ActivityIndicator } from 'react-native';
+import { View, ActivityIndicator } from 'react-native';
 
 import PrivacyButton from 'src/components/PrivacyButton';
 import theme from 'src/theme';
@@ -14,7 +14,7 @@ const Membership = () => {
 
   if (isFetchingUserData) {
     return (
-      <View style={styles.card}>
+      <View style={theme.card}>
         <ActivityIndicator color={theme.colors.neufOrange} />
       </View>
     );
@@ -37,40 +37,3 @@ const Membership = () => {
   );
 };
 export default Membership;
-
-const styles = StyleSheet.create({
-  card: theme.card,
-  paragraph: {
-    textAlign: 'center',
-    fontSize: 16,
-    color: theme.colors.neufBlack,
-    paddingBottom: 10,
-    lineHeight: 25,
-  },
-  button: {
-    marginTop: 6,
-    marginBottom: 16,
-  },
-  em: {
-    fontSize: 16,
-    color: theme.colors.neufBlack,
-    fontStyle: 'italic',
-    textAlign: 'center',
-    marginVertical: 10,
-  },
-  headerTitle: {
-    textAlign: 'center',
-    fontWeight: 'bold',
-    fontSize: 20,
-    color: theme.colors.neufBlack,
-    paddingVertical: 10,
-    lineHeight: 25,
-  },
-  header: {
-    fontSize: 16,
-    fontWeight: 'bold',
-    color: theme.colors.neufBlack,
-    lineHeight: 25,
-    paddingLeft: 2,
-  },
-});
diff --git a/src/modules/membership/MembershipInfo.tsx b/src/modules/membership/MembershipInfo.tsx
index 3c2b348..3ff7017 100644
--- a/src/modules/membership/MembershipInfo.tsx
+++ b/src/modules/membership/MembershipInfo.tsx
@@ -10,7 +10,7 @@ interface MembershipInfoProps {
 }
 const MembershipInfo = ({ onRegister, onLogin }: MembershipInfoProps) => (
   <ScrollView>
-    <View style={styles.card}>
+    <View style={theme.card}>
       <Text style={styles.headerTitle}>Hei 👋</Text>
       <Text style={styles.paragraph}>
         Her kan du bli medlem i Det Norske Studentersamfund - Chateau Neuf og ha medlemsbeviset ditt på telefonen
@@ -38,7 +38,6 @@ const MembershipInfo = ({ onRegister, onLogin }: MembershipInfoProps) => (
 export default MembershipInfo;
 
 const styles = StyleSheet.create({
-  card: theme.card,
   paragraph: {
     textAlign: 'center',
     fontSize: 16,
diff --git a/src/modules/membership/Proof.tsx b/src/modules/membership/Proof.tsx
index 67176e8..1d37617 100644
--- a/src/modules/membership/Proof.tsx
+++ b/src/modules/membership/Proof.tsx
@@ -185,7 +185,7 @@ const Proof = ({ onLogoutPress, fetchUser, isFetchingUserData }: ProofProps) =>
       <View>
         <UserConfetti user={user} confettiRef={confettiRef} />
         <ScrollView refreshControl={<RefreshControl refreshing={isFetchingUserData} onRefresh={fetchUser} />}>
-          <View style={[styles.card, { paddingVertical: 16 }]}>
+          <View style={[theme.card, { paddingVertical: 16 }]}>
             <MembershipName user={user} />
             <Logo user={user} />
             <MembershipStatus user={user} onMembershipPress={onMembershipPress} />
@@ -220,7 +220,6 @@ const Proof = ({ onLogoutPress, fetchUser, isFetchingUserData }: ProofProps) =>
 export default Proof;
 
 const styles = StyleSheet.create({
-  card: theme.card,
   membershipStatus: {
     marginVertical: 16,
   },
diff --git a/src/modules/register/UserRegister.tsx b/src/modules/register/UserRegister.tsx
index c7bbf5a..851f82e 100644
--- a/src/modules/register/UserRegister.tsx
+++ b/src/modules/register/UserRegister.tsx
@@ -21,7 +21,7 @@ const UserRegister = () => {
 
   return (
     <>
-      <View style={styles.card}>
+      <View style={theme.card}>
         <ScrollView>
           <FormInput
             name="firstName"
@@ -113,5 +113,4 @@ const styles = StyleSheet.create({
   errorBox: {
     marginVertical: 10,
   },
-  card: theme.card,
 });