TheGame/packages/web/pages/profile/setup/availability.tsx

import { SetupAvailability } from 'components/Setup/SetupAvailability';
import { SetupProfile } from 'components/Setup/SetupProfile';
import { SetupContextProvider } from 'contexts/SetupContext';
import { Maybe } from 'graphql/autogen/types';
import { useUser } from 'lib/hooks';
import { InferGetStaticPropsType } from 'next';
import React, { useState } from 'react';

export const getStaticProps = async () => ({
  props: {
    hideTopMenu: true,
  },
});

export type DefaultSetupProps = InferGetStaticPropsType<typeof getStaticProps>;

const AvailabilitySetup: React.FC<DefaultSetupProps> = () => {
  const { user } = useUser();
  const { player } = user ?? {};
  const [available, setAvailability] = useState<Maybe<number>>(
    player?.profile?.availableHours ?? null,
  );

  if (player) {
    if (player?.profile?.availableHours != null && available === null) {
      setAvailability(player.profile.availableHours);
    }
  }

  return (
    <SetupContextProvider>
      <SetupProfile>
        <SetupAvailability {...{ available, setAvailability }} />
      </SetupProfile>
    </SetupContextProvider>
  );
};

export default AvailabilitySetup;