fix(striker-ui): move ContainedButton out of Files

main
Tsu-ba-me 3 years ago
parent 18652e1e36
commit 9ec5b4398c
  1. 6
      striker-ui/components/ContainedButton.tsx
  2. 50
      striker-ui/components/Files/FileEditForm.tsx
  3. 23
      striker-ui/components/Files/FileUploadForm.tsx

@ -1,6 +1,6 @@
import { Button, ButtonProps, styled } from '@mui/material'; import { Button, ButtonProps, styled } from '@mui/material';
import { BLACK, GREY, TEXT } from '../../lib/consts/DEFAULT_THEME'; import { BLACK, GREY, TEXT } from '../lib/consts/DEFAULT_THEME';
const StyledButton = styled(Button)({ const StyledButton = styled(Button)({
backgroundColor: TEXT, backgroundColor: TEXT,
@ -12,7 +12,7 @@ const StyledButton = styled(Button)({
}, },
}); });
const StyledContainedButton = ({ const ContainedButton = ({
children, children,
onClick, onClick,
sx, sx,
@ -23,4 +23,4 @@ const StyledContainedButton = ({
</StyledButton> </StyledButton>
); );
export default StyledContainedButton; export default ContainedButton;

@ -9,11 +9,12 @@ import { Box, Checkbox, checkboxClasses } from '@mui/material';
import API_BASE_URL from '../../lib/consts/API_BASE_URL'; import API_BASE_URL from '../../lib/consts/API_BASE_URL';
import { GREY, RED, TEXT } from '../../lib/consts/DEFAULT_THEME'; import { GREY, RED, TEXT } from '../../lib/consts/DEFAULT_THEME';
import ContainedButton from '../ContainedButton';
import FileInfo from './FileInfo'; import FileInfo from './FileInfo';
import Spinner from '../Spinner';
import fetchJSON from '../../lib/fetchers/fetchJSON'; import fetchJSON from '../../lib/fetchers/fetchJSON';
import mainAxiosInstance from '../../lib/singletons/mainAxiosInstance'; import mainAxiosInstance from '../../lib/singletons/mainAxiosInstance';
import StyledContainedButton from './StyledContainedButton';
import Spinner from '../Spinner';
type FileEditProps = { type FileEditProps = {
filesOverview: FileOverviewMetadata[]; filesOverview: FileOverviewMetadata[];
@ -26,25 +27,24 @@ type FileToEdit = FileDetailMetadata & {
const FileEditForm = ({ filesOverview }: FileEditProps): JSX.Element => { const FileEditForm = ({ filesOverview }: FileEditProps): JSX.Element => {
const [filesToEdit, setFilesToEdit] = useState<FileToEdit[]>([]); const [filesToEdit, setFilesToEdit] = useState<FileToEdit[]>([]);
const [isLoadingFilesToEdit, setIsLoadingFilesToEdit] = useState<boolean>( const [isLoadingFilesToEdit, setIsLoadingFilesToEdit] =
false, useState<boolean>(false);
);
const generateFileInfoChangeHandler =
const generateFileInfoChangeHandler = ( (fileIndex: number): FileInfoChangeHandler =>
fileIndex: number, (inputValues, { fileLocationIndex } = {}) => {
): FileInfoChangeHandler => (inputValues, { fileLocationIndex } = {}) => { if (fileLocationIndex) {
if (fileLocationIndex) { filesToEdit[fileIndex].fileLocations[fileLocationIndex] = {
filesToEdit[fileIndex].fileLocations[fileLocationIndex] = { ...filesToEdit[fileIndex].fileLocations[fileLocationIndex],
...filesToEdit[fileIndex].fileLocations[fileLocationIndex], ...inputValues,
...inputValues, };
}; } else {
} else { filesToEdit[fileIndex] = {
filesToEdit[fileIndex] = { ...filesToEdit[fileIndex],
...filesToEdit[fileIndex], ...inputValues,
...inputValues, };
}; }
} };
};
const editFiles: FormEventHandler<HTMLFormElement> = (event) => { const editFiles: FormEventHandler<HTMLFormElement> = (event) => {
event.preventDefault(); event.preventDefault();
@ -181,7 +181,7 @@ const FileEditForm = ({ filesOverview }: FileEditProps): JSX.Element => {
}, },
}} }}
> >
<StyledContainedButton <ContainedButton
onClick={purgeFiles} onClick={purgeFiles}
sx={{ sx={{
backgroundColor: RED, backgroundColor: RED,
@ -190,10 +190,8 @@ const FileEditForm = ({ filesOverview }: FileEditProps): JSX.Element => {
}} }}
> >
Purge Purge
</StyledContainedButton> </ContainedButton>
<StyledContainedButton type="submit"> <ContainedButton type="submit">Update</ContainedButton>
Update
</StyledContainedButton>
</Box> </Box>
)} )}
</Box> </Box>

@ -1,3 +1,4 @@
import EventEmitter from 'events';
import { import {
ChangeEventHandler, ChangeEventHandler,
FormEventHandler, FormEventHandler,
@ -6,15 +7,15 @@ import {
useState, useState,
} from 'react'; } from 'react';
import { Box, Input, InputLabel } from '@mui/material'; import { Box, Input, InputLabel } from '@mui/material';
import EventEmitter from 'events';
import { UPLOAD_FILE_TYPES } from '../../lib/consts/UPLOAD_FILE_TYPES'; import { UPLOAD_FILE_TYPES } from '../../lib/consts/UPLOAD_FILE_TYPES';
import FileInfo from './FileInfo';
import { ProgressBar } from '../Bars'; import { ProgressBar } from '../Bars';
import ContainedButton from '../ContainedButton';
import FileInfo from './FileInfo';
import { BodyText } from '../Text'; import { BodyText } from '../Text';
import mainAxiosInstance from '../../lib/singletons/mainAxiosInstance'; import mainAxiosInstance from '../../lib/singletons/mainAxiosInstance';
import StyledContainedButton from './StyledContainedButton';
type FileUploadFormProps = { type FileUploadFormProps = {
onFileUploadComplete?: () => void; onFileUploadComplete?: () => void;
@ -87,14 +88,14 @@ const FileUploadForm = (
} }
}; };
const generateFileInfoOnChangeHandler = ( const generateFileInfoOnChangeHandler =
fileIndex: number, (fileIndex: number): FileInfoChangeHandler =>
): FileInfoChangeHandler => (inputValues) => { (inputValues) => {
selectedFiles[fileIndex] = { selectedFiles[fileIndex] = {
...selectedFiles[fileIndex], ...selectedFiles[fileIndex],
...inputValues, ...inputValues,
};
}; };
};
const uploadFiles: FormEventHandler<HTMLFormElement> = (event) => { const uploadFiles: FormEventHandler<HTMLFormElement> = (event) => {
event.preventDefault(); event.preventDefault();
@ -222,7 +223,7 @@ const FileUploadForm = (
justifyContent: 'flex-end', justifyContent: 'flex-end',
}} }}
> >
<StyledContainedButton type="submit">Upload</StyledContainedButton> <ContainedButton type="submit">Upload</ContainedButton>
</Box> </Box>
)} )}
</Box> </Box>

Loading…
Cancel
Save