Note insert.

components/job-notes/job-notes.jsx

@@ -3,14 +3,18 @@ import { useQuery } from "@apollo/client";
 import { AntDesign } from "@expo/vector-icons";
 import { useGlobalSearchParams } from "expo-router";
 import { DateTime } from "luxon";
-import React from "react";
+import React, { useCallback, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { FlatList, RefreshControl, View } from "react-native";
-import { ActivityIndicator, Card, Text } from "react-native-paper";
+import { ActivityIndicator, Button, Card, Text } from "react-native-paper";
 import ErrorDisplay from "../error/error-display";
+import NewNoteModal from "./new-note-modal";
 
 export default function JobNotes() {
   const { jobId } = useGlobalSearchParams();
+  const [noteModalVisible, setNoteModalVisible] = useState(false);
+  const showNoteModal = () => setNoteModalVisible(true);
+  const hideNoteModal = () => setNoteModalVisible(false);
 
   const { loading, error, data, refetch } = useQuery(GET_JOB_BY_PK, {
     variables: {
@@ -19,6 +23,11 @@ export default function JobNotes() {
     skip: !jobId,
   });
 
+  const handleNoteCreated = useCallback(() => {
+    hideNoteModal();
+    refetch();
+  }, [refetch]);
+
   const { t } = useTranslation();
   const onRefresh = async () => {
     return refetch();
@@ -36,24 +45,40 @@ export default function JobNotes() {
   }
   const job = data.jobs_by_pk;
 
-  if (job.notes.length === 0)
-    return (
-      <Card>
-        <Card.Content>
-          <Text>{t("jobdetail.labels.nojobnotes")}</Text>
-        </Card.Content>
-      </Card>
-    );
-
   return (
-    <FlatList
-      refreshControl={
-        <RefreshControl refreshing={loading} onRefresh={onRefresh} />
-      }
-      style={{ flex: 1 }}
-      data={job.notes}
-      renderItem={(object) => <NoteListItem item={object.item} />}
-    />
+    <View style={{ flex: 1, display: "flex" }}>
+      <Button
+        icon="plus"
+        mode="outlined"
+        onPress={showNoteModal}
+        style={{ margin: 8 }}
+      >
+        {t("jobdetail.actions.addnote")}
+      </Button>
+      {job.notes.length === 0 ? (
+        <Card>
+          <Card.Content>
+            <Text>{t("jobdetail.labels.nojobnotes")}</Text>
+          </Card.Content>
+        </Card>
+      ) : (
+        <FlatList
+          refreshControl={
+            <RefreshControl refreshing={loading} onRefresh={onRefresh} />
+          }
+          style={{ flex: 1 }}
+          data={job.notes}
+          renderItem={(object) => <NoteListItem item={object.item} />}
+        />
+      )}
+      <NewNoteModal
+        jobId={jobId}
+        visible={noteModalVisible}
+        onDismiss={hideNoteModal}
+        onCreated={handleNoteCreated}
+        relatedRos={[]} // TODO: supply relatedRos list
+      />
+    </View>
   );
 }
 
@@ -72,7 +97,7 @@ function NoteListItem({ item }) {
           >
             {item.private && (
               <AntDesign
-                name="eyeo"
+                name="eye-invisible"
                 style={{ margin: 4 }}
                 size={24}
                 color="black"