refactor: update job list table

src/main/react/src/components/userMenu.tsx

@@ -14,80 +14,80 @@ import { setUsername } from '@/slices/login';
 
 export const UserMenu: React.FC = () => {
 	const { username } = useAppSelector(state => state.login);
-  const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
+	const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
 	const dropdownOpen = Boolean(anchorEl);
 	const dispatch = useDispatch();
 	const navigate = useNavigate();
-  const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
-    setAnchorEl(event.currentTarget);
-  };
-  const handleClose = () => {
-    setAnchorEl(null);
-  };
+	const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
+		setAnchorEl(event.currentTarget);
+	};
+	const handleClose = () => {
+		setAnchorEl(null);
+	};
 
-  return (
+	return (
 		<Fragment>
-				{username ? (
-						<Button
-							color="inherit"
-							onClick={e => {
-								setAnchorEl(e.currentTarget);
-							}}
-						>
-							{username}
-						</Button>
-					) : (
-						<Button component={RouterLink} to="/login" color="inherit">
-							Login
-						</Button>
-					)}
-					<Menu
-						anchorEl={anchorEl}
-						open={dropdownOpen}
-						PaperProps={{
-							elevation: 0,
-							sx: {
-								overflow: 'visible',
-								filter: 'drop-shadow(0px 2px 8px rgba(0,0,0,0.32))',
-								mt: 1.5,
-								'& .MuiAvatar-root': {
-									width: 32,
-									height: 32,
-									ml: -0.5,
-									mr: 1
-								},
-								'&:before': {
-									content: '""',
-									display: 'block',
-									position: 'absolute',
-									top: 0,
-									right: 14,
-									width: 10,
-									height: 10,
-									bgcolor: 'background.paper',
-									transform: 'translateY(-50%) rotate(45deg)',
-									zIndex: 0
-								}
-							}
-						}}
-						transformOrigin={{ horizontal: 'right', vertical: 'top' }}
-						anchorOrigin={{ horizontal: 'right', vertical: 'bottom' }}
-					>
-						<MenuItem
-							onClick={() => {
-								localStorage.removeItem('login');
-								dispatch(setUsername(null));
-								setAnchorEl(null);
-								navigate('/login');
-							}}
-						>
-							<ListItemIcon>
-								<Logout fontSize="small" />
-							</ListItemIcon>
-							Logout
-						</MenuItem>
-					</Menu>
+			{username ? (
+				<Button
+					color="inherit"
+					onClick={e => {
+						setAnchorEl(e.currentTarget);
+					}}
+				>
+					{username}
+				</Button>
+			) : (
+				<Button component={RouterLink} to="/login" color="inherit">
+					Login
+				</Button>
+			)}
+			<Menu
+				anchorEl={anchorEl}
+				open={dropdownOpen}
+				PaperProps={{
+					elevation: 0,
+					sx: {
+						overflow: 'visible',
+						filter: 'drop-shadow(0px 2px 8px rgba(0,0,0,0.32))',
+						mt: 1.5,
+						'& .MuiAvatar-root': {
+							width: 32,
+							height: 32,
+							ml: -0.5,
+							mr: 1
+						},
+						'&:before': {
+							content: '""',
+							display: 'block',
+							position: 'absolute',
+							top: 0,
+							right: 14,
+							width: 10,
+							height: 10,
+							bgcolor: 'background.paper',
+							transform: 'translateY(-50%) rotate(45deg)',
+							zIndex: 0
+						}
+					}
+				}}
+				transformOrigin={{ horizontal: 'right', vertical: 'top' }}
+				anchorOrigin={{ horizontal: 'right', vertical: 'bottom' }}
+			>
+				<MenuItem
+					onClick={() => {
+						localStorage.removeItem('login');
+						dispatch(setUsername(null));
+						setAnchorEl(null);
+						navigate('/login');
+					}}
+				>
+					<ListItemIcon>
+						<Logout fontSize="small" />
+					</ListItemIcon>
+					Logout
+				</MenuItem>
+			</Menu>
 		</Fragment>
 
-  );
+	);
 }

src/main/react/src/lib/api.ts

@@ -1,4 +1,4 @@
-import { UserToken } from '../model/token';
+import { UserToken } from '../types/token';
 
 const inMemoryInitialState: any = localStorage.getItem('login')
 	? JSON.parse(localStorage.getItem('login') || '')

src/main/react/src/pages/home.tsx

@@ -15,7 +15,7 @@ import TableRow from '@mui/material/TableRow';
 import TextField from '@mui/material/TextField';
 import Paper from '@mui/material/Paper';
 
-import { IJob, Jobs } from '../model/job';
+import { IJob, Jobs } from '../types/job';
 import { useAppDispatch, useAppSelector } from '../slices/hook';
 import {
 	createJob,
@@ -51,7 +51,7 @@ const Home = () => {
 
 	return (
 		<Container component="main" maxWidth="lg">
-			<Box sx={{ display: 'flex', flexDirection: 'row', justifyContent: 'end', marginY: "8px"}}>
+			<Box sx={{ display: 'flex', flexDirection: 'row', justifyContent: 'end', marginY: "8px" }}>
 				<Button
 					variant="contained"
 					onClick={() => {
@@ -120,9 +120,17 @@ const Home = () => {
 						</Button>
 					</DialogActions>
 				</Dialog>
-				<Dialog open={confirm} onClose={() => setConfirm(false)}>
-					<DialogTitle>Delete job</DialogTitle>
-					<DialogContent>Are your confirm?</DialogContent>
+				<Dialog
+					open={confirm}
+					sx={{ '& .MuiDialog-paper': { width: '300px', maxHeight: 435 } }}
+					// fullWidth={true}
+					maxWidth="md"
+					onClose={() => setConfirm(false)}
+					aria-labelledby="alert-dialog-title"
+					aria-describedby="alert-dialog-description"
+				>
+					<DialogTitle id="alert-dialog-title">Delete job</DialogTitle>
+					<DialogContent id="alert-dialog-description">Are your confirm?</DialogContent>
 					<DialogActions>
 						<Button onClick={() => setConfirm(false)}>Cancel</Button>
 						<Button color="secondary" onClick={doDeleteJob}>
@@ -146,7 +154,7 @@ const Home = () => {
 						</TableRow>
 					</TableHead>
 					<TableBody>
-						{list?.map((j, i) => (
+						{list?.map((j: IJob, i: number) => (
 							<TableRow
 								key={j.name + j.group}
 								sx={{ '&:last-child td, &:last-child th': { border: 0 } }}
@@ -161,38 +169,40 @@ const Home = () => {
 								<TableCell align="left">{j.state}</TableCell>
 								<TableCell align="left">{j.timezone}</TableCell>
 								<TableCell align="left">
-									{j.state === 'NORMAL' && (
-										<Button
-											variant="contained"
-											color="warning"
-											onClick={() => {
-												dispatch(pauseJob(j));
-											}}
-										>
-											Pause
-										</Button>
-									)}
-									{j.state === 'PAUSED' && (
+									<Box sx={{ display: 'flex', justifyContent: 'space-between' }}>
+										{j.state === 'NORMAL' && (
+											<Button
+												variant="contained"
+												color="warning"
+												onClick={() => {
+													dispatch(pauseJob(j));
+												}}
+											>
+												Pause
+											</Button>
+										)}
+										{j.state === 'PAUSED' && (
+											<Button
+												variant="contained"
+												color="secondary"
+												onClick={() => {
+													dispatch(resumeJob(j));
+												}}
+											>
+												Resume
+											</Button>
+										)}
 										<Button
 											variant="contained"
-											color="secondary"
+											color="error"
 											onClick={() => {
-												dispatch(resumeJob(j));
+												setConfirm(true);
+												setJob(job);
 											}}
 										>
-											Resume
+											Delete
 										</Button>
-									)}
-									<Button
-										variant="contained"
-										color="error"
-										onClick={() => {
-											setConfirm(true);
-											setJob(job);
-										}}
-									>
-										Delete
-									</Button>
+									</Box>
 								</TableCell>
 							</TableRow>
 						))}

src/main/react/src/pages/repos.tsx

@@ -12,17 +12,20 @@ import dayjs from 'dayjs';
 
 import { fetchCommits } from '../slices/repos';
 import { useAppDispatch, useAppSelector } from '../slices/hook';
+import { Box, CircularProgress } from '@mui/material';
+import { RequestStatus } from '@/types/request-status';
 
 const Repos = () => {
 	const dispatch = useAppDispatch();
-	const { commits } = useAppSelector(state => state.repos);
+	const { commits, status } = useAppSelector(state => state.repos);
 	useEffect(() => {
 		dispatch(fetchCommits());
 	}, [dispatch])
 
 	return (
 		<Container component="div" maxWidth="lg">
 			<TableContainer component={Paper}>
+
 				<Table sx={{ minWidth: 650 }} aria-label="repos commits tables">
 					<TableHead>
 						<TableRow>
@@ -52,6 +55,9 @@ const Repos = () => {
 						))}
 					</TableBody>
 				</Table>
+				{status === RequestStatus.LOADING && (<Box sx={{ width: '100%', display: 'flex', margin: 1, justifyContent: 'center', alignItems: 'center' }}>
+					<CircularProgress />
+				</Box>)}
 			</TableContainer>
 		</Container>
 	)

src/main/react/src/slices/job.ts

@@ -1,5 +1,5 @@
 import { createAsyncThunk, createSlice } from '@reduxjs/toolkit';
-import { IJob, Jobs } from '../model/job';
+import { IJob, Jobs } from '../types/job';
 import { api } from '../lib/api';
 
 export const fetchJobs = createAsyncThunk('job/fetchJobs', async () => {

src/main/react/src/slices/repos.ts

@@ -1,6 +1,7 @@
 import { createSlice, createAsyncThunk } from '@reduxjs/toolkit'
 import { api } from '../lib/api'
 import { ReposCommits } from '../types/respo'
+import { RequestStatus } from '@/types/request-status'
 
 export const fetchCommits = createAsyncThunk('repos/fetchCommits', async () => {
 	const url = '/api/v1/repos/commits'
@@ -13,10 +14,12 @@ export const fetchCommits = createAsyncThunk('repos/fetchCommits', async () => {
 })
 
 interface RepoState {
-	commits: ReposCommits
+	status: RequestStatus,
+	commits: ReposCommits,
 }
 
 const initialState: Partial<RepoState> = {
+	status: RequestStatus.IDLE,
 	commits: [],
 }
 
@@ -30,11 +33,25 @@ const reposSlice = createSlice({
 		},
 	},
 	extraReducers: builder => {
+		builder.addCase(fetchCommits.pending, (state) => {
+			state = {
+				...state,
+				status: RequestStatus.LOADING,
+			}
+		})
 		builder.addCase(fetchCommits.fulfilled, (state, { payload }) => {
-			state.commits = payload ?? []
+			state = {
+				...state,
+				commits: payload ?? [],
+				status: RequestStatus.SUCCEEDED,
+			}
 		})
 		builder.addCase(fetchCommits.rejected, (state, action) => {
-			console.error(state, action)
+			state = {
+				...state,
+				status: RequestStatus.FAILED,
+			}
+			console.error(state, action);
 		})
 	},
 })

src/main/react/src/types/request-status.ts

@@ -0,0 +1,6 @@
+export enum RequestStatus {
+  IDLE = 'IDLE',
+  LOADING = 'LOADING',
+  SUCCEEDED = 'SUCCEEDED',
+  FAILED = 'FAILED',
+}