All files / src/app/recipes/create RecipeCreateClient.tsx

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
'use client';
 
import { Center, Loader } from '@mantine/core';
import { redirect } from 'next/navigation';
import { useSession } from 'next-auth/react';
import { useTranslations } from 'next-intl';
import { useCallback, useEffect, useRef } from 'react';
import { useRecipeForm } from '@/components/Recipe/Create/hooks/useRecipeForm';
import { useRecipeMetadata } from '@/components/Recipe/Create/hooks/useRecipeMetadata';
import { RecipeComposer } from '@/components/Recipe/Create/RecipeComposer';
import type { ComposerSection } from '@/components/Recipe/Create/types';
 
const RecipeCreateClient = () => {
  const { data: session, status } = useSession();
 
  const { labels, metadataLoaded } = useRecipeMetadata();
  const t = useTranslations('recipeCreate');
 
  /**
   * Ref that RecipeComposer populates with its internal goToSection callback.
   * This lets form hooks imperatively navigate (e.g. on validation failure).
   */
  const goToSectionRef = useRef<((s: ComposerSection) => void) | null>(null);
  const goToSection = useCallback(
    (section: ComposerSection) => goToSectionRef.current?.(section),
    [],
  );
 
  const {
    form,
    handlePublish,
    publishLoading,
    completion,
    lastSavedLabel,
    saveDraftNow,
    resetDraft,
    addIngredient,
    addStep,
  } = useRecipeForm({
    metadataLoaded,
    onSectionChange: goToSection,
    labels,
  });
 
  useEffect(() => {
    if (status === 'unauthenticated') {
      redirect('/api/auth/signin');
    }
  }, [status]);
 
  if (status === 'loading') {
    return (
      <Center h="100vh">
        <Loader size="lg" type="dots" />
      </Center>
    );
  }
  if (!session) return null;
 
  return (
    <RecipeComposer
      mode="create"
      form={form}
      handlePublish={handlePublish}
      submitLoading={publishLoading}
      completion={completion}
      lastSavedLabel={lastSavedLabel}
      onSave={saveDraftNow}
      onReset={resetDraft}
      addIngredient={addIngredient}
      addStep={addStep}
      headerTitle={t('headerTitle')}
      submitLabel={t('submitLabel')}
      resetLabel={t('resetLabel')}
      goToSectionRef={goToSectionRef}
    />
  );
};
 
export default RecipeCreateClient;