mirror of
https://github.com/hazemKrimi/crimson-quirks-ui.git
synced 2026-05-01 18:20:28 +00:00
Clear git cache
This commit is contained in:
Hazem Krimi
@@ -0,0 +1,294 @@
|
||||
import * as Yup from 'yup';
|
||||
import { useFormik } from 'formik';
|
||||
import { Navigate, useNavigate, useParams } from 'react-router';
|
||||
import { useLazyQuery, useMutation, useReactiveVar } from '@apollo/client';
|
||||
import React, { useEffect, useState } from 'react';
|
||||
import { roleVar } from '../../graphql/state';
|
||||
import {
|
||||
Box,
|
||||
Button,
|
||||
Text,
|
||||
SectionSelector,
|
||||
Input,
|
||||
Alert,
|
||||
TextArea,
|
||||
Spinner,
|
||||
Modal,
|
||||
} from '../../components';
|
||||
import { Wrapper } from './styles';
|
||||
import { ArrowLeft, Empty, General } from '../../assets';
|
||||
import {
|
||||
CategoryOutput,
|
||||
DeleteCategoryMutation,
|
||||
DeleteCategoryMutationVariables,
|
||||
GetCategoryByIdQuery,
|
||||
GetCategoryByIdQueryVariables,
|
||||
UpdateCategoryMutation,
|
||||
UpdateCategoryMutationVariables,
|
||||
} from '../../graphql/types';
|
||||
import {
|
||||
DELETE_CATEGORY,
|
||||
GET_CATEGORY_BY_ID,
|
||||
UPDATE_CATEGORY,
|
||||
} from '../../graphql/category.api';
|
||||
|
||||
const CategorySettings = () => {
|
||||
const navigate = useNavigate();
|
||||
const { id } = useParams<{ id: string }>();
|
||||
const role = useReactiveVar(roleVar);
|
||||
|
||||
const [error, setError] = useState<string>('');
|
||||
const [success, setSuccess] = useState<boolean>(false);
|
||||
const [category, setCategory] = useState<CategoryOutput>();
|
||||
|
||||
const [deleteCategoryModal, setDeleteCategoryModal] =
|
||||
useState<boolean>(false);
|
||||
|
||||
const [getCategory, { loading: categoryLoading, error: categoryError }] = useLazyQuery<
|
||||
GetCategoryByIdQuery,
|
||||
GetCategoryByIdQueryVariables
|
||||
>(GET_CATEGORY_BY_ID, {
|
||||
onCompleted({ getCategoryById }) {
|
||||
setCategory(getCategoryById);
|
||||
}
|
||||
});
|
||||
|
||||
const [updateCategory, { loading }] = useMutation<
|
||||
UpdateCategoryMutation,
|
||||
UpdateCategoryMutationVariables
|
||||
>(UPDATE_CATEGORY, {
|
||||
onCompleted({ updateCategory: data }) {
|
||||
setCategory(data);
|
||||
setSuccess(true);
|
||||
setTimeout(() => setSuccess(false), 3000);
|
||||
},
|
||||
onError({ graphQLErrors }) {
|
||||
setError(graphQLErrors[0]?.extensions?.info as string);
|
||||
setTimeout(() => setError(''), 3000);
|
||||
},
|
||||
});
|
||||
|
||||
const [deleteCategory] = useMutation<
|
||||
DeleteCategoryMutation,
|
||||
DeleteCategoryMutationVariables
|
||||
>(DELETE_CATEGORY, {
|
||||
onCompleted() {
|
||||
navigate('/category');
|
||||
},
|
||||
onError({ graphQLErrors }) {
|
||||
setError(graphQLErrors[0]?.extensions?.info as string);
|
||||
setTimeout(() => setError(''), 3000);
|
||||
},
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
getCategory({ variables: { id: id as string } });
|
||||
}, [id]);
|
||||
|
||||
const form = useFormik({
|
||||
initialValues: {
|
||||
name: category?.name || '',
|
||||
description: category?.description || '',
|
||||
imageName: category?.image.name || '',
|
||||
imageSource: category?.image.src || '',
|
||||
},
|
||||
validationSchema: Yup.object().shape({
|
||||
name: Yup.string().required('Name is required'),
|
||||
description: Yup.string().required('Description is required'),
|
||||
imageName: Yup.string().required('Image is required'),
|
||||
imageSource: Yup.string().required('Image is required'),
|
||||
}),
|
||||
onSubmit: ({ name, description, imageName, imageSource }) => {
|
||||
updateCategory({
|
||||
variables: {
|
||||
id: id as string,
|
||||
category: {
|
||||
name,
|
||||
description,
|
||||
image: { name: imageName, src: imageSource },
|
||||
},
|
||||
},
|
||||
});
|
||||
},
|
||||
enableReinitialize: true,
|
||||
});
|
||||
|
||||
if (role !== 'developer') return (
|
||||
<>
|
||||
{role === 'admin' && <Navigate to='/clients' />}
|
||||
{['client', 'productOwer'].includes(role as string) && <Navigate to='/project' />}
|
||||
</>
|
||||
)
|
||||
|
||||
if (categoryLoading) return (
|
||||
<Spinner fullScreen color={role || 'client'} />
|
||||
);
|
||||
|
||||
if (categoryError || !category) return (
|
||||
<Wrapper color={role}>
|
||||
<Box
|
||||
width='100%'
|
||||
height='100vh'
|
||||
display='grid'
|
||||
alignItems='center'
|
||||
justifyContent='center'
|
||||
>
|
||||
<Box>
|
||||
<Empty />
|
||||
</Box>
|
||||
</Box>
|
||||
</Wrapper>
|
||||
);
|
||||
|
||||
return (
|
||||
<Wrapper>
|
||||
{deleteCategoryModal && (
|
||||
<Modal
|
||||
color={role || 'client'}
|
||||
title='Delete Category'
|
||||
description='
|
||||
If you delete this category you cannot recover it.'
|
||||
onClose={() => setDeleteCategoryModal(false)}
|
||||
onConfirm={() => deleteCategory({ variables: { id: id as string } })}
|
||||
></Modal>
|
||||
)}
|
||||
<Box>
|
||||
<Button
|
||||
text='Back'
|
||||
color={role || 'client'}
|
||||
size='small'
|
||||
onClick={() => navigate(-1)}
|
||||
iconLeft={<ArrowLeft />}
|
||||
/>
|
||||
<Text variant='headline' weight='bold'>
|
||||
Update Category
|
||||
</Text>
|
||||
</Box>
|
||||
<Box
|
||||
display='grid'
|
||||
gridTemplateColumns='0.5fr 2fr'
|
||||
columnGap='25px'
|
||||
marginTop='1rem'
|
||||
>
|
||||
<Box display='grid' rowGap='0.5rem' gridTemplateRows='50px'>
|
||||
<SectionSelector
|
||||
icon={<General />}
|
||||
color={role || 'client'}
|
||||
text='General'
|
||||
selected
|
||||
/>
|
||||
</Box>
|
||||
<Box
|
||||
background='white'
|
||||
boxShadow='1px 1px 10px 0px rgba(50, 59, 105, 0.25)'
|
||||
borderRadius='10px'
|
||||
width='100%'
|
||||
padding='30px'
|
||||
>
|
||||
<Box
|
||||
display='grid'
|
||||
gridTemplateColumns='auto 1fr'
|
||||
columnGap='1rem'
|
||||
alignItems='center'
|
||||
marginBottom='50px'
|
||||
>
|
||||
<Text variant='subheader' weight='bold'>
|
||||
General
|
||||
</Text>
|
||||
{error && <Alert color='error' text={error} />}
|
||||
{success && (
|
||||
<Alert color='success' text='Category updated successfully' />
|
||||
)}
|
||||
</Box>
|
||||
<form onSubmit={form.handleSubmit}>
|
||||
<Box
|
||||
display='grid'
|
||||
gridTemplateColumns='auto'
|
||||
rowGap='0.5rem'
|
||||
position='relative'
|
||||
>
|
||||
<Input
|
||||
name='name'
|
||||
label='Name'
|
||||
color={role || 'client'}
|
||||
value={form.values.name}
|
||||
onChange={form.handleChange}
|
||||
onBlur={form.handleBlur}
|
||||
error={form.touched.name && !!form.errors.name}
|
||||
errorMessage={form.errors.name}
|
||||
/>
|
||||
<Input
|
||||
type='file'
|
||||
label='Image'
|
||||
color={role || 'client'}
|
||||
onChange={async (
|
||||
event: React.ChangeEvent<HTMLInputElement>
|
||||
) => {
|
||||
const formData = new FormData();
|
||||
|
||||
if (event.target.files && event.target.files[0]) {
|
||||
formData.append('file', event.target.files[0]);
|
||||
formData.append('upload_preset', 'xofll5kc');
|
||||
|
||||
form.setFieldValue('imageName', '');
|
||||
form.setFieldValue('imageSource', '');
|
||||
|
||||
const data = await (
|
||||
await fetch(`${import.meta.env.VITE_CLOUDINARY_URL}`, {
|
||||
method: 'POST',
|
||||
body: formData,
|
||||
})
|
||||
).json();
|
||||
|
||||
const filename = data.original_filename;
|
||||
const filesource = data.secure_url;
|
||||
|
||||
form.setFieldValue('imageName', filename);
|
||||
form.setFieldValue('imageSource', filesource);
|
||||
}
|
||||
}}
|
||||
error={
|
||||
form.touched.imageName &&
|
||||
(!!form.errors.imageName || !!form.errors.imageSource)
|
||||
}
|
||||
errorMessage={form.errors.imageName}
|
||||
/>
|
||||
<TextArea
|
||||
name='description'
|
||||
label='Description'
|
||||
color={role || 'client'}
|
||||
value={form.values.description}
|
||||
onChange={form.handleChange}
|
||||
onBlur={form.handleBlur}
|
||||
error={form.touched.description && !!form.errors.description}
|
||||
errorMessage={form.errors.description}
|
||||
/>
|
||||
<Box
|
||||
marginTop='0.5rem'
|
||||
display='flex'
|
||||
justifyContent='space-between'
|
||||
>
|
||||
<Button
|
||||
variant='text'
|
||||
color='error'
|
||||
text='Delete Category'
|
||||
onClick={() => setDeleteCategoryModal(true)}
|
||||
/>
|
||||
<Button
|
||||
variant='primary-action'
|
||||
color={role || 'client'}
|
||||
text='Save'
|
||||
type='submit'
|
||||
loading={loading}
|
||||
disabled={loading}
|
||||
/>
|
||||
</Box>
|
||||
</Box>
|
||||
</form>
|
||||
</Box>
|
||||
</Box>
|
||||
</Wrapper>
|
||||
);
|
||||
};
|
||||
|
||||
export default CategorySettings;
|
||||
Reference in New Issue
Block a user