@@ -111,10 +104,8 @@ function Token(props) {
-
-
- {notificationButton}
+
diff --git a/simplq/src/components/pages/Admin/Token.stories.jsx b/simplq/src/components/pages/Admin/Token.stories.jsx
new file mode 100644
index 00000000..3fce17ef
--- /dev/null
+++ b/simplq/src/components/pages/Admin/Token.stories.jsx
@@ -0,0 +1,65 @@
+import React from 'react';
+
+import { queue } from '__mocks__/data';
+import Token from './Token';
+
+const queueToken = queue.tokens[0];
+export default {
+ component: Token,
+ title: 'Token',
+ args: {
+ token: queueToken,
+ removeTokenHandler: () => {},
+ },
+};
+
+const Template = (args) => (
+ /* eslint-disable-next-line react/jsx-props-no-spreading */
+
-
+function TokenList() {
+ const tokens = useSelector(selectTokens);
+ const ListContent = () =>
+ tokens.length === 0 ? (
+ Your queue has been created and is currently empty. Waiting for people to join...
+ ) : (
+ tokens.map((token) =>
-
Your queue has been created and is currently empty. Waiting for people to join...
-
- {props.tokens.map((token) => (
-
- );
- }
-
- return listContent;
+
+ );
}
export default TokenList;
diff --git a/simplq/src/components/pages/Admin/TokenList.stories.jsx b/simplq/src/components/pages/Admin/TokenList.stories.jsx
new file mode 100644
index 00000000..fa6a3c5c
--- /dev/null
+++ b/simplq/src/components/pages/Admin/TokenList.stories.jsx
@@ -0,0 +1,26 @@
+import React from 'react';
+
+import { queue } from '__mocks__/data';
+import TokenList from './TokenList';
+
+export default {
+ component: TokenList,
+ title: 'TokenList',
+};
+
+const Template = (args) => (
+ /* eslint-disable-next-line react/jsx-props-no-spreading */
+
-
-
-
-
-
-
-
-
-
-
-
-
- {isAuthenticated ? null : (
-
- )}
-
-
-
@@ -22,8 +23,8 @@ export default () => {
-
-
+
(
+ /* eslint-disable-next-line react/jsx-props-no-spreading */
+
- {myQueues.length === 0
+ {queues.length === 0
? "Looks like you don't have any active queues. Start by creating one..."
: 'What would you like to do today? Here are your active queues:'}
- {myQueues.map((queue) => {
+ {queues.map((queue) => {
const handler = () => history.push(`/queue/${queue.queueId}`);
return (
(
+ /* eslint-disable-next-line react/jsx-props-no-spreading */
+
+);
+
+export const Empty = Template.bind({});
+
+export const NotEmpty = Template.bind({});
+NotEmpty.parameters = {
+ state: {
+ queues: [
+ {
+ queueId: '49891e84-63a5-4c7b-9200-0c1e65393572',
+ queueName: 'QueueI',
+ queueCreationTimestamp: '2021-02-14T04:28:59.776+0000',
+ },
+ {
+ queueId: 'cef39fc3-f947-450b-ad69-0e18dc406653',
+ queueName: 'QueueII',
+ queueCreationTimestamp: '2021-02-14T08:47:29.988+0000',
+ },
+ {
+ queueId: '7121848f-023b-482a-9b9c-f7e7cd7b8904',
+ queueName: 'QueueIII',
+ queueCreationTimestamp: '2021-02-14T11:50:09.218+0000',
+ },
+ ],
+ },
+};
diff --git a/simplq/src/components/pages/Home/StaticInfos.jsx b/simplq/src/components/pages/Home/StaticInfos.jsx
index b1827b10..715bbaad 100644
--- a/simplq/src/components/pages/Home/StaticInfos.jsx
+++ b/simplq/src/components/pages/Home/StaticInfos.jsx
@@ -1,7 +1,7 @@
import React from 'react';
-import styles from './home.module.scss';
-import StandardButton from '../../common/Button';
-import { smoothScrollToHomePageTop } from '../../../utils/scrollingOperations';
+import StandardButton from 'components/common/Button';
+import { smoothScrollToHomePageTop } from 'utils/scrollingOperations';
+import styles from './Home.module.scss';
export const BenefitsInfo = () => (
@@ -63,7 +63,7 @@ export const HowToCreate = () => (
-
+
state.actionStatus['joinQueue']);
+ const prevActionStatus = useRef();
+
+ // TODO: check if this works when admin page is refactored to use actions
+ useEffect(() => {
+ // Reset form only after successful action
+ if (prevActionStatus.current === 'pending' && actionStatus === 'fulfilled') {
+ setContact('');
+ setName('');
+ }
+
+ // Set previous action status for next render
+ prevActionStatus.current = actionStatus;
+ }, [actionStatus]);
function handleNameChange(e) {
if (name.match('^[A-Za-z0-9 ]*$')) {
@@ -59,23 +74,7 @@ export function JoinQueueForm(props) {
return;
}
- setAddingInProgress(true);
-
- props.joinQueueHandler(name, contact).then(() => {
- setName('');
- setContact('');
- setAddingInProgress(false);
- });
- };
-
- const CreateTokenButton = () => {
- if (addingInProgress)
- return (
-
-
- );
- return {props.buttonText} ;
+ joinQueueHandler(name, contact);
};
return (
@@ -104,7 +103,9 @@ export function JoinQueueForm(props) {
onChange={handleContactChange}
onKeyDown={(e) => handleEnterPress(e, handleClick)}
/>
-
+ {buttonText}
+
);
}
diff --git a/simplq/src/components/pages/Join/JoinForm.stories.jsx b/simplq/src/components/pages/Join/JoinForm.stories.jsx
new file mode 100644
index 00000000..bc0d6f22
--- /dev/null
+++ b/simplq/src/components/pages/Join/JoinForm.stories.jsx
@@ -0,0 +1,27 @@
+import React from 'react';
+
+import JoinForm from './JoinForm';
+
+export default {
+ component: JoinForm,
+ title: 'JoinForm',
+ args: {
+ buttonText: 'Add To Queue',
+ },
+};
+
+const Template = (args) => (
+ /* eslint-disable-next-line */
+
+
+
+
+
+
+ Please enter your contact details to join this queue
+
+
+
-
-
-
-
-
Please enter your contact details to join this queue
-
-
-
-
- );
-};
diff --git a/simplq/src/components/pages/Status/StatusContainer.jsx b/simplq/src/components/pages/Status/StatusContainer.jsx
deleted file mode 100644
index 4e831978..00000000
--- a/simplq/src/components/pages/Status/StatusContainer.jsx
+++ /dev/null
@@ -1,35 +0,0 @@
-import React from 'react';
-import LoadingIndicator from '../../common/LoadingIndicator';
-import Button from '../../common/Button';
-import styles from './status.module.scss';
-
-export default (props) => {
- let status = null;
- if (props.updateInProgress) {
- status = null;
- } else if (props.tokenStatus === 'REMOVED') {
- status = You have been removed from the queue, have a nice day
;
- } else if (props.tokenStatus === 'NOTIFIED') {
- status = Your turn is up, please proceed to the counter
;
- } else if (props.aheadCount === 0) {
- status = There is no one ahead of you. Please wait to be notified by the queue manager.
;
- } else {
- /* eslint-disable react/jsx-one-expression-per-line */
- status = (
- <>
- Hello {props.name},
- People waiting in front of you:
- {props.aheadCount}
- Please wait for your turn. You will be notified here.
-
- Refresh status
-
-
- );
- }
-
- if (!status) return {status}
;
-};
diff --git a/simplq/src/components/pages/Status/TokenNumber.jsx b/simplq/src/components/pages/Status/TokenNumber.jsx
deleted file mode 100644
index 5d57b993..00000000
--- a/simplq/src/components/pages/Status/TokenNumber.jsx
+++ /dev/null
@@ -1,15 +0,0 @@
-import React from 'react';
-import styles from './status.module.scss';
-
-export default (props) => (
-
-
-
- Token No
-
-
-
- {props.tokenNumber}
-
-
-
-
- );
-}
-export default QueueStatus;
diff --git a/simplq/src/components/pages/TermsOfService/index.jsx b/simplq/src/components/pages/TermsOfService/index.jsx
index bc560f7d..98647bb2 100644
--- a/simplq/src/components/pages/TermsOfService/index.jsx
+++ b/simplq/src/components/pages/TermsOfService/index.jsx
@@ -1,6 +1,6 @@
import React from 'react';
+import ClickableLogo from 'components/common/ClickableLogo';
import styles from './termsOfService.module.scss';
-import ClickableLogo from '../../common/ClickableLogo';
function TermsOfService() {
return (
@@ -13,7 +13,7 @@ function TermsOfService() {
Your privacy is important to us. It is SimplQ's policy to respect your privacy
regarding any information we may collect from you across our website,
- http://simplq.me
+ https://simplq.me
, and other sites we own and operate.
@@ -50,7 +50,7 @@ function TermsOfService() {
1. Terms
By accessing the website at
- http://simplq.me
+ https://simplq.me
, you are agreeing to be bound by these terms of service, all applicable laws and
regulations, and agree that you are responsible for compliance with any applicable local
diff --git a/simplq/src/components/pages/TermsOfService/termsOfService.module.scss b/simplq/src/components/pages/TermsOfService/termsOfService.module.scss
index 776f2f61..35d26942 100644
--- a/simplq/src/components/pages/TermsOfService/termsOfService.module.scss
+++ b/simplq/src/components/pages/TermsOfService/termsOfService.module.scss
@@ -1,4 +1,4 @@
-@import '../../common.scss';
+@import 'components/common.scss';
.header-bar {
@include background-color();
diff --git a/simplq/src/components/pages/Status/ContactAdmin.jsx b/simplq/src/components/pages/TokenStatus/ContactAdmin.jsx
similarity index 77%
rename from simplq/src/components/pages/Status/ContactAdmin.jsx
rename to simplq/src/components/pages/TokenStatus/ContactAdmin.jsx
index 3b07e7ec..df4e9c67 100644
--- a/simplq/src/components/pages/Status/ContactAdmin.jsx
+++ b/simplq/src/components/pages/TokenStatus/ContactAdmin.jsx
@@ -1,6 +1,6 @@
import React from 'react';
import ChatIcon from '@material-ui/icons/Chat';
-import SidePanelItem from '../../common/SidePanel/SidePanelItem';
+import SidePanelItem from 'components/common/SidePanel/SidePanelItem';
export default () => {
return (
diff --git a/simplq/src/components/pages/TokenStatus/LeaveQueue.jsx b/simplq/src/components/pages/TokenStatus/LeaveQueue.jsx
new file mode 100644
index 00000000..ba332f0b
--- /dev/null
+++ b/simplq/src/components/pages/TokenStatus/LeaveQueue.jsx
@@ -0,0 +1,26 @@
+import React from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import CloseIcon from '@material-ui/icons/Close';
+import { useDeleteToken } from 'store/asyncActions';
+import { selectToken } from 'store/token';
+import SidePanelItem from 'components/common/SidePanel/SidePanelItem';
+
+export default () => {
+ const dispatch = useDispatch();
+ const deleteToken = useDeleteToken();
+ const token = useSelector(selectToken);
+
+ const onDeleteClick = () => {
+ dispatch(deleteToken({ tokenId: token.tokenId, goHome: true }));
+ };
+
+ // TODO: The item should be disabled if token is already deteled
+ return (
+
+
+ );
+};
diff --git a/simplq/src/components/pages/TokenStatus/TokenNumber.jsx b/simplq/src/components/pages/TokenStatus/TokenNumber.jsx
new file mode 100644
index 00000000..7561b320
--- /dev/null
+++ b/simplq/src/components/pages/TokenStatus/TokenNumber.jsx
@@ -0,0 +1,24 @@
+import Loading from 'components/common/Loading/Loading';
+import React from 'react';
+import { useSelector } from 'react-redux';
+import { selectToken } from 'store/token';
+import styles from './status.module.scss';
+
+export default () => {
+ const token = useSelector(selectToken);
+
+ return (
+
+
+
+ Token No
+
+
+
+
+ {token.tokenNumber}
+
+
+
-
);
diff --git a/simplq/src/components/pages/TokenStatus/TokenSidePanel.stories.jsx b/simplq/src/components/pages/TokenStatus/TokenSidePanel.stories.jsx
new file mode 100644
index 00000000..dbf06a49
--- /dev/null
+++ b/simplq/src/components/pages/TokenStatus/TokenSidePanel.stories.jsx
@@ -0,0 +1,20 @@
+import React from 'react';
+import { createdToken as token } from '__mocks__/data';
+import TokenSidePanel from './TokenSidePanel';
+
+export default {
+ component: TokenSidePanel,
+ title: 'TokenSidePanel',
+};
+
+const Template = (args) => (
+ /* eslint-disable-next-line react/jsx-props-no-spreading */
+ You have been removed from the queue, have a nice day
;
+ } else if (token.tokenStatus === 'NOTIFIED') {
+ status = Your turn is up, please proceed to the counter
;
+ } else if (token.aheadCount === 0) {
+ status = There is no one ahead of you. Please wait to be notified by the queue manager.
;
+ } else {
+ /* eslint-disable react/jsx-one-expression-per-line */
+ status = (
+ <>
+ Hello {token.name},
+ People waiting in front of you:
+ {token.aheadCount}
+ Please wait for your turn. You will be notified here.
+
+ Refresh status
+
+
+ );
+ }
+
+ return (
+
+ {status}
+
+ );
+};
diff --git a/simplq/src/components/pages/TokenStatus/TokenStatus.stories.jsx b/simplq/src/components/pages/TokenStatus/TokenStatus.stories.jsx
new file mode 100644
index 00000000..57a50c3c
--- /dev/null
+++ b/simplq/src/components/pages/TokenStatus/TokenStatus.stories.jsx
@@ -0,0 +1,40 @@
+import React from 'react';
+import { createdToken as token } from '__mocks__/data';
+import TokenStatus from './TokenStatus';
+
+export default {
+ component: TokenStatus,
+ title: 'TokenStatus',
+};
+
+const Template = (args) => (
+ /* eslint-disable-next-line react/jsx-props-no-spreading */
+
+
+
+ );
+}
+
+export default TokenStatusPage;
diff --git a/simplq/src/components/pages/TokenStatus/TokenStatusPage.stories.jsx b/simplq/src/components/pages/TokenStatus/TokenStatusPage.stories.jsx
new file mode 100644
index 00000000..9f8b3531
--- /dev/null
+++ b/simplq/src/components/pages/TokenStatus/TokenStatusPage.stories.jsx
@@ -0,0 +1,41 @@
+import React from 'react';
+import * as Tokens from './TokenStatus.stories';
+import TokenStatusPage from './TokenStatusPage';
+
+export default {
+ component: TokenStatusPage,
+ title: 'TokenStatusPage',
+ args: {
+ match: {
+ params: {
+ tokenId: 'xxx',
+ },
+ },
+ },
+};
+
+const Template = (args) => (
+ /* eslint-disable-next-line react/jsx-props-no-spreading */
+
diff --git a/simplq/src/services/notification.js b/simplq/src/services/notification.js
index 6306b8b3..99701053 100644
--- a/simplq/src/services/notification.js
+++ b/simplq/src/services/notification.js
@@ -2,8 +2,8 @@ import {
setErrorPopupMessage,
setInfoPopupMessage,
setNotificationPermission,
-} from '../store/appSlice';
-import { store } from '../store';
+} from 'store/appSlice';
+import { store } from 'store';
const hasPromiseBasedNotificationSupport = async () => {
try {
diff --git a/simplq/src/store/actionStatus/actionStatusSlice.js b/simplq/src/store/actionStatus/actionStatusSlice.js
new file mode 100644
index 00000000..f0a92d0a
--- /dev/null
+++ b/simplq/src/store/actionStatus/actionStatusSlice.js
@@ -0,0 +1,35 @@
+/* eslint-disable no-param-reassign */
+
+import { createSlice } from '@reduxjs/toolkit';
+
+/**
+ * Async Action Status slice
+ *
+ * Keeps the state of all dispatched async actions
+ * where action type has form `[actionName]/action`
+ * (e.g, `deleteQueue/action`). The state can be
+ * pending, fulfilled, or rejected. Use useSelector to get
+ * desired action state.
+ *
+ * @example
+ *
+ * import { useSelector } from 'react-redux';
+ *
+ * const actionStatus = useSelector((state) => state['deleteQueue'])
+ */
+const actionStatusSlice = createSlice({
+ name: 'actionStatus',
+ initialState: {},
+ reducers: {},
+ extraReducers: (builder) => {
+ builder.addMatcher(
+ (action) => action.type.includes('action'),
+ (state, action) => {
+ const [name, , status] = action.type.split('/');
+ state[name] = status;
+ }
+ );
+ },
+});
+
+export default actionStatusSlice.reducer;
diff --git a/simplq/src/store/actionStatus/index.js b/simplq/src/store/actionStatus/index.js
new file mode 100644
index 00000000..820548ab
--- /dev/null
+++ b/simplq/src/store/actionStatus/index.js
@@ -0,0 +1,3 @@
+import reducer from './actionStatusSlice';
+
+export default reducer;
diff --git a/simplq/src/store/appSlice.js b/simplq/src/store/appSlice.js
index 651d2576..89920419 100644
--- a/simplq/src/store/appSlice.js
+++ b/simplq/src/store/appSlice.js
@@ -1,12 +1,17 @@
/* eslint-disable no-param-reassign */
import { createSlice } from '@reduxjs/toolkit';
+import { createQueue, deleteQueue, joinQueue } from 'store/asyncActions';
+
+function isRejectedAction(action) {
+ return action.type.endsWith('rejected');
+}
const appSlice = createSlice({
name: 'appSlice',
initialState: {
errorText: '',
infoText: '',
- notificationPermission: null, // This state value is initilised by the notification service.
+ notificationPermission: null, // This state value is initialised by the notification service.
},
reducers: {
setErrorPopupMessage: (state, action) => {
@@ -19,6 +24,31 @@ const appSlice = createSlice({
state.notificationPermission = action.payload;
},
},
+ extraReducers: (builder) => {
+ builder
+ .addCase(joinQueue.pending, (state) => {
+ state.infoText = `Adding to queue...`;
+ })
+ .addCase(joinQueue.fulfilled, (state, action) => {
+ state.infoText = `Added ${action.payload.name}`;
+ })
+ .addCase(createQueue.pending, (state) => {
+ state.infoText = `Creating new queue...`;
+ })
+ .addCase(createQueue.fulfilled, (state) => {
+ state.infoText = `Your queue is ready to use.`;
+ })
+ .addCase(deleteQueue.pending, (state) => {
+ state.infoText = `Deleting queue...`;
+ })
+ .addCase(deleteQueue.fulfilled, (state, action) => {
+ state.infoText = `Deleted ${action.payload.queueName}`;
+ })
+ .addMatcher(isRejectedAction, (state, action) => {
+ // All failed network calls are handled here
+ state.errorText = action.error.message;
+ });
+ },
});
export const {
diff --git a/simplq/src/store/asyncActions/createQueue.js b/simplq/src/store/asyncActions/createQueue.js
new file mode 100644
index 00000000..8d873196
--- /dev/null
+++ b/simplq/src/store/asyncActions/createQueue.js
@@ -0,0 +1,31 @@
+import { createAsyncThunk } from '@reduxjs/toolkit';
+import { useHistory } from 'react-router-dom';
+import { useMakeAuthedRequest } from 'api/auth';
+import * as RequestFactory from 'api/requestFactory';
+
+const typePrefix = 'createQueue/action';
+
+/**
+ * A hook to access the createQueue async action creator.
+ *
+ * @returns — createQueue async action creator
+ */
+const useCreateQueue = () => {
+ const makeAuthedRequest = useMakeAuthedRequest();
+ const history = useHistory();
+
+ const createQueue = createAsyncThunk(typePrefix, async ({ queueName }) => {
+ const authedRequest = makeAuthedRequest(RequestFactory.createQueue(queueName));
+ const response = await authedRequest;
+ if (response) {
+ history.push(`/queue/${response.queueId}`);
+ }
+ return response;
+ });
+
+ return createQueue;
+};
+
+const createQueue = createAsyncThunk(typePrefix);
+
+export { createQueue, useCreateQueue };
diff --git a/simplq/src/store/asyncActions/deleteQueue.js b/simplq/src/store/asyncActions/deleteQueue.js
new file mode 100644
index 00000000..e37b8ada
--- /dev/null
+++ b/simplq/src/store/asyncActions/deleteQueue.js
@@ -0,0 +1,32 @@
+import { createAsyncThunk } from '@reduxjs/toolkit';
+import { useMakeAuthedRequest } from 'api/auth';
+import * as RequestFactory from 'api/requestFactory';
+import { useHistory } from 'react-router';
+
+const typePrefix = 'deleteQueue/action';
+
+/**
+ * A hook to access the deleteQueue async action creator.
+ *
+ * @returns — deleteQueue async action creator
+ */
+const useDeleteQueue = () => {
+ const makeAuthedRequest = useMakeAuthedRequest();
+ const history = useHistory();
+
+ const deleteQueue = createAsyncThunk(typePrefix, async (arg) => {
+ const { queueId, goHome } = arg;
+ const authedRequest = makeAuthedRequest(RequestFactory.deleteQueue(queueId));
+ const response = await authedRequest;
+ if (goHome) {
+ history.push('/');
+ }
+ return response;
+ });
+
+ return deleteQueue;
+};
+
+const deleteQueue = createAsyncThunk(typePrefix);
+
+export { deleteQueue, useDeleteQueue };
diff --git a/simplq/src/store/asyncActions/deleteToken.js b/simplq/src/store/asyncActions/deleteToken.js
new file mode 100644
index 00000000..ba0e5032
--- /dev/null
+++ b/simplq/src/store/asyncActions/deleteToken.js
@@ -0,0 +1,37 @@
+import { createAsyncThunk } from '@reduxjs/toolkit';
+import { useMakeAuthedRequest } from 'api/auth';
+import * as RequestFactory from 'api/requestFactory';
+import { useDispatch } from 'react-redux';
+import { useHistory } from 'react-router';
+import { setInfoPopupMessage } from 'store/appSlice';
+
+const typePrefix = 'deleteToken/action';
+
+/**
+ * A hook to access the deleteToken async action creator.
+ *
+ * @returns — deleteToken async action creator
+ */
+const useDeleteToken = () => {
+ const makeAuthedRequest = useMakeAuthedRequest();
+ const history = useHistory();
+ const dispatch = useDispatch();
+
+ const deleteToken = createAsyncThunk(typePrefix, async (arg) => {
+ const { tokenId } = arg;
+ const authedRequest = makeAuthedRequest(RequestFactory.deleteToken(tokenId));
+ const response = await authedRequest;
+ // TODO: remove token from redux store on success
+ if (arg.goHome) {
+ dispatch(setInfoPopupMessage('Successfully left queue'));
+ history.push('/');
+ }
+ return response;
+ });
+
+ return deleteToken;
+};
+
+const deleteToken = createAsyncThunk(typePrefix);
+
+export { deleteToken, useDeleteToken };
diff --git a/simplq/src/store/asyncActions/getQueueInfo.js b/simplq/src/store/asyncActions/getQueueInfo.js
new file mode 100644
index 00000000..098821fb
--- /dev/null
+++ b/simplq/src/store/asyncActions/getQueueInfo.js
@@ -0,0 +1,26 @@
+import { createAsyncThunk } from '@reduxjs/toolkit';
+import { useMakeAuthedRequest } from 'api/auth';
+import * as RequestFactory from 'api/requestFactory';
+
+const typePrefix = 'getQueueInfo/action';
+
+/**
+ * A hook to access the getQueueInfo async action creator.
+ *
+ * @returns — getQueueInfo async action creator
+ */
+const useGetQueueInfo = () => {
+ const makeAuthedRequest = useMakeAuthedRequest();
+
+ const getQueueInfo = createAsyncThunk(typePrefix, async ({ queueId }) => {
+ const authedRequest = makeAuthedRequest(RequestFactory.getQueueInfo(queueId));
+ const response = await authedRequest;
+ return response;
+ });
+
+ return getQueueInfo;
+};
+
+const getQueueInfo = createAsyncThunk(typePrefix);
+
+export { getQueueInfo, useGetQueueInfo };
diff --git a/simplq/src/store/asyncActions/getQueueInfoByName.js b/simplq/src/store/asyncActions/getQueueInfoByName.js
new file mode 100644
index 00000000..e93f8e14
--- /dev/null
+++ b/simplq/src/store/asyncActions/getQueueInfoByName.js
@@ -0,0 +1,37 @@
+import { createAsyncThunk } from '@reduxjs/toolkit';
+import { useHistory } from 'react-router-dom';
+import { useMakeAuthedRequest } from 'api/auth';
+import * as RequestFactory from 'api/requestFactory';
+
+const typePrefix = 'getQueueInfoByName/action';
+
+/**
+ * A hook to access the getQueueInfoByName async action creator.
+ *
+ * @returns — getQueueInfoByName action creator
+ */
+const useGetQueueInfoByName = () => {
+ const makeAuthedRequest = useMakeAuthedRequest();
+ const history = useHistory();
+
+ const getQueueInfoByName = createAsyncThunk(
+ typePrefix,
+ async ({ queueName }, { rejectWithValue }) => {
+ const authedRequest = makeAuthedRequest(RequestFactory.getQueueInfoByName(queueName));
+
+ try {
+ const response = await authedRequest;
+ return response;
+ } catch (error) {
+ history.push(`/pageNotFound/queueName=${queueName}`);
+ return rejectWithValue({ message: `Queue ${queueName} does not exist, try again...` });
+ }
+ }
+ );
+
+ return getQueueInfoByName;
+};
+
+const getQueueInfoByName = createAsyncThunk(typePrefix);
+
+export { getQueueInfoByName, useGetQueueInfoByName };
diff --git a/simplq/src/store/asyncActions/getSelectedQueue.js b/simplq/src/store/asyncActions/getSelectedQueue.js
new file mode 100644
index 00000000..40fab5ae
--- /dev/null
+++ b/simplq/src/store/asyncActions/getSelectedQueue.js
@@ -0,0 +1,26 @@
+import { createAsyncThunk } from '@reduxjs/toolkit';
+import { useMakeAuthedRequest } from 'api/auth';
+import * as RequestFactory from 'api/requestFactory';
+
+const typePrefix = 'getSelectedQueue/action';
+
+/**
+ * A hook to access the getSelectedQueue async action creator.
+ *
+ * @returns — getSelectedQueue async action creator
+ */
+const useGetSelectedQueue = () => {
+ const makeAuthedRequest = useMakeAuthedRequest();
+
+ const getSelectedQueue = createAsyncThunk(typePrefix, async ({ queueId }) => {
+ const authedRequest = makeAuthedRequest(RequestFactory.getQueue(queueId));
+ const response = await authedRequest;
+ return response;
+ });
+
+ return getSelectedQueue;
+};
+
+const getSelectedQueue = createAsyncThunk(typePrefix);
+
+export { getSelectedQueue, useGetSelectedQueue };
diff --git a/simplq/src/store/asyncActions/getToken.js b/simplq/src/store/asyncActions/getToken.js
new file mode 100644
index 00000000..01018681
--- /dev/null
+++ b/simplq/src/store/asyncActions/getToken.js
@@ -0,0 +1,36 @@
+import { createAsyncThunk } from '@reduxjs/toolkit';
+import { useMakeAuthedRequest } from 'api/auth';
+import * as RequestFactory from 'api/requestFactory';
+
+const typePrefix = 'getToken/action';
+let timer = null;
+const REFRESH_INTERVAL = 3000;
+
+/**
+ * A hook to access the getToken async action creator.
+ *
+ * @returns — getToken async action creator
+ */
+const useGetToken = () => {
+ const makeAuthedRequest = useMakeAuthedRequest();
+
+ const getToken = createAsyncThunk(typePrefix, async ({ tokenId, refresh }, { dispatch }) => {
+ if (timer) {
+ clearTimeout(timer);
+ }
+ const authedRequest = makeAuthedRequest(RequestFactory.getToken(tokenId));
+ const response = await authedRequest.then((resp) => {
+ if (refresh === true) {
+ timer = setTimeout(() => dispatch(getToken({ tokenId, refresh })), REFRESH_INTERVAL);
+ }
+ return resp;
+ });
+ return response;
+ });
+
+ return getToken;
+};
+
+const getToken = createAsyncThunk(typePrefix);
+
+export { getToken, useGetToken };
diff --git a/simplq/src/store/asyncActions/getUserQueues.js b/simplq/src/store/asyncActions/getUserQueues.js
new file mode 100644
index 00000000..f5869754
--- /dev/null
+++ b/simplq/src/store/asyncActions/getUserQueues.js
@@ -0,0 +1,41 @@
+import { createAsyncThunk } from '@reduxjs/toolkit';
+import { useMakeAuthedRequest } from 'api/auth';
+import * as RequestFactory from 'api/requestFactory';
+
+const typePrefix = 'getUserQueues/action';
+
+/**
+ * A hook to access the getUserQueues async action creator.
+ *
+ * @returns — getUserQueues async action creator
+ *
+ * @example
+ *
+ * import useGetUserQueues from 'store/queues'
+ *
+ * const getUserQueues = useGetUserQueues()
+ */
+const useGetUserQueues = () => {
+ const makeAuthedRequest = useMakeAuthedRequest();
+
+ const getUserQueues = createAsyncThunk(typePrefix, async () => {
+ return makeAuthedRequest(RequestFactory.getUserQueues());
+ });
+
+ return getUserQueues;
+};
+
+/**
+ * A shadow function that returns getUserQueues async action creator.
+ *
+ * This should be used just for the action creators that it generates.
+
+ * @see store/queuesSlice.js
+ *
+ * @see https://redux-toolkit.js.org/api/createAsyncThunk#return-value
+ *
+ * @returns getUserQueues() async action creator
+ */
+const getUserQueues = createAsyncThunk(typePrefix);
+
+export { getUserQueues, useGetUserQueues };
diff --git a/simplq/src/store/asyncActions/index.js b/simplq/src/store/asyncActions/index.js
new file mode 100644
index 00000000..0d37b98f
--- /dev/null
+++ b/simplq/src/store/asyncActions/index.js
@@ -0,0 +1,18 @@
+/**
+ * Async actions
+ *
+ * This file exports all async actions. Async actions should be
+ * in separate files and can depend on each other.
+ */
+
+export { getUserQueues, useGetUserQueues } from './getUserQueues';
+export { deleteQueue, useDeleteQueue } from './deleteQueue';
+export { getQueueInfo, useGetQueueInfo } from './getQueueInfo';
+export { getQueueInfoByName, useGetQueueInfoByName } from './getQueueInfoByName';
+export { joinQueue, useJoinQueue } from './joinQueue';
+export { getSelectedQueue, useGetSelectedQueue } from './getSelectedQueue';
+export { createQueue, useCreateQueue } from './createQueue';
+
+export { getToken, useGetToken } from './getToken';
+export { deleteToken, useDeleteToken } from './deleteToken';
+export { notifyToken, useNotifyToken } from './notifyToken';
diff --git a/simplq/src/store/asyncActions/joinQueue.js b/simplq/src/store/asyncActions/joinQueue.js
new file mode 100644
index 00000000..bc50ad77
--- /dev/null
+++ b/simplq/src/store/asyncActions/joinQueue.js
@@ -0,0 +1,36 @@
+import { createAsyncThunk } from '@reduxjs/toolkit';
+import { useHistory } from 'react-router-dom';
+import { useMakeAuthedRequest } from 'api/auth';
+import * as RequestFactory from 'api/requestFactory';
+
+const typePrefix = 'joinQueue/action';
+
+/**
+ * A hook to access the joinQueue async action creator.
+ *
+ * @returns — joinQueue async action creator
+ */
+const useJoinQueue = () => {
+ const makeAuthedRequest = useMakeAuthedRequest();
+ const history = useHistory();
+
+ const joinQueue = createAsyncThunk(
+ typePrefix,
+ async ({ name, contactNumber, notifiable, queueId, goToStatusPage }) => {
+ const authedRequest = makeAuthedRequest(
+ RequestFactory.createToken(name, contactNumber, notifiable, queueId)
+ );
+ const response = await authedRequest;
+ if (goToStatusPage) {
+ history.push(`/token/${response.tokenId}`);
+ }
+ return response;
+ }
+ );
+
+ return joinQueue;
+};
+
+const joinQueue = createAsyncThunk(typePrefix);
+
+export { joinQueue, useJoinQueue };
diff --git a/simplq/src/store/asyncActions/notifyToken.js b/simplq/src/store/asyncActions/notifyToken.js
new file mode 100644
index 00000000..ac503f5d
--- /dev/null
+++ b/simplq/src/store/asyncActions/notifyToken.js
@@ -0,0 +1,24 @@
+import { createAsyncThunk } from '@reduxjs/toolkit';
+import { useMakeAuthedRequest } from 'api/auth';
+import * as RequestFactory from 'api/requestFactory';
+
+const typePrefix = 'notifyToken/action';
+
+/**
+ * A hook to access the notifyToken async action creator.
+ *
+ * @returns — notifyToken async action creator
+ */
+const useNotifyToken = () => {
+ const makeAuthedRequest = useMakeAuthedRequest();
+
+ const notifyToken = createAsyncThunk(typePrefix, async ({ tokenId }) => {
+ return makeAuthedRequest(RequestFactory.notifyToken(tokenId));
+ });
+
+ return notifyToken;
+};
+
+const notifyToken = createAsyncThunk(typePrefix);
+
+export { notifyToken, useNotifyToken };
diff --git a/simplq/src/store/index.js b/simplq/src/store/index.js
index 02d6741e..394b0cbf 100644
--- a/simplq/src/store/index.js
+++ b/simplq/src/store/index.js
@@ -1,10 +1,26 @@
-import { combineReducers, configureStore } from '@reduxjs/toolkit';
+import { combineReducers, configureStore, getDefaultMiddleware } from '@reduxjs/toolkit';
+import queuesReducer from 'store/queues';
+import queueInfoReducer from 'store/queueInfo';
+import actionStatusReducer from 'store/actionStatus';
+import tokenReducer from 'store/token';
+import selectedQueueReducer from 'store/selectedQueue';
import appReducer from './appSlice';
export const rootReducer = combineReducers({
appReducer,
+ queues: queuesReducer,
+ queueInfo: queueInfoReducer,
+ token: tokenReducer,
+ actionStatus: actionStatusReducer,
+ selectedQueue: selectedQueueReducer,
});
export const store = configureStore({
reducer: rootReducer,
+ middleware: getDefaultMiddleware({
+ serializableCheck: {
+ // Ignore auth in async thunks
+ ignoredActionPaths: ['meta.arg.auth'],
+ },
+ }),
});
diff --git a/simplq/src/store/queueInfo/index.js b/simplq/src/store/queueInfo/index.js
new file mode 100644
index 00000000..1af13b19
--- /dev/null
+++ b/simplq/src/store/queueInfo/index.js
@@ -0,0 +1,5 @@
+import reducer, { selectQueueInfo } from './queueInfoSlice';
+
+export default reducer;
+
+export { selectQueueInfo };
diff --git a/simplq/src/store/queueInfo/queueInfoSlice.js b/simplq/src/store/queueInfo/queueInfoSlice.js
new file mode 100644
index 00000000..39097c83
--- /dev/null
+++ b/simplq/src/store/queueInfo/queueInfoSlice.js
@@ -0,0 +1,21 @@
+import { createSlice } from '@reduxjs/toolkit';
+import { getQueueInfo, getQueueInfoByName } from 'store/asyncActions';
+
+const queueInfoSlice = createSlice({
+ name: 'queueInfo',
+ initialState: {},
+ reducers: {},
+ extraReducers: {
+ // handle fulfiled request
+ [getQueueInfo.fulfilled]: (state, action) => {
+ return action.payload;
+ },
+ [getQueueInfoByName.fulfilled]: (state, action) => {
+ return action.payload;
+ },
+ },
+});
+
+export default queueInfoSlice.reducer;
+
+export const selectQueueInfo = (state) => state.queueInfo;
diff --git a/simplq/src/store/queues/index.js b/simplq/src/store/queues/index.js
new file mode 100644
index 00000000..4cc5a0d5
--- /dev/null
+++ b/simplq/src/store/queues/index.js
@@ -0,0 +1,5 @@
+import reducer, { selectQueues } from './queuesSlice';
+
+export default reducer;
+
+export { selectQueues };
diff --git a/simplq/src/store/queues/queuesSlice.js b/simplq/src/store/queues/queuesSlice.js
new file mode 100644
index 00000000..12ce5cd9
--- /dev/null
+++ b/simplq/src/store/queues/queuesSlice.js
@@ -0,0 +1,31 @@
+import { createSlice } from '@reduxjs/toolkit';
+import { getUserQueues, deleteQueue, createQueue } from 'store/asyncActions';
+
+const queuesSlice = createSlice({
+ name: 'queues',
+ initialState: [],
+ // No reducers for now
+ reducers: {},
+ extraReducers: {
+ // handle fulfiled request
+ [getUserQueues.fulfilled]: (state, action) => {
+ return action.payload.queues;
+ },
+ // remove deleted queue from queues list
+ [deleteQueue.fulfilled]: (state, action) => {
+ const { queueId } = action.payload;
+ const index = state.findIndex((queue) => queue.queueId === queueId);
+ if (index > -1) {
+ state.splice(index, 1);
+ }
+ },
+ // add newly created queue to queues list
+ [createQueue.fulfilled]: (state, action) => {
+ state.push(action.payload);
+ },
+ },
+});
+
+export default queuesSlice.reducer;
+
+export const selectQueues = (state) => state.queues;
diff --git a/simplq/src/store/selectedQueue/index.js b/simplq/src/store/selectedQueue/index.js
new file mode 100644
index 00000000..02c34aa0
--- /dev/null
+++ b/simplq/src/store/selectedQueue/index.js
@@ -0,0 +1,5 @@
+import reducer from './selectedQueueSlice';
+
+export default reducer;
+
+export { selectQueueName, selectTokens } from './selectedQueueSlice';
diff --git a/simplq/src/store/selectedQueue/selectedQueueSlice.js b/simplq/src/store/selectedQueue/selectedQueueSlice.js
new file mode 100644
index 00000000..d42a329f
--- /dev/null
+++ b/simplq/src/store/selectedQueue/selectedQueueSlice.js
@@ -0,0 +1,41 @@
+/* eslint-disable no-param-reassign */
+
+import { createSlice } from '@reduxjs/toolkit';
+import { deleteToken, getSelectedQueue, joinQueue } from 'store/asyncActions';
+
+const selectedQueueSlice = createSlice({
+ name: 'selectedQueue',
+ initialState: {
+ queueId: null,
+ queueName: null,
+ queueCreationTimestamp: null,
+ tokens: [],
+ },
+ reducers: {},
+ extraReducers: {
+ [getSelectedQueue.rejected]: (state, action) => {
+ return action;
+ },
+ // handle fulfiled request
+ [getSelectedQueue.fulfilled]: (state, action) => {
+ const { queueId, queueName, queueCreationTimestamp, tokens } = action.payload;
+ return { queueId, queueName, queueCreationTimestamp, tokens };
+ },
+ // add newly created token to currently selected queue's token list
+ [joinQueue.fulfilled]: (state, action) => {
+ state.tokens.push(action.payload);
+ return state;
+ },
+ // remove deleted token from currently selected queue's token list
+ [deleteToken.fulfilled]: (state, action) => {
+ state.tokens = state.tokens.filter((token) => token.tokenId !== action.payload.tokenId);
+ return state;
+ },
+ },
+});
+
+export default selectedQueueSlice.reducer;
+
+export const selectQueueName = (state) => state.selectedQueue.queueName;
+
+export const selectTokens = (state) => state.selectedQueue.tokens;
diff --git a/simplq/src/store/token/index.js b/simplq/src/store/token/index.js
new file mode 100644
index 00000000..de90c42b
--- /dev/null
+++ b/simplq/src/store/token/index.js
@@ -0,0 +1,5 @@
+import reducer, { selectToken } from './tokenSlice';
+
+export default reducer;
+
+export { selectToken };
diff --git a/simplq/src/store/token/tokenSlice.js b/simplq/src/store/token/tokenSlice.js
new file mode 100644
index 00000000..a9cb91d5
--- /dev/null
+++ b/simplq/src/store/token/tokenSlice.js
@@ -0,0 +1,19 @@
+/* eslint-disable no-param-reassign */
+import { createSlice } from '@reduxjs/toolkit';
+import { getToken } from 'store/asyncActions';
+
+const tokenSlice = createSlice({
+ name: 'token',
+ initialState: {},
+ reducers: {},
+ extraReducers: {
+ // handle fulfilled request
+ [getToken.fulfilled]: (state, action) => {
+ return action.payload;
+ },
+ },
+});
+
+export default tokenSlice.reducer;
+
+export const selectToken = (state) => state.token;
diff --git a/simplq/src/utils/scrollingOperations.js b/simplq/src/utils/scrollingOperations.js
index a70a5d4c..e75d0f1b 100644
--- a/simplq/src/utils/scrollingOperations.js
+++ b/simplq/src/utils/scrollingOperations.js
@@ -13,11 +13,28 @@ export const smoothScrollTo = (targetElement) => {
});
};
-export const smoothScrollToHomePageTop = () => {
+export const smoothScrollToHomePageTop = (history) => {
const element = document.getElementById('target_top');
if (element) {
smoothScrollTo(element);
} else {
- window.location.href = '/';
+ history.push('/');
}
};
+
+/**
+ * Execute a callback as soon as an element is available on the DOM.
+ *
+ * id - element id to wait on
+ * callback - callback to execute as soon as the element becomes available. The
+ * element is passed to the callback and it is triggered.
+ * */
+export const onLoadById = (id, callback) => {
+ const checkAndExecute = setInterval(() => {
+ const element = document.getElementById(id);
+ if (element) {
+ callback(element);
+ clearInterval(checkAndExecute);
+ }
+ }, 100);
+};