radiostack

app/components/RadioStack.tsx

@@ -0,0 +1,144 @@
+import {
+  useFormControlContext,
+  useRadioGroup,
+  Stack,
+  UseRadioProps,
+  useRadio,
+  Box,
+  Flex,
+  Text,
+} from '@chakra-ui/react';
+import {useField} from 'formik';
+import React from 'react';
+
+export default function RadioStack(props: {
+  children: Array<React.ReactElement<RadioStackTabProps>>;
+}) {
+  const {id} = useFormControlContext();
+  const [field] = useField({name: id});
+  const {getRootProps, getRadioProps} = useRadioGroup(field);
+
+  // const [customValue, setCustomValue] = useState<string | null>(null);
+  // const onChangeCustom = (event: React.ChangeEvent<HTMLInputElement>) => {
+  //   const value = event.target.value
+  //     .trim()
+  //     .split(/,\./)
+  //     .map((i) => parseInt(i, 10));
+
+  //   const newValue =
+  //     value.length === 1 ? value[0] * 100 : value[0] * 100 + value[1];
+
+  //   if (newValue === field.value) {
+  //     return;
+  //   }
+
+  //   setCustomValue(newValue.toString());
+  //   event.target.value = newValue.toString();
+  // };
+
+  return (
+    <Stack
+      direction={['column', 'row']}
+      gap={0}
+      mb="5"
+      {...getRootProps()}
+      borderRadius="var(--chakra-radii-md)"
+      borderWidth="1px"
+      borderColor="var(--chakra-colors-chakra-border-color)"
+      _hover={{
+        borderColor: 'gray.300',
+      }}
+      overflow="hidden"
+      _focusWithin={{
+        boxShadow: '0 0 0 1px #3182ce',
+        borderColor: '#3182ce',
+      }}
+    >
+      {React.Children.map(props.children, (child) =>
+        React.cloneElement(child, {
+          ...getRadioProps({value: child.props.value}),
+        }),
+      )}
+      {/* <RadioTabs
+        title="30,00&nbsp;€"
+        subtitle="Jahresbeitrag"
+        {...getRadioProps({value: '3000'})}
+      />
+      <RadioTabs
+        title="15,00&nbsp;€"
+        subtitle="Ermäßigter Jahresbeitrag für Schüler:innen, Studierende, etc."
+        {...getRadioProps({value: '1500'})}
+      /> */}
+      {/* <RadioTabs
+        title={
+          <Input
+            disabled={value !== 5000}
+            type="text"
+            placeholder="50,00 €"
+            bg="white"
+            onBlur={onChangeCustom}
+          />
+        }
+        subtitle="Förderbeitrag"
+        {...getRadioProps({value: 5000})}
+      /> */}
+    </Stack>
+  );
+}
+
+type RadioStackTabProps = {
+  title: React.ReactNode;
+  subtitle: string;
+} & UseRadioProps;
+
+export function RadioStackTab(props: RadioStackTabProps) {
+  const {getInputProps, getRadioProps, getLabelProps} = useRadio(props);
+
+  const [field, meta] = useField({name: props.name!});
+  console.log(field);
+
+  return (
+    <Box
+      as="label"
+      p="4"
+      bg="white"
+      flexBasis="0"
+      flexGrow="1"
+      cursor="pointer"
+      _notFirst={{
+        borderTopWidth: [1, 0],
+        borderLeftWidth: [0, 1],
+        borderColor: 'var(--chakra-colors-chakra-border-color)',
+      }}
+      _focusWithin={{
+        bg: 'gray.50',
+      }}
+      {...getLabelProps()}
+    >
+      <input {...field} {...getInputProps()} />
+      <Flex direction="row" alignItems="center" mb="1">
+        <Box
+          {...getRadioProps()}
+          w="4"
+          h="4"
+          mr="2"
+          borderRadius="999em"
+          flexGrow={0}
+          flexShrink={0}
+          _checked={{
+            bg: 'brand.900',
+          }}
+          bg="white"
+          outline="2px solid blue"
+          outlineColor="brand.900"
+          borderWidth={2}
+          borderColor="white"
+        />
+        <Text fontWeight="bold">{props.title}</Text>
+      </Flex>
+      <Text fontSize="small" color="offwhite.600">
+        {props.subtitle}
+      </Text>
+    </Box>
+  );
+}

app/root.tsx

@@ -35,7 +35,6 @@ import {typedjson, useTypedRouteLoaderData} from 'remix-typedjson';
 import {RootDocument} from './types/graphql';
 import type {RootQuery} from './types/graphql';
 import {dateStringComponents} from './components/DateString';
-import logo from '../public/logos/logo.png';
 import Headline from './components/Headline';
 import {Analytics} from '@vercel/analytics/react';
 import {SpeedInsights} from '@vercel/speed-insights/remix';
@@ -154,7 +153,6 @@ function Document({children}: {children: React.ReactNode}) {
             </ApolloProvider>
           </ChakraProvider>
         </CacheProvider>
-
         <ScrollRestoration />
         <Scripts />
         <LiveReload />
@@ -164,7 +162,6 @@ function Document({children}: {children: React.ReactNode}) {
 }
 
 function App() {
-  const data = useTypedRouteLoaderData<typeof loader>('root');
   return (
     <Document>
       <Outlet />

app/routes/lineup.$year._index.tsx

@@ -119,8 +119,8 @@ export default function LineupYear() {
 
   const activeAreas = useMemo(
     () =>
-      areas.filter(
-        (a) => event?.bandsPlaying.edges.some((e) => e.node.area.id === a.id),
+      areas.filter((a) =>
+        event?.bandsPlaying.edges.some((e) => e.node.area.id === a.id),
       ),
     [areas, event?.bandsPlaying.edges],
   );
@@ -133,7 +133,6 @@ export default function LineupYear() {
         value={stageFilter}
         options={activeAreas.map((a) => ({name: a.displayName, id: a.id}))}
       />
-
       {days.map((day) => (
         <Day
           key={day.toISOString()}

app/routes/lineup.tsx

@@ -17,14 +17,15 @@ import {
   Center,
 } from '@chakra-ui/react';
 import {Link, NavLink, Outlet, useParams} from '@remix-run/react';
-import {$path} from 'remix-routes';
 import Search from '~/components/lineup/Search';
-import type {LineupsQuery} from '~/types/graphql';
-import {LineupsDocument} from '~/types/graphql';
-import type {loader as rootLoader} from '~/root';
-import {useTypedRouteLoaderData} from 'remix-typedjson';
+import type {BookingActiveQuery, LineupsQuery} from '~/types/graphql';
+import {BookingActiveDocument, LineupsDocument} from '~/types/graphql';
+import {typedjson, useTypedLoaderData} from 'remix-typedjson';
 import InfoBox from '~/components/InfoBox';
 import {Suspense} from 'react';
+import {LoaderFunctionArgs} from '@remix-run/node';
+import apolloClient from '~/utils/apolloClient';
+import {$path} from 'remix-routes';
 
 gql`
   query Lineups {
@@ -40,24 +41,43 @@ gql`
   }
 `;
 
-function useApplicationsOpen() {
-  const root = useTypedRouteLoaderData<typeof rootLoader>('root')!;
-  const event = root.eventsConnection.edges[0].node;
+gql`
+  query BookingActive {
+    eventsConnection(first: 1, type: Kulturspektakel) {
+      edges {
+        node {
+          id
+          bandApplicationStart
+          bandApplicationEnd
+          djApplicationStart
+          djApplicationEnd
+        }
+      }
+    }
+  }
+`;
 
-  return (
-    (event.bandApplicationStart &&
-      event.bandApplicationEnd &&
-      event.bandApplicationStart.getTime() < Date.now() &&
-      event.bandApplicationEnd.getTime() > Date.now()) ||
-    (event.djApplicationStart &&
-      event.djApplicationEnd &&
-      event.djApplicationStart.getTime() < Date.now() &&
-      event.djApplicationEnd.getTime() > Date.now())
-  );
+export async function loader(args: LoaderFunctionArgs) {
+  const {data} = await apolloClient.query<BookingActiveQuery>({
+    query: BookingActiveDocument,
+  });
+  const event = data.eventsConnection.edges[0].node;
+  return typedjson({
+    bookingAlert:
+      (event.bandApplicationStart &&
+        event.bandApplicationEnd &&
+        event.bandApplicationStart.getTime() < Date.now() &&
+        event.bandApplicationEnd.getTime() > Date.now()) ||
+      (event.djApplicationStart &&
+        event.djApplicationEnd &&
+        event.djApplicationStart.getTime() < Date.now() &&
+        event.djApplicationEnd.getTime() > Date.now()),
+  });
 }
 
 export default function () {
   const params = useParams();
+  const bookingAlert = useTypedLoaderData<typeof loader>().bookingAlert;
 
   return (
     <>
@@ -115,10 +135,10 @@ export default function () {
             </Menu>
           )}
         </Flex>
-        <BookingAlert display={['flex', 'none']} />
+        {bookingAlert && <BookingAlert display={['flex', 'none']} />}
         <Search w={['100%', 'auto']} />
       </Stack>
-      <BookingAlert display={['none', 'flex']} mt="4" />
+      {bookingAlert && <BookingAlert display={['none', 'flex']} mt="4" />}
       <Outlet />
     </>
   );
@@ -144,12 +164,6 @@ function MenuItems() {
 }
 
 function BookingAlert(props: BoxProps) {
-  const applicationsOpen = useApplicationsOpen();
-
-  if (!applicationsOpen) {
-    return null;
-  }
-
   return (
     <InfoBox {...props} title="Jetzt Bewerben">
       <Text>