PR: Setup boilerplate for the home screen #14

app/_layout.tsx

@@ -5,6 +5,7 @@ import { I18nProvider } from "@/common/i18n";
 import { IdentityProvider } from "@/common/identity";
 import { ProviderList, useFontLoader } from "@/common/util";
 import { ThemeProvider } from "@/components/ThemeProvider";
+import { View } from "@/components/Themed";
 
 export { ErrorBoundary } from "expo-router";
 
@@ -20,7 +21,10 @@ export default function RootLayout() {
     <ProviderList
       providers={[I18nProvider, IdentityProvider, PaperProvider, ThemeProvider]}
     >
-      <Stack />
+      {/* Fixes white flicker during navigation */}
+      <View style={{ flex: 1 }}>
+        <Stack />
+      </View>
     </ProviderList>
   );
 }

app/auth/login.tsx

@@ -1,4 +1,4 @@
-import { Link, Stack } from "expo-router";
+import { Link } from "expo-router";
 import { Formik } from "formik";
 import { useState } from "react";
 import {
@@ -18,6 +18,7 @@ import {
 import { POST } from "@/common/api";
 import { useI18n } from "@/common/i18n";
 import { useIdentity, RedirectIfLoggedIn } from "@/common/identity";
+import { Header } from "@/components/Header";
 
 const Page = () => {
   const identity = useIdentity();
@@ -69,7 +70,7 @@ const Page = () => {
       }) => (
         <TouchableWithoutFeedback onPress={() => Keyboard.dismiss()}>
           <View style={styles.container}>
-            <Stack.Screen options={{ title: t("login.pageTitle") }} />
+            <Header title={t("login.pageTitle")} />
             <Text variant="titleLarge" style={styles.title}>
               {t("login.description")}
             </Text>

app/auth/register.tsx

@@ -1,4 +1,4 @@
-import { Link, Stack } from "expo-router";
+import { Link } from "expo-router";
 import { Formik } from "formik";
 import { useState } from "react";
 import {
@@ -20,6 +20,7 @@ import {
 import { POST } from "@/common/api";
 import { useI18n } from "@/common/i18n";
 import { useIdentity, RedirectIfLoggedIn } from "@/common/identity";
+import { Header } from "@/components/Header";
 
 interface IRegisterForm {
   email: string;
@@ -110,7 +111,7 @@ const Page = () => {
         >
           <TouchableWithoutFeedback onPress={() => Keyboard.dismiss()}>
             <View style={styles.container}>
-              <Stack.Screen options={{ title: t("register.pageTitle") }} />
+              <Header title={t("register.pageTitle")} />
               <Text variant="titleLarge" style={styles.title}>
                 {t("register.description")}
               </Text>

app/dashboard.tsx

@@ -1,23 +1,72 @@
-import { Button } from "react-native-paper";
+import { useRouter } from "expo-router";
+import { FlatList, StyleSheet } from "react-native";
+import { FAB } from "react-native-paper";
 
+import { actions, ActionKey } from "@/common/actions";
+import { useI18n } from "@/common/i18n";
 import { useIdentity, RedirectIfNoProfile } from "@/common/identity";
-import { MonoText } from "@/components/StyledText";
+import { DashboardGadget } from "@/components/DashboardGadget";
+import { Header } from "@/components/Header";
 import { View } from "@/components/Themed";
 
+const mockDashboardGadgets: ActionKey[] = [
+  "logOut",
+  "profileList",
+  "profileList",
+  "logOut",
+  "logOut",
+  "profileList",
+];
+
 const Page = () => {
+  const { t } = useI18n();
   const identity = useIdentity();
+  const router = useRouter();
 
   if (!identity.hasProfile) {
     return <RedirectIfNoProfile identity={identity} />;
   }
 
+  const ctx = { identity, router };
+
   return (
-    <View>
-      {/* TODO: This shouldn't be here */}
-      <MonoText>{JSON.stringify(identity.profile, null, 2)}</MonoText>
-      <Button onPress={() => identity.logOut()}>LOG OUT</Button>
+    <View style={styles.container}>
+      <Header
+        left={{ icon: "menu", onPress: () => router.push("/menu") }}
+        title={t("dashboard.pageTitle")}
+      />
+      <FlatList
+        data={mockDashboardGadgets}
+        numColumns={2}
+        renderItem={({ item }) => (
+          <DashboardGadget action={actions[item]} ctx={ctx} />
+        )}
+        style={styles.list}
+      />
+      <FAB
+        icon="alarm-light"
+        style={styles.fab}
+        onPress={() => {
+          /* TODO */
+        }}
+      />
     </View>
   );
 };
 
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+  list: {
+    padding: 8,
+  },
+  fab: {
+    position: "absolute",
+    bottom: 32,
+    right: 32,
+    backgroundColor: "#991b1b",
+  },
+});
+
 export default Page;

app/index.tsx

@@ -1,15 +1,18 @@
-import { Link, Stack } from "expo-router";
+import { Link } from "expo-router";
 import { StyleSheet, View } from "react-native";
 import { ActivityIndicator, Button, Text } from "react-native-paper";
 
 import { BASE_URL, useApi } from "@/common/api";
 import { useI18n } from "@/common/i18n";
 import { useIdentity, RedirectIfLoggedIn } from "@/common/identity";
+import { Header } from "@/components/Header";
 import { MonoText } from "@/components/StyledText";
 
+const HEALTHZ_PATH = "/api/v1/healthz";
+
 export const Landing = ({ debug = false }: { debug?: boolean }) => {
   const { data, isLoading, error, mutate } = useApi({
-    url: "/api/v1/healthz",
+    url: HEALTHZ_PATH,
   });
   const { t } = useI18n();
   const identity = useIdentity();
@@ -34,7 +37,7 @@ export const Landing = ({ debug = false }: { debug?: boolean }) => {
         {debug ? (
           <>
             <MonoText style={styles.debug}>
-              {new URL("/healthz", BASE_URL).toString()}
+              {new URL(HEALTHZ_PATH, BASE_URL).toString()}
               {"\n"}
               {JSON.stringify(data)}
               {"\n"}
@@ -72,7 +75,7 @@ const Page = () => {
   const { t } = useI18n();
   return (
     <View style={styles.container}>
-      <Stack.Screen options={{ title: t("landing.pageTitle") }} />
+      <Header title={t("landing.pageTitle")} />
       <Landing debug={__DEV__} />
     </View>
   );

app/menu.tsx

@@ -0,0 +1,64 @@
+import { useRouter } from "expo-router";
+import { ScrollView, StyleSheet } from "react-native";
+import { Banner, List, MD3Theme, useTheme, Text } from "react-native-paper";
+
+import { actions } from "@/common/actions";
+import { useI18n } from "@/common/i18n";
+import {
+  useIdentity,
+  RedirectIfNoProfile,
+  isCaretaker,
+} from "@/common/identity";
+import { Header } from "@/components/Header";
+import { MenuItem } from "@/components/MenuItem";
+import { View } from "@/components/Themed";
+
+const Page = () => {
+  const { t } = useI18n();
+  const router = useRouter();
+  const identity = useIdentity();
+  const theme = useTheme();
+  const styles = makeStyles(theme);
+
+  if (!identity.hasProfile) {
+    return <RedirectIfNoProfile identity={identity} />;
+  }
+
+  const ctx = { identity, router };
+
+  return (
+    <View style={styles.container}>
+      <Header left="back" title={t("menu.pageTitle")} />
+      {isCaretaker(identity.profile) ? (
+        <Banner visible style={styles.banner}>
+          <Text style={styles.bannerText}>
+            {t("menu.caretakerBanner", { alias: identity.profile.seniorAlias })}
+          </Text>
+        </Banner>
+      ) : null}
+      <ScrollView>
+        <List.Section>
+          <List.Subheader>{t("menu.account")}</List.Subheader>
+          <MenuItem action={actions.profileList} ctx={ctx} />
+          <MenuItem action={actions.logOut} ctx={ctx} />
+        </List.Section>
+      </ScrollView>
+    </View>
+  );
+};
+
+const makeStyles = (theme: MD3Theme) =>
+  StyleSheet.create({
+    container: {
+      flex: 1,
+    },
+    banner: {
+      backgroundColor: theme.colors.primary,
+      paddingBottom: 8,
+    },
+    bannerText: {
+      color: theme.colors.onPrimary,
+    },
+  });
+
+export default Page;

app/profile/list.tsx

@@ -1,4 +1,4 @@
-import { Link, Stack, router } from "expo-router";
+import { Link } from "expo-router";
 import { ScrollView, StyleSheet, View } from "react-native";
 import { Avatar, Button, List } from "react-native-paper";
 
@@ -10,6 +10,7 @@ import {
   useIdentity,
   RedirectIfLoggedOut,
 } from "@/common/identity";
+import { Header } from "@/components/Header";
 
 const mockApiResponse = {
   profiles: [
@@ -31,14 +32,11 @@ const ProfilesList = () => {
   const seniorProfile = profiles.find(isSenior);
   const caretakerProfiles = profiles.filter(isCaretaker);
 
-  const handleItemPress = (profile: Profile) => {
-    identity.selectProfile(profile);
-    router.push("/dashboard");
-  };
+  const handleItemPress = (profile: Profile) => identity.selectProfile(profile);
 
   return (
     <View style={styles.container}>
-      <Stack.Screen options={{ title: t("profileList.pageTitle") }} />
+      <Header left="back" title={t("profileList.pageTitle")} />
       <List.Section>
         {caretakerProfiles.length > 0 && (
           <List.Subheader style={styles.listSubheader}>

assets/i18n.json

@@ -153,5 +153,29 @@
   "profileList.noProfiles": {
     "en": "You don't have any profiles yet.",
     "pl": "Nie masz jeszcze żadnych profili."
+  },
+  "dashboard.pageTitle": {
+    "en": "Dashboard",
+    "pl": "Panel"
+  },
+  "menu.pageTitle": {
+    "en": "Menu",
+    "pl": "Menu"
+  },
+  "menu.account": {
+    "en": "Account",
+    "pl": "Konto"
+  },
+  "menu.caretakerBanner": {
+    "en": "You are currently managing {alias}.",
+    "pl": "Obecnie zarządzasz profilem {alias}."
+  },
+  "actions.profileList": {
+    "en": "Select profile",
+    "pl": "Zmień profil"
+  },
+  "actions.logOut": {
+    "en": "Log out",
+    "pl": "Wyloguj się"
   }
 }

common/actions/index.ts

@@ -0,0 +1,2 @@
+export { actions, type ActionKey } from "./list";
+export type { Action, ActionContext } from "./types";

common/actions/list.ts

@@ -0,0 +1,16 @@
+import type { Action } from "./types";
+
+export const actions = {
+  profileList: {
+    displayName: (t) => t("actions.profileList"),
+    icon: "account-switch",
+    handler: ({ router }) => router.push("/profile/list"),
+  },
+  logOut: {
+    displayName: (t) => t("actions.logOut"),
+    icon: "account-arrow-right",
+    handler: ({ identity }) => identity.logOut(),
+  },
+} satisfies Record<string, Action>;
+
+export type ActionKey = keyof typeof actions;

common/actions/types.ts

@@ -0,0 +1,20 @@
+import type { useRouter } from "expo-router";
+import type { ComponentProps } from "react";
+import type { IconButton } from "react-native-paper";
+
+import type { Translator } from "../i18n";
+import type { IdentityProfileKnown } from "../identity/types";
+
+type IconSource = ComponentProps<typeof IconButton>["icon"];
+type Router = ReturnType<typeof useRouter>;
+
+export type ActionContext = {
+  identity: IdentityProfileKnown;
+  router: Router;
+};
+
+export type Action = {
+  displayName: (t: Translator) => string;
+  icon: IconSource;
+  handler: (ctx: ActionContext) => void;
+};

common/i18n.tsx

@@ -12,6 +12,10 @@ const DEFAULT_LANGUAGE = "en";
 type TranslationKey = keyof typeof data;
 type Language = "en" | "pl";
 type I18nData = { language: Language };
+export type Translator = (
+  key: TranslationKey,
+  substitutions?: Record<string, any>,
+) => string;
 
 const I18nContext = createContext<I18nData>({ language: DEFAULT_LANGUAGE });
 
@@ -33,8 +37,8 @@ const I18nContext = createContext<I18nData>({ language: DEFAULT_LANGUAGE });
 export const useI18n = () => {
   const { language } = useContext(I18nContext);
 
-  const t = (key: TranslationKey, substitutions: Record<string, any> = {}) => {
-    const prop = data[key] as Record<Language, string | undefined>;
+  const t: Translator = (key, substitutions = {}) => {
+    const prop = (data[key] ?? {}) as Record<Language, string | undefined>;
     let value = prop[language] ?? prop[DEFAULT_LANGUAGE] ?? null;
 
     if (!value) {