Make Save button conditional
Gör Spara ändringar-knappen beroende på om användaren gjort ändringar i Mitt konto-sidan. Lades till originalProfile state för att jämföra med nuvarande värden, uppdaterade fetch-logik att spara originalprofil och visa Save-knappen endast när ändringar finns. X-Lovable-Edit-ID: edt-4c28a1c2-8950-4a99-88a6-b1d5f54ff4ef
This commit is contained in:
+24
-10
@@ -28,12 +28,22 @@ const Account = () => {
|
|||||||
postal_code: "",
|
postal_code: "",
|
||||||
city: "",
|
city: "",
|
||||||
});
|
});
|
||||||
|
const [originalProfile, setOriginalProfile] = useState<ProfileData>({
|
||||||
|
street_address: "",
|
||||||
|
postal_code: "",
|
||||||
|
city: "",
|
||||||
|
});
|
||||||
const [isLoading, setIsLoading] = useState(true);
|
const [isLoading, setIsLoading] = useState(true);
|
||||||
const [isSaving, setIsSaving] = useState(false);
|
const [isSaving, setIsSaving] = useState(false);
|
||||||
const { user, loading: authLoading, signOut } = useAuth();
|
const { user, loading: authLoading, signOut } = useAuth();
|
||||||
const { toast } = useToast();
|
const { toast } = useToast();
|
||||||
const navigate = useNavigate();
|
const navigate = useNavigate();
|
||||||
|
|
||||||
|
const hasChanges =
|
||||||
|
profile.street_address !== originalProfile.street_address ||
|
||||||
|
profile.postal_code !== originalProfile.postal_code ||
|
||||||
|
profile.city !== originalProfile.city;
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (!authLoading && !user) {
|
if (!authLoading && !user) {
|
||||||
navigate("/");
|
navigate("/");
|
||||||
@@ -61,11 +71,13 @@ const Account = () => {
|
|||||||
variant: "destructive",
|
variant: "destructive",
|
||||||
});
|
});
|
||||||
} else if (data) {
|
} else if (data) {
|
||||||
setProfile({
|
const profileData = {
|
||||||
street_address: data.street_address || "",
|
street_address: data.street_address || "",
|
||||||
postal_code: data.postal_code || "",
|
postal_code: data.postal_code || "",
|
||||||
city: data.city || "",
|
city: data.city || "",
|
||||||
});
|
};
|
||||||
|
setProfile(profileData);
|
||||||
|
setOriginalProfile(profileData);
|
||||||
}
|
}
|
||||||
} finally {
|
} finally {
|
||||||
setIsLoading(false);
|
setIsLoading(false);
|
||||||
@@ -214,14 +226,16 @@ const Account = () => {
|
|||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<Button
|
{hasChanges && (
|
||||||
type="submit"
|
<Button
|
||||||
className="w-full bg-primary text-primary-foreground hover:bg-primary/90"
|
type="submit"
|
||||||
disabled={isSaving}
|
className="w-full bg-primary text-primary-foreground hover:bg-primary/90"
|
||||||
>
|
disabled={isSaving}
|
||||||
<Save className="h-4 w-4 mr-2" />
|
>
|
||||||
{isSaving ? "Sparar..." : "Spara ändringar"}
|
<Save className="h-4 w-4 mr-2" />
|
||||||
</Button>
|
{isSaving ? "Sparar..." : "Spara ändringar"}
|
||||||
|
</Button>
|
||||||
|
)}
|
||||||
</form>
|
</form>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user