feat: add stripcard support to app (#12)

djoamersfoort · Jul 2, 2024 · 5e1c324 · 5e1c324
1 parent a79b311
commit 5e1c324
Show file tree

Hide file tree

Showing 4 changed files with 68 additions and 9 deletions.
diff --git a/src/auth.tsx b/src/auth.tsx
@@ -22,6 +22,11 @@ export enum Authed {
   AUTHENTICATED,
 }
 
+interface StripCard {
+  used: number;
+  count: number;
+}
+
 interface User {
   aud: string;
   iat: number;
@@ -38,6 +43,7 @@ interface User {
   exp: number;
   auth_time: number;
   jti: string;
+  stripcard: StripCard | null;
 }
 
 interface LoadingState {

diff --git a/src/components/register/presence.tsx b/src/components/register/presence.tsx
@@ -1,15 +1,13 @@
 import {
-  getSlots,
   Presence as PresenceType,
   Slot,
   slotsAtom,
 } from "../../stores/register";
-import { ActivityIndicator, Checkbox, Switch, Text } from "react-native-paper";
-import { StyleSheet, TouchableOpacity } from "react-native";
+import { Icon, Switch, Text } from "react-native-paper";
+import { StyleSheet, TouchableOpacity, View } from "react-native";
 import { useContext, useState } from "react";
 import AuthContext, { Authed } from "../../auth";
 import { useAtom } from "jotai";
-import { Platform } from "react-native";
 import { AANMELDEN } from "../../env";
 
 export default function Presence({
@@ -46,6 +44,14 @@ export default function Presence({
     <TouchableOpacity style={styles.presence} onPress={markSeen}>
       <Switch value={seen} onChange={markSeen} />
       <Text>{presence.name}</Text>
+      {presence.stripcard_count && (
+        <View style={styles.stripcard}>
+          <Icon size={22} source={"clipboard-list"} />
+          <Text>
+            {presence.stripcard_used} / {presence.stripcard_count}
+          </Text>
+        </View>
+      )}
     </TouchableOpacity>
   );
 }
@@ -57,4 +63,12 @@ const styles = StyleSheet.create({
     alignItems: "center",
     gap: 10,
   },
+  stripcard: {
+    flex: 1,
+    display: "flex",
+    flexDirection: "row",
+    justifyContent: "flex-end",
+    alignItems: "center",
+    gap: 5,
+  },
 });
diff --git a/src/screens/feed/slot.tsx b/src/screens/feed/slot.tsx
@@ -1,6 +1,6 @@
 import { StackScreenProps } from "@react-navigation/stack";
 import { Alert, ScrollView, StyleSheet, View } from "react-native";
-import { Button, Card, Chip, Text } from "react-native-paper";
+import { Button, Card, Chip, Icon, Text } from "react-native-paper";
 import { useContext, useEffect, useState } from "react";
 import { getSlots, membersAtom, Slot, slotsAtom } from "../../stores/register";
 import { useAtom } from "jotai";
@@ -66,17 +66,40 @@ export default function SlotScreen({ route, navigation }: Props) {
     <View style={styles.slot}>
       <ScrollView>
         <View style={styles.info}>
+          {authState.authenticated === Authed.AUTHENTICATED &&
+            authState.user.stripcard && (
+              <>
+                <View style={styles.header}>
+                  <Icon size={22} source={"clipboard-list"} />
+                  <Text variant={"titleMedium"}>Strippenkaart</Text>
+                </View>
+                <Card>
+                  <Card.Content>
+                    <Text variant={"titleSmall"}>
+                      Je strippenkaart is {authState.user.stripcard.used} van de{" "}
+                      {authState.user.stripcard.count} keer gebruikt.
+                    </Text>
+                  </Card.Content>
+                </Card>
+              </>
+            )}
           {slot.announcement && (
             <>
-              <Text variant={"titleMedium"}>Aankondiging</Text>
+              <View style={styles.header}>
+                <Icon size={22} source={"bullhorn"} />
+                <Text variant={"titleMedium"}>Aankondiging</Text>
+              </View>
               <Card>
                 <Card.Content>
                   <Text variant={"titleSmall"}>{slot.announcement}</Text>
                 </Card.Content>
               </Card>
             </>
           )}
-          <Text variant={"titleMedium"}>Beschikbaarheid</Text>
+          <View style={styles.header}>
+            <Icon size={22} source={"account"} />
+            <Text variant={"titleMedium"}>Beschikbaarheid</Text>
+          </View>
           <Card>
             <Card.Content>
               <Text variant={"titleSmall"}>
@@ -86,7 +109,10 @@ export default function SlotScreen({ route, navigation }: Props) {
             </Card.Content>
           </Card>
 
-          <Text variant={"titleMedium"}>Begeleiders</Text>
+          <View style={styles.header}>
+            <Icon size={22} source={"account-supervisor"} />
+            <Text variant={"titleMedium"}>Begeleiders</Text>
+          </View>
           <Card>
             <Card.Content style={styles.chips}>
               {slot.tutors.length === 0 && (
@@ -100,7 +126,10 @@ export default function SlotScreen({ route, navigation }: Props) {
 
           {slot.presence && (
             <>
-              <Text variant={"titleMedium"}>Leden</Text>
+              <View style={styles.header}>
+                <Icon size={22} source={"account-details"} />
+                <Text variant={"titleMedium"}>Leden</Text>
+              </View>
               <Card>
                 <Card.Content>
                   <PresenceCard slot={slot} members={members} />
@@ -156,4 +185,10 @@ const styles = StyleSheet.create({
   button: {
     borderRadius: 25,
   },
+  header: {
+    display: "flex",
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 5,
+  },
 });
diff --git a/src/stores/register.ts b/src/stores/register.ts
@@ -7,11 +7,15 @@ export interface Presence {
   id: number;
   seen: boolean;
   name: string;
+  stripcard_used: number | null;
+  stripcard_count: number | null;
 }
 
 export interface Member {
   id: number;
   name: string;
+  stripcard_used: number | null;
+  stripcard_count: number | null;
 }
 
 export interface Slot {