Add support for the new site

App.tsx

@@ -2,7 +2,7 @@ import * as NavigationBar from 'expo-navigation-bar';
 import * as SplashScreen from 'expo-splash-screen';
 import { StatusBar } from 'expo-status-bar';
 import React, { useEffect } from 'react';
-import { Platform, useColorScheme, StatusBar as RNStatusBar } from 'react-native';
+import { Platform, useColorScheme, StatusBar as RNStatusBar, ColorSchemeName } from 'react-native';
 import { SafeAreaProvider } from 'react-native-safe-area-context';
 
 import MainView from '~/components/MainView';
@@ -11,7 +11,7 @@ import { COLORS } from '~/globals';
 SplashScreen.preventAutoHideAsync();
 const App = () => {
   const preferredColorScheme = useColorScheme();
-  const [colorScheme, setColorScheme] = React.useState<'light' | 'dark'>(preferredColorScheme);
+  const [colorScheme, setColorScheme] = React.useState<ColorSchemeName>(preferredColorScheme);
   const colors = colorScheme === 'light' ? COLORS.light : COLORS.dark;
 
   useEffect(() => {

README.md

@@ -1,5 +1,5 @@
 # D-Sek App
-This app is a mobile version of our page available at https://dsek.se. The app is "simply" a WebView wrapper around https://app.dsek.se (a version of the site customized to look like a native app). There are some extra features regarding deep-linking, notifications, dark/light mode and app-specific information which are added by the app.
+This app is a mobile version of our page available at https://dsek.se. The app is "simply" a WebView wrapper around https://dsek.se. There are some extra features regarding deep-linking, notifications, dark/light mode and app-specific information which are added by the app.
 
 The goal is, and probably should always be, to keep the app AS SIMPLE AS POSSIBLE. This way ALMOST ALL updates can be done purely by releasing a new version of the site and no changes needs to be done by the app.
 

components/MainView.tsx

@@ -3,14 +3,15 @@ import * as SplashScreen from 'expo-splash-screen';
 import React, { useEffect, useRef, useState } from 'react';
 import {
   BackHandler,
+  ColorSchemeName,
   Platform,
   RefreshControl,
   SafeAreaView,
   ScrollView,
   Text,
   View,
 } from 'react-native';
-import WebView, { WebViewMessageEvent } from 'react-native-webview';
+import { WebView, WebViewMessageEvent } from 'react-native-webview';
 
 import { COLORS, WEBSITE_URL } from '~/globals';
 import useDeepLinking, { fixUrl } from '~/hooks/useDeepLinking';
@@ -93,7 +94,7 @@ true; // note: this is required, or you'll sometimes get silent failures
 `;
 
 const MainView: React.FC<{
-  colorScheme: 'light' | 'dark';
+  colorScheme: ColorSchemeName;
   onColorChange: (mode: 'dark' | 'light') => void;
 }> = ({ colorScheme, onColorChange }) => {
   const webViewRef = useRef<WebView>(null);
@@ -177,11 +178,11 @@ const MainView: React.FC<{
             onRefresh={() => {
               if (isError) {
                 setIsLoading(true);
-                webViewRef.current.reload();
+                webViewRef.current?.reload();
                 setIsError(false);
                 return;
               }
-              webViewRef.current.injectJavaScript(REFRESH_DATA_JAVASCRIPT);
+              webViewRef.current?.injectJavaScript(REFRESH_DATA_JAVASCRIPT);
             }}
             enabled={ptrEnabled}
           />
@@ -209,10 +210,10 @@ const MainView: React.FC<{
             backgroundColor: colors.background,
             position: 'relative',
           }}
-          renderLoading={() => null}
+          renderLoading={() => <></>}
           onContentProcessDidTerminate={() => {
             // Content process terminated, reload webView (this causes blank screen on iOS otherwise)
-            webViewRef.current.reload();
+            webViewRef.current?.reload();
           }}
           allowsBackForwardNavigationGestures /* for swipe navigation on iOS */
           sharedCookiesEnabled
@@ -223,7 +224,7 @@ const MainView: React.FC<{
               !newNavState.url.startsWith('https://www.dsek.se') &&
               !newNavState.url.includes('portal.dsek.se')
             ) {
-              webViewRef.current.stopLoading();
+              webViewRef.current?.stopLoading();
               Linking.openURL(newNavState.url);
               return;
             }
@@ -232,8 +233,8 @@ const MainView: React.FC<{
               newNavState.url.startsWith('https://dsek.se') ||
               newNavState.url.startsWith('https://www.dsek.se')
             ) {
-              webViewRef.current.stopLoading();
-              webViewRef.current.injectJavaScript(`
+              webViewRef.current?.stopLoading();
+              webViewRef.current?.injectJavaScript(`
                 window.location = '${fixUrl(newNavState.url)}';
               `);
               return;
@@ -250,7 +251,7 @@ const MainView: React.FC<{
   );
 };
 
-const LoadingError = (colorScheme: 'light' | 'dark') => () => {
+const LoadingError = (colorScheme: ColorSchemeName) => () => {
   return (
     <View
       style={{

globals.ts

@@ -1,4 +1,4 @@
-export const WEBSITE_URL = 'https://app.dsek.se';
+export const WEBSITE_URL = 'https://www.dsek.se';
 
 export const COLORS = {
   dark: {

hooks/useDeepLinking.ts

@@ -5,7 +5,7 @@ import WebView from 'react-native-webview';
 
 import { WEBSITE_URL } from '~/globals';
 
-export const fixUrl = (url: string | undefined) => {
+export const fixUrl = (url: string) => {
   if (!url) return url;
   if (url.startsWith('dsek://')) return `${WEBSITE_URL}/${url.substring(7)}`;
   if (url.startsWith('https://dsek.se')) return url.replace('https://dsek.se', WEBSITE_URL);
@@ -37,10 +37,7 @@ const getInitialUrl = (
   return link;
 };
 
-const useDeepLinking = (
-  isLoading: boolean,
-  webViewRef: React.MutableRefObject<WebView<object>>
-) => {
+const useDeepLinking = (isLoading: boolean, webViewRef: React.RefObject<WebView<object>>) => {
   const deepLinkingUrl = Linking.useURL();
   // Listen for if user taps on notification and open related page if they do
   const lastNotificationResponse = Notifications.useLastNotificationResponse();