Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 | 1x | import SearchBar from "@/components/search-bar";
import ClinicCard from "@/components/card-link";
import React, { useEffect, useMemo, useState } from "react";
import {
SafeAreaView,
View,
Text,
StyleSheet,
FlatList,
ActivityIndicator,
} from "react-native";
import { useUpdateVaccineSheets, useVaccineSheets } from "@/hooks/vaccineData";
import VaccineDataController from "@/controllers/vaccineDataController";
import { PATH_DISPLAY_VACCINE } from "@/utils/constPaths";
import logger from "@/utils/logger";
import { VaccineDataService } from "@/services/vaccineDataService";
import { COLOURS } from "@/utils/colours";
import { RFPercentage } from "react-native-responsive-fontsize";
import { useNavigation } from "expo-router";
export default function VaccineInfo() {
const [searchVal, setSearchVal] = useState("");
logger.debug("searchVal", searchVal);
//updateVaccineSheets(new VaccineDataController(new VaccineDataService))
const controller = useMemo(
() => new VaccineDataController(new VaccineDataService()),
[]
);
const { vaccineSheets, loading, error } = useVaccineSheets({
vaccineController: controller,
searchValue: searchVal,
});
const navigation = useNavigation();
useEffect(() => {
navigation.setOptions({
headerRight: () => null, // Force-remove SettingsButton at runtime
});
}, [navigation]);
return (
<SafeAreaView style={styles.container}>
<View>
<View style={styles.clinicListBanner}>
<Text style={styles.clinicListSubheading}>
Vaccinations intended for persons under 18 years of age
</Text>
{error && <Text style={styles.error}>{error}</Text>}
<View style={styles.searchBarWrapper}>
<SearchBar
value={searchVal}
onChangeText={setSearchVal}
placeholder="Search by Vaccine or Disease"
/>
</View>
</View>
<View style={styles.clinicListSection}>
{loading && !error && <ActivityIndicator size="large" />}
<FlatList
data={vaccineSheets}
renderItem={({ item, index }) => {
const bgColor = index % 2 ? COLOURS.WHITE : COLOURS.LIGHT_GREY;
logger.debug(`Pdf path ${item.pdfPath}`);
return (
<View style={{ marginTop: 16 }}>
<ClinicCard
key={index}
title={item.vaccineName}
subtitle={`Starting Age/Grade: ${item.starting}`}
bgColor={bgColor}
pathname={PATH_DISPLAY_VACCINE}
params={item}
text={""}
/>
</View>
);
}}
keyExtractor={(item, index) => item.vaccineName}
contentContainerStyle={styles.clinicCardsContainer}
/>
</View>
</View>
</SafeAreaView>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: COLOURS.WHITE,
},
clinicListSection: {
paddingBottom: 50,
marginBottom: 50,
fontFamily: "MYRIADPRO-REGULAR",
color: COLOURS.BLACK,
},
clinicListBanner: {
padding: 16,
borderRadius: 4,
backgroundColor: COLOURS.WHITE,
borderBottomWidth: 0, // Border thickness
shadowColor: "#000", // Shadow color for iOS
shadowOffset: { width: 0, height: 2 }, // Shadow offset for iOS
shadowOpacity: 0.2, // Shadow opacity for iOS
shadowRadius: 4, // Shadow radius for iOS
elevation: 5, // Shadow for Android
},
clinicListHeading: {
margin: 0,
fontSize: RFPercentage(3.5),
textDecorationLine: "underline",
fontFamily: "MYRIADPRO-REGULAR",
fontWeight: "bold",
color: COLOURS.BLACK,
},
clinicListSubheading: {
marginTop: 8,
fontSize: RFPercentage(2),
fontFamily: "MYRIADPRO-REGULAR",
lineHeight: 22,
color: COLOURS.BLACK,
},
searchBarWrapper: {
backgroundColor: COLOURS.SEARCHBAR_BG,
borderRadius: 24,
marginTop: 16,
paddingVertical: 8,
paddingHorizontal: 12,
},
clinicCardsContainer: {
paddingBottom: 24,
},
offline: {
color: COLOURS.GREY,
},
error: {
color: COLOURS.STATUS_RED,
},
});
|