md.asif5/osaka
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: simplify notification state management across components

Browse Source
This commit is contained in:
Md Asif 2024-12-24 01:03:46 +05:30
parent 265d0b2209
commit 27f4597348
5 changed files with 40 additions and 90 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
src/pages/ChargeEdit.jsx
View File

@ -20,11 +20,7 @@ function ChargeEdit() {
penaltyAmountEdit: false, penaltyAmountEdit: false,
}); });
const [notification, setNotification] = useState({ const [notification, setNotification] = useState({ message: "", type: "" });
visible: false,
message: "",
type: "",
});
const { setIsLoading } = useLoading(); const { setIsLoading } = useLoading();
const { t } = useTranslation(); const { t } = useTranslation();
@ -36,7 +32,10 @@ function ChargeEdit() {
const fetchCharges = async () => { const fetchCharges = async () => {
try { try {
setIsLoading(true); setIsLoading(true);
const response = await lockerService.getCharges(productCode, interestCategory); const response = await lockerService.getCharges(
productCode,
interestCategory
);
if (response.status === 200) { if (response.status === 200) {
const { rent, penalty } = response.data; const { rent, penalty } = response.data;
setChargeDetails({ setChargeDetails({
@ -47,7 +46,6 @@ function ChargeEdit() {
}); });
} else { } else {
setNotification({ setNotification({
visible: true,
message: response.data.message, message: response.data.message,
type: "error", type: "error",
}); });
@ -55,7 +53,6 @@ function ChargeEdit() {
} catch (error) { } catch (error) {
console.error(error); console.error(error);
setNotification({ setNotification({
visible: true,
message: error.message, message: error.message,
type: "error", type: "error",
}); });
@ -114,13 +111,11 @@ function ChargeEdit() {
); );
if (response.status === 200) { if (response.status === 200) {
setNotification({ setNotification({
visible: true,
message: response.data.message, message: response.data.message,
type: "success", type: "success",
}); });
} else { } else {
setNotification({ setNotification({
visible: true,
message: response.data.message, message: response.data.message,
type: "error", type: "error",
}); });
@ -128,7 +123,6 @@ function ChargeEdit() {
} catch (error) { } catch (error) {
console.error(error); console.error(error);
setNotification({ setNotification({
visible: true,
message: error.message, message: error.message,
type: "error", type: "error",
}); });
@ -167,7 +161,7 @@ function ChargeEdit() {
return ( return (
<div> <div>
<AnimatePresence> <AnimatePresence>
{notification.visible && <Notification notification={notification} />} {notification.message !== "" && <Notification {...notification} />}
</AnimatePresence> </AnimatePresence>
<div className="relative"> <div className="relative">
{notification.type === "success" && ( {notification.type === "success" && (

15
src/pages/CheckInOutLog.jsx
View File

@ -10,10 +10,7 @@ import { useLoading } from "../hooks/useLoading";
function CheckInOutLog() { function CheckInOutLog() {
const [time, setTime] = useState(null); const [time, setTime] = useState(null);
const [checkType, setCheckType] = useState(""); const [checkType, setCheckType] = useState("");
const [notification, setNotification] = useState({ const [notification, setNotification] = useState({ message: "", type: "" });
message: "",
type: "",
});
const location = useLocation(); const location = useLocation();
const showToast = useToast(); const showToast = useToast();
@ -29,7 +26,11 @@ function CheckInOutLog() {
// Add your logic here // Add your logic here
try { try {
setIsLoading(true); setIsLoading(true);
const response = await lockerService.checkInOut(accountNumber, time, checkType); const response = await lockerService.checkInOut(
accountNumber,
time,
checkType
);
if (response.status === 200) { if (response.status === 200) {
setNotification({ message: response.data.message, type: "success" }); setNotification({ message: response.data.message, type: "success" });
} else { } else {
@ -42,7 +43,7 @@ function CheckInOutLog() {
} finally { } finally {
setIsLoading(false); setIsLoading(false);
} }
} };
return ( return (
<div> <div>
@ -80,7 +81,7 @@ function CheckInOutLog() {
</select> </select>
</div> </div>
</div> </div>
<Button text="Submit" onClick={handleSubmit}/> <Button text="Submit" onClick={handleSubmit} />
</FormBox> </FormBox>
</div> </div>
); );

68
src/pages/KeySwap.jsx
View File

@ -1,5 +1,5 @@
import { useState } from "react"; import { useState } from "react";
import { motion, AnimatePresence } from "motion/react"; import { AnimatePresence } from "motion/react";
import { useTranslation } from "react-i18next"; import { useTranslation } from "react-i18next";
import { useToast } from "../hooks/useToast"; import { useToast } from "../hooks/useToast";
import { useLoading } from "../hooks/useLoading"; import { useLoading } from "../hooks/useLoading";
@ -10,17 +10,13 @@ import Button from "../components/Button";
import { lockerService } from "../services/locker.service"; import { lockerService } from "../services/locker.service";
import clsx from "clsx"; import clsx from "clsx";
import FormBox from "../components/FormBox"; import FormBox from "../components/FormBox";
import { Copy } from "lucide-react"; import Notification from "../components/Notification";
function KeySwap() { function KeySwap() {
const { t } = useTranslation(); const { t } = useTranslation();
const showToast = useToast(); const showToast = useToast();
const { isLoading, setIsLoading } = useLoading(); const { isLoading, setIsLoading } = useLoading();
const [notification, setNotification] = useState({ const [notification, setNotification] = useState({ message: "", type: "" });
visible: false,
message: "",
type: "",
});
const [keySwapDetails, setKeySwapDetails] = useState({ const [keySwapDetails, setKeySwapDetails] = useState({
cabinetId: "", cabinetId: "",
lockerId: "", lockerId: "",
@ -117,20 +113,17 @@ function KeySwap() {
); );
if (response.status === 200) { if (response.status === 200) {
setNotification({ setNotification({
visible: true,
message: response.data.message, message: response.data.message,
type: "success", type: "success",
}); });
} else { } else {
setNotification({ setNotification({
visible: true,
message: response.data.message, message: response.data.message,
type: "error", type: "error",
}); });
} }
} catch (error) { } catch (error) {
setNotification({ setNotification({
visible: true,
message: error.message, message: error.message,
type: "error", type: "error",
}); });
@ -169,51 +162,22 @@ function KeySwap() {
return ( return (
<div> <div>
<AnimatePresence> <AnimatePresence>
{notification.visible && ( {notification.message !== "" && <Notification {...notification} />}
<motion.div </AnimatePresence>
initial={{ opacity: 0 }} <div className="relative">
animate={{ opacity: 1 }} {notification.type === "success" && (
exit={{ opacity: 0 }} <div className="absolute inset-0 bg-[#fff]/50 z-10 rounded-3xl" />
className={clsx(
"p-4 mb-8 font-body text-center text-lg rounded-2xl flex items-center justify-center gap-2",
notification.type === "error"
? "bg-error-surface text-error"
: "bg-success-surface text-success"
)}
>
{notification.message.split(":").map((msg, index) => {
return index === 1 ? (
<span key={index} className="border-b border-dashed">
{msg}
</span>
) : (
<span key={index}>{msg}</span>
);
})}
<Copy
cursor={"pointer"}
size={15}
onClick={navigator.clipboard.writeText(
notification.message.split(":")[1].trim()
)}
/>
</motion.div>
)} )}
</AnimatePresence> <FormBox title={t("lockerStatus")}>
<div className="relative"> <div className="p-2 pt-7 flex flex-col gap-4">
{notification.type === "success" && ( {formFields.map(renderField)}
<div className="absolute inset-0 bg-[#fff]/50 z-10 rounded-3xl" /> </div>
)} <Button text={t("submit")} onClick={handleKeySwap} />
<FormBox title={t("lockerStatus")}> </FormBox>
<div className="p-2 pt-7 flex flex-col gap-4">
{formFields.map(renderField)}
</div> </div>
<Button text={t("submit")} onClick={handleKeySwap} />
</FormBox>
</div> </div>
</div> );
)
} }
export default KeySwap; export default KeySwap;

24
src/pages/LockerStatus.jsx
View File

@ -24,11 +24,7 @@ function LockerStatus() {
statusValid: true, statusValid: true,
}); });
const { isLoading, setIsLoading } = useLoading(); const { isLoading, setIsLoading } = useLoading();
const [notification, setNotification] = useState({ const [notification, setNotification] = useState({ message: "", type: "" });
visible: false,
message: "",
type: "",
});
const formFields = [ const formFields = [
{ {
@ -89,13 +85,11 @@ function LockerStatus() {
lockerDetails.status lockerDetails.status
); );
setNotification({ setNotification({
visible: true,
message: response.data.message, message: response.data.message,
type: "success", type: "success",
}); });
} catch (error) { } catch (error) {
setNotification({ setNotification({
visible: true,
message: error.message, message: error.message,
type: "error", type: "error",
}); });
@ -135,18 +129,18 @@ function LockerStatus() {
return ( return (
<div> <div>
<AnimatePresence> <AnimatePresence>
{notification.visible && <Notification notification={notification} />} {notification.message !== "" && <Notification {...notification} />}
</AnimatePresence> </AnimatePresence>
<div className="relative"> <div className="relative">
{notification.type === "success" && ( {notification.type === "success" && (
<div className="absolute inset-0 bg-[#fff]/50 z-10 rounded-3xl" /> <div className="absolute inset-0 bg-[#fff]/50 z-10 rounded-3xl" />
)} )}
<FormBox title={t("lockerStatus")}> <FormBox title={t("lockerStatus")}>
<div className="p-2 pt-7 flex flex-col gap-4"> <div className="p-2 pt-7 flex flex-col gap-4">
{formFields.map(renderField)} {formFields.map(renderField)}
</div> </div>
<Button text={t("submit")} onClick={handleSubmit} /> <Button text={t("submit")} onClick={handleSubmit} />
</FormBox> </FormBox>
</div> </div>
</div> </div>
); );

5
src/pages/LockersRegistration.jsx
View File

@ -17,7 +17,6 @@ function LockersRegistration() {
const cabinetId = location.state?.cabinetId; const cabinetId = location.state?.cabinetId;
const [submitting, setSubmitting] = useState(false); const [submitting, setSubmitting] = useState(false);
const [notification, setNotification] = useState({ const [notification, setNotification] = useState({
visible: false,
message: "", message: "",
type: "", type: "",
}); });
@ -109,14 +108,12 @@ function LockersRegistration() {
lockerValues lockerValues
); );
setNotification({ setNotification({
visible: true,
message: `Cabinet creation successful. Cabinet ID: ${response.data.cabinetId}`, message: `Cabinet creation successful. Cabinet ID: ${response.data.cabinetId}`,
type: "success", type: "success",
}); });
} catch (error) { } catch (error) {
console.error(error); console.error(error);
setNotification({ setNotification({
visible: true,
message: `Error registering lockers. ${error.message}`, message: `Error registering lockers. ${error.message}`,
type: "error", type: "error",
}); });
@ -207,7 +204,7 @@ function LockersRegistration() {
return ( return (
<div> <div>
<AnimatePresence> <AnimatePresence>
{notification.visible && <Notification notification={notification} />} {notification.message !== "" && <Notification {...notification} />}
</AnimatePresence> </AnimatePresence>
<div className="relative"> <div className="relative">
{notification.type === "success" && ( {notification.type === "success" && (