mirror of
https://github.com/bubblecup-12/VogelSocialMedia.git
synced 2025-07-10 21:28:51 +00:00
90 lines
2.5 KiB
TypeScript
90 lines
2.5 KiB
TypeScript
import Box from "@mui/material/Box";
|
|
import TextField from "@mui/material/TextField";
|
|
import StyledEngineProvider from "@mui/styled-engine/StyledEngineProvider";
|
|
import { useState } from "react";
|
|
import "./bio.css";
|
|
import "../styles/colors.css";
|
|
import IconButton from "@mui/material/IconButton";
|
|
import EditSquareIcon from "@mui/icons-material/EditSquare";
|
|
import ButtonPrimary from "./ButtonRotkehlchen";
|
|
import api from "../api/axios";
|
|
|
|
export default function BioTextField({ ownAccount, bioText, setBio } : { ownAccount: boolean, bioText: string | undefined, setBio: (bio: string) => void }) {
|
|
const [oldBio, setOldbio] = useState<string>(bioText || "");
|
|
const [editMode, setEditable] = useState(false);
|
|
|
|
const toggleEditMode = () => {
|
|
!editMode && setOldbio(bioText || "");
|
|
ownAccount && setEditable(!editMode);
|
|
};
|
|
|
|
const cancleBio = () => {
|
|
setBio(oldBio);
|
|
setEditable(false);
|
|
};
|
|
|
|
const saveBio = async () => {
|
|
try {
|
|
const response = await api.post("http://localhost:3001/api/profile/updateBio", {
|
|
bio: bioText,
|
|
});
|
|
setBio(response.data.data.bio);
|
|
setEditable(false);
|
|
} catch (error) {
|
|
console.error("Error saving bio: ", error);
|
|
}
|
|
}
|
|
|
|
const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
|
|
setBio(event.target.value);
|
|
}
|
|
|
|
return (
|
|
<StyledEngineProvider injectFirst>
|
|
<Box
|
|
component="form"
|
|
sx={{ "& .MuiTextField-root": { m: 1, width: "25ch" } }}
|
|
noValidate
|
|
autoComplete="off"
|
|
>
|
|
<div>
|
|
<TextField
|
|
className="bio-input"
|
|
id="outlined-multiline-flexible"
|
|
label="Bio"
|
|
multiline
|
|
maxRows={4}
|
|
disabled={!editMode}
|
|
value={bioText}
|
|
onChange={handleChange}
|
|
/>
|
|
{ownAccount && (
|
|
<IconButton aria-label="edit-bio">
|
|
<EditSquareIcon
|
|
className="edit-icon"
|
|
onClick={toggleEditMode}
|
|
style={{ display: editMode ? "none" : "block" }}
|
|
/>
|
|
</IconButton>
|
|
)}
|
|
</div>
|
|
{ownAccount && editMode && (
|
|
<div>
|
|
<ButtonPrimary
|
|
style="primary"
|
|
label={"Save"}
|
|
type="button"
|
|
onClick={saveBio}
|
|
/>
|
|
<ButtonPrimary
|
|
style="secondary"
|
|
label={"Cancel"}
|
|
type="reset"
|
|
onClick={cancleBio}
|
|
/>
|
|
</div>
|
|
)}
|
|
</Box>
|
|
</StyledEngineProvider>
|
|
);
|
|
}
|