diff --git a/Client/src/Components/ProgressBars/index.jsx b/Client/src/Components/ProgressBars/index.jsx
index 198f740aa..c8fd9b607 100644
--- a/Client/src/Components/ProgressBars/index.jsx
+++ b/Client/src/Components/ProgressBars/index.jsx
@@ -169,7 +169,7 @@ const ProgressUpload = ({ icon, label, size, progress = 0, onClick, error }) =>
ProgressUpload.propTypes = {
icon: PropTypes.element, // JSX element for the icon (optional)
- label: PropTypes.string.isRequired, // Label text for the progress item
+ label: PropTypes.string, // Label text for the progress item
size: PropTypes.string.isRequired, // Size information for the progress item
progress: PropTypes.number.isRequired, // Current progress value (0-100)
onClick: PropTypes.func.isRequired, // Function to handle click events on the remove button
diff --git a/Client/src/Components/TabPanels/Status/GeneralSettingsPanel.jsx b/Client/src/Components/TabPanels/Status/GeneralSettingsPanel.jsx
index f2a37229f..54caff137 100644
--- a/Client/src/Components/TabPanels/Status/GeneralSettingsPanel.jsx
+++ b/Client/src/Components/TabPanels/Status/GeneralSettingsPanel.jsx
@@ -7,13 +7,17 @@ import TabPanel from "@mui/lab/TabPanel";
import TextInput from "../../Inputs/TextInput";
import ImageField from "../../Inputs/Image";
import timezones from "../../../Utils/timezones.json";
-import Select from "../../Inputs/Select"
-import { logoImageValidation, publicPageGeneralSettingsValidation } from "../../../Validation/validation"
+import Select from "../../Inputs/Select";
+import {
+ logoImageValidation,
+ publicPageGeneralSettingsValidation,
+} from "../../../Validation/validation";
import { buildErrors } from "../../../Validation/error";
import { formatBytes } from "../../../Utils/fileUtils";
import ProgressUpload from "../../ProgressBars";
import ImageIcon from "@mui/icons-material/Image";
import { HttpAdornment } from "../../Inputs/TextInput/Adornments";
+import { hasValidationErrors } from "../../../Validation/error";
const GeneralSettingsPanel = () => {
const theme = useTheme();
@@ -32,7 +36,6 @@ const GeneralSettingsPanel = () => {
publish: false,
logo: null,
});
-
// Clears specific error from errors state
const clearError = (err) => {
setErrors((prev) => {
@@ -40,22 +43,17 @@ const GeneralSettingsPanel = () => {
if (updatedErrors[err]) delete updatedErrors[err];
return updatedErrors;
});
- };
+ };
const removeLogo = () => {
errors["logo"] && clearError("logo");
setLogo({});
- // interrupt interval if image upload is canceled prior to completing the process
- clearInterval(intervalRef.current);
- setProgress({ value: 0, isLoading: false });
- };
-
- // Updates profile image displayed on UI
- const handleUpdateLogo = () => {
- setProgress({ value: 0, isLoading: false });
setLocalData((prev) => ({
...prev,
- logo: logo.src,
- }));
+ logo: logo?.src,
+ }));
+ // interrupt interval if image upload is canceled prior to completing the process
+ clearInterval(intervalRef.current);
+ setProgress({ value: 0, isLoading: false });
};
const handleChange = (event) => {
@@ -67,7 +65,21 @@ const GeneralSettingsPanel = () => {
}));
};
- const handleSubmit = () => {};
+ const handleSubmit = () => {
+ //validate rest of the form
+ delete localData.logo;
+ delete localData.publish;
+ if (hasValidationErrors(localData, publicPageGeneralSettingsValidation, setErrors)) {
+ return;
+ }
+ //validate image field
+ let error = validateField(
+ { type: logo?.type ?? null, size: logo?.size ?? null },
+ logoImageValidation
+ );
+ if (error) return;
+ localData.logo = { ...logo, size: formatBytes(logo?.size) };
+ };
const handleBlur = (event) => {
event.preventDefault();
@@ -92,11 +104,11 @@ const GeneralSettingsPanel = () => {
else delete prevErrors[name];
return prevErrors;
});
- if (error) return true;
+ if (error) return true;
};
const handleLogo = (event) => {
- const pic = event.target.files[0];
+ const pic = event.target?.files?.[0];
let error = validateField({ type: pic?.type, size: pic?.size }, logoImageValidation);
if (error) return;
@@ -104,9 +116,9 @@ const GeneralSettingsPanel = () => {
setLogo({
src: URL.createObjectURL(pic),
name: pic.name,
- size: formatBytes(pic.size),
+ type: pic.type,
+ size: pic.size,
});
-
intervalRef.current = setInterval(() => {
const buffer = 12;
setProgress((prev) => {
@@ -121,7 +133,7 @@ const GeneralSettingsPanel = () => {
return (
{
{
-
+
{
value={localData.companyName}
onChange={handleChange}
onBlur={handleBlur}
- error={errors["companyName"]}
+ helperText={errors["companyName"]}
+ error={errors["companyName"] ? true : false}
/>
{
//prefix={"http://uptimegenie.com/"}
onChange={handleChange}
onBlur={handleBlur}
- error={errors["url"]}
+ helperText={errors["url"]}
+ error={errors["url"] ? true : false}
/>
@@ -219,7 +232,7 @@ const GeneralSettingsPanel = () => {
}
label={logo?.name}
- size={logo?.size}
+ size={formatBytes(logo?.size)}
progress={progress.value}
onClick={removeLogo}
error={errors["logo"]}
@@ -227,35 +240,6 @@ const GeneralSettingsPanel = () => {
) : (
""
)}
- {logo?.src && (
-
-
-
-
- )}
{
/>
+
+
+
);
diff --git a/Client/src/Pages/Status/CreateStatus/index.jsx b/Client/src/Pages/Status/CreateStatus/index.jsx
index cf3733da9..127bbb3b8 100644
--- a/Client/src/Pages/Status/CreateStatus/index.jsx
+++ b/Client/src/Pages/Status/CreateStatus/index.jsx
@@ -5,8 +5,10 @@ import { Box, Tab, useTheme } from "@mui/material";
import TabContext from "@mui/lab/TabContext";
import TabList from "@mui/lab/TabList";
import GeneralSettingsPanel from "../../../Components/TabPanels/Status/GeneralSettingsPanel";
-import ImageField from "../../../Components/Inputs/Image";
-import Checkbox from "../../../Components/Inputs/Checkbox";
+import {
+ capitalizeFirstLetter,
+ toLowerCaseFirstLetter,
+} from "../../../Utils/stringUtils";
/**
* CreateStatus page renders a page with tabs for general settings and contents.
@@ -14,22 +16,19 @@ import Checkbox from "../../../Components/Inputs/Checkbox";
* @returns {JSX.Element}
*/
-const CreateStatus = ({ open = "general settings" }) => {
+const CreateStatus = ({ open = "general-settings" }) => {
const theme = useTheme();
const navigate = useNavigate();
- const tab = open;
+ const tab = open
+ .split("-")
+ .map((a) => capitalizeFirstLetter(a))
+ .join(" ");
const handleTabChange = (event, newTab) => {
- navigate(`/status/${newTab}`);
+ let toNavString = newTab.split(" ").map((a) => toLowerCaseFirstLetter(a));
+ toNavString = toNavString.join("-");
+ navigate(`/status/${toNavString}`);
};
let tabList = ["General Settings", "Contents"];
- const handlePicture = (event) => {}
-
- const handleSubmit = () => {};
-
- const handleChange = () => {};
-
- const handleBlur = () => {};
-
return (
{
{
};
CreateStatus.propTypes = {
- open: PropTypes.oneOf(["general settings", "contents"]),
+ open: PropTypes.oneOf(["general-settings", "contents"]),
};
export default CreateStatus;