Algemene info tonen voor helpende handen

App.tsx

@@ -15,9 +15,11 @@ import {
 import { RootSiblingParent } from 'react-native-root-siblings';
 import * as Sentry from 'sentry-expo';
 import { DataContextProvider } from './hooks/useDataContext';
+import { TicketContextProvider } from './hooks/useTicketContext';
 
 Sentry.init({
-  dsn: 'https://[email protected]/4505356514426880',
+  dsn:
+    'https://[email protected]/4505356514426880',
   enableInExpoDevelopment: true,
   debug: true, // If `true`, Sentry will try to print out useful debugging information if something goes wrong with sending the event. Set it to `false` in production
 });
@@ -39,8 +41,10 @@ export default function App(): React.ReactElement | null {
       <RootSiblingParent>
         <SafeAreaProvider>
           <DataContextProvider>
-            <Navigation colorScheme={colorScheme} />
-            <StatusBar style="light" />
+            <TicketContextProvider>
+              <Navigation colorScheme={colorScheme} />
+              <StatusBar style="light" />
+            </TicketContextProvider>
           </DataContextProvider>
         </SafeAreaProvider>
       </RootSiblingParent>

api/api.ts

@@ -1,5 +1,6 @@
 /* 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(

constants/Strings.ts

@@ -9,3 +9,4 @@ export const MAP_ITEMS = '@markers';
 export const NORMALLAYER_ITEMS = `${MAP_ITEMS}/Normaal`;
 export const BIGGAMELAYER_ITEMS = `${MAP_ITEMS}/groot_spel`;
 export const ACTIVITIESLAYER_ITEMS = `${MAP_ITEMS}/Activiteiten`;
+export const VOLUNTEER_ITEMS = '@volunteer';

hooks/useTicketContext.tsx

@@ -0,0 +1,67 @@
+import AsyncStorage from '@react-native-async-storage/async-storage';
+import React, { ReactNode, useContext, useEffect, useState } from 'react';
+import { TicketMetadata } from '../models/TicketMetadata';
+import { IOrderable } from '../models/IOrderable';
+import useRefresh from './useRefresh';
+
+type DataContextType = {
+  data: TicketMetadata[] | undefined;
+  refreshing: boolean;
+  refreshContext: () => Promise<void>;
+};
+
+const DataContext = React.createContext<DataContextType | undefined>(undefined);
+
+type DataContextProviderProps = {
+  children: ReactNode;
+};
+
+export const TicketContextProvider: React.FC<DataContextProviderProps> = ({
+  children,
+}: DataContextProviderProps) => {
+  const [data, setData] = useState<TicketMetadata[]>();
+
+  const { refresh, refreshing } = useRefresh();
+
+  const loadDataFromStorage = async () => {
+    const dataFromStorage = await AsyncStorage.getItem('DATA');
+    if (dataFromStorage) {
+      const parsedData: TicketMetadata[] = JSON.parse(dataFromStorage);
+      setData(parsedData);
+    }
+  };
+
+  const refreshContext = async () => {
+    await refresh();
+    await loadDataFromStorage();
+    console.log('loaded');
+  };
+  useEffect(() => {
+    const asyncWrap = async () => {
+      await loadDataFromStorage();
+    };
+    asyncWrap();
+  }, []);
+
+  return (
+    <DataContext.Provider
+      value={{
+        data,
+        refreshing,
+        refreshContext,
+      }}
+    >
+      {children}
+    </DataContext.Provider>
+  );
+};
+
+export const useDataContext = (): DataContextType => {
+  const context = useContext(DataContext);
+  if (!context) {
+    throw new Error(
+      'useDataContext must be used within an DataContextProvider',
+    );
+  }
+  return context;
+};

models/TicketMetadata.ts

@@ -0,0 +1,18 @@
+import { IOrderable } from './IOrderable';
+
+export interface TicketMetadata {
+  key: string;
+  content: any;
+  lastUpdated: Date;
+}
+
+export const createMetadata = (
+  content: IOrderable[] | IOrderable,
+  key: string,
+): TicketMetadata => {
+  return {
+    key,
+    content,
+    lastUpdated: new Date(),
+  };
+};

models/VolunteerItem.ts

@@ -0,0 +1,7 @@
+import { IOrderable } from './IOrderable';
+
+export interface VolunteerItem extends IOrderable {
+  title: string;
+  content: string;
+  icon: string;
+}

navigation/BottomTabNavigator.tsx

@@ -28,6 +28,7 @@ import {
 } from '../types';
 import SettingsScreen from '../screens/SettingsScreen';
 import SaamdagenAppbar from '../components/SaamdagenAppbar';
+import VolunteerScreen from '../screens/VolunteerScreen';
 
 const BottomTab = createMaterialBottomTabNavigator<BottomTabParamList>();
 
@@ -274,6 +275,19 @@ const MoreScreenNavigator = () => {
           },
         }}
       />
+       <MoreStack.Screen
+        name="VolunteerScreen"
+        component={VolunteerScreen}
+        options={{
+          headerLeft: () => null,
+          headerTitle: 'Helpende hand',
+          headerTintColor: Colors[colorScheme].tabTextColor,
+          headerStyle: { backgroundColor: Colors[colorScheme].tabBackground },
+          headerTitleStyle: {
+            fontFamily: 'Quicksand_600SemiBold',
+          },
+        }}
+      />
     </MoreStack.Navigator>
   );
 };

screens/MoreScreen.tsx

@@ -1,22 +1,73 @@
-import React from 'react';
-import { FlatList } from 'react-native';
+import React, { useContext ,useState,useEffect} from 'react';
+import { FlatList, Image } from 'react-native';
 import NavigationListItem from '../components/NavigationListItem';
 import { Separator, View } from '../components/Themed/Themed';
+import { TicketMetadata } from '../models/TicketMetadata';
+import { useDataContext } from '../hooks/useTicketContext';
 
 const MoreScreen: React.FC = () => {
+
+  const { data, refreshContext, refreshing } = useDataContext();
+  const [TicketData, setTicketData] = useState<TicketMetadata>();
+
+  useEffect(() => {
+    if (data) {
+      const filtered = data.filter((x) => x.key === VOLUNTEER_ITEMS)[0];
+      console.log(filtered)
+
+      setTicketData(filtered);
+    }
+  }, [data]);
+
+  const handleRefresh = async () => {
+    await refreshContext();
+  };
+
+  // Always try to refresh data on load. We can do it here because the screen is never unmounted in the bottom tab.
+  useEffect(() => {
+    const refreshAsync = async () => {
+      await refreshContext();
+    };
+    refreshAsync();
+  }, []);
+
+
+
+
+
+
+console.log(TicketData)
+
+
+
+
+
+
   const items = [
     {
       title: 'Mijn Saamdagen',
       destination: 'ProfileScreen',
       icon: 'heart-outline',
     },
+    {
+      title: 'Helpende hand',
+      destination: 'VolunteerScreen',
+      icon: 'heart-outline',
+    },
     /* {
       title: 'Instellingen',
       destination: 'SettingsScreen',
       icon: 'tune-vertical',
     },*/
   ];
 
+  // if (Ticket?.ticketType === 'Medewerker')
+  //   items.push({
+  //     title: 'Helpende hand',
+  //     destination: 'VolunteerScreen',
+  //     icon: 'heart-outline',
+  //   });
+
   return (
     <View style={{ height: '100%' }}>
       <FlatList

screens/VolunteerScreen.tsx

@@ -0,0 +1,62 @@
+/* eslint-disable react/no-children-prop */
+import React, { useEffect, useState } from 'react';
+
+import { Separator, View } from '../components/Themed/Themed';
+import { FlatList, RefreshControl, StyleSheet } from 'react-native';
+import FaqCard from '../components/FaqCard';
+import { useDataContext } from '../hooks/useDataContext';
+import { VOLUNTEER_ITEMS } from '../constants/Strings';
+import { ContentMetadata } from '../models/ContentMetadata';
+
+const VolunteerScreen: React.FC = () => {
+  const { data, refreshContext, refreshing } = useDataContext();
+  const [VolunteerData, setVolunteerData] = useState<ContentMetadata>();
+
+  useEffect(() => {
+    if (data) {
+      const filtered = data.filter((x) => x.key === VOLUNTEER_ITEMS)[0];
+      console.log(filtered)
+
+      setVolunteerData(filtered);
+    }
+  }, [data]);
+
+  const handleRefresh = async () => {
+    await refreshContext();
+  };
+
+  // Always try to refresh data on load. We can do it here because the screen is never unmounted in the bottom tab.
+  useEffect(() => {
+    const refreshAsync = async () => {
+      await refreshContext();
+    };
+    refreshAsync();
+  }, []);
+
+  return (
+    <View style={styles.container}>
+      <FlatList
+        refreshControl={
+          <RefreshControl refreshing={refreshing} onRefresh={handleRefresh} />
+        }
+        keyExtractor={(item) => item.title}
+        data={VolunteerData?.content}
+        renderItem={({ item }) => (
+          <FaqCard title={item.title} text={item.content} icon={item.icon} />
+        )}
+        ItemSeparatorComponent={() => <Separator marginVertical={0} />}
+        ListFooterComponent={() => <Separator marginVertical={0} />}
+      />
+    </View>
+  );
+};
+
+export default VolunteerScreen;
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    // alignItems: 'flex-start',
+    // justifyContent: 'center',
+  },
+});

services/contentMapping.ts

@@ -72,3 +72,16 @@ export const mapMap = (objects: FrontMatterResult<any>[]) => {
     })
     .sort(sortByOrder);
 };
+
+export const volunteerMap =  (objects: FrontMatterResult<any>[]) => {
+  return objects
+    .map((item) => {
+    return {
+      title: item.attributes.titel,
+      order: item.attributes.volgorde,
+      icon: item.attributes.icoon,
+      content: item.body,
+    };
+  }).sort(sortByOrder);
+
+};

services/contentService.ts

@@ -8,14 +8,16 @@ import {
   SATURDAY_ITEMS,
   SUNDAY_ITEMS,
   FAQ_ITEMS,
+  VOLUNTEER_ITEMS,
   // MAP_ITEMS,
 } from '../constants/Strings';
 import { createMetadata } from '../models/ContentMetadata';
-import { mapFaq, mapHomeItems, mapProgram } from './contentMapping';
+import { mapFaq, mapHomeItems, mapProgram, volunteerMap } from './contentMapping';
 
 const programPrefix = 'Programma';
 const homePrefix = 'Homepage';
 const faqPrefix = 'Faq';
+const volunteerPrefix = 'Volunteer';
 // const mapPrefix = 'Kaart';
 
 // Load all content from the API, parse it to the format we want and then save it as one huge array in local storage.
@@ -24,6 +26,7 @@ export const saveContent = async (paths: string[]): Promise<void> => {
   const homePaths = paths.filter((x) => x.startsWith(homePrefix));
   const programPaths = paths.filter((x) => x.startsWith(programPrefix));
   const faqPaths = paths.filter((x) => x.startsWith(faqPrefix));
+  const volunteerPaths = paths.filter((x)=> x.startsWith(volunteerPrefix))
   // const mapPaths = paths.filter((x) => x.startsWith(mapPrefix));
 
   // HOME - Load and wrap in metadata
@@ -38,12 +41,15 @@ export const saveContent = async (paths: string[]): Promise<void> => {
   const faqMarkdown = await loadContent(faqPaths);
   const faqContent = createMetadata(mapFaq(faqMarkdown), FAQ_ITEMS);
 
+  // Volunteer - Load and wrap in metadata
+  const volunteerMarkdown = await loadContent(volunteerPaths);
+  const volunteerContent = createMetadata(volunteerMap(volunteerMarkdown), VOLUNTEER_ITEMS);
+
   // MAP - Currently not needed because we use a static image for map
   // const mapMarkdown = await loadContent(mapPaths);
   // const mapContent = createMetadata(mapMap(mapMarkdown), MAP_ITEMS);
 
-  const allData = parsedProgram.concat(homeContent, faqContent);
-
+  const allData = parsedProgram.concat(homeContent, faqContent, volunteerContent);
   await AsyncStorageLib.setItem('DATA', JSON.stringify(allData));
 };
 
@@ -71,4 +77,4 @@ const parseProgramContent = async (objects: FrontMatterResult<any>[]) => {
   const sundayParsed = createMetadata(sunday, SUNDAY_ITEMS);
 
   return [fridayParsed, saturDayParsed, sundayParsed];
-};
+};

services/ticketService.tsx

@@ -18,7 +18,7 @@ export const storeTicket = async (
         ? workshopsBeforeNoon['#options'][formValues.workshops_voormiddag]
         : null,
       hash: ticketHash,
-    };
+    };console.log
     await AsyncStorage.setItem('sd_ticket', JSON.stringify(ticket));
     return ticket;
   } catch (e) {

types.tsx

@@ -38,4 +38,5 @@ export type MoreScreenParamList = {
   ProfileScreen: undefined;
   ScanScreen: undefined;
   SettingsScreen: undefined;
+  VolunteerScreen: undefined;
 };