diff --git a/src/APIFunctions/PermissionRequest.js b/src/APIFunctions/PermissionRequest.js new file mode 100644 index 000000000..85adcc35a --- /dev/null +++ b/src/APIFunctions/PermissionRequest.js @@ -0,0 +1,59 @@ +import { ApiResponse } from './ApiResponses'; +import { BASE_API_URL } from '../Enums'; + +export async function getPermissionRequest(type, token) { + const status = new ApiResponse(); + const url = new URL('/api/PermissionRequest/get', BASE_API_URL); + url.searchParams.append('type', type); + + try { + const res = await fetch(url.toString(), { + headers: { + Authorization: `Bearer ${token}`, + }, + }); + + if (res.ok) { + const data = await res.json(); + status.responseData = data; + } else if (res.status === 404) { + status.responseData = null; + } else { + status.error = true; + } + } catch (err) { + status.responseData = err; + status.error = true; + } + + return status; +} + +export async function createPermissionRequest(type, token) { + const status = new ApiResponse(); + const url = new URL('/api/PermissionRequest/create', BASE_API_URL); + + try { + const res = await fetch(url.toString(), { + method: 'POST', + headers: { + 'Content-Type': 'application/json', + Authorization: `Bearer ${token}`, + }, + body: JSON.stringify({ type }), + }); + + if (res.ok) { + const data = await res.json(); + status.responseData = data; + } else { + status.error = true; + } + } catch (err) { + status.responseData = err; + status.error = true; + } + + return status; +} + diff --git a/src/Pages/LedSign/LedSign.js b/src/Pages/LedSign/LedSign.js index a0cd1dfe7..1b9b1baed 100644 --- a/src/Pages/LedSign/LedSign.js +++ b/src/Pages/LedSign/LedSign.js @@ -1,6 +1,8 @@ import React, { useState, useEffect } from 'react'; import { healthCheck, updateSignText } from '../../APIFunctions/LedSign'; +import { getPermissionRequest, createPermissionRequest } from '../../APIFunctions/PermissionRequest'; import { useSCE } from '../../Components/context/SceContext'; +import { membershipState } from '../../Enums'; import './ledsign.css'; @@ -20,6 +22,9 @@ function LedSign() { const [awaitingSignResponse, setAwaitingSignResponse] = useState(false); const [requestSuccessful, setRequestSuccessful] = useState(); const [stopRequestSuccesful, setStopRequestSuccesful] = useState(); + const [permissionRequest, setPermissionRequest] = useState(null); + const [checkingPermission, setCheckingPermission] = useState(false); + const [requestingPermission, setRequestingPermission] = useState(false); const inputArray = [ { title: 'Sign Text:', @@ -211,11 +216,24 @@ function LedSign() { } setLoading(false); } + + async function checkPermission() { + if (user.accessLevel < membershipState.OFFICER) { + setCheckingPermission(true); + const result = await getPermissionRequest('LED_SIGN', user.token); + if (!result.error && result.responseData) { + setPermissionRequest(result.responseData); + } + setCheckingPermission(false); + } + } + checkSignHealth(); + checkPermission(); // eslint-disable-next-line }, []) - if (loading) { + if (loading || checkingPermission) { return ( @@ -231,6 +249,60 @@ function LedSign() { ); } + async function handleRequestAccess() { + setRequestingPermission(true); + const result = await createPermissionRequest('LED_SIGN', user.token); + if (!result.error) { + setPermissionRequest(result.responseData); + } + setRequestingPermission(false); + } + + function renderPermissionRequestUI() { + if (user.accessLevel >= membershipState.OFFICER) { + return null; + } + + if (checkingPermission) { + return ( +
+

Checking access...

+
+ ); + } + + if (permissionRequest) { + return ( +
+

+ You requested access to the sign on {getFormattedTime(permissionRequest.createdAt)}. +

+

+ Drop a message in Discord to speed up the process! +

+
+ ); + } + + return ( +
+

+ You need permission to access the LED sign. +

+ +

+ Drop a message in Discord to speed up the process +

+
+ ); + } + function getAnimationDuration() { // the scrollSpeed input can be can be anywhere from 0 to 10. the // lower the duration is, the faster the text scrolls. we divide by @@ -239,80 +311,87 @@ function LedSign() { return (11 - scrollSpeed); } + const hasAccess = user.accessLevel >= membershipState.OFFICER; + return (
-
-
-
-
- -
-
-
-
-
-

- {/* + {!hasAccess && ( +
+ {renderPermissionRequestUI()} +
+ )} + {hasAccess && ( +
+
+
+
+ +
+
+
+
+
+

+ {/* we add a padding of 28 characters of whitespace so the entire message scrolls to the end of the preview before repeating. the preview has a width of about 28 characters. */} - {text.padEnd(28, ' ')} -

+ {text.padEnd(28, ' ')} +

+
+
-
-
- {maybeShowExpirationDate()} - {getExpirationButtonOrInput()} - { - inputArray.map(({ - id, - title, - type, - value, - onChange, - ...rest - }) => ( -
-
- - + {maybeShowExpirationDate()} + {getExpirationButtonOrInput()} + { + inputArray.map(({ + id, + title, + type, + value, + onChange, + ...rest + }) => ( +
+
+ + +
-
- )) - } + )) + } - - + - {renderRequestStatus()} + + {renderRequestStatus()} +
- -
- + )} ); } diff --git a/src/Routes.js b/src/Routes.js index 379435419..b225442a9 100644 --- a/src/Routes.js +++ b/src/Routes.js @@ -105,7 +105,7 @@ export const officerOrAdminRoutes = [ Component: LedSign, path: '/led-sign', pageName: 'LED Sign', - allowedIf: allowedIf.OFFICER_OR_ADMIN, + allowedIf: allowedIf.MEMBER, redirect: '/', inAdminNavbar: true },