From b275bdc8efe3b007b84520cd195af8e13169273f Mon Sep 17 00:00:00 2001 From: Shemy Gan Date: Wed, 4 Dec 2024 13:41:37 -0500 Subject: [PATCH] - Link general settings and contens to status page in navigation --- Client/src/Components/ProgressBars/index.jsx | 2 +- .../TabPanels/Status/GeneralSettingsPanel.jsx | 104 +++++++++--------- .../src/Pages/Status/CreateStatus/index.jsx | 29 +++-- 3 files changed, 65 insertions(+), 70 deletions(-) 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;