generic function attempt failure

src/components/anime/AnimeEdit.tsx

@@ -21,7 +21,10 @@ import ListEditor from '../ui/ListEditor';
 import MediaCharacterEdit from '../mediaCharacter/MediaCharacterEdit';
 import { ReducerAction } from 'src/types/reducer';
 import { MediaChange } from 'src/types/mediaChange';
-import { AnimeChangeEditInterface } from 'src/types/listEditorTypes';
+import {
+  AnimeChangeEditInterface,
+  MediaCharacterChangeEditInterface,
+} from 'src/types/listEditorTypes';
 
 // interface AnimeInterface {
 //   record: FindAnimeFieldsFragment;
@@ -166,7 +169,7 @@ export default function AnimeEdit({
           </>
         </EditGroup>
 
-        <ListEditor
+        <ListEditor<MediaCharacterChangeEditInterface>
           Component={MediaCharacterEdit}
           initialItems={original.characters.nodes}
           cache={cache.mediaCharacters}

src/components/ui/ListEditor.tsx

@@ -2,26 +2,26 @@ import React, { ReactElement, useState } from 'react';
 import { Maybe } from 'src/types/graphql';
 import { ModelEditUnion } from 'src/types/listEditorTypes';
 
-interface Props {
-  Component: React.ComponentType<ModelEditUnion>;
-  initialItems?: Maybe<ReadonlyArray<Maybe<ModelEditUnion['record']>>>;
-  cache: Array<ModelEditUnion['cache']>;
-  parentDispatch: ModelEditUnion['dispatch'];
+interface Props<T extends ModelEditUnion> {
+  Component: React.ComponentType<T>;
+  initialItems?: Maybe<ReadonlyArray<Maybe<T['record']>>>;
+  cache: Array<T['cache']>;
+  parentDispatch: T['dispatch'];
 }
 
-export default function ListEditor({
+export default function ListEditor<T extends ModelEditUnion>({
   Component,
   initialItems,
   cache,
   parentDispatch,
-}: Props): ReactElement {
-  const mutableItems = (initialItems || []) as ModelEditUnion['record'][];
+}: Props<T>): ReactElement {
+  const mutableItems = (initialItems || []) as T['record'][];
   const [items, setItems] = useState(mutableItems);
 
   const addItem = () => (event: React.MouseEvent<HTMLButtonElement>) => {
     event.preventDefault();
 
-    const newItem = {} as ModelEditUnion['record'];
+    const newItem = {} as T['record'];
     setItems([...items, newItem]);
   };
 

src/types/listEditorTypes.ts

@@ -5,9 +5,9 @@ import { ReducerAction } from './reducer';
 export type ModelFragmentTypes = FindAnimeFieldsFragment | FindMediaCharacterFieldsFragment;
 export type ModelCacheType = MediaChange | MediaCharacterChange;
 
-export type ModelEditUnion = MediaCharacterChangeEditInterface;
+// export type ModelEditUnion = MediaCharacterChangeEditInterface;
 // NOTE: how to make this work?
-// export type ModelEditUnion = MediaCharacterChangeEditInterface | AnimeChangeEditInterface;
+export type ModelEditUnion = MediaCharacterChangeEditInterface | AnimeChangeEditInterface;
 
 export interface ModelEditInterface {
   record: ModelFragmentTypes;

src/util/reducerState/mediaCharacterState.ts

@@ -0,0 +1,4 @@
+// import { cloneDeep, merge } from 'lodash';
+// import { ReducerPayload } from 'src/types/reducer';
+
+// export default function mediaCharacterState() {}