54 lines
1.6 KiB
JavaScript
54 lines
1.6 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 { SHEET_NAME } from '../constants/constants';
|
|
|
|
const TableInfo = ({ formId, sheetName, isProject = false }) => {
|
|
const path = (isProject ? `/project/` : '/task/') + formId;
|
|
const portalContent = (
|
|
<TaskInfoContainer>
|
|
<BackButton to={path} />
|
|
{sheetName && <NameTask>{SHEET_NAME[sheetName] || sheetName}</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';
|
|
|
|
return (
|
|
<>
|
|
{formId && <TableInfo formId={formId} sheetName={sheetName} isProject={isProject} />}
|
|
{user && (
|
|
<RealtimeProvider
|
|
formId={formId}
|
|
sheetName={sheetName}
|
|
userId={user.id}
|
|
direction={direction === 'null' ? null : direction}
|
|
isProject={isProject}
|
|
year={year}>
|
|
<RealtimeTable
|
|
formType={formType}
|
|
formId={formId}
|
|
sheetName={sheetName}
|
|
direction={direction === 'null' ? null : direction}
|
|
year={year}
|
|
/>
|
|
</RealtimeProvider>
|
|
)}
|
|
</>
|
|
);
|
|
}
|