diff --git a/src/components/clusters/edit.tsx b/src/components/clusters/edit.tsx index 1dd64f12..93e3aed1 100644 --- a/src/components/clusters/edit.tsx +++ b/src/components/clusters/edit.tsx @@ -17,7 +17,6 @@ import styles from './edit.module.css'; import HelpIcon from '@mui/icons-material/Help'; import { useEffect, useState } from 'react'; import { getCluster, updateCluster } from '../../lib/api'; -import React from 'react'; import CancelIcon from '@mui/icons-material/Cancel'; import CheckCircleIcon from '@mui/icons-material/CheckCircle'; import { useNavigate, useParams } from 'react-router-dom'; @@ -26,7 +25,7 @@ export default function EditCluster() { const [successMessage, setSuccessMessage] = useState(false); const [errorMessage, setErrorMessage] = useState(false); const [errorMessageText, setErrorMessageText] = useState(''); - const [bioError, setbioError] = useState(false); + const [bioError, setBioError] = useState(false); const [seedPeerLoadLimitError, setSeedPeerLoadLimitError] = useState(false); const [peerLoadLimitError, setPeerLoadLimitError] = useState(false); const [numberOfConcurrentDownloadPiecesError, setNumberOfConcurrentDownloadPiecesError] = useState(false); @@ -35,8 +34,8 @@ export default function EditCluster() { const [locationError, setLocationError] = useState(false); const [idcError, setIDCError] = useState(false); const [cidrsError, setCIDRsError] = useState(false); - const [editLoadingButton, setEditLoadingButton] = useState(false); - const [clusters, setClusters] = useState({ + const [loadingButton, setLoadingButton] = useState(false); + const [cluster, setCluster] = useState({ id: 0, bio: '', scopes: { @@ -73,14 +72,14 @@ export default function EditCluster() { scheduler_cluster_config: { candidate_parent_limit, filter_parent_limit }, scopes: { idc, location, cidrs }, seed_peer_cluster_config, - } = clusters; + } = cluster; useEffect(() => { (async function () { try { if (typeof params.id === 'string') { - const response = await getCluster(params.id); - setClusters(response); + const cluster = await getCluster(params.id); + setCluster(cluster); } } catch (error) { if (error instanceof Error) { @@ -99,17 +98,17 @@ export default function EditCluster() { name: 'bio', autoComplete: 'family-name', value: bio, - placeholder: 'Please enter Description', - helperText: bioError ? 'Must be a number and range from 0-1000' : '', + placeholder: 'Please enter description', + helperText: bioError ? 'The length is 1-1000' : '', error: bioError, onChange: (e: any) => { - setClusters({ ...clusters, bio: e.target.value }); + setCluster({ ...cluster, bio: e.target.value }); changeValidate(e.target.value, informationForm[0]); }, }, syncError: false, - setError: setbioError, + setError: setBioError, validate: (value: string) => { const reg = /^.{0,1000}$/; @@ -131,7 +130,7 @@ export default function EditCluster() { error: locationError, onChange: (e: any) => { - setClusters({ ...clusters, scopes: { ...clusters.scopes, location: e.target.value } }); + setCluster({ ...cluster, scopes: { ...cluster.scopes, location: e.target.value } }); changeValidate(e.target.value, scopesForm[0]); }, InputProps: { @@ -166,7 +165,7 @@ export default function EditCluster() { helperText: idcError ? 'Maximum length is 100' : '', error: idcError, onChange: (e: any) => { - setClusters({ ...clusters, scopes: { ...clusters.scopes, idc: e.target.value } }); + setCluster({ ...cluster, scopes: { ...cluster.scopes, idc: e.target.value } }); changeValidate(e.target.value, scopesForm[1]); }, InputProps: { @@ -198,7 +197,7 @@ export default function EditCluster() { onChange: (_e: any, newValue: any) => { if (!scopesForm[2].formProps.error) { - setClusters({ ...clusters, scopes: { ...clusters.scopes, cidrs: newValue } }); + setCluster({ ...cluster, scopes: { ...cluster.scopes, cidrs: newValue } }); } }, onInputChange: (e: any) => { @@ -245,9 +244,9 @@ export default function EditCluster() { error: seedPeerLoadLimitError, onChange: (e: any) => { - setClusters({ - ...clusters, - seed_peer_cluster_config: { ...clusters.seed_peer_cluster_config, load_limit: e.target.value }, + setCluster({ + ...cluster, + seed_peer_cluster_config: { ...cluster.seed_peer_cluster_config, load_limit: e.target.value }, }); changeValidate(e.target.value, configForm[0]); }, @@ -283,9 +282,9 @@ export default function EditCluster() { value: load_limit, onChange: (e: any) => { - setClusters({ - ...clusters, - peer_cluster_config: { ...clusters.peer_cluster_config, load_limit: e.target.value }, + setCluster({ + ...cluster, + peer_cluster_config: { ...cluster.peer_cluster_config, load_limit: e.target.value }, }); changeValidate(e.target.value, configForm[1]); }, @@ -323,9 +322,9 @@ export default function EditCluster() { error: numberOfConcurrentDownloadPiecesError, onChange: (e: any) => { - setClusters({ - ...clusters, - peer_cluster_config: { ...clusters.peer_cluster_config, concurrent_piece_count: e.target.value }, + setCluster({ + ...cluster, + peer_cluster_config: { ...cluster.peer_cluster_config, concurrent_piece_count: e.target.value }, }); changeValidate(e.target.value, configForm[2]); }, @@ -362,10 +361,10 @@ export default function EditCluster() { error: candidateParentLimitError, onChange: (e: any) => { - setClusters({ - ...clusters, + setCluster({ + ...cluster, scheduler_cluster_config: { - ...clusters.scheduler_cluster_config, + ...cluster.scheduler_cluster_config, candidate_parent_limit: e.target.value, }, }); @@ -404,10 +403,10 @@ export default function EditCluster() { error: filterParentLimitError, onChange: (e: any) => { - setClusters({ - ...clusters, + setCluster({ + ...cluster, scheduler_cluster_config: { - ...clusters.scheduler_cluster_config, + ...cluster.scheduler_cluster_config, filter_parent_limit: e.target.value, }, }); @@ -449,7 +448,7 @@ export default function EditCluster() { }; const handleSubmit = async (event: any) => { - setEditLoadingButton(true); + setLoadingButton(true); event.preventDefault(); const data = new FormData(event.currentTarget); @@ -495,18 +494,18 @@ export default function EditCluster() { if (canSubmit && typeof params.id === 'string') { try { await updateCluster(params.id, { ...formdata }); - setEditLoadingButton(false); + setLoadingButton(false); setSuccessMessage(true); navigate(`/clusters/${params.id}`); } catch (error) { if (error instanceof Error) { setErrorMessage(true); setErrorMessageText(error.message); - setEditLoadingButton(false); + setLoadingButton(false); } } } else { - setEditLoadingButton(false); + setLoadingButton(false); } }; @@ -551,7 +550,7 @@ export default function EditCluster() { { - setClusters({ ...clusters, is_default: event.target.checked }); + setCluster({ ...cluster, is_default: event.target.checked }); }} sx={{ '&.MuiCheckbox-root': { color: 'var(--button-color)' } }} /> @@ -629,7 +628,7 @@ export default function EditCluster() { } size="small" variant="outlined" @@ -653,14 +652,14 @@ export default function EditCluster() { width: '8rem', }} onClick={() => { - setEditLoadingButton(true); + setLoadingButton(true); navigate(`/clusters/${id}`); }} > Cancel } size="small" variant="outlined" diff --git a/src/components/clusters/index.tsx b/src/components/clusters/index.tsx index f0c6e5ae..66c8d3a9 100644 --- a/src/components/clusters/index.tsx +++ b/src/components/clusters/index.tsx @@ -116,9 +116,9 @@ export default function Clusters() { const searchCluster = async (event: any) => { try { setClusterIsLoading(true); - const response = await getClusters({ page: 1, per_page: pageSize, name: searchClusters }); - setAllClusters(response.data); - setTotalPages(response.total_page || 1); + const cluster = await getClusters({ page: 1, per_page: pageSize, name: searchClusters }); + setAllClusters(cluster.data); + setTotalPages(cluster.total_page || 1); setClusterIsLoading(false); } catch (error) { if (error instanceof Error) { diff --git a/src/components/clusters/new.tsx b/src/components/clusters/new.tsx index d6aaa511..538ab45e 100644 --- a/src/components/clusters/new.tsx +++ b/src/components/clusters/new.tsx @@ -36,7 +36,7 @@ export default function NewCluster() { const [idcError, setIDCError] = useState(false); const [cidrsError, setCIDRsError] = useState(false); const [cidrs, setCIDRs] = useState([]); - const [editLoadingButton, setEditLoadingButton] = useState(false); + const [loadingButton, setLoadingButton] = useState(false); const cidrsOptions = ['10.0.0.0/8', '172.16.0.0/12', '192.168.0.0/16']; const navigate = useNavigate(); @@ -70,7 +70,7 @@ export default function NewCluster() { name: 'description', autoComplete: 'family-name', placeholder: 'Enter a cluster description', - helperText: bioError ? 'The length is 0-40' : '', + helperText: bioError ? 'The length is 1-1000' : '', error: bioError, onChange: (e: any) => { @@ -382,10 +382,11 @@ export default function NewCluster() { ]; const handleSubmit = async (event: any) => { - setEditLoadingButton(true); + setLoadingButton(true); event.preventDefault(); const data = new FormData(event.currentTarget); + const name = event.currentTarget.elements.name.value; const isDefault = event.currentTarget.elements.isDefault.checked; const description = event.currentTarget.elements.description.value; @@ -446,18 +447,18 @@ export default function NewCluster() { if (canSubmit) { try { await createCluster({ ...formData }); - setEditLoadingButton(false); + setLoadingButton(false); setSuccessMessage(true); navigate('/clusters'); } catch (error) { if (error instanceof Error) { setErrorMessage(true); setErrorMessageText(error.message); - setEditLoadingButton(false); + setLoadingButton(false); } } } else { - setEditLoadingButton(false); + setLoadingButton(false); } }; @@ -588,7 +589,7 @@ export default function NewCluster() { } size="small" variant="outlined" @@ -612,14 +613,14 @@ export default function NewCluster() { width: '8rem', }} onClick={() => { - setEditLoadingButton(true); + setLoadingButton(true); navigate(`/clusters`); }} > Cancel } size="small" variant="outlined" diff --git a/src/components/developer/tokens/edit.tsx b/src/components/developer/tokens/edit.tsx index 2efe8d3a..c5019ce3 100644 --- a/src/components/developer/tokens/edit.tsx +++ b/src/components/developer/tokens/edit.tsx @@ -35,28 +35,29 @@ const theme = createTheme({ }, }); -export default function CreateTokens(props: any) { +export default function UpdateTokens() { const [successMessage, setSuccessMessage] = useState(false); const [errorMessage, setErrorMessage] = useState(false); const [errorMessageText, setErrorMessageText] = useState(''); const [bioError, setBioError] = useState(false); - const [time, setTiem] = useState(''); - const [expiration, setExpiration] = useState(''); - const [expirationError, setExpirationError] = useState(false); + const [selectedTime, setSelectedTime] = useState(''); + const [expiredTime, setExpiredTime] = useState(''); + const [expiredTimeError, setExpiredTimeError] = useState(false); const [preheat, setPreheat] = useState(false); const [job, setJob] = useState(false); - const [editLoadingButton, setEditLoadingButton] = useState(false); - const [token, setToken] = useState({ name: '', bio: '', scopes: [''], expired_at: '', state: '', id: 0 }); - const updateFormList = [ + const [loadingButton, setLoadingButton] = useState(false); + const [tokens, setTokens] = useState({ name: '', bio: '', scopes: [''], expired_at: '', state: '', id: 0 }); + + const formList = [ { formProps: { - id: 'Bio', + id: 'bio', label: 'Description', - name: 'Bio', + name: 'bio', autoComplete: 'family-name', - placeholder: 'Enter your Note', - value: token.bio, - helperText: bioError ? 'Please enter Description' : '', + placeholder: 'Enter your description', + value: tokens.bio, + helperText: bioError ? 'The length is 1-1000' : '', error: bioError, InputProps: { @@ -71,8 +72,8 @@ export default function CreateTokens(props: any) { }, onChange: (e: any) => { - setToken({ ...token, bio: e.target.value }); - changeValidate(e.target.value, updateFormList[0]); + setTokens({ ...tokens, bio: e.target.value }); + changeValidate(e.target.value, formList[0]); }, }, syncError: false, @@ -92,11 +93,11 @@ export default function CreateTokens(props: any) { (async function () { try { if (params?.id) { - const token = await getToken(params?.id); - setToken(token); - setExpiration(token.expired_at); - setPreheat(token.scopes.includes('preheat')); - setJob(token.scopes.includes('job')); + const tokens = await getToken(params?.id); + setTokens(tokens); + setExpiredTime(tokens.expired_at); + setPreheat(tokens.scopes.includes('preheat')); + setJob(tokens.scopes.includes('job')); } } catch (error) { if (error instanceof Error) { @@ -112,15 +113,16 @@ export default function CreateTokens(props: any) { setError(!validate(value)); }; - const handleChangeSelect = (event: SelectChangeEvent) => { - setExpirationError(false); - setTiem(event.target.value); + const handleSelectExpiredTime = (event: SelectChangeEvent) => { + setExpiredTimeError(false); + setSelectedTime(event.target.value); + const time = getExpiredTime(Number(event.target.value)); - setExpiration(time); + setExpiredTime(time); }; const handleSubmit = async (event: any) => { - setEditLoadingButton(true); + setLoadingButton(true); event.preventDefault(); const scopes = [preheat ? 'preheat' : '', job ? 'job' : '']; @@ -128,39 +130,40 @@ export default function CreateTokens(props: any) { const data = new FormData(event.currentTarget); - updateFormList.forEach((item) => { + formList.forEach((item) => { const value = data.get(item.formProps.name); item.setError(!item.validate(value as string)); item.syncError = !item.validate(value as string); }); - const canSubmit = Boolean(!updateFormList.filter((item) => item.syncError).length); + const canSubmit = Boolean(!formList.filter((item) => item.syncError).length); - const formData = { bio: token.bio, expired_at: expiration, scopes: filteredScopes }; + const formData = { bio: tokens.bio, expired_at: expiredTime, scopes: filteredScopes }; - if (!time) { - setExpirationError(true); - setEditLoadingButton(false); + if (!selectedTime) { + setExpiredTimeError(true); + setLoadingButton(false); } else { if (canSubmit) { try { if (params.id) { - const response = await updateTokens(params.id, { ...formData }); - setEditLoadingButton(false); + const tokens = await updateTokens(params.id, { ...formData }); + setLoadingButton(false); setSuccessMessage(true); - const token = response.token; + + const token = tokens.token; localStorage.setItem('token', JSON.stringify(token)); navigate('/developer/personal-access-tokens'); } } catch (error) { if (error instanceof Error) { - setEditLoadingButton(false); + setLoadingButton(false); setErrorMessage(true); setErrorMessageText(error.message); } } } else { - setEditLoadingButton(false); + setLoadingButton(false); } } }; @@ -214,7 +217,7 @@ export default function CreateTokens(props: any) { /> - {updateFormList.map((item) => ( + {formList.map((item) => ( - + Expiration @@ -245,9 +248,9 @@ export default function CreateTokens(props: any) { - {expirationError && Please select an option.} + {expiredTimeError && Please select an option.} - The token expires on {formatDate(expiration) || ''}. + The token expires on {formatDate(expiredTime) || ''}. @@ -305,7 +308,7 @@ export default function CreateTokens(props: any) { } size="small" variant="outlined" @@ -335,7 +338,7 @@ export default function CreateTokens(props: any) { Cancel } size="small" variant="outlined" diff --git a/src/components/developer/tokens/index.tsx b/src/components/developer/tokens/index.tsx index 9db7fc63..9efe3b2b 100644 --- a/src/components/developer/tokens/index.tsx +++ b/src/components/developer/tokens/index.tsx @@ -31,17 +31,16 @@ export default function PersonalAccessTokens() { const [errorMessage, setErrorMessage] = useState(false); const [errorMessageText, setErrorMessageText] = useState(''); const [isLoading, setIsLoading] = useState(true); - const [_state, copyToClipboard] = useCopyToClipboard(); const [openDeletToken, setOpenDeletToken] = useState(false); const [deleteLoadingButton, setDeleteLoadingButton] = useState(false); - const [tokensID, setTokensID] = useState(''); - const [tokensList, setTokensList] = useState([ + const [tokenSelectedID, setTokenSelectedID] = useState(''); + const [tokens, setTokens] = useState([ { name: '', id: 0, scopes: [''], token: '', created_at: '', expired_at: '', user: { name: '' } }, ]); - const [showSnackbar, setShowSnackbar] = useState(false); + const [showCopyColumn, setShowCopyColumn] = useState(false); + const [showCopyIcon, setShowCopyIcon] = useState(false); const [newToken, setNewToken] = useState(''); - const [copyIcon, setCopyIcon] = useState(false); - + const [, setCopiedText] = useCopyToClipboard(); const navigate = useNavigate(); const user = useContext(MyContext); @@ -51,19 +50,19 @@ export default function PersonalAccessTokens() { if (token) { const newToken = JSON.parse(token); setNewToken(newToken); - setShowSnackbar(true); + setShowCopyColumn(true); localStorage.removeItem('token'); } (async function () { try { if (user.name === 'root') { - const response = await getTokens(); - setTokensList(response); + const token = await getTokens(); + setTokens(token); setIsLoading(false); } else if (user.name !== '') { - const response = await getTokens({ user_id: String(user.id) }); - setTokensList(response); + const token = await getTokens({ user_id: String(user.id) }); + setTokens(token); setIsLoading(false); } } catch (error) { @@ -76,26 +75,26 @@ export default function PersonalAccessTokens() { })(); }, [user]); - const handleChange = async (row: any) => { + const handleDeleteClose = async (row: any) => { setOpenDeletToken(true); - setTokensID(row.id); + setTokenSelectedID(row.id); }; - const deletSubmit = async () => { + const handleDeleteToken = async () => { setDeleteLoadingButton(true); try { - await deleteTokens(tokensID); + await deleteTokens(tokenSelectedID); setDeleteLoadingButton(false); setSuccessMessage(true); setOpenDeletToken(false); if (user.name === 'root') { - const response = await getTokens(); - setTokensList(response); + const tokens = await getTokens(); + setTokens(tokens); } else if (user.name !== '') { - const response = await getTokens({ user_id: String(user.id) }); - setTokensList(response); + const token = await getTokens({ user_id: String(user.id) }); + setTokens(token); } } catch (error) { if (error instanceof Error) { @@ -116,11 +115,11 @@ export default function PersonalAccessTokens() { }; const copyToken = () => { - copyToClipboard(newToken); - setCopyIcon(true); + setCopiedText(newToken); + setShowCopyIcon(true); setTimeout(() => { - setCopyIcon(false); + setShowCopyIcon(false); }, 1000); }; @@ -174,7 +173,7 @@ export default function PersonalAccessTokens() { Tokens you have generated that can be used to access the Dragonfly API. - {showSnackbar ? ( + {showCopyColumn ? ( <> @@ -189,16 +188,16 @@ export default function PersonalAccessTokens() { }} onClick={copyToken} > - {copyIcon ? ( + {showCopyIcon ? ( { - setCopyIcon(false); + setShowCopyIcon(false); }} - open={copyIcon} + open={showCopyIcon} disableFocusListener disableHoverListener disableTouchListener @@ -216,8 +215,8 @@ export default function PersonalAccessTokens() { ) : ( <> )} - {Array.isArray(tokensList) && - tokensList.map((item) => { + {Array.isArray(tokens) && + tokens.map((item) => { return ( @@ -269,7 +268,7 @@ export default function PersonalAccessTokens() { }} variant="contained" onClick={() => { - handleChange(item); + handleDeleteClose(item); }} > Delete @@ -350,7 +349,7 @@ export default function PersonalAccessTokens() { }, width: '8rem', }} - onClick={deletSubmit} + onClick={handleDeleteToken} > Delete diff --git a/src/components/developer/tokens/new.tsx b/src/components/developer/tokens/new.tsx index ca088a75..66a3b48d 100644 --- a/src/components/developer/tokens/new.tsx +++ b/src/components/developer/tokens/new.tsx @@ -42,19 +42,20 @@ export default function CreateTokens() { const [errorMessageText, setErrorMessageText] = useState(''); const [nameError, setNameError] = useState(false); const [bioError, setBioError] = useState(false); - const [time, setTiem] = useState('3650'); - const [expiration, setExpiration] = useState(''); + const [selectedTime, setSelectedTime] = useState('3650'); + const [expiredTime, setExpiredTime] = useState(''); const [preheat, setPreheat] = useState(false); const [job, setJob] = useState(false); - const [newLoadingButton, setNewLoadingButton] = useState(false); - const createFormList = [ + const [loadingButton, setLoadingButton] = useState(false); + + const formList = [ { formProps: { id: 'name', label: 'Name', name: 'name', autoComplete: 'family-name', - placeholder: 'Enter your token', + placeholder: 'Enter your token name', helperText: nameError ? 'Please enter the correct token name' : '', error: nameError, InputProps: { @@ -69,7 +70,7 @@ export default function CreateTokens() { }, onChange: (e: any) => { - changeValidate(e.target.value, createFormList[0]); + changeValidate(e.target.value, formList[0]); }, }, syncError: false, @@ -82,12 +83,12 @@ export default function CreateTokens() { }, { formProps: { - id: 'Bio', + id: 'bio', label: 'Description', name: 'bio', autoComplete: 'family-name', - placeholder: 'Enter your Description', - helperText: bioError ? 'Please enter Description' : '', + placeholder: 'Enter your description', + helperText: bioError ? 'The length is 1-1000' : '', error: bioError, InputProps: { endAdornment: ( @@ -100,7 +101,7 @@ export default function CreateTokens() { ), }, onChange: (e: any) => { - changeValidate(e.target.value, createFormList[1]); + changeValidate(e.target.value, formList[1]); }, }, syncError: false, @@ -117,8 +118,8 @@ export default function CreateTokens() { const navigate = useNavigate(); useEffect(() => { - const time = getExpiredTime(Number(3650)); - setExpiration(time); + const expiredTime = getExpiredTime(Number(3650)); + setExpiredTime(expiredTime); }, []); const changeValidate = (value: string, data: any) => { @@ -126,14 +127,15 @@ export default function CreateTokens() { setError(!validate(value)); }; - const handleChangeSelect = (event: SelectChangeEvent) => { - setTiem(event.target.value); + const handleSelectExpiredTime = (event: SelectChangeEvent) => { + setSelectedTime(event.target.value); + const time = getExpiredTime(Number(event.target.value)); - setExpiration(time); + setExpiredTime(time); }; const handleSubmit = async (event: any) => { - setNewLoadingButton(true); + setLoadingButton(true); event.preventDefault(); const name = event.currentTarget.elements.name; @@ -143,7 +145,7 @@ export default function CreateTokens() { const data = new FormData(event.currentTarget); - createFormList.forEach((item) => { + formList.forEach((item) => { const value = data.get(item.formProps.name); item.setError(!item.validate(value as string)); item.syncError = !item.validate(value as string); @@ -153,29 +155,30 @@ export default function CreateTokens() { name: name.value, bio: bio.value, scopes: filteredScopes, - expired_at: expiration, + expired_at: expiredTime, user_id: user.id, }; - const canSubmit = Boolean(!createFormList.filter((item) => item.syncError).length); + const canSubmit = Boolean(!formList.filter((item) => item.syncError).length); if (canSubmit) { try { - const response = await createTokens({ ...formData }); - setNewLoadingButton(false); + const tokens = await createTokens({ ...formData }); + setLoadingButton(false); setSuccessMessage(true); - const token = response.token; + + const token = tokens.token; localStorage.setItem('token', JSON.stringify(token)); navigate('/developer/personal-access-tokens'); } catch (error) { if (error instanceof Error) { - setNewLoadingButton(false); + setLoadingButton(false); setErrorMessage(true); setErrorMessageText(error.message); } } } else { - setNewLoadingButton(false); + setLoadingButton(false); } }; @@ -228,7 +231,7 @@ export default function CreateTokens() { /> - {createFormList.map((item) => ( + {formList.map((item) => ( @@ -271,7 +274,7 @@ export default function CreateTokens() { 10 years - The token expires on {formatDate(expiration) || ''}. + The token expires on {formatDate(expiredTime) || ''}. @@ -316,7 +319,7 @@ export default function CreateTokens() { } size="small" variant="outlined" @@ -346,7 +349,7 @@ export default function CreateTokens() { Cancel } size="small" variant="outlined" diff --git a/src/components/menu/index.tsx b/src/components/menu/index.tsx index fed22167..ddd19198 100644 --- a/src/components/menu/index.tsx +++ b/src/components/menu/index.tsx @@ -57,12 +57,13 @@ export default function Layout(props: any) { const [errorMessageText, setErrorMessageText] = useState(''); const [pageLoding, setPageLoding] = useState(false); const [user, setUser] = useState({ name: '', email: '', avatar: '', id: 0 }); - const [anchorEl, setAnchorEl] = useState(null); - const [isFirstLogin, setIsFirstLogin] = useState(false); - const open = Boolean(anchorEl); + const [anchorElement, setAnchorElement] = useState(null); + const [firstLogin, setFirstLogin] = useState(false); + const [expandDeveloper, setExpandDeveloper] = useState(false); + + const openProfile = Boolean(anchorElement); const location = useLocation(); const navigate = useNavigate(); - const [openAccessTokens, setOpenAccessTokens] = useState(false); useEffect(() => { setPageLoding(true); @@ -87,8 +88,8 @@ export default function Layout(props: any) { setPageLoding(false); })(); - if (location.state?.isFirstLogin) { - setIsFirstLogin(true); + if (location.state?.firstLogin) { + setFirstLogin(true); } }, [location, navigate]); @@ -139,7 +140,7 @@ export default function Layout(props: any) { ]; const handleLogout = async () => { - setAnchorEl(null); + setAnchorElement(null); try { await signOut(); @@ -157,7 +158,7 @@ export default function Layout(props: any) { if (reason === 'clickaway') { return; } - setIsFirstLogin(false); + setFirstLogin(false); setErrorMessage(false); }; @@ -174,7 +175,7 @@ export default function Layout(props: any) { { - setOpenAccessTokens(!openAccessTokens); + setExpandDeveloper(!expandDeveloper); }} sx={{ '&.Mui-selected': { backgroundColor: '#DFFF55' }, @@ -237,9 +238,9 @@ export default function Layout(props: any) { > {items.text} - {openAccessTokens ? : } + {expandDeveloper ? : } - + { - setOpenAccessTokens(!openAccessTokens); + setExpandDeveloper(!expandDeveloper); }} sx={{ '&.Mui-selected': { backgroundColor: '#DFFF55' }, @@ -311,9 +312,9 @@ export default function Layout(props: any) { > {items.text} - {openAccessTokens ? : } + {expandDeveloper ? : } - + { - setAnchorEl(event.currentTarget); + setAnchorElement(event.currentTarget); }} size="small" - aria-controls={open ? 'account-menu' : undefined} + aria-controls={openProfile ? 'account-menu' : undefined} aria-haspopup="true" - aria-expanded={open ? 'true' : undefined} + aria-expanded={openProfile ? 'true' : undefined} sx={{ position: 'relative', padding: '0' }} > { - setAnchorEl(null); + setAnchorElement(null); }} - sx={{ position: 'absolute', top: '-5.5rem', left: '-4.8rem' }} + sx={{ position: 'absolute', top: '-5.8rem', left: '-5rem' }} > { - setAnchorEl(null); + setAnchorElement(null); navigate('/profile'); }} diff --git a/src/components/profile/index.tsx b/src/components/profile/index.tsx index f28a678f..ffe427f1 100644 --- a/src/components/profile/index.tsx +++ b/src/components/profile/index.tsx @@ -75,9 +75,9 @@ export default function Profile() { setIsLoading(true); if (payload?.id) { - const response = await getUser(payload?.id); - setUser(response); - setBio(response.bio); + const user = await getUser(payload?.id); + setUser(user); + setBio(user.bio); setIsLoading(false); } } catch (error) { @@ -163,9 +163,9 @@ export default function Profile() { { formProps: { - id: 'Phone', + id: 'phone', label: 'Phone', - name: 'Phone', + name: 'phone', autoComplete: 'family-name', value: user.phone, placeholder: 'Enter your Phone', @@ -228,9 +228,9 @@ export default function Profile() { }, { formProps: { - id: 'Email', + id: 'email', label: 'Email', - name: 'Email', + name: 'email', autoComplete: 'family-name', value: user.email, placeholder: 'Enter your Email', @@ -414,7 +414,7 @@ export default function Profile() { cb && cb(); }; - const changePersonal = async (event: any) => { + const handlePersonalInformation = async (event: any) => { event.preventDefault(); setPersonalLoadingButton(true); @@ -457,15 +457,15 @@ export default function Profile() { } }; - const cancelChangePersonal = async () => { + const cancelHandlePersonalInformation = async () => { setShowPersonalInformation(true); try { if (userID) { - const response = await getUser(userID); + const user = await getUser(userID); - setUser(response); - setBio(response.bio); + setUser(user); + setBio(user.bio); } } catch (error) { if (error instanceof Error) { @@ -476,7 +476,7 @@ export default function Profile() { } }; - const changePassword = async (event: any) => { + const handleChangePassword = async (event: any) => { setPasswordLoadingButton(true); event.preventDefault(); @@ -588,7 +588,7 @@ export default function Profile() { ) : ( - + Change Password {passwordForm.map((item) => ( @@ -711,7 +711,7 @@ export default function Profile() { ) : ( Personal Information - + {profileForm.map((item) => ( cancel diff --git a/src/components/schedulers/show.tsx b/src/components/schedulers/show.tsx index 461013d3..145035ae 100644 --- a/src/components/schedulers/show.tsx +++ b/src/components/schedulers/show.tsx @@ -1,4 +1,3 @@ -import * as React from 'react'; import Paper from '@mui/material/Paper'; import { Alert, Box, Breadcrumbs, Chip, Link as RouterLink, Skeleton, Snackbar, Typography } from '@mui/material'; import { useEffect, useState } from 'react'; @@ -14,7 +13,7 @@ export default function Schedulers() { const [isLoading, setIsLoading] = useState(false); const [errorMessage, setErrorMessage] = useState(false); const [errorMessageText, setErrorMessageText] = useState(''); - const [schedule, setSchedule] = useState({ + const [scheduler, setScheduler] = useState({ id: 0, host_name: '', ip: '', @@ -59,8 +58,8 @@ export default function Schedulers() { setIsLoading(true); if (typeof params.id === 'string') { - const response = await getScheduler(params.id); - setSchedule(response); + const scheduler = await getScheduler(params.id); + setScheduler(scheduler); setIsLoading(false); } } catch (error) { @@ -101,13 +100,13 @@ export default function Schedulers() { component={Link} underline="hover" color="inherit" - to={`/clusters/${schedule.scheduler_cluster_id}`} + to={`/clusters/${scheduler.scheduler_cluster_id}`} > - {`scheduler-cluster-${schedule.scheduler_cluster_id}`} + {`scheduler-cluster-${scheduler.scheduler_cluster_id}`} schedulers - {schedule?.host_name} + {scheduler?.host_name} @@ -122,7 +121,7 @@ export default function Schedulers() { - {isLoading ? : schedule?.id || '-'} + {isLoading ? : scheduler?.id || '-'} @@ -133,7 +132,7 @@ export default function Schedulers() { - {isLoading ? : schedule?.host_name || '-'} + {isLoading ? : scheduler?.host_name || '-'} @@ -144,7 +143,7 @@ export default function Schedulers() { - {isLoading ? : schedule?.ip} + {isLoading ? : scheduler?.ip} @@ -155,7 +154,7 @@ export default function Schedulers() { - {isLoading ? : schedule?.scheduler_cluster_id} + {isLoading ? : scheduler?.scheduler_cluster_id} @@ -173,35 +172,35 @@ export default function Schedulers() { {item.name === 'created_at' ? ( } - label={getDatetime(schedule?.[item?.name] || '')} + label={getDatetime(scheduler?.[item?.name] || '')} variant="outlined" size="small" /> ) : item.name === 'updated_at' ? ( } - label={getDatetime(schedule?.[item?.name])} + label={getDatetime(scheduler?.[item?.name])} variant="outlined" size="small" /> ) : item.name === 'state' ? ( ) : item.name === 'features' ? ( <> - {schedule?.[item?.name]?.map((items: string, id: any) => ( + {scheduler?.[item?.name]?.map((items: string, id: any) => ( ) : ( - {schedule?.[item?.name as keyof typeof schedule] || '-'} + {scheduler?.[item?.name as keyof typeof scheduler] || '-'} )} diff --git a/src/components/seed-peers/show.tsx b/src/components/seed-peers/show.tsx index 49c55465..e7823a18 100644 --- a/src/components/seed-peers/show.tsx +++ b/src/components/seed-peers/show.tsx @@ -32,7 +32,7 @@ export default function SeedPeer() { const params = useParams(); - const seedPeersLabel = [ + const seedPeerLabel = [ { label: 'Port', name: 'port', @@ -69,8 +69,8 @@ export default function SeedPeer() { setIsLoading(true); if (typeof params.id === 'string') { - const response = await getSeedPeer(params.id); - setSeedPeer(response); + const seedPeer = await getSeedPeer(params.id); + setSeedPeer(seedPeer); setIsLoading(false); } } catch (error) { @@ -170,7 +170,7 @@ export default function SeedPeer() { - {seedPeersLabel.map((item) => { + {seedPeerLabel.map((item) => { return ( diff --git a/src/components/signin/index.tsx b/src/components/signin/index.tsx index ed5fd190..3f4d5b63 100644 --- a/src/components/signin/index.tsx +++ b/src/components/signin/index.tsx @@ -23,6 +23,8 @@ export default function SignIn() { const [accountError, setAccountError] = useState(false); const [passwordError, setPasswordError] = useState(false); const [pageLoding, setPageLoding] = useState(false); + + const navigate = useNavigate(); const location = useLocation(); const formList = [ @@ -100,8 +102,6 @@ export default function SignIn() { }, }); - const router = useNavigate(); - const changeValidate = (value: string, data: any) => { const { setError, validate } = data; setError(!validate(value)); @@ -133,9 +133,9 @@ export default function SignIn() { }); if (accountElement.value === 'root' && passwordElement.value === 'dragonfly') { - router('/clusters', { state: { isFirstLogin: true } }); + navigate('/clusters', { state: { isFirstLogin: true } }); } else { - router('/clusters'); + navigate('/clusters'); } setPageLoding(true); diff --git a/src/components/signup/index.tsx b/src/components/signup/index.tsx index a54c2fbe..fe8ba85f 100644 --- a/src/components/signup/index.tsx +++ b/src/components/signup/index.tsx @@ -27,6 +27,7 @@ export default function SignUp() { const [showPassword, setShowPassword] = useState(false); const [showConfirmPassword, setShowConfirmPassword] = useState(false); const [pageLoding, setPageLoding] = useState(false); + const navigate = useNavigate(); const location = useLocation(); @@ -206,6 +207,7 @@ export default function SignUp() { password: passwordElement.value, email: emailElement.value, }); + setPageLoding(true); navigate('/signin'); } catch (error) { diff --git a/src/components/users/index.tsx b/src/components/users/index.tsx index cffc2b5e..76e43c81 100644 --- a/src/components/users/index.tsx +++ b/src/components/users/index.tsx @@ -73,9 +73,9 @@ export default function Users() { const [successMessage, setSuccessMessage] = useState(false); const [errorMessage, setErrorMessage] = useState(false); const [errorMessageText, setErrorMessageText] = useState(''); - const [DetailLoading, setDetailLoading] = useState(true); - const [openDetail, setOpenDeatil] = useState(false); - const [openUser, setOpenUser] = useState(false); + const [detailIsLoading, setDetailIsLoading] = useState(true); + const [userDetail, setUserDetail] = useState(false); + const [switchUser, setSwitchUser] = useState(false); const [userID, setUserID] = useState(''); const [root] = useState('root'); const [guest] = useState('guest'); @@ -100,8 +100,8 @@ export default function Users() { try { setIsLoading(true); - const response = await getUsers(); - setUsers(response); + const user = await getUsers(); + setUsers(user); setIsLoading(false); } catch (error) { if (error instanceof Error) { @@ -115,22 +115,22 @@ export default function Users() { const handleChange = async (row: any) => { try { - setOpenDeatil(true); - setDetailLoading(true); + setUserDetail(true); + setDetailIsLoading(true); setSelectedRow(row); - const response = await getUser(row.id); - const roleResponse = await getUserRoles(row.id); + const user = await getUser(row.id); + const role = await getUserRoles(row.id); - setDetailRole(roleResponse[0] || ''); - setUser(response); - setDetailLoading(false); + setDetailRole(role[0] || ''); + setUser(user); + setDetailIsLoading(false); } catch (error) { if (error instanceof Error) { setErrorMessage(true); setErrorMessageText(error.message); - setOpenDeatil(true); - setDetailLoading(false); + setUserDetail(true); + setDetailIsLoading(false); } } }; @@ -140,21 +140,21 @@ export default function Users() { setSelectedRow(row); setUserID(row.id); - const response = await getUserRoles(row.id); - setRole(response[0] || ''); - setOpenUser(true); + const role = await getUserRoles(row.id); + setRole(role[0] || ''); + setSwitchUser(true); } catch (error) { if (error instanceof Error) { setErrorMessage(true); setErrorMessageText(error.message); - setOpenUser(true); + setSwitchUser(true); } } }; - const closure = () => { - setOpenDeatil(false); - setOpenUser(false); + const closeAllPopups = () => { + setUserDetail(false); + setSwitchUser(false); setSelectedRow(null); }; @@ -168,7 +168,7 @@ export default function Users() { setSuccessMessage(true); setLoadingButton(false); - setOpenUser(false); + setSwitchUser(false); setSelectedRow(null); } catch (error) { if (error instanceof Error) { @@ -185,7 +185,7 @@ export default function Users() { setSuccessMessage(true); setLoadingButton(false); - setOpenUser(false); + setSwitchUser(false); setSelectedRow(null); } catch (error) { if (error instanceof Error) { @@ -388,8 +388,8 @@ export default function Users() { Cancel @@ -499,7 +499,7 @@ export default function Users() { - + @@ -508,10 +508,10 @@ export default function Users() { { - setOpenDeatil(false); - setOpenUser(false); + setUserDetail(false); + setSwitchUser(false); setSelectedRow(null); - setDetailLoading(true); + setDetailIsLoading(true); }} > @@ -525,7 +525,9 @@ export default function Users() { ID - {DetailLoading ? : user?.id} + + {detailIsLoading ? : user?.id} + @@ -536,7 +538,7 @@ export default function Users() { - {DetailLoading ? : user?.name} + {detailIsLoading ? : user?.name} @@ -548,7 +550,7 @@ export default function Users() { - {DetailLoading ? ( + {detailIsLoading ? ( ) : ( - {DetailLoading ? : user?.email || '-'} + {detailIsLoading ? : user?.email || '-'} @@ -590,7 +592,7 @@ export default function Users() { - {DetailLoading ? : user.phone || '-'} + {detailIsLoading ? : user.phone || '-'} @@ -604,7 +606,7 @@ export default function Users() { - {DetailLoading ? : user.location || '-'} + {detailIsLoading ? : user.location || '-'} @@ -617,7 +619,7 @@ export default function Users() { Created At - {DetailLoading ? ( + {detailIsLoading ? ( ) : ( - {DetailLoading ? ( + {detailIsLoading ? ( ) : (