diff --git a/striker-ui/components/Files/FileEditForm.tsx b/striker-ui/components/Files/FileEditForm.tsx index 1945cd20..04d56a3f 100644 --- a/striker-ui/components/Files/FileEditForm.tsx +++ b/striker-ui/components/Files/FileEditForm.tsx @@ -6,6 +6,7 @@ import { } from 'react'; import { Box, Checkbox, checkboxClasses } from '@mui/material'; +import API_BASE_URL from '../../lib/consts/API_BASE_URL'; import { GREY, RED, TEXT } from '../../lib/consts/DEFAULT_THEME'; import FileInfo from './FileInfo'; @@ -88,10 +89,7 @@ const FileEditForm = ({ filesOverview }: FileEditProps): JSX.Element => { try { const data = await fetchJSON( - `${process.env.NEXT_PUBLIC_API_URL?.replace( - '/cgi-bin', - '/api', - )}/files/${fileOverview.fileUUID}`, + `${API_BASE_URL}/files/${fileOverview.fileUUID}`, ); fileToEdit.fileLocations = data.map( diff --git a/striker-ui/components/Files/Files.tsx b/striker-ui/components/Files/Files.tsx index aaa4dac7..33706296 100644 --- a/striker-ui/components/Files/Files.tsx +++ b/striker-ui/components/Files/Files.tsx @@ -8,12 +8,13 @@ import { import { styled } from '@mui/material/styles'; import EventEmitter from 'events'; -import { BLUE } from '../../lib/consts/DEFAULT_THEME'; +import API_BASE_URL from '../../lib/consts/API_BASE_URL'; +import { BLUE, PURPLE, RED } from '../../lib/consts/DEFAULT_THEME'; import ICON_BUTTON_STYLE from '../../lib/consts/ICON_BUTTON_STYLE'; import { Panel } from '../Panels'; import Spinner from '../Spinner'; -import { HeaderText } from '../Text'; +import { BodyText, HeaderText } from '../Text'; import FileList from './FileList'; import FileUploadForm from './FileUploadForm'; import FileEditForm from './FileEditForm'; @@ -22,8 +23,28 @@ import fetchJSON from '../../lib/fetchers/fetchJSON'; const StyledIconButton = styled(IconButton)(ICON_BUTTON_STYLE); +const MESSAGE_BOX_CLASS_PREFIX = 'MessageBox'; + +const MESSAGE_BOX_CLASSES = { + error: `${MESSAGE_BOX_CLASS_PREFIX}-error`, + warning: `${MESSAGE_BOX_CLASS_PREFIX}-warning`, +}; + +const MessageBox = styled(Box)({ + padding: '.2em .4em', + + [`&.${MESSAGE_BOX_CLASSES.error}`]: { + backgroundColor: RED, + }, + + [`&.${MESSAGE_BOX_CLASSES.warning}`]: { + backgroundColor: PURPLE, + }, +}); + const Files = (): JSX.Element => { const [rawFilesOverview, setRawFilesOverview] = useState([]); + const [fetchRawFilesError, setFetchRawFilesError] = useState(); const [ isLoadingRawFilesOverview, setIsLoadingRawFilesOverview, @@ -70,11 +91,13 @@ const Files = (): JSX.Element => { const fetchRawFilesOverview = async () => { setIsLoadingRawFilesOverview(true); - const data = await fetchJSON( - `${process.env.NEXT_PUBLIC_API_URL?.replace('/cgi-bin', '/api')}/files`, - ); + try { + const data = await fetchJSON(`${API_BASE_URL}/files`); + setRawFilesOverview(data); + } catch (fetchError) { + setFetchRawFilesError('Failed to get files due to a network issue.'); + } - setRawFilesOverview(data); setIsLoadingRawFilesOverview(false); }; @@ -109,6 +132,11 @@ const Files = (): JSX.Element => { {isEditMode ? : } + {fetchRawFilesError && ( + + + + )} { diff --git a/striker-ui/lib/consts/API_BASE_URL.ts b/striker-ui/lib/consts/API_BASE_URL.ts index a83d0409..c430fe06 100644 --- a/striker-ui/lib/consts/API_BASE_URL.ts +++ b/striker-ui/lib/consts/API_BASE_URL.ts @@ -1,7 +1,6 @@ -import IS_DEV_ENV from './IS_DEV_ENV'; - -const API_BASE_URL = IS_DEV_ENV - ? process.env.DEVELOPMENT_API_BASE_URL - : process.env.PRODUCTION_API_BASE_URL; +const API_BASE_URL = process.env.NEXT_PUBLIC_API_URL?.replace( + '/cgi-bin', + '/api', +); export default API_BASE_URL; diff --git a/striker-ui/lib/consts/IS_DEV_ENV.ts b/striker-ui/lib/consts/IS_DEV_ENV.ts deleted file mode 100644 index 22e14912..00000000 --- a/striker-ui/lib/consts/IS_DEV_ENV.ts +++ /dev/null @@ -1,3 +0,0 @@ -const IS_DEV_ENV: boolean = process.env.NODE_ENV !== 'production'; - -export default IS_DEV_ENV;