Reuse status component

4 files changed, 36 insertions, 56 deletions

diff --git a/client/src/components/AdminLogin.tsx b/client/src/components/AdminLogin.tsx
index 4271d60..36b4629 100644
--- a/client/src/components/AdminLogin.tsx
+++ b/client/src/components/AdminLogin.tsx
@@ -1,32 +1,12 @@
 import React, { useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { useDispatch } from 'react-redux';
-import {
-  Alert,
-  Button,
-  Paper,
-  Snackbar,
-  TextField,
-  Typography,
-} from '@mui/material';
+import { Button, Paper, Snackbar, TextField, Typography } from '@mui/material';
 import { useForm } from 'react-hook-form';
 import { setAdmin } from '../slices/auth/adminSlice';
 import { useLoginAdminMutation } from '../slices/api/adminSlice';
 import type { Credentials, StatusProps } from '../models';
-import { isFetchBaseQueryError } from '../error';
-import type { Data } from '../error';
-
-const Status = ({ error, setOpen }: StatusProps) => {
-  return isFetchBaseQueryError(error) ? (
-    <Alert severity="error" onClose={() => setOpen(false)}>
-      {(error.data as Data).message}
-    </Alert>
-  ) : (
-    <Alert severity="error" onClose={() => setOpen(false)}>
-      Admin login failed
-    </Alert>
-  );
-};
+import Status from './Status';
 
 function GuestLogin() {
   const dispatch = useDispatch();
@@ -111,7 +91,7 @@ function GuestLogin() {
         autoHideDuration={5000}
       >
         <div>
-          <Status {...({ error, setOpen } as StatusProps)} />
+          <Status {...({ error, setOpen, type: 'Admin' } as StatusProps)} />
         </div>
       </Snackbar>
     </form>
diff --git a/client/src/components/GuestLogin.tsx b/client/src/components/GuestLogin.tsx
index acf229f..0e5dcb6 100644
--- a/client/src/components/GuestLogin.tsx
+++ b/client/src/components/GuestLogin.tsx
@@ -1,32 +1,12 @@
 import React, { useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { useDispatch } from 'react-redux';
-import {
-  Alert,
-  Button,
-  Paper,
-  Snackbar,
-  TextField,
-  Typography,
-} from '@mui/material';
+import { Button, Paper, Snackbar, TextField, Typography } from '@mui/material';
 import { useForm } from 'react-hook-form';
 import { setGuest } from '../slices/auth/guestSlice';
 import { useLoginGuestMutation } from '../slices/api/guestSlice';
 import type { Name, StatusProps } from '../models';
-import { isFetchBaseQueryError } from '../error';
-import type { Data } from '../error';
-
-const Status = ({ error, setOpen }: StatusProps) => {
-  return isFetchBaseQueryError(error) ? (
-    <Alert severity="error" onClose={() => setOpen(false)}>
-      {(error.data as Data).message}
-    </Alert>
-  ) : (
-    <Alert severity="error" onClose={() => setOpen(false)}>
-      Guest login failed
-    </Alert>
-  );
-};
+import Status from './Status';
 
 function GuestLogin() {
   const dispatch = useDispatch();
@@ -104,16 +84,16 @@ function GuestLogin() {
         <Button type="submit" variant="contained" fullWidth sx={{ mt: 2 }}>
           Log in
         </Button>
+        <Snackbar
+          open={!isLoading && open}
+          onClose={() => setOpen(false)}
+          autoHideDuration={5000}
+        >
+          <div>
+            <Status {...({ error, setOpen, type: 'Guest' } as StatusProps)} />
+          </div>
+        </Snackbar>
       </Paper>
-      <Snackbar
-        open={!isLoading && open}
-        onClose={() => setOpen(false)}
-        autoHideDuration={5000}
-      >
-        <div>
-          <Status {...({ error, setOpen } as StatusProps)} />
-        </div>
-      </Snackbar>
     </form>
   );
 }
diff --git a/client/src/components/Status.tsx b/client/src/components/Status.tsx
new file mode 100644
index 0000000..4bb60ff
--- /dev/null
+++ b/client/src/components/Status.tsx
@@ -0,0 +1,19 @@
+import React from 'react';
+import { Alert } from '@mui/material';
+import { isFetchBaseQueryError } from '../error';
+import type { StatusProps } from '../models';
+import type { Data } from '../error';
+
+const Status = ({ error, setOpen, type }: StatusProps) => {
+  return isFetchBaseQueryError(error) ? (
+    <Alert severity="error" onClose={() => setOpen(false)}>
+      {(error.data as Data).message}
+    </Alert>
+  ) : (
+    <Alert severity="error" onClose={() => setOpen(false)}>
+      {`${type} login failed`}
+    </Alert>
+  );
+};
+
+export default Status;
diff --git a/client/src/models.ts b/client/src/models.ts
index 5e53484..38b48ad 100644
--- a/client/src/models.ts
+++ b/client/src/models.ts
@@ -1,5 +1,5 @@
-import { SerializedError } from '@reduxjs/toolkit';
-import { FetchBaseQueryError } from '@reduxjs/toolkit/query';
+import type { SerializedError } from '@reduxjs/toolkit';
+import type { FetchBaseQueryError } from '@reduxjs/toolkit/query';
 
 export interface Guest {
   id?: number;
@@ -36,4 +36,5 @@ export interface StatusProps {
   isError?: boolean;
   error: FetchBaseQueryError | SerializedError | undefined;
   setOpen: (open: boolean) => void;
+  type: string;
 }