@dwidge/json-forms-expo 0.0.2 → 0.0.3

package/src/Form/FormListView.tsx

@@ -3,21 +3,28 @@
 // https://www.boost.org/LICENSE_1_0.txt
 
 import { UnstyledList, viewStyles } from "@dwidge/components-rnw";
+import { useNavAction2 } from "@dwidge/hooks-expo";
 import assert from "assert";
-import { useState } from "react";
 import { FormApi } from "../hooks/FormApi";
+import { useNavRoutes } from "../hooks/FormsContext";
 import { FormView } from "./FormView";
 
 export const FormListView = ({
-  elements = FormApi.useGetList(),
-  selection: [selection, setSelection] = useState<string[]>([]),
+  attachments = FormApi.useGetList({}),
+  onPressItem = useNavAction2(
+    useNavRoutes().FORM_EDIT_SCREEN,
+    async (id: string) => ({
+      FormId: id,
+    }),
+  ),
 }) => (
   <UnstyledList
-    items={elements}
+    items={attachments}
     keyExtractor={(item) => (assert(item.id), item.id)}
-    selection={[selection, setSelection]}
-    render={(item) => <FormView form={item} />}
+    selection={[[], () => {}]}
+    render={(item) => <FormView id={item.id} />}
     selectStyle={viewStyles.select}
     style={viewStyles.unselect}
+    onPress={onPressItem}
   />
 );

package/src/Form/FormView.tsx

@@ -1,11 +1,26 @@
-// Copyright DWJ 2024.
-// Distributed under the Boost Software License, Version 1.0.
-// https://www.boost.org/LICENSE_1_0.txt
-
-import { StyledText } from "@dwidge/components-rnw";
-import { FormApi } from "../hooks/FormApi";
-
-export const FormView = ({
-  form = FormApi.useGetItem(),
-  onPress = () => {},
-}) => <StyledText>{form?.name || "untitled"}</StyledText>;
+// Copyright DWJ 2024.
+// Distributed under the Boost Software License, Version 1.0.
+// https://www.boost.org/LICENSE_1_0.txt
+
+import { StyledDate } from "@dwidge/components-expo";
+import { StyledLoader, StyledText, StyledView } from "@dwidge/components-rnw";
+import { SchemaApi } from "../hooks/SchemaApi";
+import { FormApi } from "../hooks/FormApi";
+import { useParams } from "../hooks/useParams";
+import { filterId } from "../hooks";
+
+export const FormView = ({
+  id = useParams().FormId,
+  attachment: [attachment, setAttachment] = FormApi.useItem(filterId(id)),
+  form = SchemaApi.useGetItem(filterId(attachment?.SchemaId)),
+}) =>
+  attachment && form ? (
+    <StyledView space outline gap pad flex>
+      <StyledText>{form.name || "untitled"}</StyledText>
+      {attachment.createdAt && (
+        <StyledDate>{attachment.createdAt * 1000}</StyledDate>
+      )}
+    </StyledView>
+  ) : (
+    <StyledLoader />
+  );

package/src/Form/index.ts

@@ -1,9 +1,6 @@
-export * from "./EditFormAttachmentScreen";
-export * from "./FormEdit";
-export * from "./FormEditScreen";
-export * from "./FormListEdit";
-export * from "./FormListScreen";
-export * from "./FormListView";
-export * from "./FormSelectScreen";
-export * from "./FormSelectView";
-export * from "./FormView";
+export * from "./FormEdit.js";
+export * from "./FormEditScreen.js";
+export * from "./FormListEdit.js";
+export * from "./FormListScreen.js";
+export * from "./FormListView.js";
+export * from "./FormView.js";

package/src/{Form/EditFormAttachmentScreen.tsx → Schema/EditSchemaScreen.tsx}

@@ -76,21 +76,21 @@ const Form = z.object({
   schema: JsonFormSchema,
 });
 
-export const EditFormAttachmentScreen = ({
+export const EditSchemaScreen = ({
   form: [form, setForm] = useForm(useFormId()),
 }) => (
   <ScreenView>
-    <StyledHeader title="Edit Form" />
+    <StyledHeader title="Edit Schema" />
     {form == null || !form ? (
       <CenterView>
         <StyledText>
-          {form === null ? "The form does not exist." : "Loading..."}
+          {form === null ? "The form schema does not exist." : "Loading..."}
         </StyledText>
       </CenterView>
     ) : (
       <ScrollView flex gap wide pad selfcenter>
         <JSONSchemaForm
-          name="FormSchema"
+          name="Schema"
           schema={formSchema}
           value={form}
           onChange={setForm}

package/src/Schema/SchemaEdit.tsx

@@ -0,0 +1,15 @@
+// Copyright DWJ 2024.
+// Distributed under the Boost Software License, Version 1.0.
+// https://www.boost.org/LICENSE_1_0.txt
+
+import { StyledLoader, StyledText, StyledView } from "@dwidge/components-rnw";
+import { SchemaApi } from "../hooks/SchemaApi";
+
+export const SchemaCard = ({ form = SchemaApi.useGetItem() }) =>
+  form ? (
+    <StyledView flex card row>
+      <StyledText>{form.name ?? "untitled"}</StyledText>
+    </StyledView>
+  ) : (
+    <StyledLoader />
+  );

package/src/Schema/SchemaEditScreen.tsx

@@ -0,0 +1,57 @@
+// Copyright DWJ 2024.
+// Distributed under the Boost Software License, Version 1.0.
+// https://www.boost.org/LICENSE_1_0.txt
+
+import { StyledHeader } from "@dwidge/components-expo";
+import {
+  CenterView,
+  ScreenView,
+  ScrollView,
+  StyledText,
+} from "@dwidge/components-rnw";
+import {
+  defaultFormSchemaString,
+  FormDesigner,
+  FormSchema,
+} from "@dwidge/json-forms-designer";
+import { SchemaApi } from "../hooks/SchemaApi";
+import { useParams } from "../hooks/useParams";
+import { filterId } from "../hooks";
+
+export const SchemaEditScreen = ({
+  schema: [schema, setSchema] = SchemaApi.useItem(
+    filterId(useParams().SchemaId),
+  ),
+}) => (
+  <ScreenView>
+    <StyledHeader title={["Form", schema?.name].filter(Boolean).join(" - ")} />
+    {schema == null || !schema ? (
+      <CenterView>
+        <StyledText>
+          {schema === null ? "The form does not exist." : "Loading..."}
+        </StyledText>
+      </CenterView>
+    ) : (
+      <ScrollView flex gap wide pad selfcenter>
+        <FormDesigner
+          schemaString={[
+            schema.schema ?? defaultFormSchemaString,
+            setSchema &&
+              ((updater) => {
+                const next =
+                  typeof updater === "function"
+                    ? updater(schema.schema ?? defaultFormSchemaString)
+                    : updater;
+                const parsed = FormSchema.parse(JSON.parse(next));
+                setSchema?.((prev) => ({
+                  ...prev,
+                  name: parsed.schema.title,
+                  schema: next,
+                }));
+              }),
+          ]}
+        />
+      </ScrollView>
+    )}
+  </ScreenView>
+);

package/src/{FormAttachment/FormAttachmentListView.tsx → Schema/SchemaListEdit.tsx}

@@ -5,26 +5,28 @@
 import { UnstyledList, viewStyles } from "@dwidge/components-rnw";
 import { useNavAction2 } from "@dwidge/hooks-expo";
 import assert from "assert";
-import { FormAttachmentApi } from "../hooks/FormAttachmentApi";
+import { useState } from "react";
+import { SchemaApi } from "../hooks/SchemaApi";
 import { useNavRoutes } from "../hooks/FormsContext";
-import { FormAttachmentView } from "./FormAttachmentView";
+import { SchemaCard } from "./SchemaEdit";
 
-export const FormAttachmentListView = ({
-  attachments = FormAttachmentApi.useGetList({}),
-  onPressItem = useNavAction2(
-    useNavRoutes().FORM_ATTACHMENT_EDIT_SCREEN,
+export const SchemaListEdit = ({
+  elements = SchemaApi.useGetList(),
+  selection: [selection, setSelection] = useState<string[]>([]),
+  onPress = useNavAction2(
+    useNavRoutes().SCHEMA_EDIT_SCREEN,
     async (id: string) => ({
-      FormAttachmentId: id,
+      SchemaId: id,
     }),
   ),
 }) => (
   <UnstyledList
-    items={attachments}
+    items={elements}
     keyExtractor={(item) => (assert(item.id), item.id)}
-    selection={[[], () => {}]}
-    render={(item) => <FormAttachmentView id={item.id} />}
+    selection={[selection, setSelection]}
+    render={(item) => <SchemaCard form={item} />}
     selectStyle={viewStyles.select}
     style={viewStyles.unselect}
-    onPress={onPressItem}
+    onPress={onPress}
   />
 );

package/src/Schema/SchemaListScreen.tsx

@@ -0,0 +1,54 @@
+// Copyright DWJ 2024.
+// Distributed under the Boost Software License, Version 1.0.
+// https://www.boost.org/LICENSE_1_0.txt
+
+import { StyledHeader } from "@dwidge/components-expo";
+import {
+  CenterView,
+  ScreenView,
+  ScrollView,
+  StyledFontAwesome,
+  StyledView,
+} from "@dwidge/components-rnw";
+import { useMemoState } from "@dwidge/hooks-react";
+import { TouchableOpacity } from "react-native";
+import { SchemaApi } from "../hooks/SchemaApi";
+import { SchemaListEdit } from "./SchemaListEdit";
+import { useCreateBlankSchema } from "../hooks/useCreateBlankSchema";
+
+export const SchemaListScreen = ({
+  onCreate = useCreateBlankSchema(),
+  onDeleteList = SchemaApi.useDeleteList(),
+  selection = useMemoState<string[]>([]),
+}) => (
+  <ScreenView>
+    <StyledHeader
+      title="Schemas"
+      actions={[
+        {
+          icon: "remove-circle",
+          onPress:
+            onDeleteList && selection[0].length
+              ? () => onDeleteList(selection[0].map((id) => ({ id })))
+              : undefined,
+        },
+        {
+          icon: "add-circle",
+          onPress: onCreate,
+        },
+      ]}
+    />
+    <ScrollView gap pad>
+      <StyledView flex column>
+        <StyledView>
+          <SchemaListEdit selection={selection} />
+        </StyledView>
+        <TouchableOpacity style={{ flex: 1 }} onPress={onCreate}>
+          <CenterView row gap>
+            <StyledFontAwesome name="plus" size={30} />
+          </CenterView>
+        </TouchableOpacity>
+      </StyledView>
+    </ScrollView>
+  </ScreenView>
+);

package/src/Schema/SchemaListView.tsx

@@ -0,0 +1,23 @@
+// Copyright DWJ 2024.
+// Distributed under the Boost Software License, Version 1.0.
+// https://www.boost.org/LICENSE_1_0.txt
+
+import { UnstyledList, viewStyles } from "@dwidge/components-rnw";
+import assert from "assert";
+import { useState } from "react";
+import { SchemaApi } from "../hooks/SchemaApi";
+import { SchemaView } from "./SchemaView";
+
+export const SchemaListView = ({
+  elements = SchemaApi.useGetList(),
+  selection: [selection, setSelection] = useState<string[]>([]),
+}) => (
+  <UnstyledList
+    items={elements}
+    keyExtractor={(item) => (assert(item.id), item.id)}
+    selection={[selection, setSelection]}
+    render={(item) => <SchemaView form={item} />}
+    selectStyle={viewStyles.select}
+    style={viewStyles.unselect}
+  />
+);

package/src/{Form/FormSelectScreen.tsx → Schema/SchemaSelectScreen.tsx}

@@ -11,38 +11,33 @@ import {
 } from "@dwidge/components-rnw";
 import { useNavAction2 } from "@dwidge/hooks-expo";
 import { StyledButton } from "@dwidge/components-rnw";
-import { FormSelectView } from "./FormSelectView";
+import { SchemaSelectView } from "./SchemaSelectView";
 import { useNavRoutes } from "../hooks/FormsContext";
 import { StyledHeader } from "@dwidge/components-expo";
-import { useCreateBlankFormAttachment } from "../hooks/useCreateBlankFormAttachment";
+import { useCreateBlankForm } from "../hooks";
 
-const useOnSelectForm = () =>
-  useNavAction2(
-    useNavRoutes().FORM_ATTACHMENT_EDIT_SCREEN,
-    useCreateBlankFormAttachment({}),
-  );
+const useOnSelectSchema = () =>
+  useNavAction2(useNavRoutes().FORM_EDIT_SCREEN, useCreateBlankForm({}));
 
-export const FormSelectScreen = ({
-  onSelectForm = useOnSelectForm(),
+export const SchemaSelectScreen = ({
+  onSelectSchema = useOnSelectSchema(),
   selected: [selected, setSelected] = useState<string[]>([]),
 }) => (
   <ScreenView>
-    <StyledHeader title="Select Form" />
+    <StyledHeader title="Select Schema" />
     <ScrollView gap pad>
       <StyledView>
-        <StyledText center>
-          Select from the list of forms below, or use the search option above.
-        </StyledText>
+        <StyledText center>Select one or more</StyledText>
       </StyledView>
-      <FormSelectView selected={[selected, setSelected]} />
+      <SchemaSelectView selected={[selected, setSelected]} />
       <StyledButton
         onPress={
-          selected.length > 0 && onSelectForm
-            ? () => onSelectForm(selected.map((id) => ({ id })))
+          selected.length > 0 && onSelectSchema
+            ? () => onSelectSchema(selected.map((id) => ({ id })))
             : undefined
         }
       >
-        Select Form
+        Select Schema
       </StyledButton>
     </ScrollView>
   </ScreenView>

package/src/{Form/FormSelectView.tsx → Schema/SchemaSelectView.tsx}

@@ -4,17 +4,17 @@
 
 import { StyledButton } from "@dwidge/components-rnw";
 import { ReactNode, useState } from "react";
-import { FormApi } from "../hooks/FormApi";
-import { FormListView } from "./FormListView";
+import { SchemaApi } from "../hooks/SchemaApi";
+import { SchemaListView } from "./SchemaListView";
 
-export const FormSelectView = ({
-  formList = FormApi.useGetList(),
+export const SchemaSelectView = ({
+  formList = SchemaApi.useGetList(),
   selected: [selected, setSelected] = useState<string[]>([]),
   searchValue: [searchValue, setSearchValue] = useState(""),
-  createFormList = FormApi.useCreateList(),
+  createSchemaList = SchemaApi.useCreateList(),
 }): ReactNode => (
   <>
-    <FormListView
+    <SchemaListView
       elements={
         searchValue
           ? formList?.filter((form) =>
@@ -24,8 +24,8 @@ export const FormSelectView = ({
       }
       selection={[selected, setSelected]}
     />
-    <StyledButton onPress={createFormList && (() => createFormList([{}]))}>
-      Create New Form
+    <StyledButton onPress={createSchemaList && (() => createSchemaList([{}]))}>
+      Create New Schema
     </StyledButton>
   </>
 );

package/src/Schema/SchemaView.tsx

@@ -0,0 +1,11 @@
+// Copyright DWJ 2024.
+// Distributed under the Boost Software License, Version 1.0.
+// https://www.boost.org/LICENSE_1_0.txt
+
+import { StyledText } from "@dwidge/components-rnw";
+import { SchemaApi } from "../hooks/SchemaApi";
+
+export const SchemaView = ({
+  form = SchemaApi.useGetItem(),
+  onPress = () => {},
+}) => <StyledText>{form?.name || "untitled"}</StyledText>;

package/src/Schema/index.ts

@@ -0,0 +1,9 @@
+export * from "./EditSchemaScreen.js";
+export * from "./SchemaEdit.js";
+export * from "./SchemaEditScreen.js";
+export * from "./SchemaListEdit.js";
+export * from "./SchemaListScreen.js";
+export * from "./SchemaListView.js";
+export * from "./SchemaSelectScreen.js";
+export * from "./SchemaSelectView.js";
+export * from "./SchemaView.js";

package/src/hooks/{FileAttachmentApi.ts → AttachmentApi.ts}

@@ -1,11 +1,11 @@
-import { FileAttachment } from "../types/FileAttachment.js";
+import { File1 } from "../types/File1.js";
 import { createApi } from "./createApi.js";
 
-export const FileAttachmentApi = createApi<FileAttachment>({
+export const AttachmentApi = createApi<File1>("Attachment", {
   id: undefined,
   createdAt: undefined,
   createdBy: undefined,
   FileId: undefined,
+  SchemaId: undefined,
   FormId: undefined,
-  FormAttachmentId: undefined,
 });

package/src/hooks/FileApi.ts

@@ -1,7 +1,7 @@
 import { File2 } from "../types/File2.js";
 import { createApi } from "./createApi.js";
 
-export const FileApi = createApi<File2>({
+export const FileApi = createApi<File2>("File", {
   id: undefined,
   createdAt: undefined,
   createdBy: undefined,

package/src/hooks/FormApi.ts

@@ -1,11 +1,10 @@
 import { Form1 } from "../types/Form1.js";
 import { createApi } from "./createApi.js";
 
-export const FormApi = createApi<Form1>({
+export const FormApi = createApi<Form1>("Form", {
   id: undefined,
   createdAt: undefined,
   createdBy: undefined,
-  name: undefined,
-  type: undefined,
-  schema: undefined,
+  SchemaId: undefined,
+  data: undefined,
 });

package/src/hooks/FormsContext.ts

@@ -8,16 +8,16 @@ import { z } from "zod";
 
 export const FormsContext = createContext({
   routes: {
-    FORM_ATTACHMENT_LIST_SCREEN: "",
-    FORM_ATTACHMENT_EDIT_SCREEN: "",
+    FORM_LIST_SCREEN: "",
     FORM_EDIT_SCREEN: "",
-    FORM_SELECT_SCREEN: "",
+    SCHEMA_EDIT_SCREEN: "",
+    SCHEMA_SELECT_SCREEN: "",
   },
   useParams: () =>
     z
       .object({
         FormId: z.coerce.string().nullable(),
-        FormAttachmentId: z.coerce.string().nullable(),
+        SchemaId: z.coerce.string().nullable(),
         AttachmentId: z.coerce.string().nullable(),
       })
       .partial()

package/src/hooks/SchemaApi.ts

@@ -0,0 +1,11 @@
+import { Schema1 } from "../types/Schema1.js";
+import { createApi } from "./createApi.js";
+
+export const SchemaApi = createApi<Schema1>("Schema", {
+  id: undefined,
+  createdAt: undefined,
+  createdBy: undefined,
+  name: undefined,
+  type: undefined,
+  schema: undefined,
+});

package/src/hooks/createApi.ts

@@ -1,10 +1,10 @@
-import { AsyncState, useAsyncSaveState } from "@dwidge/hooks-react";
+import { AsyncState } from "@dwidge/hooks-react";
 import { createContext, useContext } from "react";
-import { useParams } from "./useParams";
 
 export type ApiItem = Record<string, string | number | boolean | null>;
 
 export const createApi = <T extends ApiItem>(
+  name: string,
   defaultFilter: Partial<T> = {},
 ) => {
   type Get = Partial<T>;
@@ -22,35 +22,38 @@ export const createApi = <T extends ApiItem>(
   deleteItem: (item: Key) => Promise<Key | null>;
 
   const message =
-    "createApiW1: Please wrap App with <Context.Provider value={{}}></Context.Provider>";
+    name +
+    ": createApiW1: Please wrap App with <Context.Provider value={{}}></Context.Provider>";
 
   const Context = createContext<{
     useGetList: (filter?: Filter) => undefined | Get[];
     useCreateList: () => ((list: Set[]) => Promise<(Get | null)[]>) | undefined;
     useDeleteList: () => ((list: Key[]) => Promise<(Get | null)[]>) | undefined;
-    useGetItem: (key?: Filter & Key) => undefined | Get | null;
-    useItem: (key?: Get) => AsyncState<Get | null>;
+    useGetItem: (filter?: Filter) => undefined | Get | null;
+    useItem: (filter?: Filter) => AsyncState<Get | null>;
   }>({
-    useGetList: () => (console.warn(message), undefined),
-    useCreateList: () => (console.warn(message), undefined),
-    useDeleteList: () => (console.warn(message), undefined),
-    useGetItem: () => (console.warn(message), undefined),
-    useItem: () => (console.warn(message), []),
+    useGetList: () => (console.warn("useGetList1: " + message), undefined),
+    useCreateList: () => (
+      console.warn("useCreateList1: " + message), undefined
+    ),
+    useDeleteList: () => (
+      console.warn("useDeleteList1: " + message), undefined
+    ),
+    useGetItem: () => (console.warn("useGetItem1: " + message), undefined),
+    useItem: () => (console.warn("useItem1: " + message), []),
   });
 
-  const useGetList = (filter: Filter = {}, ids = useParams()) =>
-    useContext(Context).useGetList({ ...ids, ...defaultFilter, ...filter });
+  const useGetList = (filter?: Filter) =>
+    useContext(Context).useGetList({ ...defaultFilter, ...filter });
   const useCreateList = () => useContext(Context).useCreateList();
   const useDeleteList = () => useContext(Context).useDeleteList();
-  const useGetItem = (id?: Key["id"] | null, ids = useParams()) =>
+  const useGetItem = (filter?: Filter) =>
     useContext(Context).useGetItem(
-      id ? { ...ids, ...defaultFilter, id } : undefined,
+      filter ? { ...defaultFilter, ...filter } : undefined,
     );
-  const useItem = (id?: Key["id"] | null, ids = useParams()) =>
-    useAsyncSaveState(
-      useContext(Context).useItem(
-        id ? { ...ids, ...defaultFilter, id } : undefined,
-      ),
+  const useItem = (filter?: Filter) =>
+    useContext(Context).useItem(
+      filter ? { ...defaultFilter, ...filter } : undefined,
     );
 
   return {

package/src/hooks/index.ts

@@ -1,10 +1,11 @@
-export * from "./FileApi";
-export * from "./FileAttachmentApi";
-export * from "./FormApi";
-export * from "./FormAttachmentApi";
-export * from "./FormsContext";
-export * from "./createApi";
-export * from "./useCreateBlankAttachment";
-export * from "./useCreateBlankForm";
-export * from "./useCreateBlankFormAttachment";
-export * from "./useParams";
+export * from "./FileApi.js";
+export * from "./AttachmentApi.js";
+export * from "./SchemaApi.js";
+export * from "./FormApi.js";
+export * from "./FormsContext.js";
+export * from "./createApi.js";
+export * from "./useCreateBlankAttachment.js";
+export * from "./useCreateBlankSchema.js";
+export * from "./useCreateBlankForm.js";
+export * from "./useParams.js";
+export * from "./useIdFilter.js";

package/src/hooks/useCreateBlankAttachment.ts

@@ -1,10 +1,10 @@
 import assert from "assert";
 import { useParams } from "./useParams";
 import { FileApi } from "./FileApi";
-import { FileAttachmentApi } from "./FileAttachmentApi";
+import { AttachmentApi } from "./AttachmentApi";
 
 export const useCreateBlankAttachment = ({
-  createAttachmentList = FileAttachmentApi.useCreateList(),
+  createAttachmentList = AttachmentApi.useCreateList(),
   createFileList = FileApi.useCreateList(),
   AttachIds = useParams(),
 } = {}) =>

package/src/hooks/useCreateBlankForm.ts

@@ -2,11 +2,19 @@
 // Distributed under the Boost Software License, Version 1.0.
 // https://www.boost.org/LICENSE_1_0.txt
 
+import { Schema1Key } from "../types/Schema1";
+import { SchemaApi } from "./SchemaApi";
 import { FormApi } from "./FormApi";
+import { useParams } from "./useParams";
 
 export const useCreateBlankForm = ({
+  createSchemaList = SchemaApi.useCreateList(),
   createFormList = FormApi.useCreateList(),
+  AttachmentIds = useParams(),
 } = {}) =>
-  createFormList
-    ? () => createFormList([{}]).then(([form]) => ({ FormId: form?.id }))
-    : () => undefined;
+  createSchemaList && createFormList
+    ? async (forms: Schema1Key[]) =>
+        createFormList(
+          forms.map((form) => ({ ...AttachmentIds, FormId: form.id })),
+        ).then(([r]) => ({ FormId: r?.id }))
+    : async () => undefined;

package/src/hooks/useCreateBlankSchema.ts

@@ -0,0 +1,12 @@
+// Copyright DWJ 2024.
+// Distributed under the Boost Software License, Version 1.0.
+// https://www.boost.org/LICENSE_1_0.txt
+
+import { SchemaApi } from "./SchemaApi";
+
+export const useCreateBlankSchema = ({
+  createList = SchemaApi.useCreateList(),
+} = {}) =>
+  createList
+    ? () => createList([{}]).then(([v]) => ({ SchemaId: v?.id }))
+    : undefined;

package/src/hooks/useIdFilter.ts

@@ -0,0 +1,2 @@
+export const filterId = <T extends string | number>(id?: T | null) =>
+  id != null ? { id } : undefined;