Merge branch 'memberpage' of WrenchBoard/Users-Wrench into master

This commit is contained in:
2024-01-16 04:23:21 +00:00
committed by Gogs
7 changed files with 78 additions and 74 deletions
+2 -3
View File
@@ -2,9 +2,8 @@ import React from "react";
import GetMyPageLoad from "./getMyPageLoad"; import GetMyPageLoad from "./getMyPageLoad";
const LoadedPage = () => { const LoadedPage = ({reloader}) => {
const { loading, data, error } = GetMyPageLoad(); const { loading, data, error } = GetMyPageLoad(reloader);
return ( return (
<div className="w-full border border-gray-400 rounded-md p-4 flex flex-col h-72 gap-2 overflow-y-auto"> <div className="w-full border border-gray-400 rounded-md p-4 flex flex-col h-72 gap-2 overflow-y-auto">
+8 -2
View File
@@ -1,13 +1,19 @@
import LoadingSpinner from "../Spinners/LoadingSpinner"; import LoadingSpinner from "../Spinners/LoadingSpinner";
const UpdateButton = ({ onClick, loading }) => ( const UpdateButton = ({ onClick, loading, msg }) => (
<button <button
type="submit" type="submit"
onClick={onClick} onClick={onClick}
disabled={loading} disabled={loading}
className="text-lg text-white bg-sky-blue px-4 py-2 hover:opacity-90 rounded-full" className="text-lg text-white bg-sky-blue px-4 py-2 hover:opacity-90 rounded-full"
> >
{loading ? <LoadingSpinner size="6" color="sky-blue" /> : "Update"} {loading ? (
<LoadingSpinner size="6" color="sky-blue" />
) : msg !== "" ? (
msg
) : (
"Update"
)}
</button> </button>
); );
+2 -2
View File
@@ -1,7 +1,7 @@
import InputCom from "../Helpers/Inputs/InputCom/index"; import InputCom from "../Helpers/Inputs/InputCom/index";
import UpdateButton from "./UpdateButton"; import UpdateButton from "./UpdateButton";
const YourPageForm = ({ values, onChange, onSubmit, loading }) => ( const YourPageForm = ({ values, onChange, onSubmit, loading, msg }) => (
<div className="ml-16 my-2 flex flex-col gap-3"> <div className="ml-16 my-2 flex flex-col gap-3">
<div className="field w-full"> <div className="field w-full">
<InputCom <InputCom
@@ -33,7 +33,7 @@ const YourPageForm = ({ values, onChange, onSubmit, loading }) => (
/> />
</div> </div>
<div className="w-full flex justify-end mb-2"> <div className="w-full flex justify-end mb-2">
<UpdateButton onClick={onSubmit} loading={loading} /> <UpdateButton onClick={onSubmit} loading={loading} msg={msg} />
</div> </div>
<hr /> <hr />
</div> </div>
+3 -7
View File
@@ -1,10 +1,9 @@
import { useEffect, useState } from "react"; import { useEffect, useState } from "react";
import usersService from "../../services/UsersService"; import usersService from "../../services/UsersService";
import { useSelector } from "react-redux";
const GetMyPageLoad = () => { const GetMyPageLoad = (reloader) => {
const { yourPageTable } = useSelector((state) => state.tableReload); const api = new usersService();
const [response, setResponse] = useState({ const [response, setResponse] = useState({
loading: true, loading: true,
@@ -14,20 +13,17 @@ const GetMyPageLoad = () => {
useEffect(() => { useEffect(() => {
const fetchData = async () => { const fetchData = async () => {
let api = new usersService();
try { try {
const res = await api.MyPageLoad(); const res = await api.MyPageLoad();
setResponse({ loading: false, data: res.data, error: null }); setResponse({ loading: false, data: res.data, error: null });
console.log(response.data)
} catch (error) { } catch (error) {
setResponse({ loading: false, data: null, error: error.message }); setResponse({ loading: false, data: null, error: error.message });
} }
}; };
fetchData(); fetchData();
}, [yourPageTable]); }, [reloader]);
return response; return response;
}; };
+63 -50
View File
@@ -1,60 +1,24 @@
import React, { useState } from "react"; import React, { useState } from "react";
import Layout from "../Partials/Layout";
import usersService from "../../services/UsersService"; import usersService from "../../services/UsersService";
import YourPageForm from "./YourPageForm"; import Layout from "../Partials/Layout";
import LoadedPage from "./LoadedPage"; import LoadedPage from "./LoadedPage";
import { useDispatch } from "react-redux"; import YourPageForm from "./YourPageForm";
import { tableReload } from "../../store/TableReloads"; // import { updateYourPage } from "./updateYourPage";
const YourPage = () => { const YourPage = () => {
const dispatch = useDispatch; const [pageValues, setPageValues] = useState(pageInitialValues);
const [pageValues, setPageValues] = useState({ const [response, setResponse] = useState(responseInitialValues);
intro: "", const [reloader, setReloader] = useState(false);
description: "",
});
const [response, setResponse] = useState({ const handleChange = ({ target: { name, value } }) =>
loading: false,
data: {},
error: "",
msg: "",
});
const handleChange = (event) => {
let { name, value } = event.target;
setPageValues((prev) => ({ ...prev, [name]: value })); setPageValues((prev) => ({ ...prev, [name]: value }));
};
const updateYourPageDetails = async () => { const updateYourPageDetails = updateYourPage(
if (!pageValues.intro || !pageValues.description) return; pageValues,
setResponse,
try { setPageValues,
setResponse({ loading: true, error: "", msg: "" }); setReloader
);
let api = new usersService();
const res = await api.MyPageIntro(pageValues);
setTimeout(() => {
setResponse({
loading: false,
data: res.data,
msg: "Page updated successfully",
});
dispatch(tableReload({ type: "YourPageTable" }));
// Clear form after successful update
setPageValues({ intro: "", description: "" });
}, 2000);
} catch (error) {
setResponse({
loading: false,
data: {},
error: "Error updating page",
msg: "",
});
}
};
return ( return (
<Layout> <Layout>
@@ -70,8 +34,9 @@ const YourPage = () => {
onChange={handleChange} onChange={handleChange}
onSubmit={updateYourPageDetails} onSubmit={updateYourPageDetails}
loading={response.loading} loading={response.loading}
msg={response.msg}
/> />
<LoadedPage /> <LoadedPage reloader={reloader} />
</div> </div>
</div> </div>
</div> </div>
@@ -80,3 +45,51 @@ const YourPage = () => {
}; };
export default YourPage; export default YourPage;
const pageInitialValues = {
intro: "",
description: "",
};
const responseInitialValues = {
loading: false,
data: {},
error: "",
msg: "",
};
function updateYourPage(pageValues, setResponse, setPageValues, setReloader) {
return async () => {
if (!pageValues.intro || !pageValues.description) return;
try {
setResponse({ loading: true, error: "", msg: "" });
let api = new usersService();
const res = await api.MyPageIntro(pageValues);
setTimeout(() => {
setResponse({
loading: false,
data: res.data,
msg: "Update Complete",
});
setReloader((prev) => !prev);
}, 1000);
setTimeout(() => {
setResponse({ msg: "" });
// Clear form after successful update
setPageValues({ intro: "", description: "" });
}, 3000);
} catch (error) {
return setResponse({
loading: false,
data: {},
error: "Error updating page",
msg: "",
});
}
};
}
@@ -208,12 +208,6 @@ const EditJobPopOut = ({
} }
}; };
// Check if the user is using iOS
const isIOS = /MacIntel|MacPPC/.test(navigator.platform) && !window.MSStream;
// Check if the user is using Windows
const isWindows = /Windows/.test(navigator.userAgent);
return ( return (
<ModalCom action={onClose} situation={situation}> <ModalCom action={onClose} situation={situation}>
<div className="logout-modal-wrapper w-11/12 lg:w-[600px] bg-white dark:bg-dark-white lg:rounded-2xl"> <div className="logout-modal-wrapper w-11/12 lg:w-[600px] bg-white dark:bg-dark-white lg:rounded-2xl">
-4
View File
@@ -8,7 +8,6 @@ const initialState = {
couponTable: false, couponTable: false,
walletTable: false, walletTable: false,
uploadsTable: false, uploadsTable: false,
yourPageTable: false,
}; };
export const tableReloadSlice = createSlice({ export const tableReloadSlice = createSlice({
@@ -38,9 +37,6 @@ export const tableReloadSlice = createSlice({
case "UPLOADSTABLE": case "UPLOADSTABLE":
state.uploadsTable = !state.uploadsTable; state.uploadsTable = !state.uploadsTable;
return; return;
case "YourPageTable":
state.yourPageTable = !state.yourPageTable;
return;
default: default:
return state; return state;
} }