edit

packages/web/components/Player/Section/PlayerLinks.tsx

@@ -20,6 +20,7 @@ import {
   Player,
   useAddPlayerLinkMutation,
   useDeletePlayerLinkMutation,
+  useUpdatePlayerLinkMutation,
 } from 'graphql/autogen/types';
 import { getPlayerLinks } from 'graphql/queries/player';
 import React, { useCallback, useEffect, useState } from 'react';
@@ -34,6 +35,7 @@ type Props = {
   isOwnProfile?: boolean;
   editing?: boolean;
   admin?: boolean;
+  switchToEdit?: any
 };
 
 export interface PlayerLinkFormInputs {
@@ -46,9 +48,7 @@ export const AddPlayerLink: React.FC<{
   player?: Player;
   metadata?: BoxMetadata;
   setMetadata?: (d: BoxMetadata) => void;
-  editId?: string;
-  editData?: PlayerLinkFormInputs;
-}> = ({ player, editId, editData }) => {
+}> = ({ player }) => {
 
   const {
     register,
@@ -140,6 +140,7 @@ export const PlayerLinks: React.FC<Props> = ({
   isOwnProfile,
   editing,
   admin,
+  switchToEdit
 }) => {
   const [links, setLinks] = useState<Link[]>([]);
   const [, deleteLink] = useDeletePlayerLinkMutation();
@@ -220,8 +221,8 @@ export const PlayerLinks: React.FC<Props> = ({
                     <DeleteIcon />
                   </Button>
                   
-                  <Button sx={{ ml: '1em', bg: '#13003280' }}>
-                    <CloseIcon />
+                  <Button sx={{ ml: '1em', bg: '#13003280' }} onClick={() => switchToEdit('edit', link?.id)}>
+                    <EditIcon />
                   </Button>
                 </> 
               )}
@@ -231,4 +232,99 @@ export const PlayerLinks: React.FC<Props> = ({
       </VStack>
     </ProfileSection>
   );
-};
+};
+
+export const EditPlayerLink: React.FC<{
+  player?: Player;
+  metadata?: BoxMetadata;
+  setMetadata?: (d: BoxMetadata) => void;
+  editId?: string;
+  editData?: PlayerLinkFormInputs;
+}> = ({ player, editId, editData }) => {
+
+  const {
+    register,
+    formState: { errors },
+    handleSubmit,
+    getValues
+  } = useForm<PlayerLinkFormInputs>({
+    mode: 'onTouched',
+  });
+
+  const [, addLink] = useAddPlayerLinkMutation();
+  const [, updateLink] = useUpdatePlayerLinkMutation();
+
+  const onSubmit = useCallback(
+    async (link: PlayerLinkFormInputs) => {
+      if (!editId) return
+      const playerLink = { id: editId, name: link.name || link.type, url: link.url, type: link.type};
+      const { error } = await updateLink(playerLink);
+
+      if (error) {
+        throw new Error(`Unable to add link. Error: ${error}`);
+      }
+    },
+    [updateLink, player?.id],
+  );
+
+  return (
+    <Box w="100%">
+      <VStack spacing={2}>
+        <Field label="Name" error={errors.name}>
+          <Input
+            {...register('name')}
+            isInvalid={!!errors.name}
+            background="dark"
+          />
+        </Field>
+        <Field label="Type" error={errors.url}>
+          <Select
+            sx={{
+              textTransform: 'capitalize',
+              '& > option': {
+                backgroundColor: MetaTheme.colors.purpleBoxLight,
+              },
+              '& > option[value=""]': {
+                fontStyle: 'italic',
+                opacity: 0.75,
+              },
+            }}
+            {...register('type', {
+              required: {
+                value: true,
+                message: 'This is a required field.',
+              },
+            })}
+            isInvalid={!!errors.type}
+            background="dark"
+          >
+            {Object.entries(LinkType_Enum).map(([key, value]) => (
+              <option key={value} value={value}>
+                {key}
+              </option>
+            ))}
+          </Select>
+        </Field>
+        <Field label="URL" error={errors.url}>
+          <Input
+            {...register('url', {
+              required: {
+                value: true,
+                message: 'This is a required field.',
+              },
+            })}
+            isInvalid={!!errors.url}
+            background="dark"
+          />
+        </Field>
+        <MetaButton
+          loadingText="Adding link..."
+          onClick={handleSubmit(onSubmit)}
+          bg="purple.500"
+        >
+          Edit Link
+        </MetaButton>
+      </VStack>
+    </Box>
+  );
+};

packages/web/components/Setup/SetupPlayerLinks.tsx

@@ -10,7 +10,7 @@ import {
 } from '@metafam/ds';
 import { Player, useUpsertDeworkProfileMutation } from 'graphql/autogen/types';
 import React, { useState } from 'react';
-import { AddPlayerLink } from 'components/Player/Section/PlayerLinks';
+import { AddPlayerLink, EditPlayerLink } from 'components/Player/Section/PlayerLinks';
 import { PlayerLinks } from 'components/Player/Section/PlayerLinks';
 
 export const SetupPlayerLinks: React.FC<{
@@ -22,10 +22,17 @@ export const SetupPlayerLinks: React.FC<{
   const toast = useToast();
   const [linkToEdit, setLinkToEdit] = useState<string | null>();
   const [role, setRole] = useState<string>('view');
+  const [linkId, setLinkId] = useState<string>('');
+
+  const handleSetRole = (newRole: string, id?: string) => {
+    setRole(newRole)
+    setLinkId(id || '')
+  }
 
   return (
     <>
-      <PlayerLinksView role={role} player={player} />
+      <PlayerLinksView role={role} player={player} setRole={handleSetRole} />
+      <Button onClick={() => setRole('add')}>Add Link</Button>
     </>
   );
 };
@@ -33,10 +40,12 @@ export const SetupPlayerLinks: React.FC<{
 const PlayerLinksView: React.FC<{
   role: string,
   player: Player
-}> = ({role, player}) => {
+  setRole: any
+}> = ({role, player, setRole}) => {
   const currentView = {
-    view: <PlayerLinks player={player} isOwnProfile={true} admin={true} />,
-    add: <AddPlayerLink player={player} />
+    view: <PlayerLinks player={player} isOwnProfile={true} admin={true} switchToEdit={setRole} />,
+    add: <AddPlayerLink player={player} />,
+    edit: <EditPlayerLink player={player} editId={''} />
   }[role]
 
   return <> {currentView} </>