SD 23 changes (#262)

* Upgrade to SDK 49, Remove dotenv in favour of built-in feature of SDK 49

* Fix margins on top and bottom of home screen cards, closes #260

* Correct env vars

* ci/cd correct env var

* Update ci-cd.yml

* Update main.yml

* Grondplannen 2023

* Linting fix

* Linting

.github/workflows/ci-cd.yml

@@ -32,13 +32,13 @@ jobs:
     env:
       SEMVER: ${{needs.version.outputs.semVer}}
       CI: 1
-      CONTENT_ROOT: Staging
+      EXPO_PUBLIC_CONTENT_ROOT: Staging
     environment: Staging
     steps:
       - uses: actions/checkout@v2
       - uses: actions/setup-node@v1
         with:
-          node-version: 14.x
+          node-version: 16.x
       - uses: expo/expo-github-action@v6
         with:
           expo-version: latest
@@ -53,13 +53,13 @@ jobs:
     env:
       SEMVER: ${{needs.version.outputs.semVer}}
       CI: 1
-      CONTENT_ROOT: Production
+      EXPPO_PUBLIC_CONTENT_ROOT: Production
     environment: Production
     steps:
       - uses: actions/checkout@v2
       - uses: actions/setup-node@v1
         with:
-          node-version: 14.x
+          node-version: 16.x
 
       - uses: expo/expo-github-action@v6
         with:

.github/workflows/main.yml

@@ -21,7 +21,7 @@ jobs:
         fetch-depth: 0
     - uses: actions/setup-node@v1
       with:
-        node-version: 14.x
+        node-version: 16.x
     -  uses: gittools/actions/gitversion/[email protected]
        with:
          versionSpec: '5.x'

.github/workflows/store-submit.yml

@@ -5,7 +5,7 @@ jobs:
     name: Install and build
     runs-on: ubuntu-latest
     env:
-      CONTENT_ROOT: Production
+      EXPO_PUBLIC_CONTENT_ROOT: Production
     steps:
       - uses: actions/checkout@v2
         with:

api/api.ts

@@ -1,7 +1,6 @@
-import { CONTENT_ROOT } from '@env';
-
+/* eslint-disable @typescript-eslint/no-non-null-assertion */
 export const getContentIndex = async (): Promise<string[]> => {
-  console.log(CONTENT_ROOT);
+  console.log(process.env.EXPO_PUBLIC_CONTENT_ROOT!);
   const text = await (
     await fetch(
       'https://fosopenscouting.github.io/Saamdagen-App-inhoud/content.txt',
@@ -12,17 +11,17 @@ export const getContentIndex = async (): Promise<string[]> => {
   array = array
     .filter((x) => x !== 'README.md')
     .filter((x) => x !== '')
-    .filter((x) => x.startsWith(CONTENT_ROOT));
-  return array.map((x) => x.split(`${CONTENT_ROOT}/`)[1]);
+    .filter((x) => x.startsWith(process.env.EXPO_PUBLIC_CONTENT_ROOT!));
+  return array.map(
+    (x) => x.split(`${process.env.EXPO_PUBLIC_CONTENT_ROOT!}/`)[1],
+  );
 };
 
 export const getMarkdown = async (path: string): Promise<string> => {
-  const text = await (
-    await fetch(
-      `https://fosopenscouting.github.io/Saamdagen-App-inhoud/${CONTENT_ROOT}/${path}`,
-      { cache: 'no-store' },
-    )
-  ).text();
-
-  return text;
+  const text = await fetch(
+    `https://fosopenscouting.github.io/Saamdagen-App-inhoud/${process.env
+      .EXPO_PUBLIC_CONTENT_ROOT!}/${path}`,
+    { cache: 'no-store' },
+  );
+  return await text.text();
 };

babel.config.js

@@ -2,6 +2,6 @@ module.exports = function (api) {
   api.cache(true);
   return {
     presets: ['babel-preset-expo'],
-    plugins: ['react-native-reanimated/plugin', "module:react-native-dotenv"],
+    plugins: ['react-native-reanimated/plugin'],
   };
 };

components/CountDownTimer.tsx

@@ -39,7 +39,7 @@ const CountdownTimer = (props: CountdownTimerProps): JSX.Element => {
   else
     return (
       <ContentCard
-        containerStyle={[styles.countdown, { marginTop: 8 }]}
+        containerStyle={styles.countdown}
         colorOverlay
         palette="fosBlue"
         backgroundImage={require('../assets/images/banner.jpg')}
@@ -91,7 +91,6 @@ export default CountdownTimer;
 const styles = StyleSheet.create({
   countdown: {
     marginHorizontal: 8,
-    marginTop: 8,
   },
   countdownTitle: {
     color: 'white',

components/Map/MapFab.tsx

@@ -24,12 +24,12 @@ const MapFab: React.FC<MapFabProps> = (props: MapFabProps) => {
           actions={[
             {
               icon: 'alpha-g-box',
-              label: 'Groot spel',
+              label: 'Workshops',
               onPress: () => props.handleLayerSelect('big_game'),
             },
             {
               icon: 'map-marker-outline',
-              label: 'Normaal',
+              label: 'Plattegrond',
               onPress: () => props.handleLayerSelect('normal'),
             },
           ]}

components/Map/NewMap.tsx

@@ -1,8 +1,8 @@
 import { ReactNativeZoomableView } from '@openspacelabs/react-native-zoomable-view';
 import React, { useState } from 'react';
 import { Image, StyleSheet } from 'react-native';
-import Grondplan from '../../assets/grondplan.png';
-import GrondPlanGrootSpel from '../../assets/groot-spel-map.png';
+import Grondplan from '../../assets/grondplan-2023.png';
+import GrondPlanGrootSpel from '../../assets/workshops-2023.png';
 import { MapLayer } from '../../models/MapLayer';
 import { View } from '../Themed/Themed';
 import MapFab from './MapFab';
@@ -25,7 +25,11 @@ const NewMap = () => {
           backgroundColor: '#AEDBC4',
         }}
       >
-        <ReactNativeZoomableView maxZoom={5}>
+        <ReactNativeZoomableView
+          minZoom={1}
+          maxZoom={5}
+          doubleTapZoomToCenter={false}
+        >
           <Image
             style={{ width: '100%', height: '100%', resizeMode: 'contain' }}
             source={layer === 'normal' ? Grondplan : GrondPlanGrootSpel}

components/Markdown/markdown.js

@@ -242,7 +242,6 @@ class Markdown extends Component {
   renderBlock(node, key, extras) {
     const { styles } = this.state;
 
-    let style = [styles.block];
     let isBlockQuote;
     if (extras && extras.blockQuote) {
       isBlockQuote = true;

components/Profile/Profile.tsx

@@ -2,7 +2,6 @@ import React from 'react';
 import { View, HeaderText } from '../Themed/Themed';
 import { Text } from '../Themed/Text';
 import { StyleSheet } from 'react-native';
-import useColorScheme from '../../hooks/useColorScheme';
 import ContentCard from '../ContentCard';
 
 interface ProfileProps {
@@ -13,8 +12,6 @@ interface ProfileProps {
 }
 
 const Profile: React.FC<ProfileProps> = (props: ProfileProps) => {
-  const colorScheme = useColorScheme();
-
   return (
     <View style={[styles.container]}>
       <ContentCard palette="seaGreen" containerStyle={{ marginBottom: 16 }}>

components/Themed/Themed.tsx

@@ -52,7 +52,17 @@ export const Markdown: React.FC<MarkdownProps> = (props: MarkdownProps) => {
       case 'h4':
       case 'h5':
       case 'h6':
-        return <HeaderText key={key}>{children}</HeaderText>;
+        return (
+          <HeaderText
+            style={{
+              fontSize: 18,
+              fontWeight: 'bold',
+            }}
+            key={key}
+          >
+            {children}
+          </HeaderText>
+        );
       case 'strong':
         return (
           <Text

import-png.d.ts

@@ -1,4 +1,4 @@
 declare module '*.png' {
-  const value: any;
+  const value: never;
   export default value;
 }

models/ContentMetadata.ts

@@ -2,6 +2,7 @@ import { IOrderable } from './IOrderable';
 
 export interface ContentMetadata {
   key: string;
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
   content: any;
   lastUpdated: Date;
 }

package.json

@@ -17,72 +17,70 @@
     "@expo-google-fonts/quicksand": "^0.2.2",
     "@expo/vector-icons": "^13.0.0",
     "@openspacelabs/react-native-zoomable-view": "^2.0.4",
-    "@react-native-async-storage/async-storage": "1.17.11",
-    "@react-native-community/netinfo": "9.3.7",
-    "@react-native-masked-view/masked-view": "0.2.8",
+    "@react-native-async-storage/async-storage": "1.18.2",
+    "@react-native-community/netinfo": "9.4.1",
+    "@react-native-masked-view/masked-view": "0.2.9",
     "@react-navigation/bottom-tabs": "6.3.1",
     "@react-navigation/material-bottom-tabs": "^6.2.1",
     "@react-navigation/material-top-tabs": "^6.2.1",
     "@react-navigation/native": "~6.0.10",
     "@react-navigation/stack": "~6.2.1",
-    "@sentry/react-native": "4.15.2",
+    "@sentry/react-native": "5.5.0",
     "deepmerge": "^4.2.2",
-    "dotenv": "^16.0.0",
-    "expo": "^48.0.0",
-    "expo-application": "~5.1.1",
-    "expo-asset": "~8.9.1",
-    "expo-background-fetch": "~11.1.1",
-    "expo-barcode-scanner": "~12.3.2",
-    "expo-blur": "~12.2.2",
-    "expo-brightness": "~11.2.1",
-    "expo-camera": "~13.2.1",
-    "expo-constants": "~14.2.1",
-    "expo-device": "~5.2.1",
-    "expo-font": "~11.1.1",
-    "expo-haptics": "~12.2.1",
-    "expo-linking": "~4.0.1",
-    "expo-splash-screen": "~0.18.2",
-    "expo-status-bar": "~1.4.4",
-    "expo-updates": "~0.16.4",
-    "expo-web-browser": "~12.1.1",
+    "expo": "^49.0.0",
+    "expo-application": "~5.3.0",
+    "expo-asset": "~8.10.1",
+    "expo-background-fetch": "~11.3.0",
+    "expo-barcode-scanner": "~12.5.3",
+    "expo-blur": "~12.4.1",
+    "expo-brightness": "~11.4.0",
+    "expo-camera": "~13.4.2",
+    "expo-constants": "~14.4.2",
+    "expo-device": "~5.4.0",
+    "expo-font": "~11.4.0",
+    "expo-haptics": "~12.4.0",
+    "expo-linking": "~5.0.2",
+    "expo-splash-screen": "~0.20.5",
+    "expo-status-bar": "~1.6.0",
+    "expo-updates": "~0.18.12",
+    "expo-web-browser": "~12.3.2",
     "front-matter": "^4.0.2",
     "react": "18.2.0",
     "react-dom": "18.2.0",
-    "react-native": "0.71.3",
+    "react-native": "0.72.3",
     "react-native-animatable": "^1.3.3",
     "react-native-collapsible": "^1.6.0",
-    "react-native-gesture-handler": "~2.9.0",
-    "react-native-pager-view": "6.1.2",
+    "react-native-gesture-handler": "~2.12.0",
+    "react-native-pager-view": "6.2.0",
     "react-native-paper": "^4.12.1",
     "react-native-qrcode-svg": "^6.1.2",
-    "react-native-reanimated": "~2.14.4",
-    "react-native-root-toast": "^3.4.0",
-    "react-native-safe-area-context": "4.5.0",
-    "react-native-screens": "~3.20.0",
+    "react-native-reanimated": "~3.3.0",
+    "react-native-root-toast": "3.4.0",
+    "react-native-safe-area-context": "4.6.3",
+    "react-native-screens": "~3.22.0",
     "react-native-sticky-parallax-header": "^0.4.2",
-    "react-native-svg": "13.4.0",
+    "react-native-svg": "13.9.0",
     "react-native-tab-view": "^3.1.1",
-    "react-native-web": "~0.18.11",
-    "sentry-expo": "~6.2.0",
+    "react-native-web": "~0.19.6",
+    "sentry-expo": "~7.0.0",
     "simple-markdown": "^0.7.3"
   },
   "devDependencies": {
     "@babel/core": "^7.20.0",
-    "@types/react": "~18.0.27",
+    "@types/react": "~18.2.14",
     "@types/react-native": "~0.69.1",
-    "@typescript-eslint/eslint-plugin": "^4.28.0",
-    "@typescript-eslint/parser": "^4.28.0",
+    "@typescript-eslint/eslint-plugin": "^6.6.0",
+    "@typescript-eslint/parser": "^6.6.0",
     "eslint": "^7.29.0",
     "eslint-config-prettier": "^8.3.0",
     "eslint-config-react": "^1.1.7",
     "eslint-plugin-jest": "^24.3.6",
     "eslint-plugin-prettier": "^3.4.0",
     "eslint-plugin-react": "^7.24.0",
     "jest": "^29.2.1",
-    "jest-expo": "^48.0.0",
+    "jest-expo": "^49.0.0",
     "prettier": "^2.3.1",
-    "react-native-dotenv": "^3.4.8",
-    "typescript": "^4.9.4"
+    "typescript": "^5.1.3"
   },
   "resolutions": {
     "@types/react": "~18.0.0"

screens/HomeScreen.tsx

@@ -28,7 +28,7 @@ const HomeScreen: React.FC = () => {
           <RefreshControl refreshing={refreshing} onRefresh={handleRefresh} />
         }
       >
-        <ScrollView style={{ height: '100%' }}>
+        <ScrollView style={{ height: '100%', paddingVertical: 8 }}>
           <CountdownTimer targetDate={new Date('2023-09-22T20:00:00+02:00')} />
           {data
             ?.filter((x) => x.key === HOME_ITEMS)[0]

services/contentService.ts

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
 import AsyncStorageLib from '@react-native-async-storage/async-storage';
 import fm, { FrontMatterResult } from 'front-matter';
 import { getMarkdown } from '../api/api';

services/ticketService.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
 import AsyncStorage from '@react-native-async-storage/async-storage';
 import { Ticket } from '../models/Ticket';