Add Generic ListEditor

graphql/fragments/findAnimeFields.fragment.graphql

@@ -14,4 +14,9 @@ fragment findAnimeFields on Anime {
   nextRelease
   status
   tba
+  characters(first: 1) {
+    nodes {
+      ...findMediaCharacterFields
+    }
+  }
 }

graphql/fragments/findMediaCharacterFields.fragment.graphql

@@ -0,0 +1,3 @@
+fragment findMediaCharacterFields on MediaCharacter {
+  id
+}

src/components/anime/AnimeEdit.tsx

@@ -18,6 +18,8 @@ import {
   TextAreaInput,
 } from 'src/components/ui/input';
 import animeReducer from './animeReducer';
+import ListEditor from '../ui/ListEditor';
+import MediaCharacterEdit from '../mediaCharacter/MediaCharacterEdit';
 
 interface AnimeInterface {
   record: FindAnimeFieldsFragment;
@@ -153,6 +155,13 @@ export default function AnimeEdit({ record, wikiSubmission }: AnimeInterface): R
           </>
         </EditGroup>
 
+        <ListEditor
+          Component={MediaCharacterEdit}
+          initialItems={original.characters.nodes}
+          cache={update}
+          parentDispatch={dispatch}
+        />
+
         <input type='submit' value='Submit' />
       </form>
     </>

src/components/mediaCharacter/MediaCharacterEdit.tsx

@@ -0,0 +1,17 @@
+import { ReactElement } from 'react';
+import { FindMediaCharacterFieldsFragment } from 'src/types/graphql';
+import { MediaChange } from 'src/types/mediaChange';
+
+interface CharacterInterface {
+  record: FindMediaCharacterFieldsFragment;
+  cache: MediaChange;
+  dispatch: React.Dispatch<any>;
+}
+
+export default function MediaCharacterEdit({
+  record,
+  cache,
+  dispatch,
+}: CharacterInterface): ReactElement {
+  return <div>{record.id}</div>;
+}

src/components/ui/ListEditor.tsx

@@ -0,0 +1,52 @@
+import React, { Component, ReactElement, useState } from 'react';
+import { FindMediaCharacterFieldsFragment, Maybe } from 'src/types/graphql';
+import { MediaChange } from 'src/types/mediaChange';
+import MediaCharacterEdit from '../mediaCharacter/MediaCharacterEdit';
+
+let components: typeof MediaCharacterEdit;
+let fragments: FindMediaCharacterFieldsFragment;
+
+interface Props {
+  Component: React.ComponentType<any>;
+  initialItems?: Maybe<ReadonlyArray<Maybe<FindMediaCharacterFieldsFragment>>>;
+  cache: MediaChange;
+  parentDispatch: React.Dispatch<any>;
+}
+
+export default function ListEditor({
+  Component,
+  initialItems,
+  cache,
+  parentDispatch,
+}: Props): ReactElement {
+  const mutableItems = (initialItems || []) as FindMediaCharacterFieldsFragment[];
+  const [items, setItems] = useState(mutableItems);
+
+  const addItem = () => (event: React.MouseEvent<HTMLButtonElement>) => {
+    event.preventDefault();
+
+    const newItem = {} as FindMediaCharacterFieldsFragment;
+    setItems([...items, newItem]);
+  };
+
+  const removeItem = (index: number) => (event: React.MouseEvent<HTMLButtonElement>) => {
+    event.preventDefault();
+
+    const newItemList = items.filter((_, item_index) => item_index !== index);
+    setItems(newItemList);
+  };
+
+  return (
+    <div className='list'>
+      <button onClick={addItem()}>Add</button>
+      {items.map((item, index) => {
+        return (
+          <div>
+            <button onClick={removeItem(index)}>Remove</button>
+            <Component key={index} record={item} cache={cache} dispatch={parentDispatch} />
+          </div>
+        );
+      })}
+    </div>
+  );
+}

src/types/graphql.ts

@@ -3459,9 +3459,20 @@ export type FindAnimeFieldsFragment = (
   & { readonly titles: (
     { readonly __typename?: 'TitlesList' }
     & AnimeTitlesFragment
+  ), readonly characters: (
+    { readonly __typename?: 'MediaCharacterConnection' }
+    & { readonly nodes?: Maybe<ReadonlyArray<Maybe<(
+      { readonly __typename?: 'MediaCharacter' }
+      & FindMediaCharacterFieldsFragment
+    )>>> }
   ) }
 );
 
+export type FindMediaCharacterFieldsFragment = (
+  { readonly __typename?: 'MediaCharacter' }
+  & Pick<MediaCharacter, 'id'>
+);
+
 type FindMediaFields_Anime_Fragment = (
   { readonly __typename: 'Anime' }
   & Pick<Anime, 'id' | 'slug' | 'description' | 'ageRating' | 'ageRatingGuide' | 'sfw' | 'startDate' | 'endDate' | 'nextRelease' | 'status' | 'tba'>
@@ -3690,6 +3701,11 @@ export const AnimeTitlesFragmentDoc = gql`
   localized
 }
     `;
+export const FindMediaCharacterFieldsFragmentDoc = gql`
+    fragment findMediaCharacterFields on MediaCharacter {
+  id
+}
+    `;
 export const FindAnimeFieldsFragmentDoc = gql`
     fragment findAnimeFields on Anime {
   __typename
@@ -3707,8 +3723,14 @@ export const FindAnimeFieldsFragmentDoc = gql`
   nextRelease
   status
   tba
+  characters(first: 1) {
+    nodes {
+      ...findMediaCharacterFields
+    }
+  }
 }
-    ${AnimeTitlesFragmentDoc}`;
+    ${AnimeTitlesFragmentDoc}
+${FindMediaCharacterFieldsFragmentDoc}`;
 export const FindMediaFieldsFragmentDoc = gql`
     fragment findMediaFields on Media {
   __typename