Feat: list of libraries

package.json

@@ -8,6 +8,7 @@
     "@react-navigation/devtools": "^6.0.20",
     "@react-navigation/drawer": "^6.6.6",
     "@react-navigation/native": "^6.1.9",
+    "@react-navigation/stack": "^6.3.20",
     "@tanstack/react-query": "^5.8.3",
     "expo": "^49.0.3",
     "expo-splash-screen": "~0.20.5",

src/components/drawer/routes.ts

@@ -3,6 +3,7 @@ import RestoMenu from "../../routes/resto";
 import EventView from "../../routes/events";
 import { DrawerEntry } from "../../types/drawer";
 import SchamperView from "../../routes/schamper";
+import LibrariesView from "../../routes/libraries";
 import { SchamperIcon } from "../icons/SchamperIcon";
 
 export const routes: DrawerEntry[] = [
@@ -26,4 +27,9 @@ export const routes: DrawerEntry[] = [
     element: SchamperView,
     icon: SchamperIcon,
   },
+  {
+    name: "Libraries",
+    element: LibrariesView,
+    icon: "book",
+  }
 ];

src/components/feed/LibraryDetailsComponent.tsx

@@ -0,0 +1,72 @@
+import { Surface, Text, TouchableRipple, useTheme } from "react-native-paper";
+import type { Library } from "../../types/stores";
+import { Pressable, StyleSheet, View } from "react-native";
+import * as WebBrowser from "expo-web-browser";
+export const LibraryDetailsComponent = ({ library }: { library: Library }) => {
+  const theme = useTheme();
+
+  return (
+    <Surface style={{ ...styles.container }}>
+      <TouchableRipple rippleColor="rgba(0, 0, 0, .32)" >
+        <View style={{...styles.textContainer}}>
+          <Text variant="headlineSmall" style={styles.title}>
+            {library.name_nl}
+          </Text>
+          <View style={{...styles.additionalInfo}}>
+            <View>
+              <Text style={styles.smallText}>{library.address.join(" ")}</Text>              
+              <Text style={styles.smallText}>{library.email}</Text>
+              <Text style={styles.smallText}>{library.telephone}</Text>
+            </View>
+          </View>
+        </View>
+      </TouchableRipple>
+      <Pressable style={{...styles.button, backgroundColor: "#ddd"}} onPress={() => WebBrowser.openBrowserAsync(library.link)}>
+        <Text>Go to site</Text>
+      </Pressable>
+    </Surface>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    display: "flex",
+    flexDirection: "column",
+    marginVertical: 5,
+    width: "95%",
+    borderRadius: 15,
+    overflow: "hidden",
+  },
+  textContainer: {
+    padding: 15,
+    color: "#ddd",
+  },
+  title: {
+    fontWeight: "600",
+    color: "#000",
+  },
+  additionalInfo: {
+    marginTop: 5,
+    display: "flex",
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "space-between",
+    color: "#ddd",
+  },
+  smallText: {
+    color: "#000",
+    fontWeight: "900",
+  },
+  button: {
+    alignItems: 'center',
+    justifyContent: 'center',
+    paddingVertical: 12,
+    paddingHorizontal: 32,
+    borderRadius: 4,
+    elevation: 3,
+    width: 200,
+    alignSelf: 'center',
+    marginBottom: 10,
+  },
+});
+

src/components/feed/LibraryListItemComponent.tsx

@@ -0,0 +1,104 @@
+import { Surface, Text, TouchableRipple } from "react-native-paper";
+import type { Library } from "../../types/stores";
+import { GestureResponderEvent, Pressable, Image, StyleSheet, View } from "react-native";
+import { useEffect, useState } from "react";
+import * as WebBrowser from "expo-web-browser";
+
+
+export const LibraryListItemComponent = ({ library, onPress, showDetails }: { library: Library, onPress: ((event: GestureResponderEvent) => void), showDetails: boolean}) => {
+  const [imgSize, setImgSize] = useState({ width: 0, height: 1 });
+
+  useEffect(() => {
+    Image.getSize(library.image_url, (w, h) => {
+      setImgSize({
+        width: w,
+        height: h,
+      });
+    });
+  }, [library.image_url]);
+
+  return (
+    <Surface style={{ ...styles.container }}>
+      <TouchableRipple rippleColor="rgba(0, 0, 0, .32)" onPress={onPress}>
+        <>
+          <Image
+              style={{
+                flex: 1,
+                aspectRatio: (imgSize.width ?? 1) / (Math.max(imgSize.height, 1) ?? 1),
+              }}
+              source={{ uri: library.image_url }}
+            />
+          <View style={styles.textContainer}>
+            <Text variant="headlineSmall" style={styles.title}>
+              {library.name_nl}
+            </Text>
+            <View style={styles.additionalInfo}>
+              <View>
+                <Text style={styles.smallText}>{library.address.join(" ")}</Text>
+                {
+                  showDetails ?
+                    <>
+                      <Text style={styles.smallText}>{library.email}</Text>
+                      <Text style={styles.smallText}>{library.telephone}</Text>
+                    </>
+                  : 
+                    <></>
+                }
+              </View>
+            </View>
+          </View>
+        </>
+      </TouchableRipple>
+      {
+        showDetails ? 
+          <Pressable style={{...styles.button, backgroundColor: "#ddd"}} onPress={() => WebBrowser.openBrowserAsync(library.link)}>
+            <Text>Go to site</Text>
+          </Pressable>
+        : 
+          <></>
+      } 
+    </Surface>
+  );
+};
+const styles = StyleSheet.create({
+  container: {
+    display: "flex",
+    flexDirection: "column",
+    marginVertical: 5,
+    width: "95%",
+    borderRadius: 15,
+    overflow: "hidden",
+  },
+  textContainer: {
+    padding: 15,
+    color: "#ddd",
+  },
+  title: {
+    fontWeight: "600",
+    color: "#000",
+  },
+  additionalInfo: {
+    marginTop: 5,
+    display: "flex",
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "space-between",
+    color: "#ddd",
+  },
+  smallText: {
+    color: "#000",
+    fontWeight: "900",
+  },
+  button: {
+    alignItems: 'center',
+    justifyContent: 'center',
+    paddingVertical: 12,
+    paddingHorizontal: 32,
+    borderRadius: 4,
+    elevation: 3,
+    width: 200,
+    alignSelf: 'center',
+    marginBottom: 10,
+  },
+});
+

src/constant.ts

@@ -1,4 +1,5 @@
 export const ENDPOINTS = {
   HYDRA_V1: "https://hydra.ugent.be/api/1.0/",
   HYDRA_V2: "https://hydra.ugent.be/api/2.0/",
+  LIBRARIES: "https://widgets.lib.ugent.be/"
 };

src/routes/libraries.tsx

@@ -0,0 +1,28 @@
+import { useLibrariesQuery } from "../stores/libraries";
+import { LibraryListItemComponent } from "../components/feed/LibraryListItemComponent";
+import { StyleSheet, ScrollView } from "react-native";
+import { useState } from "react";
+import { Library } from "../types/stores";
+
+
+const LibrariesView = () => {
+  const { data: libraryRequest } = useLibrariesQuery();
+  const [selectedLibrary, setSelectedLibrary] = useState<Library | null>(null);
+
+  return (
+    <ScrollView contentContainerStyle={styles.container}>
+      {libraryRequest.libraries.map(lib => (
+          <LibraryListItemComponent key={lib.link} library={lib} onPress={async () => setSelectedLibrary(lib)} showDetails={lib==selectedLibrary}/>
+      ))}
+    </ScrollView>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    display: "flex",
+    alignItems: "center",
+  },
+});
+
+export default LibrariesView;

src/stores/libraries.ts

@@ -0,0 +1,18 @@
+import { LibraryRequest } from "../types/stores";
+import { ENDPOINTS } from "../constant";
+import { useSuspenseQuery } from "@tanstack/react-query";
+import { useFocusNotifyOnChangeProps } from "../lib/hooks/useFocusNotifyOnChangeProps";
+
+export const useLibrariesQuery = () => {
+  const notifyOnChangeProps = useFocusNotifyOnChangeProps();
+
+  const schamperQuery = useSuspenseQuery<LibraryRequest, Error>({
+    queryKey: ["libraries"],
+    queryFn: async () => {
+      const res = await fetch(`${ENDPOINTS.LIBRARIES}/library_groups/main.json`);
+      return res.json();
+    },
+    notifyOnChangeProps,
+  });
+  return schamperQuery;
+};

src/types/stores.ts

@@ -14,3 +14,39 @@ export declare type Article = {
   // ISO date string
   pub_date: string;
 };
+
+export declare type LibraryRequest = {
+  libraries: Library[];
+};
+
+export declare type Library = {
+  name_en: string;
+  has_hours: boolean;
+  lat: number;
+  image_url: string;
+  telephone: string[];
+  reading_room: string;
+  link_nl: string;
+  created_at: string;
+  door_number: string;
+  email: string;
+  department: string;
+  contact: string;
+  pickup_locations: string[];
+  updated_at: string;
+  link_en: string;
+  active: boolean;
+  email_acquisition: string;
+  cubee_id: string;
+  link: string;
+  sap_id: string;
+  shipment_library_code: string;
+  name: string;
+  faculty: string;
+  code: string;
+  thumbnail_url: string;
+  address: string[];
+  name_nl: string;
+  campus: string;
+  long: number;
+};

yarn.lock

@@ -2075,6 +2075,15 @@
   dependencies:
     nanoid "^3.1.23"
 
+"@react-navigation/stack@^6.3.20":
+  version "6.3.20"
+  resolved "https://registry.yarnpkg.com/@react-navigation/stack/-/stack-6.3.20.tgz#8eec944888f317bb1ba1ff30e7f513806bea16c2"
+  integrity sha512-vE6mgZzOgoa5Uy7ayT97Cj+ZIK7DK+JBYVuKUViILlWZy6IWK7HFDuqoChSbZ1ajTIfAxj/acVGg1jkbAKsToA==
+  dependencies:
+    "@react-navigation/elements" "^1.3.21"
+    color "^4.2.3"
+    warn-once "^0.1.0"
+
 "@segment/loosely-validate-event@^2.0.0":
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/@segment/loosely-validate-event/-/loosely-validate-event-2.0.0.tgz#87dfc979e5b4e7b82c5f1d8b722dfd5d77644681"