diff --git a/client/src/apiTools.jsx b/client/src/apiTools.jsx index d47d4b5f..12a0b0ed 100644 --- a/client/src/apiTools.jsx +++ b/client/src/apiTools.jsx @@ -3,7 +3,7 @@ import { LogInStatusUpdateEscapeTool } from './AuthProvider.jsx'; // This is wrapper functtions to do requests to the api, from the frontend. -const secure = false +const secure = false; export const apiUrl = `http${secure?'s':''}://${window.location.host}/api`; @@ -56,9 +56,16 @@ export async function fetchPageAtEdit(number, id) { export async function postPage({number, title, description, type}) { return shoofetch(`${apiUrl}/page/${number}`, { - method: 'POST', - body: JSON.stringify({number: number, title: title, description: description, type: type}), - }) + method: 'POST', + body: JSON.stringify({number: number, title: title, description: description, type: type}), + }) +} + +export async function postAttributes({number, attributes}) { + return shoofetch(`${apiUrl}/page/${number}/attributes`, { + method: 'POST', + body: JSON.stringify(attributes), + }) } export async function deletePage(id) { diff --git a/client/src/embodied/Live.jsx b/client/src/embodied/Live.jsx index 21d058b3..f8c60b53 100644 --- a/client/src/embodied/Live.jsx +++ b/client/src/embodied/Live.jsx @@ -1,20 +1,19 @@ import { useState, useEffect, useRef } from 'react'; import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query'; import { useParams, useNavigate } from 'react-router-dom'; -import { apiUrl, wsUrl, fetchPage, fetchPageAttributes, fetchPageAtEdit, postPage, fetchCurrentVerbs } from '../apiTools.jsx'; -import { useFixLinks } from '../clientStuff.jsx'; -import { useLoggedIn } from '../AuthProvider.jsx'; +import { apiUrl, wsUrl, fetchPage, fetchPageAttributes, postPage, fetchCurrentVerbs } from '../apiTools.jsx'; + import useWebSocket, { ReadyState } from 'react-use-websocket'; import Page from '../page/Page.jsx'; import ExtendedAttributes from '../page/ExtendedAttributes.jsx'; +import { JsonEditor } from 'json-edit-react'; import MessageFeed from './MessageFeed.jsx'; import WordSidebar from './WordSidebar.jsx'; import CommandEntry from './CommandEntry.jsx'; function Live({...props}) { const navigate = useNavigate(); - const loggedIn = useLoggedIn(); const queryClient = useQueryClient(); const [ command, setCommand ] = useState(''); @@ -57,11 +56,6 @@ function Live({...props}) { setTitle(fetchPageQuery.data?.title); }, [fetchPageQuery.data?.title]); - const [text, setText] = useState(null); - useEffect(() => { - setText(fetchPageQuery.data?.description); - }, [fetchPageQuery.data?.description]); - const [type, setType] = useState(false); useEffect(() => { setType(fetchPageQuery.data?.type == 1); @@ -73,6 +67,11 @@ function Live({...props}) { queryFn: () => fetchPageAttributes(currentNumber) }); + const [attributes, setAttributes] = useState(null); + useEffect(() => { + setAttributes(fetchAttributesQuery.data); + }, [fetchAttributesQuery.data]); + // verbs available to us const fetchVerbsQuery = useQuery({ queryKey: ['my verbs'], @@ -91,12 +90,14 @@ function Live({...props}) { }); function saveChanges() { - postMutation.mutate({ - number: currentNumber, - title: title, - description: text, - type: type ? 1 : 0, - }); + if (editorRef.current) { + postMutation.mutate({ + number: currentNumber, + title: title, + description: editorRef.current.getMarkdown(), + type: type ? 1 : 0, + }); + } } function handleSubmitCommand() { @@ -105,6 +106,10 @@ function Live({...props}) { else if (c == "save changes") { saveChanges(); setEditing(false); + } else if ( c == "discard changes") { + queryClient.invalidateQueries(['page', currentNumber, null]); + queryClient.invalidateQueries(['attributes', currentNumber]); + setEditing(false); } else sendMessage(c); @@ -143,16 +148,24 @@ function Live({...props}) { <>
setTitle(e.target.value)} - onChangeText={setText} onChangeType={() => setType(!type)} ref={editorRef} {...props} /> - + {editing ? +
+ +
+ : + + }
{editing && ( )} {editing && (