tomas.mirchev/med-notes
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update

Browse Source
This commit is contained in:
Tomas Mirchev 2025-06-29 14:25:18 +00:00
parent 49ce30f86c
commit 37995ede5c
3 changed files with 128 additions and 117 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

165
reader/src/App.jsx
View File

@ -21,91 +21,91 @@ import {
import ResourcePage from "./ResourcePage.jsx"; import ResourcePage from "./ResourcePage.jsx";
import io from "socket.io-client"; import io from "socket.io-client";
const socket = io("http://localhost:3000"); //const socket = io("http://localhost:3000");
const DIVIDER_AT = 16; const DIVIDER_AT = 16;
function SocketTest() { //function SocketTest() {
const [booleanArray, setBooleanArray] = useState(new Array(10).fill(false)); // const [booleanArray, setBooleanArray] = useState(new Array(10).fill(false));
const [isConnected, setIsConnected] = useState(false); // const [isConnected, setIsConnected] = useState(false);
//
useEffect(() => { // useEffect(() => {
// Connection status // // Connection status
socket.on("connect", () => { // socket.on("connect", () => {
setIsConnected(true); // setIsConnected(true);
console.log("Connected to server"); // console.log("Connected to server");
}); // });
//
socket.on("disconnect", () => { // socket.on("disconnect", () => {
setIsConnected(false); // setIsConnected(false);
console.log("Disconnected from server"); // console.log("Disconnected from server");
}); // });
//
// Listen for array updates // // Listen for array updates
socket.on("arrayChanged", (newArray) => { // socket.on("arrayChanged", (newArray) => {
setBooleanArray(newArray); // setBooleanArray(newArray);
}); // });
//
// Cleanup on unmount // // Cleanup on unmount
return () => { // return () => {
socket.off("connect"); // socket.off("connect");
socket.off("disconnect"); // socket.off("disconnect");
socket.off("arrayChanged"); // socket.off("arrayChanged");
}; // };
}, []); // }, []);
//
const toggleValue = (index) => { // const toggleValue = (index) => {
const newValue = !booleanArray[index]; // const newValue = !booleanArray[index];
//
// Emit update to server // // Emit update to server
socket.emit("setArrayValue", { index, value: newValue }); // socket.emit("setArrayValue", { index, value: newValue });
}; // };
//
const refreshArray = () => { // const refreshArray = () => {
socket.emit("getArray"); // socket.emit("getArray");
}; // };
//
return ( // return (
<div style={{ padding: "20px" }}> // <div style={{ padding: "20px" }}>
<h1>Socket.IO Boolean Array</h1> // <h1>Socket.IO Boolean Array</h1>
//
<div style={{ marginBottom: "20px" }}> // <div style={{ marginBottom: "20px" }}>
Status:{" "} // Status:{" "}
<span style={{ color: isConnected ? "green" : "red" }}> // <span style={{ color: isConnected ? "green" : "red" }}>
{isConnected ? "Connected" : "Disconnected"} // {isConnected ? "Connected" : "Disconnected"}
</span> // </span>
</div> // </div>
//
<button onClick={refreshArray} style={{ marginBottom: "20px" }}> // <button onClick={refreshArray} style={{ marginBottom: "20px" }}>
Refresh Array // Refresh Array
</button> // </button>
//
<div style={{ display: "grid", gridTemplateColumns: "repeat(5, 100px)", gap: "10px" }}> // <div style={{ display: "grid", gridTemplateColumns: "repeat(5, 100px)", gap: "10px" }}>
{booleanArray.map((value, index) => ( // {booleanArray.map((value, index) => (
<button // <button
key={index} // key={index}
onClick={() => toggleValue(index)} // onClick={() => toggleValue(index)}
style={{ // style={{
padding: "20px", // padding: "20px",
backgroundColor: value ? "#4CAF50" : "#f44336", // backgroundColor: value ? "#4CAF50" : "#f44336",
color: "white", // color: "white",
border: "none", // border: "none",
borderRadius: "4px", // borderRadius: "4px",
cursor: "pointer", // cursor: "pointer",
}} // }}
> // >
{index}: {value.toString()} // {index}: {value.toString()}
</button> // </button>
))} // ))}
</div> // </div>
//
<div style={{ marginTop: "20px" }}> // <div style={{ marginTop: "20px" }}>
<h3>Current Array:</h3> // <h3>Current Array:</h3>
<pre>{JSON.stringify(booleanArray)}</pre> // <pre>{JSON.stringify(booleanArray)}</pre>
</div> // </div>
</div> // </div>
); // );
} //}
export function App() { export function App() {
return ( return (
@ -123,7 +123,6 @@ export function App() {
<Route path=":topicId" element={<FileReader />} /> <Route path=":topicId" element={<FileReader />} />
</Route> </Route>
<Route path="/edit" element={<ResourcePage />} /> <Route path="/edit" element={<ResourcePage />} />
<Route path="/socket" element={<SocketTest />} />
</Routes> </Routes>
</BrowserRouter> </BrowserRouter>
); );

24
reader/src/ResourcePage.jsx
View File

@ -12,7 +12,7 @@ function LoadingWrapper() {
return <ResourcePage />; return <ResourcePage />;
} }
function SelectResource({ onChange }) { function SelectResource({ onChange, refresh }) {
const subjects = useStore((state) => state.subjects); const subjects = useStore((state) => state.subjects);
const [selectedSubject, setSelectedSubject] = useState(-1); const [selectedSubject, setSelectedSubject] = useState(-1);
@ -38,6 +38,10 @@ function SelectResource({ onChange }) {
}); });
} }
if (refresh) {
return null;
}
return ( return (
<div> <div>
{/* File Selector */} {/* File Selector */}
@ -130,6 +134,7 @@ function useFileContent(file) {
} }
const Content = () => { const Content = () => {
const [refresh, setRefresh] = useState(false);
const authToken = useStore((state) => state.config.token); const authToken = useStore((state) => state.config.token);
const changeConfig = useStore((state) => state.changeConfig); const changeConfig = useStore((state) => state.changeConfig);
const setAuthToken = (token) => changeConfig({ token }); const setAuthToken = (token) => changeConfig({ token });
@ -157,6 +162,8 @@ const Content = () => {
const handleSave = async () => { const handleSave = async () => {
setIsSavingLoading(true); setIsSavingLoading(true);
setRefresh(true);
try { try {
const res = await apiInstance.post( const res = await apiInstance.post(
`/resources`, `/resources`,
@ -179,8 +186,13 @@ const Content = () => {
} }
} finally { } finally {
setTimeout(() => { setTimeout(() => {
setMessage(null); //setMessage(null);
}, 8000); if (window) {
window.location.reload();
} else {
console.warn("No window");
}
}, 3000);
setIsSavingLoading(false); setIsSavingLoading(false);
setContent(""); setContent("");
@ -251,7 +263,7 @@ const Content = () => {
// Main content screen // Main content screen
return ( return (
<div className="min-h-screen bg-gray-50 flex flex-col"> <div className="min-h-screen bg-gray-50 flex flex-col">
<SelectResource onChange={(values) => setSelected(values)} /> <SelectResource onChange={(values) => setSelected(values)} refresh={refresh} />
{message && <div className="text-lg p-12 text-green-600 bg-gray-200">{message}</div>} {message && <div className="text-lg p-12 text-green-600 bg-gray-200">{message}</div>}
{selected && !isLoading && ( {selected && !isLoading && (
@ -303,12 +315,12 @@ const Content = () => {
<label htmlFor="content" className="block text-sm font-medium text-gray-700 mb-2"> <label htmlFor="content" className="block text-sm font-medium text-gray-700 mb-2">
Markdown съдържание: Markdown съдържание:
</label> </label>
<div className="flex-1"> <div className="flex-1 flex flex-col">
<textarea <textarea
id="content" id="content"
value={content} value={content}
onChange={(e) => setContent(e.target.value)} onChange={(e) => setContent(e.target.value)}
className="w-full h-full resize-none px-3 py-2 bg-gray-100 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent font-mono text-sm" className="w-full h-full min-h-full flex-1 items-stretch resize-none px-3 py-2 bg-gray-100 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent font-mono text-sm"
placeholder="Въведете вашето Markdown съдържание тук..." placeholder="Въведете вашето Markdown съдържание тук..."
/> />
</div> </div>

56
resource-provider/server.js
View File

@ -57,34 +57,34 @@ app.use(express.urlencoded({ extended: true }));
app.use(morgan("tiny")); app.use(morgan("tiny"));
// Socket connection handling // Socket connection handling
io.on("connection", (socket) => { //io.on("connection", (socket) => {
console.log("Client connected:", socket.id); // console.log("Client connected:", socket.id);
//
// Send current array state to newly connected client // // Send current array state to newly connected client
socket.emit("arrayChanged", booleanArray); // socket.emit("arrayChanged", booleanArray);
//
// Handle array updates from client // // Handle array updates from client
socket.on("setArrayValue", (data) => { // socket.on("setArrayValue", (data) => {
const { index, value } = data; // const { index, value } = data;
//
if (index >= 0 && index < booleanArray.length) { // if (index >= 0 && index < booleanArray.length) {
booleanArray[index] = value; // booleanArray[index] = value;
console.log(`Updated index ${index} to ${value}`); // console.log(`Updated index ${index} to ${value}`);
//
// Broadcast updated array to all clients // // Broadcast updated array to all clients
io.emit("arrayChanged", booleanArray); // io.emit("arrayChanged", booleanArray);
} // }
}); // });
//
// Handle getting current array state // // Handle getting current array state
socket.on("getArray", () => { // socket.on("getArray", () => {
socket.emit("arrayChanged", booleanArray); // socket.emit("arrayChanged", booleanArray);
}); // });
//
socket.on("disconnect", () => { // socket.on("disconnect", () => {
console.log("Client disconnected:", socket.id); // console.log("Client disconnected:", socket.id);
}); // });
}); //});
app.get("/_health", (req, res) => { app.get("/_health", (req, res) => {
res.json({ healthy: true }); res.json({ healthy: true });