refactor

- fetch users' data with RTK

src/components/blocks/gallery-users/gallery-users.tsx

@@ -1,8 +1,9 @@
 import styles from './gallery-users.module.scss';
-import { UserCard, IUserCardProps } from '../user-card/user-card';
+import { UserCard } from '../user-card/user-card';
+import { IUsersDataExtended } from '@/services/features/users/types';
 
 interface IGalleryUsersProps {
-  data: IUserCardProps[] | null;
+  data: IUsersDataExtended[] | null;
 }
 
 export const GalleryUsers = ({ data }: IGalleryUsersProps) => {

src/components/blocks/user-additional-info/user-additional-info.tsx

@@ -1,13 +1,13 @@
 import React from 'react';
 import styles from './user-additional-info.module.scss';
 import { TitleWithBorder } from '../title-with-border/title-with-border';
-import { IUserCardProps } from '../user-card/user-card';
 import { Category, ICategoryProps } from '@/components/ui/category/category';
 import { IFormValues } from '@/hooks/useFormWithValidation';
+import { IUserProfile } from '@/services/features/user-profile/types';
 
 interface IUserAdditionalInfo {
   title?: string;
-  selectedUser: IUserCardProps;
+  selectedUser: IUserProfile;
   categories: ICategoryProps[];
   values: IFormValues;
   handleChange: React.ChangeEventHandler<HTMLInputElement>;

src/components/blocks/user-card/user-card.tsx

@@ -11,28 +11,21 @@ import {
   unarchiveUser,
   hideUser,
 } from '@/services/features/users/slice';
+import { IUsersDataExtended } from '@/services/features/users/types';
 
-export interface IUserCardProps {
-  id: number;
-  img: string;
-  name: string;
-  username: string;
-  company: string;
-  city: string;
-  email: string;
-  phone: string;
-  isArchived?: boolean;
-  workspace?: string;
-  privacy?: string;
-  security?: string;
-}
-
-export const UserCard = (data: IUserCardProps) => {
+export const UserCard = (data: IUsersDataExtended) => {
   const [isDropdownShown, setIsDropdownShown] = useState(false);
   const dispatch = useAppDispatch();
   const navigate = useNavigate();
 
-  const { id, img, username, company, city, isArchived = false } = data;
+  const {
+    id,
+    img,
+    username,
+    company: { name },
+    address: { city },
+    isArchived = false,
+  } = data;
 
   const onBtnMoreClick = () => {
     setIsDropdownShown((prevState) => !prevState);
@@ -45,7 +38,7 @@ export const UserCard = (data: IUserCardProps) => {
         <header className={styles.header}>
           <div className={styles.info}>
             <h3 className={styles.title}>{username}</h3>
-            <p className={styles.company}>{company}</p>
+            <p className={styles.company}>{name}</p>
           </div>
           <div className={styles.dropdownWrapper}>
             <ButtonIcon

src/components/blocks/user-form/user-form.tsx

@@ -1,7 +1,6 @@
 import React, { useEffect, useState } from 'react';
 import styles from './user-form.module.scss';
 import { UserAdditionalInfo } from '../user-additional-info/user-additional-info';
-import { IUserCardProps } from '../user-card/user-card';
 import { UserMainInfo } from '../user-main-info/user-main-info';
 import { ICategoryProps } from '@/components/ui/category/category';
 import { IInputProps } from '@/components/ui/input/input';
@@ -10,12 +9,13 @@ import { ModalWrapper } from '@/components/ui/modal-wrapper/modal-wrapper';
 import { handleFormInitialState } from '@/helpers/handleFormInitialState';
 import useFormWithValidation from '@/hooks/useFormWithValidation';
 import { useAppDispatch } from '@/services/app/hooks';
+import { IUserProfile } from '@/services/features/user-profile/types';
 import { updateUserData } from '@/services/features/users/slice';
 import { IModalStatus } from '@/types';
 
 interface IUserFormProps extends React.FormHTMLAttributes<HTMLFormElement> {
   title?: string;
-  selectedUser: IUserCardProps;
+  selectedUser: IUserProfile;
   categories: ICategoryProps[];
   inputs: Omit<IInputProps, 'onButtonClick'>[];
   buttonText: string;

src/components/sections/layout-root/layout-root.tsx

@@ -1,10 +1,9 @@
 import { ReactNode, useEffect, useState } from 'react';
-import { fetchUsersData } from '@/api/fetchUsersData';
 import { Preloader } from '@/components/common/preloader/preloader';
-import { getUsersData } from '@/helpers/data/getUsersData';
 import { useScrollToTop } from '@/hooks/useScrollToTop';
-import { useAppDispatch } from '@/services/app/hooks';
-import { setInitialUsers } from '@/services/features/users/slice';
+import { useAppDispatch, useAppSelector } from '@/services/app/hooks';
+import { error } from '@/services/features/users/selectors';
+import { fetchUsersData } from '@/services/features/users/slice';
 
 interface ILayoutProps {
   children?: ReactNode;
@@ -19,16 +18,16 @@ export const LayoutRoot = ({ children }: ILayoutProps) => {
   const [isAppLoaded, setIsAppLoaded] = useState(hasInitiallyLoaded);
   const dispatch = useAppDispatch();
 
+  const statusError = useAppSelector(error);
+
   useEffect(() => {
     if (hadInitialDataRequest) return;
 
     const fetchData = async () => {
       try {
-        const data = await fetchUsersData(6);
-
-        dispatch(setInitialUsers(getUsersData(data)));
-      } catch (e) {
-        console.error(e);
+        dispatch(fetchUsersData());
+      } catch (_) {
+        console.error(statusError);
       } finally {
         hadInitialDataRequest = true;
         hasInitiallyLoaded = true;

src/pages/[id]/index.tsx

@@ -1,6 +1,5 @@
 import { useEffect } from 'react';
 import { useLocation } from 'react-router-dom';
-import { IUserCardProps } from '@/components/blocks/user-card/user-card';
 import { UserForm } from '@/components/blocks/user-form/user-form';
 import { Header } from '@/components/common/header/header';
 import { LayoutAnimation } from '@/components/sections/layout-animation/layout-animation';
@@ -10,7 +9,9 @@ import { getJsonData } from '@/helpers/data/getJsonData';
 import { useAppSelector, useAppDispatch } from '@/services/app/hooks';
 import { getUserProfileData } from '@/services/features/user-profile/selectors';
 import { setInitialUserData } from '@/services/features/user-profile/slice';
+import { IUserProfile } from '@/services/features/user-profile/types';
 import { getActiveUsers } from '@/services/features/users/selectors';
+import { IUsersDataExtended } from '@/services/features/users/types';
 
 let json = null as any;
 getJsonData('user-profile').then((data) => (json = data));
@@ -19,7 +20,7 @@ export const UserProfile = () => {
   const location = useLocation();
   const dispatch = useAppDispatch();
   const users = useAppSelector(getActiveUsers);
-  const selectedUser = useAppSelector(getUserProfileData) as IUserCardProps;
+  const selectedUser = useAppSelector(getUserProfileData) as IUserProfile;
 
   useEffect(() => {
     if (selectedUser) return;
@@ -28,7 +29,7 @@ export const UserProfile = () => {
       setInitialUserData(
         users.find(
           (user) => user.id === Number(location.pathname.slice(1))
-        ) as IUserCardProps
+        ) as IUsersDataExtended
       )
     );
   }, [users]);

src/services/features/user-profile/slice.ts

@@ -1,8 +1,9 @@
 import { PayloadAction, createSlice } from '@reduxjs/toolkit';
-import { IUserCardProps } from '@/components/blocks/user-card/user-card';
+import { IUserProfile } from './types';
+import { IUsersDataExtended } from '../users/types';
 
 type TSliceState = {
-  user: IUserCardProps | null;
+  user: IUserProfile | null;
 };
 
 const initialState: TSliceState = { user: null };
@@ -11,8 +12,12 @@ const userProfileSlice = createSlice({
   name: 'userProfile',
   initialState,
   reducers: {
-    setInitialUserData: (state, action: PayloadAction<IUserCardProps>) => {
-      state.user = action.payload;
+    setInitialUserData: (state, action: PayloadAction<IUsersDataExtended>) => {
+      state.user = {
+        ...action.payload,
+        city: action.payload.address.city,
+        company: action.payload.company.name,
+      };
     },
 
     reset: () => initialState,

src/services/features/user-profile/types.ts

@@ -0,0 +1,15 @@
+export interface IUserProfile {
+  id: number;
+  name: string;
+  username: string;
+  email: string;
+  city: string;
+  phone: string;
+  website: string;
+  company: string;
+  img: string;
+  workspace?: string;
+  privacy?: string;
+  security?: string;
+  isArchived?: boolean;
+}

src/services/features/users/selectors.ts

@@ -2,3 +2,5 @@ import { RootState } from '@/services/app/store';
 
 export const getActiveUsers = (state: RootState) => state.users.activeUsers;
 export const getArchiveUsers = (state: RootState) => state.users.archiveUsers;
+export const status = (state: RootState) => state.users.status;
+export const error = (state: RootState) => state.users.error;