chore: demo mode

djoamersfoort · May 4, 2024 · 4e6681e · 4e6681e
1 parent 1f45e35
commit 4e6681e
Show file tree

Hide file tree

Showing 11 changed files with 113 additions and 64 deletions.
diff --git a/app.json b/app.json
@@ -3,7 +3,7 @@
     "name": "djo",
     "slug": "djo",
     "scheme": "djo",
-    "version": "1.2.0",
+    "version": "1.2.1",
     "orientation": "portrait",
     "icon": "./assets/icon.png",
     "userInterfaceStyle": "automatic",
@@ -16,7 +16,7 @@
       "**/*"
     ],
     "ios": {
-      "buildNumber": "2",
+      "buildNumber": "1",
       "userInterfaceStyle": "automatic",
       "supportsTablet": false,
       "bundleIdentifier": "nl.djoamersfoort.djo",
@@ -39,7 +39,7 @@
         "backgroundColor": "#202088"
       },
       "googleServicesFile": "./google-services.json",
-      "versionCode": 5
+      "versionCode": 6
     },
     "web": {
       "favicon": "./assets/favicon.png"

diff --git a/assets/demo.html b/assets/demo.html
@@ -0,0 +1,11 @@
+<html><head>
+    <meta http-equiv="content-type" content="text/html; "></head><body><div class="moz-text-html" lang="x-unicode"><p><span style="color: #ffffff; font-family: Roboto, -apple-system, 'apple color emoji', BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif; font-size: 16px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; white-space: pre-wrap; background-color: #212121; text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial; display: inline !important; float: none;">Beste DJO-ers,</span></p>
+    <p><span style="color: #ffffff; font-family: Roboto, -apple-system, 'apple color emoji', BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif; font-size: 16px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; white-space: pre-wrap; background-color: #212121; text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial; display: inline !important; float: none;"> We willen jullie graag weer een update geven over de onze zoektocht naar een nieuw pand. Een tijdje geleden hadden we jullie verteld dat we binnen niet al te lange tijd ons huidige pand moesten verlaten. Daar komt een andere bestemming voor namelijk. </span></p>
+    <p><span style="color: #ffffff; font-family: Roboto, -apple-system, 'apple color emoji', BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif; font-size: 16px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; white-space: pre-wrap; background-color: #212121; text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial; display: inline !important; float: none;">Sindsdien zijn we samen met Bitlair en nog twee onderhuurders druk op zoek naar een nieuw pand. En dat viel eerst niet mee, want we hebben best veel ruimte nodig. En niet alle panden zijn ook geschikt voor ons. We hebben jullie kort geleden een berichtje gestuurd dat we met een mogelijke verhuurder voor een nieuwe locatie in gesprek waren. Deze locatie zou wel goed bij onze beide clubs passen.</span></p>
+    <p><span style="color: #ffffff; font-family: Roboto, -apple-system, 'apple color emoji', BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif; font-size: 16px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; white-space: pre-wrap; background-color: #212121; text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial; display: inline !important; float: none;"> En dat gaat nu door! De nieuwe locatie is een groot deel van een verdieping in een pand op de Nijverheidsweg-Noord 77 in Amersfoort. We zijn nog druk bezig met alle details, dus we gaan dat de komende tijd aan jullie laten zien. </span></p>
+    <p><span style="color: #ffffff; font-family: Roboto, -apple-system, 'apple color emoji', BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif; font-size: 16px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; white-space: pre-wrap; background-color: #212121; text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial; display: inline !important; float: none;">Houd er in elk geval rekening mee, dat we ons de komende tijd gaan voorbereiden op de verhuizing. Op 1 juli moeten we ons huidige pand verlaten, maar mogelijk gaan we al eerder over. Of geleidelijk, we moeten dat nog bezien. Achter de schermen moeten we ook nog veel klussen in het nieuwe pand. </span></p>
+    <p><span style="color: #ffffff; font-family: Roboto, -apple-system, 'apple color emoji', BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif; font-size: 16px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; white-space: pre-wrap; background-color: #212121; text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial; display: inline !important; float: none;">Aanstaande zaterdag hebben we samen met Bitlair open dag en willen we ook al een sneak preview laten zien van het nieuwe pand in de vorm van een 3D tekening. Dat was het even voor nu. Mocht je vragen hebben, dan kun je die de komende tijd aan ons stellen. </span></p>
+    <p><span style="color: #ffffff; font-family: Roboto, -apple-system, 'apple color emoji', BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif; font-size: 16px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; white-space: pre-wrap; background-color: #212121; text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial; display: inline !important; float: none;">Groeten, </span></p>
+    <p><span style="color: #ffffff; font-family: Roboto, -apple-system, 'apple color emoji', BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif; font-size: 16px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; white-space: pre-wrap; background-color: #212121; text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial; display: inline !important; float: none;">Tjalling Brouwer</span></p>
+    <p><span style="color: #ffffff; font-family: Roboto, -apple-system, 'apple color emoji', BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif; font-size: 16px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; white-space: pre-wrap; background-color: #212121; text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial; display: inline !important; float: none;">Namens het bestuur</span></p>
+</div></body></html>
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "djo",
-  "version": "1.1.0",
+  "version": "1.2.1",
   "main": "node_modules/expo/AppEntry.js",
   "scripts": {
     "start": "expo start",
@@ -13,6 +13,7 @@
     "@react-navigation/stack": "^6.3.29",
     "base-64": "^1.0.0",
     "expo": "~50.0.14",
+    "expo-asset": "~9.0.2",
     "expo-auth-session": "~5.4.0",
     "expo-av": "~13.10.5",
     "expo-device": "~5.9.3",

diff --git a/src/auth.tsx b/src/auth.tsx
@@ -260,7 +260,7 @@ function AuthScreen({
         Log in
       </Button>
       <Text onPress={guest} style={styles.guest}>
-        Of ga door als gast
+        Gebruik demo mode
       </Text>
     </SafeAreaView>
   );

diff --git a/src/components/feed/feed.tsx b/src/components/feed/feed.tsx
@@ -1,31 +1,22 @@
-import { useContext, useEffect } from "react";
-import AuthContext, { Authed } from "../../auth";
-import { useAtom } from "jotai";
-import {
-  feedAtom,
-  getAnnouncements,
-  getRSSFeed,
-  sortFeeds,
-} from "../../stores/feed";
-import { ActivityIndicator, Card } from "react-native-paper";
+import {useContext, useEffect} from "react";
+import AuthContext, {Authed} from "../../auth";
+import {useAtom} from "jotai";
+import {ActionType, feedAtom, getAnnouncements, getRSSFeed, sortFeeds,} from "../../stores/feed";
+import {ActivityIndicator, Card} from "react-native-paper";
 import Item from "./item";
+import {Asset} from "expo-asset";
 
 export default function Feed() {
   const authState = useContext(AuthContext);
   const [feed, setFeed] = useAtom(feedAtom);
 
   useEffect(() => {
     async function getFeeds() {
-      if (authState.authenticated === Authed.AUTHENTICATED) {
-        const feeds = await Promise.all([
+      const feeds = await Promise.all([
           getRSSFeed(),
-          getAnnouncements(await authState.token),
+          getAnnouncements(authState.authenticated === Authed.AUTHENTICATED ? await authState.token : null),
         ]);
-        setFeed(sortFeeds(...feeds));
-      }
-      if (authState.authenticated === Authed.GUEST) {
-        setFeed(await getRSSFeed());
-      }
+        setFeed(sortFeeds(...feeds))
     }
 
     getFeeds().then();

diff --git a/src/components/register/listing.tsx b/src/components/register/listing.tsx
@@ -1,17 +1,12 @@
-import { useContext, useEffect } from "react";
-import AuthContext, { Authed } from "../../auth";
-import { useAtom } from "jotai";
-import { getSlots, Slot, slotsAtom } from "../../stores/register";
-import {
-  ActivityIndicator,
-  Avatar,
-  Card,
-  IconButton,
-} from "react-native-paper";
-import { StyleSheet, TouchableOpacity } from "react-native";
-import { useNavigation } from "@react-navigation/native";
-import { NativeStackNavigationProp } from "react-native-screens/native-stack";
-import { StackParamList } from "../../../App";
+import {useContext, useEffect} from "react";
+import AuthContext, {Authed} from "../../auth";
+import {useAtom} from "jotai";
+import {getSlots, Slot, slotsAtom} from "../../stores/register";
+import {ActivityIndicator, Avatar, Card, IconButton,} from "react-native-paper";
+import {StyleSheet, TouchableOpacity} from "react-native";
+import {useNavigation} from "@react-navigation/native";
+import {NativeStackNavigationProp} from "react-native-screens/native-stack";
+import {StackParamList} from "../../../App";
 
 type SlotNavigationProps = NativeStackNavigationProp<StackParamList>;
 
@@ -42,9 +37,7 @@ export default function Listing() {
 
   useEffect(() => {
     async function fetchDays() {
-      if (authState.authenticated !== Authed.AUTHENTICATED) return;
-
-      setSlots(await getSlots(await authState.token));
+      setSlots(await getSlots(authState.authenticated === Authed.AUTHENTICATED ? await authState.token : null));
     }
 
     fetchDays().then();

diff --git a/src/screens/feed/feed.tsx b/src/screens/feed/feed.tsx
@@ -27,10 +27,8 @@ export default function FeedScreen() {
   const [_slots, setSlots] = useAtom(slotsAtom);
 
   async function refresh() {
-    if (authState.authenticated !== Authed.AUTHENTICATED) return;
-
     setRefreshing(true);
-    const token = await authState.token;
+    const token = authState.authenticated === Authed.AUTHENTICATED ? await authState.token : null;
     await Promise.all([
       new Promise<void>(async (resolve) => {
         setSlots(null);
@@ -66,7 +64,7 @@ export default function FeedScreen() {
         }
       >
         <View style={styles.container}>
-          {authState.authenticated === Authed.AUTHENTICATED && <Listing />}
+          <Listing />
           <Feed />
         </View>
       </ScrollView>

diff --git a/src/screens/feed/slot.tsx b/src/screens/feed/slot.tsx
@@ -2,7 +2,7 @@ import { StackScreenProps } from "@react-navigation/stack";
 import { Alert, StyleSheet, View } from "react-native";
 import { Button, Card, Chip, Text } from "react-native-paper";
 import { useContext, useEffect, useState } from "react";
-import { getSlots, Slot, slotsAtom } from "../../stores/register";
+import {demoSlots, getSlots, Slot, slotsAtom} from "../../stores/register";
 import { useAtom } from "jotai";
 import { StackParamList } from "../../../App";
 import AuthContext, { Authed } from "../../auth";
@@ -11,28 +11,39 @@ type Props = StackScreenProps<StackParamList, "Slot">;
 
 export default function SlotScreen({ route, navigation }: Props) {
   const [slots, setSlots] = useAtom(slotsAtom);
+  if (!slots) return <></>
+
   const [slot, setSlot] = useState<Slot>(slots[route.params.slot]);
   const [loading, setLoading] = useState(false);
 
   const authState = useContext(AuthContext);
 
   async function register() {
-    if (authState.authenticated !== Authed.AUTHENTICATED) return;
-
     setLoading(true);
-    const token = await authState.token;
-    const { error }: { error: string | undefined } = await fetch(
-      `https://aanmelden.djoamersfoort.nl/api/v1/${slot.is_registered ? "deregister" : "register"}/${slot.name}/${slot.pod}`,
-      {
-        headers: {
-          authorization: `Bearer ${token}`,
-        },
-      },
-    ).then((res) => res.json());
+    const token = authState.authenticated === Authed.AUTHENTICATED ? await authState.token : null;
+    if (token) {
+      const { error }: { error: string | undefined } = await fetch(
+          `https://aanmelden.djoamersfoort.nl/api/v1/${slot.is_registered ? "deregister" : "register"}/${slot.name}/${slot.pod}`,
+          {
+            headers: {
+              authorization: `Bearer ${token}`,
+            },
+          },
+      ).then((res) => res.json());
 
-    if (error) {
-      setLoading(false);
-      return Alert.alert(error);
+      if (error) {
+        setLoading(false);
+        return Alert.alert(error);
+      }
+    } else {
+      if (slot.is_registered) {
+        slot.available++
+        slot.taken--
+      } else {
+        slot.available--
+        slot.taken++
+      }
+      slot.is_registered = !slot.is_registered
     }
 
     setSlots(await getSlots(token));

diff --git a/src/screens/settings.tsx b/src/screens/settings.tsx
@@ -29,9 +29,9 @@ export default function SettingsScreen() {
             )}
             {authState.authenticated === Authed.GUEST && (
               <Card.Content style={styles.content}>
-                <Text>Niet ingelogd</Text>
+                <Text>Demo Mode</Text>
                 <Button mode={"contained"} onPress={authState.login}>
-                  Log in
+                  Ga uit demo mode
                 </Button>
               </Card.Content>
             )}

diff --git a/src/stores/feed.ts b/src/stores/feed.ts
@@ -1,6 +1,7 @@
 import { atom } from "jotai";
 import { parse } from "rss-to-json";
 import { Item } from "../screens/feed/search";
+import {Asset} from "expo-asset";
 
 export enum ActionType {
   LINK,
@@ -44,7 +45,20 @@ export async function getRSSFeed(): Promise<FeedItem[]> {
     },
   }));
 }
-export async function getAnnouncements(token: string): Promise<FeedItem[]> {
+export async function getAnnouncements(token: string|null): Promise<FeedItem[]> {
+  if (!token) {
+    return [{
+      icon: "bullhorn",
+      title: 'DJO Aankondigingen',
+      description: 'Update over de DJO Locatie',
+      date: new Date().getTime(),
+      action: {
+        type: ActionType.VIEW,
+        source: await fetch(Asset.fromModule(require('../../assets/demo.html')).uri).then(res => res.text())
+      },
+    }]
+  }
+
   const announcements: Record<string, string>[] = await fetch(
     "https://leden.djoamersfoort.nl/notifications/announcements",
     {

diff --git a/src/stores/register.ts b/src/stores/register.ts
@@ -12,8 +12,38 @@ export interface Slot {
   is_registered: boolean;
 }
 
-export const slotsAtom = atom<Slot[] | null>(null);
-export async function getSlots(token: string) {
+export const demoSlots = [{
+  name: 'Vrijdag',
+  pod: 'fri',
+  description: 'Vrijdag (19:00 - 22:00)',
+  announcement: '',
+  tutors: ['Henk', 'Pieter', 'Frans'],
+
+  available: 8,
+  taken: 4,
+  is_registered: false,
+},
+  {
+    name: 'Zaterdag',
+    pod: 'sat',
+    description: 'Zaterdag (9:30 - 13:30)',
+    announcement: 'Vandaag is de open dag, dus we sluiten op tijd',
+    tutors: ['Henk', 'Anita'],
+
+    available: 2,
+    taken: 10,
+    is_registered: true,
+  }
+]
+
+export const slotsAtom = atom<Slot[]|null>([]);
+export async function getSlots(token: string|null) {
+  if (!token) {
+    await new Promise(resolve => setTimeout(resolve, Math.random() * 500 + 250))
+
+    return demoSlots;
+  }
+
   const { slots }: { slots: Slot[] } = await fetch(
     "https://aanmelden.djoamersfoort.nl/api/v1/slots",
     {