skip master select for master & client select for client

apps/web/components/orders/order-form.tsx

@@ -1,4 +1,5 @@
 'use client';
+import { LoadingSpinner } from '../common/spinner';
 import {
   BackButton,
   ClientsGrid,
@@ -8,6 +9,7 @@ import {
   SubmitButton,
 } from './components';
 import { OrderStoreProvider, useOrderStore } from '@/stores/order';
+import { useInitOrderStore } from '@/stores/order/hooks';
 import { withContext } from '@/utils/context';
 import { type JSX } from 'react';
 
@@ -19,7 +21,10 @@ const STEP_COMPONENTS: Record<string, JSX.Element> = {
 };
 
 export const OrderForm = withContext(OrderStoreProvider)(function () {
+  useInitOrderStore();
+
   const step = useOrderStore((store) => store.step);
+  if (step === 'loading') return <LoadingSpinner />;
 
   return (
     <div className="space-y-4 [&>*]:px-4">

apps/web/stores/order/context.tsx

@@ -1,5 +1,4 @@
 'use client';
-import { useInitialState } from './hooks';
 import { createOrderStore } from './store';
 import { createContext, type PropsWithChildren, useRef } from 'react';
 
@@ -9,9 +8,8 @@ export const OrderStoreContext = createContext<OrderStoreApi | undefined>(undefi
 
 export function OrderStoreProvider({ children }: Readonly<PropsWithChildren>) {
   const storeRef = useRef<null | OrderStoreApi>(null);
-  const initialState = useInitialState();
   if (storeRef.current === null) {
-    storeRef.current = createOrderStore(initialState);
+    storeRef.current = createOrderStore();
   }
 
   return <OrderStoreContext value={storeRef.current}>{children}</OrderStoreContext>;

apps/web/stores/order/hooks.tsx

@@ -4,31 +4,9 @@ import { OrderStoreContext } from './context';
 import { type OrderStore, type Steps } from './types';
 import { useProfileQuery } from '@/hooks/profile';
 import { Enum_Customer_Role } from '@repo/graphql/types';
-import { useContext } from 'react';
+import { useContext, useEffect } from 'react';
 import { useStore } from 'zustand';
 
-export const MASTER_STEPS: Steps[] = [
-  'master-select',
-  'client-select',
-  'service-select',
-  'datetime-select',
-  'success',
-];
-
-export const CLIENT_STEPS: Steps[] = MASTER_STEPS.filter((step) => step !== 'client-select');
-
-export function useInitialState() {
-  const { data } = useProfileQuery();
-  const role = data?.role;
-  const steps = role === Enum_Customer_Role.Master ? MASTER_STEPS : CLIENT_STEPS;
-  const initialStep = steps[0];
-
-  return {
-    _stepSequence: steps,
-    step: initialStep,
-  } as OrderStore;
-}
-
 export const useOrderStore = <T,>(selector: (store: OrderStore) => T): T => {
   const orderStoreContext = useContext(OrderStoreContext);
 
@@ -38,3 +16,40 @@ export const useOrderStore = <T,>(selector: (store: OrderStore) => T): T => {
 
   return useStore(orderStoreContext, selector);
 };
+
+const STEPS: Steps[] = [
+  'master-select',
+  'client-select',
+  'service-select',
+  'datetime-select',
+  'success',
+];
+export const MASTER_STEPS: Steps[] = STEPS.filter((step) => step !== 'master-select');
+export const CLIENT_STEPS: Steps[] = STEPS.filter((step) => step !== 'client-select');
+
+export function useInitOrderStore() {
+  const { data } = useProfileQuery();
+
+  const setMasterId = useOrderStore((store) => store.setMasterId);
+  const setClientId = useOrderStore((store) => store.setClientId);
+  const setStep = useOrderStore((store) => store.setStep);
+  const setStepsSequence = useOrderStore((store) => store._setStepSequence);
+
+  useEffect(() => {
+    const role = data?.role;
+
+    if (role === Enum_Customer_Role.Master && data) {
+      setMasterId(data?.documentId);
+    }
+
+    if (role === Enum_Customer_Role.Client && data) {
+      setClientId(data?.documentId);
+    }
+
+    const steps = role === Enum_Customer_Role.Master ? MASTER_STEPS : CLIENT_STEPS;
+    const initialStep = steps[0] as Steps;
+
+    setStepsSequence(steps);
+    setStep(initialStep);
+  }, [data, setClientId, setMasterId, setStep, setStepsSequence]);
+}

apps/web/stores/order/store.ts

@@ -3,10 +3,10 @@
 import { type OrderStore } from './types';
 import { createStore } from 'zustand';
 
-export function createOrderStore(initState: OrderStore) {
+export function createOrderStore() {
   return createStore<OrderStore>((set, get) => ({
-    ...initState,
-    _stepSequence: initState._stepSequence,
+    _setStepSequence: (steps) => set({ _stepSequence: steps }),
+    _stepSequence: [],
     clientId: null,
     date: new Date(),
 
@@ -31,7 +31,7 @@ export function createOrderStore(initState: OrderStore) {
     setServiceId: (id) => set({ serviceId: id }),
     setStep: (step) => set({ step }),
     setTime: (time) => set({ time }),
-    step: initState.step,
+    step: 'loading',
     time: null,
   }));
 }

apps/web/stores/order/types.tsx

@@ -1,4 +1,5 @@
 export type OrderStore = {
+  _setStepSequence: (steps: Steps[]) => void;
   _stepSequence: Steps[];
   clientId: null | string;
   date: Date;
@@ -19,6 +20,7 @@ export type OrderStore = {
 export type Steps =
   | 'client-select'
   | 'datetime-select'
+  | 'loading'
   | 'master-select'
   | 'service-select'
   | 'success';