Introduce Notification Center

package.json

@@ -18,6 +18,7 @@
     "react-native-paper": "^5.12.3",
     "react-native-safe-area-context": "^4.10.8",
     "react-native-screens": "^3.27.0",
+    "react-native-uuid": "^2.0.2",
     "react-native-vector-icons": "^10.1.0",
     "xstate": "^5.14.0"
   },

src/api.ts

@@ -1,23 +1,68 @@
-function timeout(data: any, milliseconds: number) {
+import uuid from "react-native-uuid";
+
+export interface Item {
+  title: string;
+  id: string | number[];
+}
+
+function timeout<T>(response: T, milliseconds: number): Promise<T> {
   return new Promise((resolve) =>
-    setTimeout(() => resolve(data), milliseconds),
+    setTimeout(() => resolve(response), milliseconds),
   );
 }
 
 export async function signIn() {
   return await timeout({ status: "success", user: { name: "John" } }, 500);
 }
 
-export async function getItems<T>() {
+let items = [
+  { title: "Title", id: uuid.v4() },
+  { title: "Title", id: uuid.v4() },
+  { title: "Title", id: uuid.v4() },
+];
+
+export async function getItems(): Promise<{
+  status: string;
+  items: Item[];
+}> {
+  return await timeout<{ status: string; items: Item[] }>(
+    {
+      status: "success",
+      items,
+    },
+    800,
+  );
+}
+
+export async function addItem(title: Item["title"]): Promise<{
+  status: string;
+  item: Item;
+}> {
+  const newItem: Item = { title, id: uuid.v4() };
+  items = [...items, newItem];
+
+  return await timeout(
+    {
+      status: "success",
+      item: newItem,
+    },
+    500,
+  );
+}
+
+export async function deleteItem(id: Item["id"]): Promise<{
+  status: string;
+  id: Item["id"];
+}> {
+  items = items.filter((item) => {
+    return item.id !== id;
+  });
+
   return await timeout(
     {
       status: "success",
-      items: [
-        { title: "Title 1", id: 1 },
-        { title: "Title 2", id: 2 },
-        { title: "Title 3", id: 3 },
-      ],
-    } as T,
+      id,
+    },
     500,
   );
 }

src/components/NotificationModal.tsx

@@ -0,0 +1,40 @@
+import React from "react";
+import { Portal, Text, Dialog, Button } from "react-native-paper";
+import { NotificationCenterMachineActor } from "../machines/notificationCenter";
+import { useSelector } from "@xstate/react";
+
+interface Props {
+  actor: NotificationCenterMachineActor;
+}
+
+export function NotificationModal({ actor }: Props) {
+  const state = useSelector(actor, (snapshot) => {
+    return snapshot;
+  });
+
+  const {
+    context: {
+      modal: { title, message },
+    },
+  } = state;
+
+  const isOpen = state.matches({ modal: "opened" });
+
+  function onDismissHandler() {
+    actor.send({ type: "CLOSE" });
+  }
+
+  return (
+    <Portal>
+      <Dialog visible={isOpen} onDismiss={onDismissHandler}>
+        {title && <Dialog.Title>{title}</Dialog.Title>}
+        <Dialog.Content>
+          <Text>{message}</Text>
+        </Dialog.Content>
+        <Dialog.Actions>
+          <Button onPress={onDismissHandler}>Close</Button>
+        </Dialog.Actions>
+      </Dialog>
+    </Portal>
+  );
+}

src/components/NotificationSnackbar.tsx

@@ -0,0 +1,64 @@
+import React from "react";
+import { Snackbar, Text, MD3LightTheme } from "react-native-paper";
+import { NotificationCenterMachineActor } from "../machines/notificationCenter";
+import { useSelector } from "@xstate/react";
+
+interface Props {
+  actor: NotificationCenterMachineActor;
+}
+
+export function NotificationSnackbar({ actor }: Props) {
+  const state = useSelector(actor, (snapshot) => {
+    return snapshot;
+  });
+
+  const {
+    context: {
+      snackbar: { severity, message },
+    },
+  } = state;
+
+  const isOpen = state.matches({ snackbar: "opened" });
+
+  const isError = severity === "error";
+
+  function onDismissHandler() {
+    actor.send({ type: "CLOSE" });
+  }
+
+  return (
+    <>
+      <Snackbar
+        visible={isOpen}
+        action={{
+          label: "Close",
+          icon: "close",
+          onPress: onDismissHandler,
+        }}
+        onDismiss={onDismissHandler}
+        style={
+          isError
+            ? { backgroundColor: MD3LightTheme.colors.error }
+            : { backgroundColor: MD3LightTheme.colors.primaryContainer }
+        }
+        theme={{
+          colors: {
+            inversePrimary: isError
+              ? MD3LightTheme.colors.onError
+              : MD3LightTheme.colors.onPrimaryContainer,
+          },
+        }}
+      >
+        <Text
+          style={
+            isError
+              ? { color: MD3LightTheme.colors.onError }
+              : { color: MD3LightTheme.colors.onPrimaryContainer }
+          }
+        >
+          {message}
+        </Text>
+      </Snackbar>
+    </>
+  );
+}

src/contexts/useApp.tsx

@@ -9,6 +9,10 @@ import {
   AuthenticatedMachineActor,
   authenticatedMachine,
 } from "../machines/authenticated.navigator";
+import {
+  NotificationCenterMachineActor,
+  notificationCenterMachine,
+} from "../machines/notificationCenter";
 
 export const appMachine = setup({
   types: {
@@ -17,6 +21,7 @@ export const appMachine = setup({
       username: string;
       refAuthenticating: AuthenticatingMachineActor | null;
       refAuthenticated: AuthenticatedMachineActor | null;
+      refNotificationCenter: NotificationCenterMachineActor | undefined;
     },
   },
   actions: {
@@ -36,23 +41,38 @@ export const appMachine = setup({
     stopRefAuthenticated() {
       stopChild("refAuthenticated");
     },
+    setRefNotificationCenter: assign({
+      refNotificationCenter: ({ spawn }) => {
+        return spawn("notificationCenterMachine", {
+          systemId: "notificationCenter",
+        });
+      },
+    }),
     setUsername: assign({
       username: (_, { username }: { username: string }) => {
         return username;
       },
     }),
   },
-  actors: { authenticatingMachine, authenticatedMachine },
+  actors: {
+    authenticatingMachine,
+    authenticatedMachine,
+    notificationCenterMachine,
+  },
 }).createMachine({
   id: "application",
   initial: "initializing",
   context: {
     username: "",
     refAuthenticating: null,
     refAuthenticated: null,
+    refNotificationCenter: undefined,
   },
   states: {
-    initializing: { on: { START_APP: { target: "authenticating" } } },
+    initializing: {
+      entry: "setRefNotificationCenter",
+      on: { START_APP: { target: "authenticating" } },
+    },
     authenticating: {
       entry: ["setRefAuthenticating"],
       on: {

src/machines/home.ts

@@ -5,7 +5,6 @@ export type HomeMachineActor = ActorRefFrom<typeof homeMachine>;
 export const homeMachine = setup({
   types: {},
   actors: {},
-  actions: {},
 }).createMachine({
   id: "home",
   initial: "idle",