{
- myFetch({
- url: "/user/profile/settings",
- method: "GET",
- notificationApi: notificationApi,
- t: t,
- })
- .then((data) => {
- form.setFieldsValue({
- language: data.language,
- analytics: data.analytics_enabled,
- });
- })
- .catch((errStatus) => {
- console.log(errStatus);
- });
- }, []);
-
- useEffect(() => {
- if (language === undefined || analytics === undefined) return;
-
- if (RequestState.INIT === requestState) {
- setRequestState(RequestState.NOTHING);
- return;
- }
-
- setRequestState(RequestState.REQUESTING);
-
- if (delayTimeout.current) {
- clearTimeout(delayTimeout.current);
- }
-
- delayTimeout.current = setTimeout(() => {
- myFetch({
- url: "/user/profile/settings",
- method: "POST",
- body: {
- language: language,
- analyticsEnabled: analytics,
- },
- notificationApi: notificationApi,
- t: t,
- })
- .then(() => setRequestState(RequestState.SUCCESS))
- .catch((errStatus) => {
- console.log(errStatus);
- setRequestState(RequestState.FAILED);
- });
- }, 500);
- }, [language, analytics]);
+ const tabItems = [
+ {
+ label: t("userProfile.tabs.yourProfile"),
+ cardTitle: t("userProfile.yourProfile.cardTitle"),
+ children: (
+
+ ),
+ },
+ {
+ label: t("userProfile.tabs.changePassword"),
+ cardTitle: t("userProfile.changePassword.cardTitle"),
+ children: (
+
+ ),
+ },
+ {
+ label: t("userProfile.tabs.yourSessions"),
+ cardTitle: t("userProfile.yourSessions.cardTitle"),
+ children: ,
+ },
+ {
+ label: t("userProfile.tabs.deleteAccount"),
+ cardTitle: t("userProfile.deleteAccount.cardTitle"),
+ children: ,
+ },
+ ].map((item, index) => {
+ return {
+ key: index,
+ ...item,
+ children: (
+
+
+ {item.children}
+
+
+ ),
+ };
+ });
return (
<>
{notificationContextHolder}
- setActiveTab(key)}
+ tabBarExtraContent={
+ setGlobalRequestState({
+ ...globalRequestState,
+ global: state,
+ })
+ }
/>
}
- >
-
- {requestState === RequestState.INIT ? (
-
- ) : (
-
-
-
- {requestState === RequestState.INIT ? (
-
- ) : (
- {t("userProfile.analytics")}
- )}
-
-
-
+ />
>
);
}
+
+function YourProfile({
+ notificationApi,
+ globalRequestState,
+ setGlobalRequestState,
+}) {
+ const { t, i18n } = useTranslation();
+ const [form] = Form.useForm();
+
+ const sideBarContext = useSideBarContext();
+
+ const delayTimeout = useRef();
+ const [requestData, setRequestData] = useState({});
+
+ const language = Form.useWatch("language", form);
+ const analyticsEnabled = Form.useWatch("analyticsEnabled", form);
+ const username = Form.useWatch("username", form);
+ const accountName = Form.useWatch("accountName", form);
+
+ const requestState = globalRequestState.yourProfile;
+
+ useEffect(() => {
+ myFetch({
+ url: "/user/profile/settings",
+ method: "GET",
+ notificationApi: notificationApi,
+ t: t,
+ })
+ .then((data) => {
+ setRequestData(data);
+
+ form.setFieldsValue({
+ language: data.language,
+ analyticsEnabled: data.analytics_enabled,
+ username: data.username,
+ accountName: data.account_name,
+ });
+ })
+ .catch(() => {
+ setGlobalRequestState({
+ ...globalRequestState,
+ global: RequestState.FAILED,
+ });
+ });
+ }, []);
+
+ useEffect(() => {
+ if (
+ language === undefined ||
+ analyticsEnabled === undefined ||
+ username === undefined ||
+ accountName === undefined
+ )
+ return;
+
+ if (RequestState.INIT === requestState) {
+ setGlobalRequestState({
+ ...globalRequestState,
+ global: RequestState.NOTHING,
+ yourProfile: RequestState.NOTHING,
+ });
+ return;
+ }
+
+ setGlobalRequestState({
+ ...globalRequestState,
+ global: RequestState.REQUESTING,
+ });
+
+ if (delayTimeout.current) {
+ clearTimeout(delayTimeout.current);
+ }
+
+ delayTimeout.current = setTimeout(() => {
+ form
+ .validateFields()
+ .then(() => {
+ let body = {};
+
+ if (language !== requestData.language) {
+ body.language = language;
+ }
+
+ if (analyticsEnabled !== requestData.analytics_enabled) {
+ body.analyticsEnabled = analyticsEnabled;
+ }
+
+ if (username !== requestData.username) {
+ body.username = username;
+ }
+
+ if (accountName !== requestData.account_name) {
+ body.accountName = accountName;
+ }
+
+ if (Object.keys(body).length === 0) {
+ setGlobalRequestState({
+ ...globalRequestState,
+ global: RequestState.NOTHING,
+ });
+ return;
+ }
+
+ myFetch({
+ url: "/user/profile/settings",
+ method: "POST",
+ body: body,
+ notificationApi: notificationApi,
+ t: t,
+ })
+ .then(() => {
+ setGlobalRequestState({
+ ...globalRequestState,
+ global: RequestState.SUCCESS,
+ });
+
+ // Update requestData to the new values
+ setRequestData({
+ ...requestData,
+ language: language,
+ analytics_enabled: analyticsEnabled,
+ username: username,
+ account_name: accountName,
+ });
+
+ sideBarContext.setUsername(username);
+ })
+ .catch(() => {
+ setGlobalRequestState({
+ ...globalRequestState,
+ global: RequestState.FAILED,
+ });
+ });
+ })
+ .catch(() => {
+ showInputsInvalidNotification(notificationApi, t);
+
+ setGlobalRequestState({
+ ...globalRequestState,
+ global: RequestState.NOTHING,
+ });
+ });
+ }, 500);
+ }, [language, analyticsEnabled, username, accountName]);
+
+ return (
+
+ {requestState === RequestState.INIT ? (
+
+ ) : (
+
+
+
+ {requestState === RequestState.INIT ? (
+
+ ) : (
+ {t("userProfile.yourProfile.analytics")}
+ )}
+
+
+
+
+
+
+ );
+}
+
+function ChangePassword({
+ notificationApi,
+ globalRequestState,
+ setGlobalRequestState,
+ setUserSession,
+}) {
+ const { t } = useTranslation();
+
+ const [form] = Form.useForm();
+
+ const handlePasswordChange = () => {
+ form
+ .validateFields()
+ .then((values) => {
+ console.log(values);
+
+ setGlobalRequestState({
+ ...globalRequestState,
+ global: RequestState.REQUESTING,
+ changePassword: RequestState.REQUESTING,
+ });
+
+ myFetch({
+ url: "/user/profile/password",
+ method: "POST",
+ body: {
+ currentPassword: EncodeStringToBase64(values.currentPassword),
+ newPassword: EncodeStringToBase64(values.newPassword),
+ },
+ notificationApi: notificationApi,
+ t: t,
+ })
+ .then(() => {
+ form.resetFields();
+
+ setGlobalRequestState({
+ ...globalRequestState,
+ global: RequestState.SUCCESS,
+ changePassword: RequestState.NOTHING,
+ });
+
+ handleLogout({
+ setUserSession: setUserSession,
+ });
+ })
+ .catch((err) => {
+ setGlobalRequestState({
+ ...globalRequestState,
+ global: RequestState.FAILED,
+ changePassword: RequestState.NOTHING,
+ });
+
+ if (err === 400) {
+ notificationApi["error"]({
+ message: t("userProfile.changePassword.request.400.title"),
+ description: t(
+ "userProfile.changePassword.request.400.description"
+ ),
+ });
+ }
+ });
+ })
+ .catch(() => showInputsInvalidNotification(notificationApi, t));
+ };
+
+ return (
+
+ );
+}
+
+function YourSessions() {
+ useEffect(() => {
+ console.log("your sessions");
+ }, []);
+
+ return Test
;
+}
+
+function DeleteAccount() {
+ return Delete account, Password and feedback
;
+}
diff --git a/src/utils.js b/src/utils.js
index 198e391..0c9c8fe 100644
--- a/src/utils.js
+++ b/src/utils.js
@@ -246,3 +246,8 @@ export function showInputsInvalidNotification(notificationApi, t) {
description: t("common.request.inputsInvalid.description"),
});
}
+
+export function handleLogout({ setUserSession }) {
+ setUserSession();
+ window.location.href = "/";
+}