bubble/educt-client
1
0
Fork 0
mirror of https://github.com/sergeyyarkov/educt-client.git synced 2026-10-11 18:29:15 +03:00
Code Issues Packages Projects Releases Wiki Activity

feat: create user modal layout setup & validator

Browse Source
This commit is contained in:
Sergey Yarkov 2021-09-19 23:03:56 +03:00
parent f8ab92b312
commit 7bb1141af2
7 changed files with 138 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
src/pages/profile/containers/UpdatePasswordContainer/UpdatePasswordForm/UpdatePasswordForm.tsx
View File

@ -1,4 +1,4 @@
import React, { useContext } from 'react';
import React, { useContext, useState } from 'react';
import { useRootStore } from 'hooks/useRootStore';
import { Box, Stack } from '@chakra-ui/layout';
import { FormControl, FormLabel, FormHelperText } from '@chakra-ui/form-control';
@ -10,6 +10,7 @@ import UpdatePasswordSchema from './UpdatePasswordForm.validator';
import { useToast } from '@chakra-ui/toast';
import { useErrorHandler } from 'react-error-boundary';
import { ProfilePageViewContext } from 'contexts';
import useIsMountedRef from 'hooks/useIsMountedRef';
type UpdatePasswordInputType = {
old_password: string;
@ -23,6 +24,8 @@ type UpdatePasswordInputType = {
const UpdatePasswordForm: React.FC = () => {
const { setStatusPageView } = useContext(ProfilePageViewContext);
const { userStore } = useRootStore();
const isMountedRef = useIsMountedRef();
const [loading, setLoading] = useState<boolean>(false);
const {
handleSubmit,
register,
@ -38,10 +41,11 @@ const UpdatePasswordForm: React.FC = () => {
const onSubmit: SubmitHandler<UpdatePasswordInputType> = async ({ old_password, new_password, confirm_password }) => {
try {
setLoading(true);
await userStore.updateCurrentUserPassword(old_password, new_password);
toast({ title: 'Password changed.', status: 'success' });
reset();
setStatusPageView('default');
setStatusPageView({ status: 'default' });
} catch (error: any) {
if (error.response) {
if (error.response.status === 401) {
@ -54,6 +58,10 @@ const UpdatePasswordForm: React.FC = () => {
} else {
handleError(error);
}
} finally {
if (isMountedRef.current) {
setLoading(false);
}
}
};
@ -102,7 +110,15 @@ const UpdatePasswordForm: React.FC = () => {
</FormHelperText>
</FormControl>
</Stack>
<Button colorScheme='blue' mt='4' type='submit' size='md' variant='outline' loadingText='Saving...'>
<Button
colorScheme='blue'
mt='4'
type='submit'
size='md'
variant='outline'
isLoading={loading}
loadingText='Saving...'
>
Change
</Button>
</form>

96
src/pages/users/components/CreateUserModal/CreateUserModal.tsx Normal file
View File

@ -0,0 +1,96 @@
import React from 'react';
import {
Modal,
ModalOverlay,
ModalContent,
ModalHeader,
ModalCloseButton,
ModalBody,
ModalFooter,
FormControl,
FormLabel,
FormHelperText,
Input,
Button,
Select,
Flex,
Text,
Divider,
} from '@chakra-ui/react';
import { AddIcon } from '@chakra-ui/icons';
import { MdSupervisorAccount } from 'react-icons/md';
/**
* Types
*/
import { UserRoleEnum } from 'enums';
/**
* Hooks
*/
import { useDisclosure } from '@chakra-ui/hooks';
const CreateUserModal: React.FC = () => {
const { isOpen, onOpen, onClose } = useDisclosure();
return (
<>
<Button onClick={onOpen} variant='outline' colorScheme='blue' leftIcon={<AddIcon />}>
Create new
</Button>
<Modal isOpen={isOpen} onClose={onClose}>
<ModalOverlay />
<ModalContent>
<ModalHeader>
<Flex alignItems='center'>
<MdSupervisorAccount />
<Text ml={2}>Create new user</Text>
</Flex>
</ModalHeader>
<ModalCloseButton />
<Divider />
<ModalBody pb={6}>
<FormControl>
<FormLabel>First name</FormLabel>
<Input placeholder='First name' />
</FormControl>
<FormControl mt={4}>
<FormLabel>Last name</FormLabel>
<Input placeholder='Last name' />
</FormControl>
<FormControl mt={4}>
<FormLabel>Login</FormLabel>
<Input placeholder='e.g student893' />
</FormControl>
<FormControl mt={4}>
<FormLabel>Email</FormLabel>
<Input placeholder='example@email.com' />
</FormControl>
<FormControl mt={4}>
<FormLabel>Role</FormLabel>
<Select w='full' mr='2'>
<option value={UserRoleEnum.STUDENT}>Student</option>
<option value={UserRoleEnum.TEACHER}>Teacher</option>
<option value={UserRoleEnum.ADMIN}>Administrator</option>
</Select>
</FormControl>
<FormControl mt={4}>
<FormLabel>Password</FormLabel>
<Input placeholder='******' />
<FormHelperText>Must be at least 6 characters</FormHelperText>
</FormControl>
</ModalBody>
<ModalFooter>
<Button variant='outline' mr={3} colorScheme='blue' leftIcon={<AddIcon />}>
Create
</Button>
<Button onClick={onClose}>Cancel</Button>
</ModalFooter>
</ModalContent>
</Modal>
</>
);
};
export default CreateUserModal;

13
src/pages/users/components/CreateUserModal/CreateUserModal.validator.ts Normal file
View File

@ -0,0 +1,13 @@
import yup from 'schema';
import { UserRoleEnum } from 'enums';
const CreateUserSchema = yup.object().shape({
first_name: yup.string().required('First field name is required'),
last_name: yup.string().required('Last field name is required'),
login: yup.string().required('Login field is required'),
email: yup.string().required('Email field is required'),
role: yup.mixed<UserRoleEnum>().required('Role field is required').oneOf(Object.values(UserRoleEnum)),
password: yup.string().required('Password field is required').min(6, 'Password must be at least 6 characters.'),
});
export default CreateUserSchema;

3
src/pages/users/components/CreateUserModal/index.ts Normal file
View File

@ -0,0 +1,3 @@
import CreateUserModal from './CreateUserModal';
export default CreateUserModal;

2
src/pages/users/components/UserList/UserList.tsx
View File

@ -73,7 +73,7 @@ const UserList: React.FC<UserListPropsType> = ({ users, pagination }) => {
</Stack>
)}
</Box>
<Flex mt='auto' mb='16' flexDirection={{ base: 'column', sm: 'column', md: 'row' }}>
<Flex mt='auto' mb='6rem' flexDirection={{ base: 'column', sm: 'column', md: 'row' }}>
<Box textAlign={{ base: 'center', sm: 'center', md: 'left' }} mb={{ base: '2', md: '0' }}>
Page <b>{pagination.current_page}</b> of {pagesCount}
</Box>

12
src/pages/users/index.tsx
View File

@ -1,7 +1,6 @@
import React, { useEffect, useState } from 'react';
import { observer } from 'mobx-react';
import { Box, Flex, Button, Heading, Text } from '@chakra-ui/react';
import { AddIcon } from '@chakra-ui/icons';
import { FaFileExcel } from 'react-icons/fa';
/**
@ -28,6 +27,7 @@ import { useLocation } from 'react-router';
* Context
*/
import { UsersPageContext } from 'contexts';
import CreateUserModal from './components/CreateUserModal';
/**
* Users Page
@ -46,23 +46,21 @@ const UsersPage: React.FC<IPageProps> = ({ title }) => {
return (
<UsersPageContext.Provider value={{ searchingRole, setSearchingRole, loading, setLoading, search, setSearch }}>
<Box h='full'>
<Box h='100%'>
<Heading as='h1'>User management</Heading>
<Text mt='2'>You can add or delete your users on this page.</Text>
{userStore.users !== null ? (
{userStore.users !== null && userStore.pagination !== undefined ? (
<Flex mt='5' flexDir='column' h='full'>
<Flex justifyContent='space-between' sx={{ gap: '10px' }} flexWrap='wrap'>
<UserSearch />
<Flex sx={{ gap: '10px' }}>
<Button variant='outline' color='blue.500' leftIcon={<AddIcon />}>
Create new
</Button>
<CreateUserModal />
<Button variant='outline' colorScheme='green' leftIcon={<FaFileExcel />}>
Import
</Button>
</Flex>
</Flex>
{userStore.pagination && <UserList users={userStore.users} pagination={userStore.pagination} />}
<UserList users={userStore.users} pagination={userStore.pagination} />
</Flex>
) : (
<LoadingPage />

2
src/services/UserService.ts
View File

@ -18,7 +18,7 @@ export default class UserService {
}
public async fetchAll(params?: FetchUsersParamsType): Promise<IApiRespose<IUser[]>> {
const { page = 1, limit = 1, role, search } = params || {};
const { page = 1, limit = 6, role, search } = params || {};
const result = await this.api.get('/v1/users', {
params: {
page,