Implement redirect with toast notification on profile save
- Add gotoHomeWithMessage function to navigationActions - Redirect to home page after successful profile save - Display success message in toast notification instead of in-form - Check for profileSaved URL parameter on home page mount - Clean up URL parameter after showing toast - Move success message translation to home-page section - Remove unused success state and message from AccountForm - Remove useEffect import from AccountForm User experience: After saving profile, users are redirected to the familiar home screen and see a toast notification confirming the save. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
@@ -1,6 +1,6 @@
|
||||
"use client";
|
||||
|
||||
import { FC, useEffect } from "react";
|
||||
import { FC } from "react";
|
||||
import { UserProfile } from "../lib/db-types";
|
||||
import { updateUserProfile } from "../lib/actions/userProfileActions";
|
||||
import { useFormState, useFormStatus } from "react-dom";
|
||||
@@ -15,11 +15,10 @@ export type AccountFormProps = {
|
||||
type FormFieldsProps = {
|
||||
profile: UserProfile | null;
|
||||
errors: any;
|
||||
success: boolean;
|
||||
message: string | null;
|
||||
}
|
||||
|
||||
const FormFields: FC<FormFieldsProps> = ({ profile, errors, success, message }) => {
|
||||
const FormFields: FC<FormFieldsProps> = ({ profile, errors, message }) => {
|
||||
const { pending } = useFormStatus();
|
||||
const t = useTranslations("account-form");
|
||||
const locale = useLocale();
|
||||
@@ -118,16 +117,11 @@ const FormFields: FC<FormFieldsProps> = ({ profile, errors, success, message })
|
||||
</div>
|
||||
|
||||
<div id="general-error" aria-live="polite" aria-atomic="true">
|
||||
{message && !success && (
|
||||
{message && (
|
||||
<p className="mt-2 text-sm text-red-500">
|
||||
{message}
|
||||
</p>
|
||||
)}
|
||||
{success && (
|
||||
<p className="mt-2 text-sm text-success">
|
||||
{t("success-message")}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="pt-4">
|
||||
@@ -147,18 +141,10 @@ const FormFields: FC<FormFieldsProps> = ({ profile, errors, success, message })
|
||||
};
|
||||
|
||||
export const AccountForm: FC<AccountFormProps> = ({ profile }) => {
|
||||
const initialState = { message: null, errors: {}, success: false };
|
||||
const initialState = { message: null, errors: {} };
|
||||
const [state, dispatch] = useFormState(updateUserProfile, initialState);
|
||||
const t = useTranslations("account-form");
|
||||
|
||||
useEffect(() => {
|
||||
if (state.success) {
|
||||
// Show success message or toast notification
|
||||
// For now, we'll just log it
|
||||
console.log("Profile updated successfully");
|
||||
}
|
||||
}, [state.success]);
|
||||
|
||||
return (
|
||||
<div className="card card-compact card-bordered min-w-[20em] max-w-[90em] bg-base-100 shadow-s my-1">
|
||||
<div className="card-body">
|
||||
@@ -167,7 +153,6 @@ export const AccountForm: FC<AccountFormProps> = ({ profile }) => {
|
||||
<FormFields
|
||||
profile={profile}
|
||||
errors={state.errors}
|
||||
success={state.success ?? false}
|
||||
message={state.message ?? null}
|
||||
/>
|
||||
</form>
|
||||
|
||||
@@ -9,8 +9,9 @@ import { LocationCard } from "./LocationCard";
|
||||
import { PrintButton } from "./PrintButton";
|
||||
import { BillingLocation, YearMonth } from "../lib/db-types";
|
||||
import { useRouter, useSearchParams } from "next/navigation";
|
||||
import { ToastContainer } from 'react-toastify';
|
||||
import { ToastContainer, toast } from 'react-toastify';
|
||||
import 'react-toastify/dist/ReactToastify.css';
|
||||
import { useTranslations } from "next-intl";
|
||||
|
||||
const getNextYearMonth = (yearMonth:YearMonth) => {
|
||||
const {year, month} = yearMonth;
|
||||
@@ -38,13 +39,26 @@ export const MonthLocationList:React.FC<MonthLocationListProps > = ({
|
||||
|
||||
const router = useRouter();
|
||||
const search = useSearchParams();
|
||||
const t = useTranslations("home-page");
|
||||
|
||||
const initialMonth = search.get('month')
|
||||
|
||||
|
||||
const [expandedMonth, setExpandedMonth] = React.useState<number>(
|
||||
initialMonth ? parseInt(initialMonth as string) : -1 // no month is expanded
|
||||
);
|
||||
|
||||
// Check for profile saved success message
|
||||
React.useEffect(() => {
|
||||
if (search.get('profileSaved') === 'true') {
|
||||
toast.success(t("profile-saved-message"), { theme: "dark" });
|
||||
// Clean up URL parameter
|
||||
const params = new URLSearchParams(search.toString());
|
||||
params.delete('profileSaved');
|
||||
const newSearch = params.toString();
|
||||
router.replace(newSearch ? `?${newSearch}` : '/');
|
||||
}
|
||||
}, [search, router, t]);
|
||||
|
||||
if(!availableYears || !months) {
|
||||
const currentYearMonth:YearMonth = {
|
||||
year: new Date().getFullYear(),
|
||||
|
||||
Reference in New Issue
Block a user