battling typescript & eslint to get this pushed 🧁

MetaFam · Dec 1, 2021 · fa82c7a · fa82c7a
1 parent 6be0ba9
commit fa82c7a
Show file tree

Hide file tree

Showing 22 changed files with 308 additions and 190 deletions.
diff --git a/packages/design-system/src/MetaFilterSelect.tsx b/packages/design-system/src/MetaFilterSelect.tsx
@@ -16,9 +16,9 @@ import { DropDownIcon } from './icons/DropDownIcon';
 import { MetaTag } from './MetaTag';
 import { SelectComponents, SelectSearch } from './SelectSearch';
 import {
-  getTimezonesFor,
-  timezonesFilter,
-  TimezoneType,
+  getTimeZonesFor,
+  timeZonesFilter,
+  TimeZoneType,
 } from './SelectTimeZone';
 
 export const MetaSelect: React.FC<SelectProps> = (props) => (
@@ -329,30 +329,30 @@ const SelectContainer: React.FC<
 export const MetaFilterSelectSearch: React.FC<
   React.ComponentProps<typeof SelectSearch> & {
     showSearch?: boolean;
-    isTimezone?: boolean;
+    isTimeZone?: boolean;
     hasValue: boolean;
     tagLabel: string;
   }
 > = ({
   options: defaultOptions,
   showSearch = false,
-  isTimezone = false,
+  isTimeZone = false,
   tagLabel = '',
   hasValue = false,
   ...props
 }) => {
   const [options, setOptions] = useState(defaultOptions);
 
-  const onTimezoneInputChange = useCallback(
+  const onTimeZoneInputChange = useCallback(
     (value: string) => {
       if (!value) {
         setOptions(defaultOptions);
       } else {
         const searchText = value.toLowerCase().trim();
-        const filteredTimezones = getTimezonesFor(searchText);
+        const filteredTimeZones = getTimeZonesFor(searchText);
         setOptions(
-          (defaultOptions as TimezoneType[])?.filter(
-            timezonesFilter(searchText, filteredTimezones),
+          (defaultOptions as TimeZoneType[])?.filter(
+            timeZonesFilter(searchText, filteredTimeZones),
           ),
         );
       }
@@ -381,8 +381,8 @@ export const MetaFilterSelectSearch: React.FC<
       hideSelectedOptions={false}
       showSearch={showSearch}
       options={options}
-      filterOption={isTimezone ? null : undefined}
-      onInputChange={isTimezone ? onTimezoneInputChange : undefined}
+      filterOption={isTimeZone ? null : undefined}
+      onInputChange={isTimeZone ? onTimeZoneInputChange : undefined}
       tagLabel={tagLabel}
       hasValue={hasValue}
       {...props}

diff --git a/packages/design-system/src/SelectTimeZone.tsx b/packages/design-system/src/SelectTimeZone.tsx
@@ -1,14 +1,16 @@
 /* istanbul ignore file */
-import cityTimezones from 'city-timezones';
+import cityTimeZones from 'city-timezones';
 import React, { useCallback, useState } from 'react';
 import { Styles } from 'react-select';
-import TimezoneSelect, { i18nTimezones } from 'react-timezone-select';
+import TimeZoneSelect, {
+  i18nTimezones as i18nTimeZones,
+} from 'react-timezone-select';
 import spacetime from 'spacetime';
 import informal from 'spacetime-informal';
 
 import { theme } from './theme';
 
-export type TimezoneType = {
+export type TimeZoneType = {
   value: string;
   title: string;
   label: string;
@@ -24,14 +26,14 @@ export interface TimeZone {
   abbrev: string;
 }
 
-export interface TimezoneSelectProps extends Record<string, unknown> {
+export interface TimeZoneSelectProps extends Record<string, unknown> {
   value?: TimeZone | string;
   onBlur?: () => void;
-  onChange?: (timezone: TimeZone) => void;
+  onChange?: (timeZone: TimeZone) => void;
   labelStyle: 'original' | 'altName' | 'abbrev';
 }
 
-export const TimezoneOptions: TimezoneType[] = Object.entries(i18nTimezones)
+export const TimeZoneOptions: TimeZoneType[] = Object.entries(i18nTimeZones)
   .map(([value, title]) => {
     const now = spacetime.now().goto(value);
     const tz = now.timezone();
@@ -107,46 +109,46 @@ const selectStyles: Styles = {
   }),
 };
 
-export const timezonesFilter = (
+export const timeZonesFilter = (
   searchText: string,
-  filteredTimezones: string[],
-) => ({ value, title, label, abbrev, altName }: TimezoneType): boolean =>
+  filteredTimeZones: string[],
+) => ({ value, title, label, abbrev, altName }: TimeZoneType): boolean =>
   value.toLowerCase().includes(searchText) ||
   title.toLowerCase().includes(searchText) ||
   label.toLowerCase().includes(searchText) ||
   abbrev.toLowerCase().includes(searchText) ||
   altName.toLowerCase().includes(searchText) ||
-  filteredTimezones.includes(value);
+  filteredTimeZones.includes(value);
 
-export const getTimezonesFor = (searchText: string): string[] =>
-  cityTimezones
+export const getTimeZonesFor = (searchText: string): string[] =>
+  cityTimeZones
     .findFromCityStateProvince(searchText)
     .map(({ timezone }) => timezone);
 
-export const SelectTimeZone: React.FC<TimezoneSelectProps> = ({
+export const SelectTimeZone: React.FC<TimeZoneSelectProps> = ({
   value,
   ...props
 }) => {
-  const [options, setOptions] = useState(TimezoneOptions);
+  const [options, setOptions] = useState(TimeZoneOptions);
 
   const onInputChange = useCallback((val: string) => {
     if (!val) {
-      setOptions(TimezoneOptions);
+      setOptions(TimeZoneOptions);
     } else {
       const searchText = val.toLowerCase().trim();
-      const filteredTimezones = getTimezonesFor(searchText);
+      const filteredTimeZones = getTimeZonesFor(searchText);
       setOptions(
-        TimezoneOptions.filter(timezonesFilter(searchText, filteredTimezones)),
+        TimeZoneOptions.filter(timeZonesFilter(searchText, filteredTimeZones)),
       );
     }
   }, []);
 
   return (
-    <TimezoneSelect
+    <TimeZoneSelect
       value={value ?? ''}
       styles={selectStyles}
       filterOption={null}
-      timezones={Object.fromEntries(
+      timeZones={Object.fromEntries(
         options.map(({ value: val, title }) => [val, title]),
       )}
       {...{ onInputChange }}

diff --git a/packages/design-system/src/index.ts b/packages/design-system/src/index.ts
@@ -16,11 +16,11 @@ export { MultiSelect } from './MultiSelect';
 export { ResponsiveText } from './ResponsiveText';
 export { SelectComponents, SelectSearch, selectStyles } from './SelectSearch';
 export {
-  getTimezonesFor,
+  getTimeZonesFor,
   SelectTimeZone,
-  TimezoneOptions,
-  timezonesFilter,
-  TimezoneType,
+  TimeZoneOptions,
+  timeZonesFilter,
+  TimeZoneType,
 } from './SelectTimeZone';
 export { SVG } from './SVG';
 export { theme as MetaTheme } from './theme';

diff --git a/packages/web/components/EditProfileForm.tsx b/packages/web/components/EditProfileForm.tsx
@@ -39,6 +39,7 @@ import React, {
   FC,
   MutableRefObject,
   ReactElement,
+  RefObject,
   useCallback,
   useEffect,
   useRef,
@@ -91,11 +92,14 @@ const DropdownStyles: typeof selectStyles = {
 };
 
 const Label: React.FC<FormLabelProps> = React.forwardRef(
-  ({ children, ...props }, ref) => (
-    <FormLabel color="cyan" {...{ ref }} {...props}>
-      {children}
-    </FormLabel>
-  ),
+  ({ children, ...props }, container) => {
+    const ref = container as RefObject<HTMLLabelElement>;
+    return (
+      <FormLabel color="cyan" {...{ ref }} {...props}>
+        {children}
+      </FormLabel>
+    );
+  },
 );
 
 const Input: React.FC<InputProps> = ({ children, ...props }) => (

diff --git a/packages/web/components/Patron/PatronTile.tsx b/packages/web/components/Patron/PatronTile.tsx
@@ -55,8 +55,8 @@ const MAX_BIO_LENGTH = 240;
 export const PatronTile: React.FC<Props> = ({ index, patron }) => {
   const player = patron as PlayerFragmentFragment;
   const patronRank = computeRank(index, PATRONS_PER_RANK, PATRON_RANKS);
-  const tzDisplay = useMemo(() => getPlayerTimeZoneDisplay(player.timezone), [
-    player.timezone,
+  const tzDisplay = useMemo(() => getPlayerTimeZoneDisplay(player.timeZone), [
+    player.timeZone,
   ]);
   const description = getPlayerDescription(player);
   const displayDescription =

diff --git a/packages/web/components/Player/ColorBar.tsx b/packages/web/components/Player/ColorBar.tsx
@@ -1,5 +1,6 @@
-import { Box, ChakraProps, Flex } from '@metafam/ds';
+import { Box, ChakraProps, Flex, Text } from '@metafam/ds';
 import { FlexContainer } from 'components/Container';
+import { Maybe } from 'graphql/autogen/types';
 import {
   colors,
   getPersonalityInfo,
@@ -29,19 +30,24 @@ const maskImageStyle = ({ url }: { url: string }): Record<string, string> => ({
 export const ColorBar = ({
   mask = 0,
   ...props
-}: ChakraProps & { mask: number | undefined }): JSX.Element => {
+}: ChakraProps & { mask: Maybe<number> | undefined }): JSX.Element => {
   const [parts, setParts] = useState<Array<PersonalityOption>>([]);
   const [types, setTypes] = useState<Record<number, PersonalityOption>>({});
-  const load = async () => {
-    const { parts: ps, types: ts } = await getPersonalityInfo();
-    setParts(ps);
-    setTypes(ts);
-  };
 
   useEffect(() => {
+    const load = async () => {
+      const { parts: ps, types: ts } = await getPersonalityInfo();
+      setParts(ps);
+      setTypes(ts);
+    };
+
     load();
   }, []);
 
+  if (mask === null) {
+    return <Text fontStyle="italic">Colors have not yet been chosen.</Text>;
+  }
+
   return (
     <Flex
       direction="column-reverse"

diff --git a/...layer/Filter/AdjascentTimezonePlayers.tsx → ...layer/Filter/AdjascentTimeZonePlayers.tsx b/...layer/Filter/AdjascentTimezonePlayers.tsx → ...layer/Filter/AdjascentTimeZonePlayers.tsx
@@ -1,4 +1,4 @@
-import { Flex, Skeleton, Text, TimezoneOptions, VStack } from '@metafam/ds';
+import { Flex, Skeleton, Text, TimeZoneOptions, VStack } from '@metafam/ds';
 import { PlayerList } from 'components/Player/PlayerList';
 import { GetPlayersQueryVariables } from 'graphql/autogen/types';
 import { usePlayerFilter } from 'lib/hooks/players';
@@ -7,22 +7,22 @@ import React, { useEffect, useMemo, useRef, useState } from 'react';
 
 import { PlayersLoading } from './PlayersLoading';
 
-const getAdjacentTimezoneQueryVariables = (
+const getAdjacentTimeZoneQueryVariables = (
   defaultQueryVariables: GetPlayersQueryVariables,
 ): GetPlayersQueryVariables => {
-  const timezoneValue = defaultQueryVariables.timezones?.[0];
-  const timezone = TimezoneOptions.find((t) => t.value === timezoneValue);
-  const adjascentTimezones = timezone
-    ? TimezoneOptions.filter(
+  const timeZoneValue = defaultQueryVariables.timeZones?.[0];
+  const timeZone = TimeZoneOptions.find((t) => t.value === timeZoneValue);
+  const adjascentTimeZones = timeZone
+    ? TimeZoneOptions.filter(
         (t) =>
-          Math.abs(t.offset - timezone.offset) <= 4 &&
-          t.value !== timezoneValue,
+          Math.abs(t.offset - timeZone.offset) <= 4 &&
+          t.value !== timeZoneValue,
       ).map((t) => t.value)
     : [];
   return {
     ...defaultQueryVariables,
     offset: 0,
-    timezones: adjascentTimezones,
+    timeZones: adjascentTimeZones,
   };
 };
 
@@ -31,16 +31,16 @@ type Props = {
   showSeasonalXP?: boolean;
 };
 
-export const AdjascentTimezonePlayers: React.FC<Props> = ({
+export const AdjascentTimeZonePlayers: React.FC<Props> = ({
   queryVariables,
   showSeasonalXP,
 }) => {
   const [variables, setVariables] = useState<GetPlayersQueryVariables>(
-    getAdjacentTimezoneQueryVariables(queryVariables),
+    getAdjacentTimeZoneQueryVariables(queryVariables),
   );
 
   useEffect(() => {
-    setVariables(getAdjacentTimezoneQueryVariables(queryVariables));
+    setVariables(getAdjacentTimeZoneQueryVariables(queryVariables));
   }, [queryVariables]);
 
   const moreRef = useRef(null);
@@ -88,7 +88,7 @@ export const AdjascentTimezonePlayers: React.FC<Props> = ({
             >
               <Text fontWeight="bold" fontSize="xl" w="100%" maxW="79rem">
                 {totalCount} player{totalCount === 1 ? '' : 's'} in adjacent
-                time zones
+                time Zones
               </Text>
             </Flex>
             <PlayerList players={players} showSeasonalXP={showSeasonalXP} />

diff --git a/packages/web/components/Player/Filter/DesktopFilters.tsx b/packages/web/components/Player/Filter/DesktopFilters.tsx
@@ -2,7 +2,7 @@ import {
   MetaFilterSelectSearch,
   MetaTheme,
   selectStyles,
-  TimezoneOptions,
+  TimeZoneOptions,
   Wrap,
   WrapItem,
   WrapProps,
@@ -67,8 +67,8 @@ type Props = {
   setSkills: React.Dispatch<React.SetStateAction<SkillOption[]>>;
   playerTypes: ValueType[];
   setPlayerTypes: React.Dispatch<React.SetStateAction<ValueType[]>>;
-  timezones: ValueType[];
-  setTimezones: React.Dispatch<React.SetStateAction<ValueType[]>>;
+  timeZones: ValueType[];
+  setTimeZones: React.Dispatch<React.SetStateAction<ValueType[]>>;
   availability: ValueType | null;
   setAvailability: React.Dispatch<React.SetStateAction<ValueType | null>>;
   sortOption: ValueType;
@@ -81,8 +81,8 @@ export const DesktopFilters: React.FC<Props> = ({
   setSkills,
   playerTypes,
   setPlayerTypes,
-  timezones,
-  setTimezones,
+  timeZones,
+  setTimeZones,
   availability,
   setAvailability,
   sortOption,
@@ -171,17 +171,17 @@ export const DesktopFilters: React.FC<Props> = ({
       <WrapItem>
         <MetaFilterSelectSearch
           title="Time Zone"
-          tagLabel={timezones.length > 0 ? timezones.length.toString() : ''}
+          tagLabel={timeZones.length > 0 ? timeZones.length.toString() : ''}
           styles={styles}
-          value={timezones}
-          hasValue={timezones.length > 0}
+          value={timeZones}
+          hasValue={timeZones.length > 0}
           onChange={(value) => {
             const values = value as ValueType[];
-            setTimezones(values.slice(-1));
+            setTimeZones(values.slice(-1));
           }}
-          options={TimezoneOptions}
+          options={TimeZoneOptions}
           showSearch
-          isTimezone
+          isTimeZone
         />
       </WrapItem>
     </Wrap>