Merge pull request #9 from pieceowater-dev/dev

Dev

package.json

@@ -23,6 +23,7 @@
     "react-cookie": "^7.1.4",
     "react-dom": "^18.2.0",
     "react-redux": "^9.1.2",
+    "react-responsive": "^10.0.0",
     "react-router": "^6.22.3",
     "react-router-dom": "^6.22.3",
     "styled-components": "^6.1.8"

src/app/routes/router.tsx

@@ -6,6 +6,7 @@ import { PreloaderPage } from 'shared/ui/preloader-page'
 
 const Router = () => {
   const Main = lazy(async () => await import('pages/main'))
+  const Dashboard = lazy(async () => await import('pages/dashboard'))
 
   return (
     <Routes>
@@ -18,6 +19,7 @@ const Router = () => {
           </React.Suspense>
         }
       >
+        <Route path={'/'} element={<Dashboard />} />
         <Route path={'settings'} element={<Settings />} />
       </Route>
     </Routes>

src/entities/dashboard/payment-data/index.ts

@@ -0,0 +1,3 @@
+import { usePaymentData } from 'entities/dashboard/payment-data/payment-data'
+
+export { usePaymentData }

src/entities/dashboard/payment-data/model/interface.ts

@@ -0,0 +1,5 @@
+export interface IColumnPayments {
+  date: string
+  post: string
+  sum: string
+}

src/entities/dashboard/payment-data/payment-data.ts

@@ -0,0 +1,46 @@
+import { TableProps } from 'antd'
+import { useNotify } from 'app/providers/app'
+import { IColumnPayments } from 'entities/dashboard/payment-data/model/interface'
+import { useEffect } from 'react'
+import { getAxiosInstance } from 'shared/api/api-query/api-query'
+import { setPaymentsState } from 'shared/redux/dashboard/dashboard-slice'
+import { useAppDispatch } from 'shared/redux/store'
+
+export const usePaymentData = () => {
+  const { openNotification } = useNotify()
+  const dispatch = useAppDispatch()
+
+  const fetchData = async () => {
+    try {
+      const axiosInstance = await getAxiosInstance()
+      const res = await axiosInstance.get('/payments')
+      dispatch(setPaymentsState(res.data))
+    } catch (error) {
+      openNotification('Произошла ошибка при загрузке данных о пользователях')
+    }
+  }
+
+  useEffect(() => {
+    fetchData()
+  }, [])
+
+  const columns: TableProps<IColumnPayments>['columns'] = [
+    {
+      title: 'Дата',
+      dataIndex: 'date',
+      key: 'date',
+    },
+    {
+      title: 'Пост',
+      dataIndex: 'post',
+      key: 'post',
+    },
+    {
+      title: 'Сумма',
+      dataIndex: 'sum',
+      key: 'sum',
+    },
+  ]
+
+  return { fetchData, columns }
+}

src/features/settings/new-post/new-post.tsx

@@ -121,7 +121,7 @@ export const NewPost: FC<INewPostProps> = ({ open, handeOpen, item, refetch }) =
           />
         </Form.Item>
 
-        <Form.Item style={{ position: 'absolute', bottom: -10, left: 24 }}>
+        <Form.Item>
           <Button type='primary' htmlType='submit' loading={loading}>
             Сохранить
           </Button>

src/features/settings/new-user/new-user.tsx

@@ -122,7 +122,7 @@ export const NewUser: FC<INewUserProps> = ({ open, handleModal, item, refetch })
           />
         </Form.Item>
 
-        <Form.Item style={{ position: 'absolute', bottom: -10, left: 24 }}>
+        <Form.Item>
           <Button type='primary' htmlType='submit' loading={loading}>
             Сохранить
           </Button>

src/pages/dashboard/dashboard.tsx

@@ -0,0 +1,26 @@
+import { Table } from 'antd'
+import { usePaymentData } from 'entities/dashboard/payment-data'
+import { FC } from 'react'
+import { useAppSelector } from 'shared/redux/store'
+
+export const Dashboard: FC = () => {
+  const { fetchData, columns } = usePaymentData()
+  const payments = useAppSelector((state) => state.dashboard.payments)
+
+  console.log(payments)
+
+  return (
+    <>
+      <Table
+        columns={columns}
+        dataSource={[]}
+        bordered={true}
+        showHeader={true}
+        tableLayout={'fixed'}
+        pagination={{
+          total: 0,
+        }}
+      />
+    </>
+  )
+}

src/pages/dashboard/index.ts

@@ -0,0 +1,3 @@
+import { Dashboard } from 'pages/dashboard/dashboard'
+
+export default Dashboard

src/pages/main/main-page.tsx

@@ -2,11 +2,13 @@ import { Flex } from 'antd'
 import { Auth } from 'pages/auth'
 import React, { FC } from 'react'
 import { useCookies } from 'react-cookie'
+import { useMediaQuery } from 'react-responsive'
 import { Outlet } from 'react-router'
 import { Header } from 'widget/header'
 
 export const MainPage: FC = () => {
   const [{ token }] = useCookies(['token'])
+  const isMobile = useMediaQuery({ query: '(max-width: 768px )' })
 
   return (
     <>
@@ -28,13 +30,14 @@ export const MainPage: FC = () => {
         >
           <div
             style={{
+              display: isMobile ? 'none' : 'block',
               width: '60%',
               height: '100%',
               backgroundColor: '#6ebd74',
               backgroundImage: 'linear-gradient(45deg, #6ebd74 50%, #FFFB7D 100%)',
             }}
           />
-          <Flex style={{ width: '40%' }} align={'center'} justify={'center'}>
+          <Flex style={{ width: isMobile ? '100%' : '40%' }} align={'center'} justify={'center'}>
             <Auth />
           </Flex>
         </Flex>

src/pages/settings/ui/posts/posts.tsx

@@ -26,7 +26,7 @@ export const Posts: FC = () => {
             handlePostModal()
           }}
         >
-          Новый пост
+          +
         </Button>
       </Flex>
 

src/pages/settings/ui/users/users.tsx

@@ -26,7 +26,7 @@ export const Users: FC = () => {
             handleUserOpen()
           }}
         >
-          Новый пользователь
+          +
         </Button>
       </Flex>
 

src/shared/redux/dashboard/dashboard-slice.ts

@@ -0,0 +1,19 @@
+import { createSlice } from '@reduxjs/toolkit'
+
+const initialState = {
+  payments: { items: [], total: { count: 0 } },
+}
+
+export const DashboardSlice = createSlice({
+  name: 'dashboard',
+  initialState,
+  reducers: {
+    setPaymentsState: (state, action) => {
+      state.payments = action.payload
+    },
+  },
+})
+
+export const { setPaymentsState } = DashboardSlice.actions
+
+export default DashboardSlice.reducer

src/shared/redux/store/index.ts

@@ -1,4 +1,5 @@
 import { TypedUseSelectorHook, useDispatch, useSelector } from 'react-redux'
+import DashboardSlice from 'shared/redux/dashboard/dashboard-slice'
 import SettingsSlice from 'shared/redux/settings/settings-slice'
 
 import { configureStore } from '@reduxjs/toolkit'
@@ -7,6 +8,7 @@ import { setupListeners } from '@reduxjs/toolkit/query'
 const store = configureStore({
   reducer: {
     settings: SettingsSlice,
+    dashboard: DashboardSlice,
   },
   middleware: (getDefaultMiddleware) => getDefaultMiddleware({ serializableCheck: false }),
 })

src/widget/header/header.tsx

@@ -1,12 +1,14 @@
 import { Flex, Space } from 'antd'
 import { FC } from 'react'
 import { useCookies } from 'react-cookie'
+import { useMediaQuery } from 'react-responsive'
 import { useNavigate } from 'react-router'
 
 export const Header: FC = () => {
   const navigator = useNavigate()
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   const [token, update, removeToken] = useCookies(['token'])
+  const isMobile = useMediaQuery({ query: '(max-width: 768px )' })
 
   return (
     <Flex
@@ -17,6 +19,8 @@ export const Header: FC = () => {
         background: '#6ebd74',
         borderBottomLeftRadius: '8px',
         borderBottomRightRadius: '8px',
+        flexDirection: isMobile ? 'column' : 'row',
+        gap: isMobile ? '10px' : '0',
       }}
     >
       <div
@@ -34,6 +38,9 @@ export const Header: FC = () => {
       </div>
 
       <Flex gap={'15px'}>
+        <Space style={{ cursor: 'pointer', color: '#eeeeee' }} onClick={() => navigator('/')}>
+          Аналитика
+        </Space>
         <Space
           style={{ cursor: 'pointer', color: '#eeeeee' }}
           onClick={() => navigator('/settings')}