Skip to content

Commit

Permalink
feat(profile): fetch user data and display in 'profile'
Browse files Browse the repository at this point in the history
  • Loading branch information
@danilych
danilych committed Feb 10, 2024
1 parent 3314f88 commit c713ebd
Show file tree
Hide file tree
Showing 4 changed files with 114 additions and 65 deletions.
3 changes: 3 additions & 0 deletions app/redux/slices/user.ts
View file
Original file line number Diff line number Diff line change
@@ -1,11 +1,14 @@
import { createSlice, createAsyncThunk } from '@reduxjs/toolkit'
import moment from 'moment'
import instance from '~/axios'

export const fetchUser = createAsyncThunk(
'user/fetchUser',
async (params: any) => {
const { data } = await instance.post('/api/user/getUserProfile', params)

data.dateOfBirth = moment(data.dateOfBirth).format('YYYY-MM-DD')

return data
}
)
Expand Down
170 changes: 105 additions & 65 deletions app/routes/my-account._index.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,9 +1,12 @@
import { ThunkDispatch } from '@reduxjs/toolkit'
import { type V2_MetaFunction } from '@remix-run/node'
import { EmptyAvatar } from 'assets/images'
import { Textarea } from 'flowbite-react'
import { useEffect } from 'react'
import { useSelector } from 'react-redux'
import { Spinner, Textarea } from 'flowbite-react'
import moment from 'moment'

Check failure on line 5 in app/routes/my-account._index.tsx

View workflow job for this annotation

GitHub Actions / pipeline (21.x) 

'moment' is defined but never used

Check failure on line 5 in app/routes/my-account._index.tsx

View workflow job for this annotation

GitHub Actions / pipeline (21.x) 

'moment' is defined but never used
import { useEffect, useState } from 'react'
import { useDispatch, useSelector } from 'react-redux'
import { selectIsAuth } from '~/redux/slices/auth'
import { fetchUser } from '~/redux/slices/user'
import {
Divider,
Header3,
Expand All @@ -21,109 +24,146 @@ export const meta: V2_MetaFunction = () => {
export default function MyAccount() {
const isAuth = useSelector(selectIsAuth)

const dispatch = useDispatch<ThunkDispatch<any, any, any>>()

// @ts-ignore
const { user } = useSelector(state => state.user)

console.log(user)

const [isUserLoading, setIsUserLoading] = useState(true)

useEffect(() => {
if (!isAuth) {
// navigate('/')
}

const userId = window.localStorage.getItem('userId')
let requestData = new FormData()
requestData.append('id', userId as string)

dispatch(fetchUser(requestData))
}, [])

Check warning on line 46 in app/routes/my-account._index.tsx

View workflow job for this annotation

GitHub Actions / pipeline (21.x) 

React Hook useEffect has missing dependencies: 'dispatch' and 'isAuth'. Either include them or remove the dependency array

useEffect(() => {

Check warning on line 48 in app/routes/my-account._index.tsx

View workflow job for this annotation

GitHub Actions / pipeline (21.x) 

React Hook useEffect contains a call to 'setIsUserLoading'. Without a list of dependencies, this can lead to an infinite chain of updates. To fix this, pass [user.status] as a second argument to the useEffect Hook
if (user.status === 'loaded') setIsUserLoading(false)

if (user.status === 'loading') setIsUserLoading(true)
})

return (
<div className="bg-white mt-[68px]">
<AccountMenu page="profile" />

<div className="w-[1500px] mt-6 mx-auto">
<Header3>Налаштування профілю</Header3>
{isUserLoading ? (
<div className="w-full h-[570px]">
<Spinner
className="absolute top-1/2 left-1/2 mt-[-50px] ml-[-50px]"
aria-label="Default status example"
size="lg"
/>
</div>
) : (
<div className="w-[1500px] mt-6 mx-auto">
<Header3>Налаштування профілю</Header3>

<Header4 className="mt-4">Аватар</Header4>
<Header4 className="mt-4">Аватар</Header4>

<Text className="mt-2">
Формати: jpg, png, gif. Максимальний розмір: 1 МБ.{' '}
</Text>
<Text className="mt-2">
Формати: jpg, png, gif. Максимальний розмір: 1 МБ.{' '}
</Text>

<div className="mt-6 mb-9 flex flex-row gap-6">
<img src={EmptyAvatar} alt="" />
<div className="mt-6 mb-9 flex flex-row gap-6">
<img src={EmptyAvatar} alt="" />

<TransparentButton className="my-auto w-[310px] text-[#454BE9]">
Завантажити фото
</TransparentButton>
</div>
<div className="w-[310px] my-auto">
<TransparentButton className="text-[#454BE9]">
Завантажити фото
</TransparentButton>
</div>
</div>

<Divider className="bg-[#B5B7F6]" />
<Divider className="bg-[#B5B7F6]" />

<Header4 className="mt-9">Особиста інформація</Header4>
<Header4 className="mt-9">Особиста інформація</Header4>

<Text className="mt-2">
Ваше облікове ім’я, яке відображається на сайті.
</Text>
<Text className="mt-2">
Ваше облікове ім’я, яке відображається на сайті.
</Text>

<div className="flex flex-row gap-6">
<div className="mt-6 flex flex-col gap-3">
<p className="text-[#1f1f1f] ml-4 text-base font-normal">Ім’я</p>
<div className="flex flex-row gap-6">
<div className="mt-6 flex flex-col gap-3">
<p className="text-[#1f1f1f] ml-4 text-base font-normal">Ім’я</p>

<div className="w-[230px]">
<RoundedOutput>Марія</RoundedOutput>
<div className="w-[230px]">
<RoundedOutput>{user.data.firstName}</RoundedOutput>
</div>
</div>
</div>

<div className="mt-6 flex flex-col gap-3">
<p className="text-[#1f1f1f] ml-4 text-base font-normal">
Прізвище
</p>
<div className="mt-6 flex flex-col gap-3">
<p className="text-[#1f1f1f] ml-4 text-base font-normal">
Прізвище
</p>

<div className="w-[230px]">
<RoundedOutput>Струц</RoundedOutput>
<div className="w-[230px]">
<RoundedOutput>{user.data.lastName}</RoundedOutput>
</div>
</div>
</div>

<div className="mt-6 flex flex-col gap-3">
<p className="text-[#1f1f1f] ml-4 text-base font-normal">Нікнейм</p>
<div className="mt-6 flex flex-col gap-3">
<p className="text-[#1f1f1f] ml-4 text-base font-normal">
Нікнейм
</p>

<div className="w-[230px]">
<RoundedOutput>Maricka123</RoundedOutput>
<div className="w-[230px]">
<RoundedOutput>{user.data.name}</RoundedOutput>
</div>
</div>
</div>
</div>

<div className="flex flex-row gap-6 mt-3 mb-9">
<div className="mt-6 flex flex-col gap-3">
<p className="text-[#1f1f1f] ml-4 text-base font-normal">
Номер телефону
</p>
<div className="flex flex-row gap-6 mt-3 mb-9">
<div className="mt-6 flex flex-col gap-3">
<p className="text-[#1f1f1f] ml-4 text-base font-normal">
Електронна пошта
</p>

<div className="w-[230px]">
<RoundedOutput>+38</RoundedOutput>
<div className="w-[230px]">
<RoundedOutput>{user.data.email}</RoundedOutput>
</div>
</div>
</div>

<div className="mt-6 flex flex-col gap-3">
<p className="text-[#1f1f1f] ml-4 text-base font-normal">
Дата народження
</p>
<div className="mt-6 flex flex-col gap-3">
<p className="text-[#1f1f1f] ml-4 text-base font-normal">
Дата народження
</p>

<div className="w-[230px]">
<RoundedOutput>18.01.1999</RoundedOutput>
<div className="w-[230px]">
<RoundedOutput>{user.data.dateOfBirth}</RoundedOutput>
</div>
</div>
</div>

<div className="mt-6 flex flex-col gap-3">
<p className="text-[#1f1f1f] ml-4 text-base font-normal">Пароль</p>
<div className="mt-6 flex flex-col gap-3">
<p className="text-[#1f1f1f] ml-4 text-base font-normal">
Пароль
</p>

<div className="w-[230px]">
<RoundedOutput> ************</RoundedOutput>
<div className="w-[230px]">
<RoundedOutput> ************</RoundedOutput>
</div>
</div>
</div>
</div>

<Divider className="bg-[#B5B7F6]" />
<Divider className="bg-[#B5B7F6]" />

<Header4 className="mt-9">Декілька слів про себе </Header4>
<Header4 className="mt-9">Декілька слів про себе </Header4>

<Text className="mt-2">
Розкажіть учням про свою освіту, або про досвід роботи у галузі.
</Text>
<Text className="mt-2">
Розкажіть учням про свою освіту, або про досвід роботи у галузі.
</Text>

<Textarea className='w-full h-[250px] bg-[#F6F6F6] mt-6'></Textarea>
</div>
<Textarea className="w-full h-[250px] bg-[#F6F6F6] mt-6">{user.data.aboutMe}</Textarea>
</div>
)}
</div>
)
}
1 change: 1 addition & 0 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,6 +34,7 @@
"flowbite-react": "^0.7.2",
"husky": "^8.0.3",
"isbot": "^3.6.8",
"moment": "^2.30.1",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-hook-form": "^7.49.3",
Expand Down
5 changes: 5 additions & 0 deletions yarn.lock
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7780,6 +7780,11 @@ modern-ahocorasick@^1.0.0:
resolved "https://registry.yarnpkg.com/modern-ahocorasick/-/modern-ahocorasick-1.0.1.tgz#dec373444f51b5458ac05216a8ec376e126dd283"
integrity sha512-yoe+JbhTClckZ67b2itRtistFKf8yPYelHLc7e5xAwtNAXxM6wJTUx2C7QeVSJFDzKT7bCIFyBVybPMKvmB9AA==

moment@^2.30.1:
version "2.30.1"
resolved "https://registry.yarnpkg.com/moment/-/moment-2.30.1.tgz#f8c91c07b7a786e30c59926df530b4eac96974ae"
integrity sha512-uEmtNhbDOrWPFS+hdjFCBfy9f2YoyzRpwcl+DqpC6taX21FzsTLQVbMV/W7PzNSX6x/bhC1zA3c2UQ5NzH6how==

morgan@^1.10.0:
version "1.10.0"
resolved "https://registry.yarnpkg.com/morgan/-/morgan-1.10.0.tgz#091778abc1fc47cd3509824653dae1faab6b17d7"
Expand Down

0 comments on commit c713ebd

Please sign in to comment.