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

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} page path.
* @param {!ObjType} comment.
* @return {!ObjType} inserted comment.
* @return {!Array<!ObjType>} page comments.
*/
insertPageComment(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,
@reply_to
RETURNING
id as id,
id,
user,
user_website,
message,
@ -131,7 +131,11 @@ function insertPageComment(db, site_url, path, comment) {
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) {

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>
</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>
<div id="ucs-comments"
data-element="ucs-comments"
data-ucs_url="http://localhost:8080"
data-site="localhost"
data-path="blog.html"
></div>
<script type="module" src="/src/main.jsx"></script>
</body>
</html>

23
frontend/src/CommentForm.jsx
View File

@ -2,20 +2,15 @@ import { useState } from "react";
import './style.css'
function isValidHttpUrl(string) {
let url;
try {
url = new URL(string);
let url = new URL(string);
return url.protocol === "http:" || url.protocol === "https:";
} catch (_) {
return false;
}
return url.protocol === "http:" || url.protocol === "https:";
}
export default function CommentForm({ url, site, path }) {
const [error, setError] = useState(null);
export default function CommentForm({ url, site, path, setComments, setError }) {
const handleSubmit = e => {
e.preventDefault();
@ -43,6 +38,7 @@ export default function CommentForm({ url, site, path }) {
return;
}
setError(null);
fetch(url + '/api/' + site + '/' + path, {
method: 'POST',
headers: {
@ -52,18 +48,24 @@ export default function CommentForm({ url, site, path }) {
})
.then(response => {
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 {
response.json().then((err) => { console.log(err); setError(err); });
}
})
.catch(error => {
console.log(error);
setError("שגיאת התחברות");
});
};
return (
<form onSubmit={handleSubmit} className="new-comment">
<form onSubmit={handleSubmit} className="new-comment" id="ucs-comment-form">
<h4>כתיבת תגובה</h4>
<div>
<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="שאלת סינון" />
<button className="new-comment-submit" type="submit" title="Add a new submission">הוספה</button>
</div>
<div className="error"><p>{error}</p></div>
</form>
)
}

5
frontend/src/CommentList.jsx
View File

@ -13,16 +13,15 @@ const reply = details => {
</li>
)
};
// <p>{details.message}</p>
export default function CommentList({ url, site, path }) {
const [comments, setComments] = useState([]);
export default function CommentList({ url, site, path, comments, setComments, setError }) {
useEffect(() => {
fetch(url + '/api/' + site + '/' + path)
.then(response => { return response.json() })
.then(data => setComments(data))
.catch(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 { createRoot } from 'react-dom/client'
import CommentList from './CommentList.jsx'
import CommentForm from './CommentForm.jsx'
import Comments from './Comments.jsx'
function UcsComments(settings) {
return (
createRoot(document.getElementById(settings.element)).render(
<StrictMode>
<div className="ucs-comments">
<CommentList url={settings.ucs_url} site={settings.site} path={settings.path} />
<CommentForm url={settings.ucs_url} site={settings.site} path={settings.path} />
</div>
<Comments
url={settings.ucs_url}
site={settings.site}
path={settings.path}
/>
</StrictMode>,
)
)

1
frontend/src/style.css
View File

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