diff options
Diffstat (limited to 'pages')
| -rw-r--r-- | pages/search.tsx | 2 | ||||
| -rw-r--r-- | pages/user.tsx | 28 |
2 files changed, 27 insertions, 3 deletions
diff --git a/pages/search.tsx b/pages/search.tsx index e2825e8..92de828 100644 --- a/pages/search.tsx +++ b/pages/search.tsx @@ -41,7 +41,7 @@ function SearchResult(props: { user: userInfo }) { left: 48 + 12 }}> <b>{props.user.username}</b> - <p>{props.user.status || "Hey daar!, ik ben nieuw op deze website en heb nog geen status."}</p> + <p>{props.user.status}</p> </div> </div> </Vierkant>; diff --git a/pages/user.tsx b/pages/user.tsx index f190efd..1b6c2e3 100644 --- a/pages/user.tsx +++ b/pages/user.tsx @@ -16,6 +16,7 @@ import ArrowUpwardOutlinedIcon from '@material-ui/icons/ArrowUpwardOutlined'; import PeopleOutlineOutlinedIcon from '@material-ui/icons/PeopleOutlineOutlined'; import EditOutlinedIcon from '@material-ui/icons/EditOutlined'; import SettingsOutlinedIcon from '@material-ui/icons/SettingsOutlined'; +import DoneOutlinedIcon from '@material-ui/icons/DoneOutlined'; import { mdiAccountCancelOutline, mdiEqual, @@ -72,6 +73,8 @@ export default function AccountPage() { var [ownPage, setOwnPage] = useState(false); var [gameInfo, setGameInfo] = useState<userGames>(); + var [editingStatus, setEditingStatus] = useState(false); + useEffect(() => {(async() => { if (gotData) return; if (typeof window === "undefined") return; @@ -130,7 +133,10 @@ export default function AccountPage() { width: "calc(100% - 128px - 12px)" }}> <h2 style={{ fontSize: 32 }}>{user?.username}</h2> - <p style={{ marginTop: 6 }}>{user?.status}</p> + <p id="status" contentEditable={editingStatus ? "true" : "false"} style={{ + marginTop: 6, + transitionDuration: ".3s" + }}>{user?.status}</p> </div> <div style={{ position: "absolute", @@ -142,7 +148,25 @@ export default function AccountPage() { ownPage ? <div> <IconLabelButton icon={<SettingsOutlinedIcon/>} href="/settings" text="Instellingen"/> - <IconLabelButton icon={<EditOutlinedIcon/>} text="Status bewerken"/> + { + !editingStatus ? + <IconLabelButton + icon={<EditOutlinedIcon/>} + text="Status bewerken" + onclick={() => setEditingStatus(true)}/> : + <IconLabelButton + icon={<DoneOutlinedIcon/>} + text="Status opslaan" + onclick={() => { + setEditingStatus(false) + axios.request({ + method: "post", + url: `/api/user/updateStatus`, + headers: {"content-type": "application/json"}, + data: { "status": document.getElementById("status").innerText } + }); + }}/> + } </div> : <div> <IconLabelButton icon={<Icon size={1} path={mdiAccountCancelOutline}/>} text="Blokkeren"/> |