Next.js Discord

Discord Forum

Drawer does not stay open after creating value

Unanswered
Yellow croaker posted this in #help-forum
Open in Discord
Yellow croakerOP
Hello i have this problem with probably is related to revalidatePath. In my application user press button which creates an education value, which when clicked opens a drawer with form. So basically user actions now are: Click new education -> click add education -> drawer opens, write data. What i want is: Click new education -> Drawer opens, user can write data.

My code looks like this:
  const [selectedItem, setSelectedItem] = useState<T | null>(null);
  const [isDrawerOpen, setIsDrawerOpen] = useState(false); // New state variable

  const onDragEnd = useCallback(
    async (result: DropResult) => {
      await handleDragEnd(data, result, updateSortOrder);
    },
    [data, updateSortOrder],
  );

  const handleCreateExperienceClick = () => {
    console.log('Create Experience Clicked!'); // ADD THIS LINE
    setIsDrawerOpen(true); // Open the drawer
  };

  console.log('isDrawerOpen');
  return (
    <Card py={'xs'}>
      <Card.Section pt={'sm'} mx={'sm'}>
        <Title order={2}>{title}</Title>
        <Text mt="xs" c="dimmed" size="md">
          {description}
        </Text>
      </Card.Section>
      <Divider my={'md'} />

      <Drawer
        radius="md"
        opened={!!selectedItem || isDrawerOpen}
        onClose={() => {
          setSelectedItem(null);
          setIsDrawerOpen(false);
        }}
        title={title}
      >
        {selectedItem && (
          <ExperienceForm
            item={selectedItem}
            handleClose={() => setSelectedItem(null)}
          />
        )}
      </Drawer>

      <Card.Section>
        <div className="flex justify-between items-center p-4">
          <CreateButton
            createAction={(payload: Omit<T, 'id'>) =>
              createExperience(payload as T)
            }
            onOpenDrawer={handleCreateExperienceClick}
            label={`Uusi ${title}`}
          />
        </div>
      </Card.Section>
    </Card>
  );
};

export default GenericComponent;

1 Reply

Yellow croakerOP
import * as React from 'react';
import { Button } from '@mantine/core';

interface CreateButtonProps<T> {
  createAction: (payload: T) => Promise<void>;
  initialPayload: T;
  label: string;
  onOpenDrawer?: () => void; // New callback prop
  // Additional props, like resumeId and highestSortOrder, are now part of the generic payload T
}

export function CreateButton<
  T extends {
    sortOrder?: number | null | undefined;
    resumeId?: string;
  },
>({
  createAction,
  initialPayload,
  label,
  //onOpenDrawer,
  ...props
}: CreateButtonProps<T>) {
  const [isLoading, setIsLoading] = React.useState<boolean>(false);
  async function onClick() {
    console.log('Create Button Clicked!'); // ADD THIS LINE
    setIsLoading(true);
    await createAction(initialPayload);
    setIsLoading(false);

    if (onOpenDrawer) { 
      onOpenDrawer(); // Trigger callback if provided
    }


  }

  return (
    <Button
      onClick={onClick}
      disabled={isLoading}
      loading={isLoading}
      variant="light"
      {...props}
    >
      {label}
    </Button>
  );
}

Button looks like this. Problem here is that when user click the button, it doesnt open the drawer, probably because the createAction calls revalidatePath, which re-renders the page and sets the drawerIsOpen to false?