62 lines
1.9 KiB
JavaScript
62 lines
1.9 KiB
JavaScript
import { createPortal } from 'react-dom';
|
|
import { useParams } from 'react-router-dom';
|
|
import { useAuth } from '../app/context/AuthProvider';
|
|
import RealtimeTable from '../components/RealtimeTable';
|
|
import { RealtimeProvider } from '../components/RealtimeTable/contexts/RealtimeContext';
|
|
import { BackButton } from '../components/common/Buttons/BackButton';
|
|
import { NameTask, TaskInfoContainer } from '../components/common/SwitchFormTask/SwitchFormTask.style';
|
|
import { DIRECTION_TRANSLATE, SHEET_NAME } from '../constants/constants';
|
|
|
|
const TableInfo = ({ formId, sheetName, direction, isProject = false }) => {
|
|
const path = (isProject ? '/project/' : '/task/') + formId;
|
|
const tableName = SHEET_NAME[sheetName] || sheetName;
|
|
const directionName = DIRECTION_TRANSLATE[direction] || direction;
|
|
const portalContent = (
|
|
<TaskInfoContainer>
|
|
<BackButton to={path} />
|
|
{sheetName && (
|
|
<NameTask>
|
|
{tableName}
|
|
{directionName ? ` — ${directionName}` : ''}
|
|
</NameTask>
|
|
)}
|
|
</TaskInfoContainer>
|
|
);
|
|
|
|
const targetElement = document.getElementById('TableInfo');
|
|
|
|
if (targetElement) {
|
|
return createPortal(portalContent, targetElement);
|
|
}
|
|
};
|
|
|
|
export default function NewTablePage() {
|
|
const { formId, formType, sheetName, direction, year } = useParams();
|
|
const { user } = useAuth();
|
|
const isProject = formType === 'PROJECT';
|
|
const normalizedDirection = direction === 'null' ? null : direction;
|
|
|
|
return (
|
|
<>
|
|
{formId && <TableInfo formId={formId} sheetName={sheetName} direction={normalizedDirection} isProject={isProject} />}
|
|
{user && (
|
|
<RealtimeProvider
|
|
formId={formId}
|
|
sheetName={sheetName}
|
|
userId={user.id}
|
|
direction={normalizedDirection}
|
|
isProject={isProject}
|
|
year={year}>
|
|
<RealtimeTable
|
|
formType={formType}
|
|
formId={formId}
|
|
sheetName={sheetName}
|
|
direction={normalizedDirection}
|
|
year={year}
|
|
/>
|
|
</RealtimeProvider>
|
|
)}
|
|
</>
|
|
);
|
|
}
|