Merge branch 'memberpage' of WrenchBoard/Users-Wrench into master
This commit is contained in:
@@ -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">
|
||||||
|
|||||||
@@ -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>
|
||||||
);
|
);
|
||||||
|
|
||||||
|
|||||||
@@ -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>
|
||||||
|
|||||||
@@ -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;
|
||||||
};
|
};
|
||||||
|
|||||||
@@ -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">
|
||||||
|
|||||||
@@ -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;
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user