fix: layouting

src/app/(auth)/component/form.component.tsx

@@ -8,7 +8,6 @@ import Checkbox from '@/shared/component/checkbox/checkbox.component';
 import { LOGIN_SCHEMA, REGISTRATION_SCHEMA } from '@/app/(auth)/services/schema/schema.service';
 import { useEffect, useState } from 'react';
 import Icon from '@/shared/component/icon/icon';
-import { useLoginUserMutation, useRegistrationMutation } from '@/app/(auth)/services/api-service/api-service';
 import {
  GENDER,
  LOGIN_FORM,
@@ -19,6 +18,7 @@ import {
 import Dropdown from '@/shared/component/dropdown/dropdown';
 import { useRouter } from 'next/navigation';
 import { setCookie } from 'cookies-next';
+import { useLoginUserMutation, useRegistrationMutation } from '@/app/services/api/auth.api';
 
 function AuthForm (props: { type?: string, setEmail?: any }) {
  const router = useRouter();

src/app/(auth)/register/verification.tsx

@@ -3,10 +3,10 @@ import { Grid } from '@mui/material';
 import Typography from '@/shared/component/typography/typography';
 import Button from '@/shared/component/button/button.component';
 import { useEffect } from 'react';
-import { useConfirmationMutation, useResendConfirmationMutation } from '@/app/(auth)/services/api-service/api-service';
 import { useRouter } from 'next/navigation';
 import Input from '@/shared/component/input/input.component';
 import { Formik, FormikValues } from 'formik';
+import { useConfirmationMutation, useResendConfirmationMutation } from '@/app/services/api/auth.api';
 
 export default function Verification (props: { email: string }) {
  const [confirmation, { data }] = useConfirmationMutation();

src/app/page.tsx

@@ -7,18 +7,18 @@ import Icon from '@/shared/component/icon/icon';
 import { FILTER_CHIP } from '@/shared/component/header/constant/header.constant';
 import { useState } from 'react';
 import PreviewCard from '@/shared/component/preview-card/preview-card';
-import { useGetArticleByIDQuery } from '@/app/services/api/article.slice';
-import { ArticleData } from '@/shared/model/common.model';
+import { useGetArticleQuery } from '@/app/services/api/article.api';
 import Typography from '@/shared/component/typography/typography';
 import { DUMMY_DATA } from '@/shared/constant/shared.constant';
 import { theme } from '../../styles/theme';
 import { getCookie } from 'cookies-next';
 import { useRouter } from 'next/navigation';
 import Popular from '@/shared/component/home-side-items/popular';
+import { ArticleModel } from '@/app/services/models/article.model';
 
 export default function Home () {
  const [active, setActive] = useState('all');
- const {data} = useGetArticleByIDQuery<ArticleData[]>();
+ const {data} = useGetArticleQuery<ArticleModel[]>();
  const user = getCookie('authentication');
  const route = useRouter();
  return (
@@ -47,7 +47,7 @@ export default function Home () {
    <Grid item container direction='row' px='80px' gap='20px'>
     <Grid item container xs={8.5}>
      {
-      data?.map((items: ArticleData) => <PreviewCard key={items.id} article={items} />)
+      data?.map((items: ArticleModel) => <PreviewCard key={items.id} article={items} />)
      }
     </Grid>
     <Grid item container xs={3.3} className='height--fit-content'>

src/app/services/api/article.slice.ts → src/app/services/api/article.api.ts

@@ -1,6 +1,7 @@
 import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react';
 import { FetchBaseQueryArgs } from '@reduxjs/toolkit/dist/query/fetchBaseQuery';
 import { EndpointBuilder } from '@reduxjs/toolkit/dist/query/endpointDefinitions';
+import { ArticleModel } from '@/app/services/models/article.model';
 
 export const articleAPI = createApi({
  reducerPath: 'articleAPI',
@@ -9,7 +10,7 @@ export const articleAPI = createApi({
   credentials: 'include'
  }as FetchBaseQueryArgs),
  endpoints: (builder: EndpointBuilder<any, any, any>) => ({
-  getArticle: builder.query<any, string>({
+  getArticle: builder.query<ArticleModel[], string>({
    query: () => '/articles',
   }),
   getArticleByID: builder.query({

src/app/services/models/article.model.ts

@@ -0,0 +1,13 @@
+import { UserModel } from '@/app/services/models/users.model';
+
+export interface ArticleModel {
+    title: string
+    body: string
+    comment_count: number
+    created_at: string
+    following: boolean
+    id: number
+    like_count: number
+    liked_by_current_user: boolean
+    owner: UserModel
+}

src/app/services/models/users.model.ts

@@ -0,0 +1,12 @@
+export interface UserModel {
+    article_count: number
+    created_at: string
+    email: string
+    follower_count: number
+    following_count: number
+    gender: string
+    id: number
+    name: string
+    updated_at: string
+    username: string
+}

src/middleware.ts

@@ -1,4 +1,5 @@
 import { NextRequest, NextResponse } from 'next/server';
+import { setCookie, hasCookie } from 'cookies-next';
 
 export function middleware (request: NextRequest) {
  const value = request.cookies.getAll();
@@ -8,6 +9,9 @@ export function middleware (request: NextRequest) {
  if ( request.url.includes('/login') && !!value[0]?.value ) {
   return NextResponse.redirect(new URL('/', request.url));
  }
+ if ( !hasCookie('authenticated') ) {
+  setCookie('authenticated', value);
+ }
 }
 
 export const config = {

src/rtk-store/rtk-store.ts

@@ -1,12 +1,13 @@
 import { configureStore } from '@reduxjs/toolkit';
-import { articleAPI } from '@/app/services/api/article.slice';
+import { articleAPI } from '@/app/services/api/article.api';
 import { setupListeners } from '@reduxjs/toolkit/query';
-import { authAPI } from '@/app/(auth)/services/api-service/api-service';
+import { authAPI } from '@/app/services/api/auth.api';
+
 
 export const store = configureStore({
  reducer: {
   [articleAPI.reducerPath]: articleAPI.reducer,
-  [authAPI.reducerPath]: authAPI.reducer
+  [authAPI.reducerPath]: authAPI.reducer,
 
  },
  middleware: (getDefaultMiddleware) =>

src/shared/component/preview-card/preview-card.tsx

@@ -4,10 +4,10 @@ import img from '../../../../public/profile/profile.png';
 import { ProfileImage } from '@/shared/component/preview-card/style/preview.style';
 import Typography from '@/shared/component/typography/typography';
 import PreviewFooter from '@/shared/component/preview-card/preview-footer';
-import { ArticleData } from '@/shared/model/common.model';
 import { dateFormat } from '@/shared/utils/utilities';
+import { ArticleModel } from '@/app/services/models/article.model';
 
-function PreviewCard (props: { article: ArticleData }) {
+function PreviewCard (props: { article: ArticleModel }) {
 
  return(
   <Grid item container direction='row' py='24px' borderBottom='1px solid var(--primary-blue-50, #E6F2F6)' mb='44px'>
@@ -19,7 +19,7 @@ function PreviewCard (props: { article: ArticleData }) {
      <Grid item container xs={8} ml='12px' direction='column'>
       <Grid item container direction='row' alignItems='center'>
        <Typography label={props?.article?.owner?.name} variant='body1' fontSize='16px' fontWeight='400' />
-       { props.article.is_following && <Grid item container pl='12px' direction='row' xs='auto'>
+       { props.article.following && <Grid item container pl='12px' direction='row' xs='auto'>
         <Typography label='-' variant='body1' fontSize='12px' fontWeight='300'/>
         <Box ml='4px'>
          <Typography label={ 'following' } variant='body1' fontSize='12px' fontWeight='300'/>

src/shared/component/preview-card/preview-footer.tsx

@@ -3,7 +3,7 @@ import Icon from '@/shared/component/icon/icon';
 import Typography from '@/shared/component/typography/typography';
 import Button from '@/shared/component/button/button.component';
 import { useState } from 'react';
-import { useCreateArticleLikeMutation, useDestroyArticleLikeMutation } from '@/app/services/api/article.slice';
+import { useCreateArticleLikeMutation, useDestroyArticleLikeMutation } from '@/app/services/api/article.api';
 import { PreviewFooterProps } from '@/shared/component/preview-card/model/preview.model';
 import { getCookie } from 'cookies-next';
 import { useRouter } from 'next/navigation';

src/shared/model/common.model.ts

@@ -1,19 +1,3 @@
 export type MatColors = 'primary' | 'secondary' | 'success' | 'error' | 'info' | 'warning';
 export type MatVariants = 'text' | 'outlined' | 'contained';
 export type MatInputVariants = 'filled' | 'outlined' | 'standard';
-export interface ArticleData {
-    title: string;
-    body: string;
-    id: number;
-    comment_count: number;
-    like_count: number;
-    liked_by_current_user: boolean;
-    owner: UserModel;
-    is_following: boolean;
-    created_at: Date;
-}
-
-export interface UserModel {
-    id: number;
-    name: string
-}