hide fields, reuse SelectTimeZone

packages/web/components/EditProfileForm.tsx

@@ -1,18 +1,19 @@
 import {
   Box,
-  Flex,
   Grid,
   GridItem,
-  Image,
   Input,
+  InputGroup,
+  InputLeftElement,
+  InputRightAddon,
   MetaFilterSelectSearch,
   MetaTheme,
   selectStyles,
+  SelectTimeZone,
   Text,
 } from '@metafam/ds';
-import React, { FC } from 'react';
+import React, { FC, useEffect, useState } from 'react';
 
-import BackgroundImage from '../assets/login-background.jpg';
 import { MeType } from '../graphql/types';
 import { TimeZoneOption } from '../utils/skillHelpers';
 
@@ -62,7 +63,7 @@ const DropdownStyles: typeof selectStyles = {
 
 export type ProfileEditorProps = {
   user: MeType;
-  address: string;
+  onClose?: () => void;
 };
 
 export type ProfileSectionFormProps = {
@@ -97,6 +98,7 @@ export const ProfileField: React.FC<ProfileFieldProps> = ({
           <Input
             background="dark"
             placeholder={placeholder}
+            color="white"
             value={innerValue}
             onChange={(e) => setInnerValue(e.target.value || '')}
             w="100%"
@@ -158,7 +160,7 @@ export type TimezoneOption = {
   value: string;
 };
 export type TimezoneSelectDropdownProps = {
-  timezone: TimeZoneOption;
+  timezone: TimeZoneOption | undefined;
   onChange: (timezone: TimezoneOption | null) => void;
 };
 
@@ -170,72 +172,93 @@ export const TIMEZONES_LIST: { [key: string]: string } = {
 export const TIMEZONES_OPTIONS = Object.keys(TIMEZONES_LIST).map(
   (key) => ({ value: key, label: TIMEZONES_LIST[key] } as TimezoneOption),
 );
-export const TimezoneSelectDropdown: FC<TimezoneSelectDropdownProps> = ({
-  timezone,
-  onChange,
-}) => (
-  <Box>
-    <Text fontSize="md" color="cyan" mb={1}>
-      timezone
-    </Text>
-    <Box my={6}>
-      <MetaFilterSelectSearch
-        title={timezone.label}
-        tagLabel=""
-        hasValue={Boolean(timezone)}
-        styles={DropdownStyles}
-        value={[timezone]}
-        options={TIMEZONES_OPTIONS}
-        onChange={(value) => {
-          if (value) onChange(value as TimezoneOption);
-        }}
-      />
-    </Box>
-  </Box>
-);
 
-export const EditProfileForm: React.FC<ProfileEditorProps> = ({ user }) => {
+export const EditProfileForm: React.FC<ProfileEditorProps> = ({
+  user,
+  onClose,
+}) => {
+  const [timeZone, setTimeZone] = useState<string>('');
+  const [availability, setAvailability] = useState<string>('');
+  const [invalid, setInvalid] = useState(false);
+
+  if (user?.player) {
+    const { player } = user;
+    if (player.timezone && !timeZone) {
+      setTimeZone(player.timezone);
+    }
+    if (player.availability_hours && !availability) {
+      setAvailability(player.availability_hours.toString());
+    }
+  }
+
+  useEffect(() => {
+    const value = Number(availability);
+    setInvalid(value < 0 || value > 168);
+  }, [availability]);
+
   const GRID_SIZE = 2;
   const HALF = GRID_SIZE / 2;
   return (
-    <Box
-      bgSize="cover"
-      bgAttachment="fixed"
-      p={[4, 8, 12]}
-      backgroundImage={`url(${BackgroundImage})`}
-    >
+    <Box>
       <Grid templateColumns="repeat(3, 1fr)">
         <GridItem>
           <ProfileField
             title="username"
-            value={
-              'superUser123' || user?.username || user?.ethereum_address || ''
-            }
+            value={user?.username || user?.ethereum_address || ''}
           />
         </GridItem>
 
-        <GridItem>
+        {/* <GridItem>
           <ProfileField title="display name" value="User Supreme" />
         </GridItem>
 
-        <GridItem colspan={HALF}>
+        <GridItem colSpan={HALF}>
           <ProfileField title="pronouns" value="They/Them" />
-        </GridItem>
+        </GridItem> */}
       </Grid>
-      <Grid templateColumns="repeat(2, 1fr)" gap={6}>
-        <GridItem colspan={HALF}>
-          <CountrySelectDropdown
-            country={COUNTRIES_OPTIONS[0]}
-            onChange={console.log}
-          />
+      {/* <Grid templateColumns="repeat(2, 1fr)" gap={6}>
+        <GridItem colSpan={HALF}>
+          <CountrySelectDropdown country={COUNTRIES_OPTIONS[0]} />
+        </GridItem>  */}
+      <Grid templateColumns="repeat(3, 1fr)" gap={6}>
+        <GridItem>
+          <Text fontSize="md" color="cyan" mb={4}>
+            availability
+          </Text>
+          <InputGroup borderColor="transparent" mb={10}>
+            <InputLeftElement>
+              <span role="img" aria-label="clock">
+                🕛
+              </span>
+            </InputLeftElement>
+            <Input
+              background="dark"
+              placeholder="40"
+              type="number"
+              color="white"
+              value={availability}
+              onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
+                setAvailability(e.target.value)
+              }
+              isInvalid={invalid}
+            />
+            <InputRightAddon background="purpleBoxDark" color="white">
+              hr/week
+            </InputRightAddon>
+          </InputGroup>
         </GridItem>
-        <GridItem colspan={HALF}>
-          <TimezoneSelectDropdown
-            timezone={TIMEZONES_OPTIONS[0]}
-            onChange={console.log}
+        <GridItem>
+          <Text fontSize="md" color="cyan" mb={4}>
+            timezone
+          </Text>
+          <SelectTimeZone
+            value={timeZone}
+            onChange={(tz) => setTimeZone(tz.value)}
+            labelStyle="abbrev"
           />
         </GridItem>
       </Grid>
+      {/* </Grid>  
       <ProfileField
         title="description"
         placeholder="Replace with Markdown Editor(?)"
@@ -251,7 +274,7 @@ export const EditProfileForm: React.FC<ProfileEditorProps> = ({ user }) => {
             <Input type="file" name="background" />
           </Box>
         </Flex>
-      </ProfileField>
+      </ProfileField> */}
     </Box>
   );
 };

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

@@ -4,12 +4,22 @@ import {
   Flex,
   HStack,
   IconButton,
+  Modal,
+  ModalBody,
+  ModalCloseButton,
+  ModalContent,
+  ModalHeader,
+  ModalOverlay,
   SimpleGrid,
   Text,
+  useDisclosure,
   VStack,
 } from '@metafam/ds';
+import BackgroundImage from 'assets/main-background.jpg';
+import { EditProfileForm } from 'components/EditProfileForm';
 import { PlayerAvatar } from 'components/Player/PlayerAvatar';
 import { PlayerFragmentFragment } from 'graphql/autogen/types';
+import { useUser } from 'lib/hooks';
 import React, { useMemo } from 'react';
 import { FaClock, FaGlobe } from 'react-icons/fa';
 import { getPlayerTimeZoneDisplay } from 'utils/dateHelpers';
@@ -29,11 +39,13 @@ type TimeZoneDisplayProps = { timeZone?: string; offset?: string };
 export const PlayerHero: React.FC<Props> = ({ player, isOwnProfile }) => {
   const description = getPlayerDescription(player);
   const [show, setShow] = React.useState(description.length <= MAX_BIO_LENGTH);
+  const { isOpen, onOpen, onClose } = useDisclosure();
 
   const { timeZone, offset } = useMemo(
     () => getPlayerTimeZoneDisplay(player.timezone),
     [player.timezone],
   );
+  const { user, fetching } = useUser();
 
   return (
     <ProfileSection>
@@ -50,6 +62,7 @@ export const PlayerHero: React.FC<Props> = ({ player, isOwnProfile }) => {
             background="rgba(17, 17, 17, 0.9)"
             color="pinkShadeOne"
             _hover={{ color: 'white', borderColor: 'white' }}
+            onClick={onOpen}
             icon={<EditIcon />}
             isRound
             _active={{
@@ -148,6 +161,37 @@ export const PlayerHero: React.FC<Props> = ({ player, isOwnProfile }) => {
           </PlayerHeroTile>
         )}
       </VStack>
+
+      <Modal isOpen={isOpen} onClose={onClose}>
+        <ModalOverlay />
+        <ModalContent
+          maxW="80%"
+          backgroundImage={`url(${BackgroundImage})`}
+          bgSize="cover"
+          bgAttachment="fixed"
+          p={[4, 8, 12]}
+        >
+          <ModalHeader
+            color="white"
+            fontSize="4xl"
+            alignSelf="center"
+            fontWeight="normal"
+          >
+            Edit Profile
+          </ModalHeader>
+          <ModalCloseButton
+            color="pinkShadeOne"
+            size="xl"
+            p={4}
+            _focus={{
+              boxShadow: 'none',
+            }}
+          />
+          <ModalBody>
+            <EditProfileForm user={user} onClose={onClose} />
+          </ModalBody>
+        </ModalContent>
+      </Modal>
     </ProfileSection>
   );
 };

packages/web/components/ProfileSection.tsx

@@ -101,7 +101,9 @@ export const ProfileSection: React.FC<ProfileSectionProps> = ({
           <ModalContent
             maxW="80%"
             backgroundImage={`url(${BackgroundImage})`}
-            p={6}
+            bgSize="cover"
+            bgAttachment="fixed"
+            p={[4, 8, 12]}
           >
             <ModalHeader
               color="white"