Refactor library editing

This commit is contained in:
IRBorisov 2023-08-09 17:19:12 +03:00
parent cd96ad2274
commit db4ba706fb
4 changed files with 198 additions and 202 deletions

View File

@ -1,17 +1,19 @@
import { createContext, useCallback, useContext, useEffect, useState } from 'react'; import { createContext, useCallback, useContext, useEffect, useState } from 'react';
import { ErrorInfo } from '../components/BackendError'; import { ErrorInfo } from '../components/BackendError';
import { getLibrary } from '../utils/backendAPI'; import { DataCallback, getLibrary, postNewRSForm } from '../utils/backendAPI';
import { ILibraryFilter, IRSFormMeta, matchRSFormMeta } from '../utils/models'; import { ILibraryFilter, IRSFormCreateData, IRSFormMeta, matchRSFormMeta } from '../utils/models';
interface ILibraryContext { interface ILibraryContext {
items: IRSFormMeta[] items: IRSFormMeta[]
loading: boolean loading: boolean
processing: boolean
error: ErrorInfo error: ErrorInfo
setError: (error: ErrorInfo) => void setError: (error: ErrorInfo) => void
reload: () => void reload: () => void
filter: (params: ILibraryFilter) => IRSFormMeta[] filter: (params: ILibraryFilter) => IRSFormMeta[]
createSchema: (data: IRSFormCreateData, callback?: DataCallback<IRSFormMeta>) => void
} }
const LibraryContext = createContext<ILibraryContext | null>(null) const LibraryContext = createContext<ILibraryContext | null>(null)
@ -30,9 +32,10 @@ interface LibraryStateProps {
} }
export const LibraryState = ({ children }: LibraryStateProps) => { export const LibraryState = ({ children }: LibraryStateProps) => {
const [items, setItems] = useState<IRSFormMeta[]>([]) const [ items, setItems ] = useState<IRSFormMeta[]>([])
const [loading, setLoading] = useState(false); const [ loading, setLoading ] = useState(false);
const [error, setError] = useState<ErrorInfo>(undefined); const [ processing, setProcessing ] = useState(false);
const [ error, setError ] = useState<ErrorInfo>(undefined);
const filter = useCallback( const filter = useCallback(
(params: ILibraryFilter) => { (params: ILibraryFilter) => {
@ -63,12 +66,27 @@ export const LibraryState = ({ children }: LibraryStateProps) => {
useEffect(() => { useEffect(() => {
reload(); reload();
}, [reload]) }, [reload]);
const createSchema = useCallback(
(data: IRSFormCreateData, callback?: DataCallback<IRSFormMeta>) => {
setError(undefined);
postNewRSForm({
data: data,
showError: true,
setLoading: setProcessing,
onError: error => { setError(error); },
onSuccess: newSchema => {
reload();
if (callback) callback(newSchema);
}
});
}, [reload]);
return ( return (
<LibraryContext.Provider value={{ <LibraryContext.Provider value={{
items, loading, error, setError, items, loading, processing, error, setError,
reload, filter reload, filter, createSchema
}}> }}>
{ children } { children }
</LibraryContext.Provider> </LibraryContext.Provider>

View File

@ -5,14 +5,17 @@ import { type ErrorInfo } from '../components/BackendError'
import { useRSFormDetails } from '../hooks/useRSFormDetails' import { useRSFormDetails } from '../hooks/useRSFormDetails'
import { import {
type DataCallback, deleteRSForm, getTRSFile, type DataCallback, deleteRSForm, getTRSFile,
patchConstituenta, patchDeleteConstituenta, patchMoveConstituenta, patchResetAliases, patchConstituenta, patchDeleteConstituenta,
patchRSForm, patchMoveConstituenta, patchResetAliases, patchRSForm,
patchUploadTRS, postClaimRSForm, postCloneRSForm,postNewConstituenta} from '../utils/backendAPI' patchUploadTRS, postClaimRSForm, postCloneRSForm, postNewConstituenta
} from '../utils/backendAPI'
import { import {
IConstituentaList, IConstituentaMeta, ICstCreateData, IConstituentaList, IConstituentaMeta, ICstCreateData,
ICstMovetoData, ICstUpdateData, IRSForm, IRSFormCreateData, IRSFormData, IRSFormMeta, IRSFormUpdateData, IRSFormUploadData ICstMovetoData, ICstUpdateData, IRSForm, IRSFormCreateData,
IRSFormData, IRSFormMeta, IRSFormUpdateData, IRSFormUploadData
} from '../utils/models' } from '../utils/models'
import { useAuth } from './AuthContext' import { useAuth } from './AuthContext'
import { useLibrary } from './LibraryContext'
interface IRSFormContext { interface IRSFormContext {
schema?: IRSForm schema?: IRSForm
@ -63,15 +66,16 @@ interface RSFormStateProps {
} }
export const RSFormState = ({ schemaID, children }: RSFormStateProps) => { export const RSFormState = ({ schemaID, children }: RSFormStateProps) => {
const { user } = useAuth() const { user } = useAuth();
const { schema, reload, error, setError, setSchema, loading } = useRSFormDetails({ target: schemaID }) const { schema, reload, error, setError, setSchema, loading } = useRSFormDetails({ target: schemaID });
const [processing, setProcessing] = useState(false) const [ processing, setProcessing ] = useState(false);
const library = useLibrary();
const [isForceAdmin, setIsForceAdmin] = useState(false) const [ isForceAdmin, setIsForceAdmin ] = useState(false);
const [isReadonly, setIsReadonly] = useState(false) const [ isReadonly, setIsReadonly ] = useState(false);
const isOwned = useMemo(() => user?.id === schema?.owner || false, [user, schema?.owner]) const isOwned = useMemo(() => user?.id === schema?.owner || false, [user, schema?.owner]);
const isClaimable = useMemo(() => user?.id !== schema?.owner || false, [user, schema?.owner]) const isClaimable = useMemo(() => user?.id !== schema?.owner || false, [user, schema?.owner]);
const isEditable = useMemo( const isEditable = useMemo(
() => { () => {
return ( return (
@ -83,181 +87,185 @@ export const RSFormState = ({ schemaID, children }: RSFormStateProps) => {
const isTracking = useMemo( const isTracking = useMemo(
() => { () => {
return true return true
}, []) }, []);
const toggleTracking = useCallback( const toggleTracking = useCallback(
() => { () => {
toast.info('Отслеживание в разработке...') toast.info('Отслеживание в разработке...')
}, []) }, []);
const update = useCallback( const update = useCallback(
(data: IRSFormUpdateData, callback?: DataCallback<IRSFormMeta>) => { (data: IRSFormUpdateData, callback?: DataCallback<IRSFormMeta>) => {
if (!schema) { if (!schema) {
return; return;
}
setError(undefined)
patchRSForm(schemaID, {
data: data,
showError: true,
setLoading: setProcessing,
onError: error => setError(error),
onSuccess: newData => {
setSchema(Object.assign(schema, newData));
if (callback) callback(newData);
} }
setError(undefined) });
patchRSForm(schemaID, { }, [schemaID, setError, setSchema, schema]);
data: data,
showError: true,
setLoading: setProcessing,
onError: error => { setError(error) },
onSuccess: newData => {
setSchema(Object.assign(schema, newData));
if (callback) callback(newData);
}
});
}, [schemaID, setError, setSchema, schema])
const upload = useCallback( const upload = useCallback(
(data: IRSFormUploadData, callback?: () => void) => { (data: IRSFormUploadData, callback?: () => void) => {
if (!schema) { if (!schema) {
return; return;
}
setError(undefined)
patchUploadTRS(schemaID, {
data: data,
showError: true,
setLoading: setProcessing,
onError: error => setError(error),
onSuccess: newData => {
setSchema(newData);
if (callback) callback();
} }
setError(undefined) });
patchUploadTRS(schemaID, { }, [schemaID, setError, setSchema, schema]);
data: data,
showError: true,
setLoading: setProcessing,
onError: error => { setError(error) },
onSuccess: newData => {
setSchema(newData);
if (callback) callback();
}
});
}, [schemaID, setError, setSchema, schema])
const destroy = useCallback( const destroy = useCallback(
(callback?: () => void) => { (callback?: () => void) => {
setError(undefined) setError(undefined)
deleteRSForm(schemaID, { deleteRSForm(schemaID, {
showError: true, showError: true,
setLoading: setProcessing, setLoading: setProcessing,
onError: error => { setError(error) }, onError: error => setError(error),
onSuccess: () => { onSuccess: () => {
setSchema(undefined); setSchema(undefined);
if (callback) callback(); library.reload();
} if (callback) callback();
}); }
}, [schemaID, setError, setSchema]) });
}, [schemaID, setError, setSchema, library]);
const claim = useCallback( const claim = useCallback(
(callback?: DataCallback<IRSFormMeta>) => { (callback?: DataCallback<IRSFormMeta>) => {
if (!schema || !user) { if (!schema || !user) {
return; return;
}
setError(undefined)
postClaimRSForm(schemaID, {
showError: true,
setLoading: setProcessing,
onError: error => setError(error),
onSuccess: newData => {
setSchema(Object.assign(schema, newData));
if (callback) callback(newData);
} }
setError(undefined) });
postClaimRSForm(schemaID, { }, [schemaID, setError, schema, user, setSchema]);
showError: true,
setLoading: setProcessing,
onError: error => { setError(error) },
onSuccess: newData => {
setSchema(Object.assign(schema, newData));
if (callback) callback(newData);
}
});
}, [schemaID, setError, schema, user, setSchema])
const clone = useCallback( const clone = useCallback(
(data: IRSFormCreateData, callback: DataCallback<IRSFormData>) => { (data: IRSFormCreateData, callback: DataCallback<IRSFormData>) => {
if (!schema || !user) { if (!schema || !user) {
return; return;
}
setError(undefined)
postCloneRSForm(schemaID, {
data: data,
showError: true,
setLoading: setProcessing,
onError: error => setError(error),
onSuccess: newSchema => {
library.reload();
if (callback) callback(newSchema);
} }
setError(undefined) });
postCloneRSForm(schemaID, { }, [schemaID, setError, schema, user, library]);
data: data,
showError: true,
setLoading: setProcessing,
onError: error => { setError(error) },
onSuccess: callback
});
}, [schemaID, setError, schema, user])
const resetAliases = useCallback( const resetAliases = useCallback(
(callback?: () => void) => { (callback?: () => void) => {
if (!schema || !user) { if (!schema || !user) {
return; return;
}
setError(undefined)
patchResetAliases(schemaID, {
showError: true,
setLoading: setProcessing,
onError: error => { setError(error) },
onSuccess: newData => {
setSchema(Object.assign(schema, newData));
if (callback) callback();
} }
setError(undefined) });
patchResetAliases(schemaID, { }, [schemaID, setError, schema, user, setSchema]);
showError: true,
setLoading: setProcessing,
onError: error => { setError(error) },
onSuccess: newData => {
setSchema(Object.assign(schema, newData));
if (callback) callback();
}
});
}, [schemaID, setError, schema, user, setSchema])
const download = useCallback( const download = useCallback(
(callback: DataCallback<Blob>) => { (callback: DataCallback<Blob>) => {
setError(undefined) setError(undefined)
getTRSFile(schemaID, { getTRSFile(schemaID, {
showError: true, showError: true,
setLoading: setProcessing, setLoading: setProcessing,
onError: error => { setError(error) }, onError: error => { setError(error) },
onSuccess: callback onSuccess: callback
}); });
}, [schemaID, setError]) }, [schemaID, setError]);
const cstCreate = useCallback( const cstCreate = useCallback(
(data: ICstCreateData, callback?: DataCallback<IConstituentaMeta>) => { (data: ICstCreateData, callback?: DataCallback<IConstituentaMeta>) => {
setError(undefined) setError(undefined)
postNewConstituenta(schemaID, { postNewConstituenta(schemaID, {
data: data, data: data,
showError: true, showError: true,
setLoading: setProcessing, setLoading: setProcessing,
onError: error => { setError(error) }, onError: error => { setError(error) },
onSuccess: newData => { onSuccess: newData => {
setSchema(newData.schema); setSchema(newData.schema);
if (callback) callback(newData.new_cst); if (callback) callback(newData.new_cst);
} }
}); });
}, [schemaID, setError, setSchema]); }, [schemaID, setError, setSchema]);
const cstDelete = useCallback( const cstDelete = useCallback(
(data: IConstituentaList, callback?: () => void) => { (data: IConstituentaList, callback?: () => void) => {
setError(undefined) setError(undefined)
patchDeleteConstituenta(schemaID, { patchDeleteConstituenta(schemaID, {
data: data, data: data,
showError: true, showError: true,
setLoading: setProcessing, setLoading: setProcessing,
onError: error => { setError(error) }, onError: error => { setError(error) },
onSuccess: newData => { onSuccess: newData => {
setSchema(newData); setSchema(newData);
if (callback) callback(); if (callback) callback();
} }
}); });
}, [schemaID, setError, setSchema]); }, [schemaID, setError, setSchema]);
const cstUpdate = useCallback( const cstUpdate = useCallback(
(data: ICstUpdateData, callback?: DataCallback<IConstituentaMeta>) => { (data: ICstUpdateData, callback?: DataCallback<IConstituentaMeta>) => {
setError(undefined) setError(undefined)
patchConstituenta(String(data.id), { patchConstituenta(String(data.id), {
data: data, data: data,
showError: true, showError: true,
setLoading: setProcessing, setLoading: setProcessing,
onError: error => { setError(error) }, onError: error => { setError(error) },
onSuccess: newData => { onSuccess: newData => {
reload(setProcessing, () => { if (callback != null) callback(newData); }) reload(setProcessing, () => { if (callback != null) callback(newData); })
} }
}); });
}, [setError, reload]) }, [setError, reload]);
const cstMoveTo = useCallback( const cstMoveTo = useCallback(
(data: ICstMovetoData, callback?: () => void) => { (data: ICstMovetoData, callback?: () => void) => {
setError(undefined) setError(undefined)
patchMoveConstituenta(schemaID, { patchMoveConstituenta(schemaID, {
data: data, data: data,
showError: true, showError: true,
setLoading: setProcessing, setLoading: setProcessing,
onError: error => { setError(error) }, onError: error => { setError(error) },
onSuccess: newData => { onSuccess: newData => {
setSchema(newData); setSchema(newData);
if (callback) callback(); if (callback) callback();
} }
}); });
}, [schemaID, setError, setSchema]); }, [schemaID, setError, setSchema]);
return ( return (
<RSFormContext.Provider value={{ <RSFormContext.Provider value={{
@ -273,5 +281,5 @@ export const RSFormState = ({ schemaID, children }: RSFormStateProps) => {
}}> }}>
{ children } { children }
</RSFormContext.Provider> </RSFormContext.Provider>
) );
} }

View File

@ -1,25 +0,0 @@
import { useState } from 'react'
import { type ErrorInfo } from '../components/BackendError';
import { DataCallback, postNewRSForm } from '../utils/backendAPI';
import { IRSFormCreateData, IRSFormMeta } from '../utils/models';
function useNewRSForm() {
const [loading, setLoading] = useState(false);
const [error, setError] = useState<ErrorInfo>(undefined);
function createSchema(data: IRSFormCreateData, onSuccess: DataCallback<IRSFormMeta>) {
setError(undefined);
postNewRSForm({
data: data,
showError: true,
setLoading: setLoading,
onError: error => { setError(error); },
onSuccess: onSuccess
});
}
return { createSchema, error, setError, loading };
}
export default useNewRSForm;

View File

@ -11,13 +11,11 @@ import TextArea from '../components/Common/TextArea';
import TextInput from '../components/Common/TextInput'; import TextInput from '../components/Common/TextInput';
import RequireAuth from '../components/RequireAuth'; import RequireAuth from '../components/RequireAuth';
import { useLibrary } from '../context/LibraryContext'; import { useLibrary } from '../context/LibraryContext';
import useNewRSForm from '../hooks/useNewRSForm'; import { IRSFormCreateData } from '../utils/models';
import { IRSFormCreateData, IRSFormMeta } from '../utils/models';
function CreateRSFormPage() { function CreateRSFormPage() {
const navigate = useNavigate(); const navigate = useNavigate();
const { createSchema, error, setError, loading } = useNewRSForm(); const { createSchema, error, setError, processing } = useLibrary();
const library = useLibrary();
const [title, setTitle] = useState(''); const [title, setTitle] = useState('');
const [alias, setAlias] = useState(''); const [alias, setAlias] = useState('');
@ -37,15 +35,9 @@ function CreateRSFormPage() {
} }
} }
function onSuccess(newSchema: IRSFormMeta) {
toast.success('Схема успешно создана');
library.reload();
navigate(`/rsforms/${newSchema.id}`);
}
function handleSubmit(event: React.FormEvent<HTMLFormElement>) { function handleSubmit(event: React.FormEvent<HTMLFormElement>) {
event.preventDefault(); event.preventDefault();
if (loading) { if (processing) {
return; return;
} }
const data: IRSFormCreateData = { const data: IRSFormCreateData = {
@ -56,7 +48,10 @@ function CreateRSFormPage() {
file: file, file: file,
fileName: file?.name fileName: file?.name
}; };
createSchema(data, onSuccess); createSchema(data, (newSchema) => {
toast.success('Схема успешно создана');
navigate(`/rsforms/${newSchema.id}`);
});
} }
return ( return (
@ -95,7 +90,7 @@ function CreateRSFormPage() {
<div className='flex items-center justify-center py-2 mt-4'> <div className='flex items-center justify-center py-2 mt-4'>
<SubmitButton <SubmitButton
text='Создать схему' text='Создать схему'
loading={loading} loading={processing}
/> />
</div> </div>
{ error && <BackendError error={error} />} { error && <BackendError error={error} />}