me/ucs
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

frontend fixes: reload comments after submitting instead of refresh,

Browse source 
errors from list, and css fix.
This commit is contained in:
me 2025-03-15 18:50:10 +02:00
parent f0e8b91e78
commit 0e9cce8afb
8 changed files with 71 additions and 48 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
backend/src/db.mjs
View file

@ -46,7 +46,7 @@ export class DB {
* @param {!string} site url. * @param {!string} site url.
* @param {!string} page path. * @param {!string} page path.
* @param {!ObjType} comment. * @param {!ObjType} comment.
* @return {!ObjType} inserted comment. * @return {!Array<!ObjType>} page comments.
*/ */
insertPageComment(site_url, path, comment) { insertPageComment(site_url, path, comment) {
return insertPageComment(this.my_db, site_url, path, comment); return insertPageComment(this.my_db, site_url, path, comment);
@ -123,7 +123,7 @@ function insertPageComment(db, site_url, path, comment) {
@message, @message,
@reply_to @reply_to
RETURNING RETURNING
id as id, id,
user, user,
user_website, user_website,
message, message,
@ -131,7 +131,11 @@ function insertPageComment(db, site_url, path, comment) {
reply_to reply_to
; ;
`); `);
return stmt.all(object); stmt.all(object);
// return all comments because a new comment might have been added
// since the user loaded the page.
return getPageComments(db, site_url, path);
} }
function getPageComments(db, site_url, path) { function getPageComments(db, site_url, path) {

19
frontend/dist/index.html vendored
View file

@ -1,19 +0,0 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>ucs</title>
<script type="module" crossorigin src="/assets/index-DxfpMQtn.js"></script>
<link rel="stylesheet" crossorigin href="/assets/index-TEs_pY0h.css">
</head>
<body>
<div id="ucs-comments"
data-element="ucs-comments"
data-ucs_url="http://localhost:8080"
data-site="alloca.space"
data-path="blog.html"
></div>
</body>
</html>

14
frontend/index.html
View file

@ -7,12 +7,14 @@
<title>ucs</title> <title>ucs</title>
</head> </head>
<body> <body>
<div id="ucs-comments"
data-element="ucs-comments" <div id="ucs-comments"
data-ucs_url="http://localhost:8080" data-element="ucs-comments"
data-site="alloca.space" data-ucs_url="http://localhost:8080"
data-path="blog.html" data-site="localhost"
></div> data-path="blog.html"
></div>
<script type="module" src="/src/main.jsx"></script> <script type="module" src="/src/main.jsx"></script>
</body> </body>
</html> </html>

23
frontend/src/CommentForm.jsx
View file

@ -2,20 +2,15 @@ import { useState } from "react";
import './style.css' import './style.css'
function isValidHttpUrl(string) { function isValidHttpUrl(string) {
let url;
try { try {
url = new URL(string); let url = new URL(string);
return url.protocol === "http:" || url.protocol === "https:";
} catch (_) { } catch (_) {
return false; return false;
} }
return url.protocol === "http:" || url.protocol === "https:";
} }
export default function CommentForm({ url, site, path }) { export default function CommentForm({ url, site, path, setComments, setError }) {
const [error, setError] = useState(null);
const handleSubmit = e => { const handleSubmit = e => {
e.preventDefault(); e.preventDefault();
@ -43,6 +38,7 @@ export default function CommentForm({ url, site, path }) {
return; return;
} }
setError(null);
fetch(url + '/api/' + site + '/' + path, { fetch(url + '/api/' + site + '/' + path, {
method: 'POST', method: 'POST',
headers: { headers: {
@ -52,18 +48,24 @@ export default function CommentForm({ url, site, path }) {
}) })
.then(response => { .then(response => {
if (response.ok) { if (response.ok) {
window.location.reload(); response.json().then(comments => {
document.getElementById("ucs-comment-form").reset();
setComments(comments);
// Not sure if I want to paste the comments or refresh the page.
// window.location.reload();
});
} else { } else {
response.json().then((err) => { console.log(err); setError(err); }); response.json().then((err) => { console.log(err); setError(err); });
} }
}) })
.catch(error => { .catch(error => {
console.log(error); console.log(error);
setError("שגיאת התחברות");
}); });
}; };
return ( return (
<form onSubmit={handleSubmit} className="new-comment"> <form onSubmit={handleSubmit} className="new-comment" id="ucs-comment-form">
<h4>כתיבת תגובה</h4> <h4>כתיבת תגובה</h4>
<div> <div>
<textarea className="new-comment-message" name="message" minLength="1" maxLength="1000" required="" placeholder="התגובה שלך" /> <textarea className="new-comment-message" name="message" minLength="1" maxLength="1000" required="" placeholder="התגובה שלך" />
@ -76,7 +78,6 @@ export default function CommentForm({ url, site, path }) {
<input className="new-comment-token" type="text" name="token" required="" minLength="1" placeholder="שאלת סינון" /> <input className="new-comment-token" type="text" name="token" required="" minLength="1" placeholder="שאלת סינון" />
<button className="new-comment-submit" type="submit" title="Add a new submission">הוספה</button> <button className="new-comment-submit" type="submit" title="Add a new submission">הוספה</button>
</div> </div>
<div className="error"><p>{error}</p></div>
</form> </form>
) )
} }

5
frontend/src/CommentList.jsx
View file

@ -13,16 +13,15 @@ const reply = details => {
</li> </li>
) )
}; };
// <p>{details.message}</p>
export default function CommentList({ url, site, path }) { export default function CommentList({ url, site, path, comments, setComments, setError }) {
const [comments, setComments] = useState([]);
useEffect(() => { useEffect(() => {
fetch(url + '/api/' + site + '/' + path) fetch(url + '/api/' + site + '/' + path)
.then(response => { return response.json() }) .then(response => { return response.json() })
.then(data => setComments(data)) .then(data => setComments(data))
.catch(error => { .catch(error => {
console.log(error); console.log(error);
setError("שגיאת התחברות.");
}); });
}, []); }, []);

33
frontend/src/Comments.jsx Normal file
View file

@ -0,0 +1,33 @@
import { useState } from "react";
import CommentList from './CommentList.jsx';
import CommentForm from './CommentForm.jsx';
export default function Comments({ url, site, path }) {
const [comments, setComments] = useState([]);
const [error, setError] = useState(null);
return (
<div className="ucs-comments">
<CommentList
url={url}
site={site}
path={path}
comments={comments}
setComments={setComments}
setError={setError}
/>
<CommentForm
url={url}
site={site}
path={path}
setComments={setComments}
setError={setError}
/>
<div className="error"><p>{error}</p></div>
</div>
)
}

14
frontend/src/main.jsx
View file

@ -1,16 +1,18 @@
import { StrictMode } from 'react' import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client' import { createRoot } from 'react-dom/client'
import CommentList from './CommentList.jsx' import Comments from './Comments.jsx'
import CommentForm from './CommentForm.jsx'
function UcsComments(settings) { function UcsComments(settings) {
return ( return (
createRoot(document.getElementById(settings.element)).render( createRoot(document.getElementById(settings.element)).render(
<StrictMode> <StrictMode>
<div className="ucs-comments">
<CommentList url={settings.ucs_url} site={settings.site} path={settings.path} /> <Comments
<CommentForm url={settings.ucs_url} site={settings.site} path={settings.path} /> url={settings.ucs_url}
</div> site={settings.site}
path={settings.path}
/>
</StrictMode>, </StrictMode>,
) )
) )

1
frontend/src/style.css
View file

@ -44,6 +44,7 @@
flex-basis: 100%; flex-basis: 100%;
box-sizing: border-box; box-sizing: border-box;
flex-grow: 1; flex-grow: 1;
min-width: 50px;
} }
.new-comment-user-website { .new-comment-user-website {
direction: ltr; direction: ltr;