Chapter 2: User Domain Logic - Telemora/telemora-web GitHub Wiki

// src/libs/users/types/index.ts (Simplified)

// Basic info like ID and username
export interface UserPublicPreview {
  id: number | string;
  username?: string;
  handle?: string;
  photo?: { url: string }; // Simplified Media type
}

// More detailed summary, includes name and role
export interface UserSummary extends UserPublicPreview {
  firstName: string;
  lastName?: string;
  role: 'buyer' | 'seller' | 'both'; // Simplified UserRole enum
  // ... other summary fields
}

// The full private profile we get from the backend
export interface UserPrivateProfile extends UserSummary {
  telegramId: string;
  phoneNumber?: string;
  email?: string;
  walletAddress?: string;
  // ... potentially lists of stores, orders, etc.
  // ... currency info
}

// ... other interfaces for DTOs (Data Transfer Objects)

// src/libs/users/api/index.ts (Simplified)
import httpClient from '@/libs/common/utils/http-client'; // Our tool for making HTTP requests
import {generateMockUserPrivateProfile} from '@/libs/users/mocks'; // Mock data for development
import {UserPrivateProfile} from '@/libs/users/types';

// Function to call our backend's login endpoint
export async function telegramLogin() {
  // Check if we are in development mode
  return process.env.NODE_ENV === 'development'
    // If in dev, return mock data
    ? generateMockUserPrivateProfile()
    // If not in dev, make a real HTTP GET request
    // httpClient automatically includes initData in headers
    : httpClient.get<UserPrivateProfile>('/users/login');
}

// ... other API functions for updating profile, language, etc.

// src/libs/users/hooks/index.ts (Simplified)
import {useQuery} from '@tanstack/react-query'; // React Query hook
import {telegramLogin} from '@/libs/users/api'; // Our API function

// Custom hook to fetch the current user's profile
export function useTelegramLoginQuery() {
  return useQuery({
    queryKey: ['me'], // Unique key for React Query to identify this data
    queryFn: telegramLogin, // The function that fetches the data
    staleTime: 1000 * 60 * 5, // Data is considered fresh for 5 minutes
    retry: false, // Don't retry if the login fails initially
  });
}

// ... other mutation hooks for updates

// src/libs/users/context/userContext.tsx (Simplified)
'use client'; // Marks this for client-side rendering in Next.js

import React, {createContext, type PropsWithChildren, useContext} from 'react';
import {useTelegramLoginQuery} from '@/libs/users/hooks'; // Our fetching hook
import {UserPrivateProfile} from '@/libs/users/types'; // User data type

// Define the shape of the context value
interface UserContextValue {
  data?: UserPrivateProfile; // The user data (optional while loading/errored)
  isLoading: boolean; // Loading state
}

// Create the context with a default undefined value
const UserContext = createContext<UserContextValue | undefined>(undefined);

// Provider component that fetches data and makes it available
export function UserProvider({children}: PropsWithChildren) {
  const {data, isLoading, error} = useTelegramLoginQuery(); // Fetch data using the hook

  // Basic handling: If error or no data, maybe don't render children
  // In a real app, you might show an error page or login screen
  if (error) {
    console.error('Failed to load user:', error);
    return null; // Or render an error UI
  }

  if (isLoading) {
    // You could render a loading spinner here
    return null; // Or render a loading UI
  }

  if (!data) {
    // Should not happen if isLoading is false, but good practice
    return null; // Or render an error UI
  }

  // Provide the fetched data and loading state to the context
  return (
    <UserContext.Provider value = {
  {
    data, isLoading
  }
}>
  {
    children
  }
  {/* Render the rest of the app */
  }
  </UserContext.Provider>
)
  ;
}

// Hook to consume the context value
export const useUserState = () => {
  const context = useContext(UserContext);
  // Throw an error if hook is used outside the Provider
  if (!context) throw new Error('useUserState must be used within <UserProvider>');
  return context;
};

// src/providers/AppProvider.tsx (Snippet showing UserProvider placement)
'use client';

import dynamic from 'next/dynamic';
import {PropsWithChildren} from 'react';

const InitTelegram = dynamic(() => import('@/libs/common/components/init-telegram'), {
  ssr: false,
});

// Import other providers like UserProvider
import {UserProvider} from '@/libs/users/context/userContext';

// ... other imports

export function AppProvider({children}: PropsWithChildren) {
  return (
    <>
      <InitTelegram>
        {/* ... other providers */}
  {/* UserProvider wraps the application content */
  }
  <UserProvider>
    {children}
  {/* The rest of your application */
  }
  </UserProvider>
  {/* ... other providers */
  }
  </InitTelegram>
  < />
)
  ;
}

// src/libs/users/components/profile-card-with-hook.tsx (Conceptual Example)
'use client';

import Image from 'next/image';
import {useUserState} from '@/libs/users/context/userContext'; // Import the hook

export default function ProfileCard() {
  const {data: user, isLoading} = useUserState(); // Get user data from context

  // Handle loading state
  if (isLoading) {
    return <div>Loading
    profile
  ...
    </div>;
  }

  // Handle case where user data might not be available (e.g., error or not logged in)
  if (!user) {
    return <div>Could
    not
    load
    profile. < /div>; /
    / Or redirect to login
  }

  // Now use the user data to render the profile
  return (
    <div className = "space-y-2" >
    <div className = "text-center" >
    <Image
      src = {user.photo?.url ?? '/default-profile.png'}
  alt = "user photo"
  width = {128}
  height = {128}
  className = "inline-block aspect-square w-32 rounded-full object-cover"
  / >
  <div className = "mt-4" >
  <h2 className = "text-lg font-semibold" >
    {user.firstName}
  {
    user.lastName
  }
  </h2>
  {
    user.username && <p className = "text-sm lowercase text-gray-500" > @{user.username} < /p>}
      < /div>
      < /div>
    {/* ... other profile details and buttons */
    }
    </div>
  )
    ;
  }

// src/libs/users/schemas/index.ts (Simplified)
import {z} from 'zod';

// Schema for updating the user's first and last name
export const updateProfileSchema = z.object({
  firstName: z.string().min(1, 'First name is required').optional(),
  lastName: z.string().min(1, 'Last name is required').optional(),
});

// Schema for updating language
export const updateLanguageSchema = z.object({
  languageCode: z.string().min(2, 'Language code is required'),
});

// ... other schemas

// src/libs/users/api/index.ts (Simplified)
import httpClient from '@/libs/common/utils/http-client';
import {generateMockUserPrivateProfile} from '@/libs/users/mocks'; // Mock data
import {
  UpdateLanguageDto,
  UpdateProfileDto,
  UserPrivateProfile,
} from '@/libs/users/types';

export async function updateProfile(telegramId: number | string, data: UpdateProfileDto) {
  return process.env.NODE_ENV === 'development'
    ? generateMockUserPrivateProfile()
    // PATCH request to update specific fields
    : httpClient.patch<UserPrivateProfile>(`/users/profile/${telegramId}`, data);
}

export async function updateLanguage(telegramId: number | string, data: UpdateLanguageDto) {
  return process.env.NODE_ENV === 'development'
    ? generateMockUserPrivateProfile()
    : httpClient.patch<UserPrivateProfile>(`/users/language/${telegramId}`, data);
}

// ... other update functions

// src/libs/users/hooks/index.ts (Simplified)
import {useMutation} from '@tanstack/react-query';
import {updateLanguage, updateProfile} from '@/libs/users/api';
import {UpdateLanguageFormData, UpdateProfileFormData} from '@/libs/users/schemas';

export function useUpdateProfileMutation() {
  return useMutation({
    mutationFn: ({
                   telegramId,
                   data,
                 }: {
      telegramId: number | string;
      data: UpdateProfileFormData;
    }) => updateProfile(telegramId, data),
    // Optional: onSuccess, onError handlers
  });
}

export function useUpdateLanguageMutation() {
  return useMutation({
    mutationFn: ({
                   telegramId,
                   data,
                 }: {
      telegramId: number | string;
      data: UpdateLanguageFormData;
    }) => updateLanguage(telegramId, data),
    // Optional: onSuccess, onError handlers
    // Often, onSuccess will invalidate or update the 'me' query cache
    // so that the useTelegramLoginQuery hook gets the fresh data.
  });
}

// ... other mutation hooks

// src/libs/users/components/language-selector.tsx (Simplified)
'use client';

import {Button, Form, Select, SelectItem} from '@heroui/react'; // UI components
import {zodResolver} from '@hookform/resolvers/zod'; // For form validation
import {Controller, useForm} from 'react-hook-form'; // For form management
import toast from 'react-hot-toast'; // For notifications

import {useUpdateLanguageMutation} from '@/libs/users/hooks'; // Our update hook
import {UpdateLanguageFormData, updateLanguageSchema} from '@/libs/users/schemas'; // Schema for validation

// ... component props

export default function LanguageSelector({telegramId, onClose, defaultLanguage = 'en'}) {
  const {mutateAsync, isPending} = useUpdateLanguageMutation(); // Get the mutation function and state

  const {
    control,
    handleSubmit,
    formState: {errors},
  } = useForm<UpdateLanguageFormData>({
    resolver: zodResolver(updateLanguageSchema), // Use zod for validation
    defaultValues: {
      languageCode: defaultLanguage,
    },
  });

  const onSubmit = async (formData: UpdateLanguageFormData) => {
    try {
      await mutateAsync({telegramId, data: formData}); // Call the mutation
      toast.success('Language updated successfully');
      onClose?.(); // Close the form on success
    } catch {
      toast.error('Failed to update language');
    }
  };

  return (
    <Form onSubmit = {handleSubmit(onSubmit)} > {/* Use handleSubmit to trigger onSubmit */}
  {/* ... Form fields using Controller with Select */
  }
  <Controller
    name = "languageCode"
  control = {control}
  render = {({field})
=>
  (
    <Select
      label = "Language"
      // ... bind Select props to field
      >
      {/* ... SelectItem options */}
      < /Select>
  )
}
  />

  < div
  className = "mt-6 flex justify-end gap-x-4" >
  <Button type = "submit"
  isDisabled = {isPending}
  isLoading = {isPending} > {/* Disable button while pending */}
  Save
  < /Button>
  < /div>
  < /Form>
)
  ;
}