update
This commit is contained in:
parent
49ce30f86c
commit
37995ede5c
@ -21,91 +21,91 @@ import {
|
||||
import ResourcePage from "./ResourcePage.jsx";
|
||||
import io from "socket.io-client";
|
||||
|
||||
const socket = io("http://localhost:3000");
|
||||
//const socket = io("http://localhost:3000");
|
||||
|
||||
const DIVIDER_AT = 16;
|
||||
|
||||
function SocketTest() {
|
||||
const [booleanArray, setBooleanArray] = useState(new Array(10).fill(false));
|
||||
const [isConnected, setIsConnected] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
// Connection status
|
||||
socket.on("connect", () => {
|
||||
setIsConnected(true);
|
||||
console.log("Connected to server");
|
||||
});
|
||||
|
||||
socket.on("disconnect", () => {
|
||||
setIsConnected(false);
|
||||
console.log("Disconnected from server");
|
||||
});
|
||||
|
||||
// Listen for array updates
|
||||
socket.on("arrayChanged", (newArray) => {
|
||||
setBooleanArray(newArray);
|
||||
});
|
||||
|
||||
// Cleanup on unmount
|
||||
return () => {
|
||||
socket.off("connect");
|
||||
socket.off("disconnect");
|
||||
socket.off("arrayChanged");
|
||||
};
|
||||
}, []);
|
||||
|
||||
const toggleValue = (index) => {
|
||||
const newValue = !booleanArray[index];
|
||||
|
||||
// Emit update to server
|
||||
socket.emit("setArrayValue", { index, value: newValue });
|
||||
};
|
||||
|
||||
const refreshArray = () => {
|
||||
socket.emit("getArray");
|
||||
};
|
||||
|
||||
return (
|
||||
<div style={{ padding: "20px" }}>
|
||||
<h1>Socket.IO Boolean Array</h1>
|
||||
|
||||
<div style={{ marginBottom: "20px" }}>
|
||||
Status:{" "}
|
||||
<span style={{ color: isConnected ? "green" : "red" }}>
|
||||
{isConnected ? "Connected" : "Disconnected"}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<button onClick={refreshArray} style={{ marginBottom: "20px" }}>
|
||||
Refresh Array
|
||||
</button>
|
||||
|
||||
<div style={{ display: "grid", gridTemplateColumns: "repeat(5, 100px)", gap: "10px" }}>
|
||||
{booleanArray.map((value, index) => (
|
||||
<button
|
||||
key={index}
|
||||
onClick={() => toggleValue(index)}
|
||||
style={{
|
||||
padding: "20px",
|
||||
backgroundColor: value ? "#4CAF50" : "#f44336",
|
||||
color: "white",
|
||||
border: "none",
|
||||
borderRadius: "4px",
|
||||
cursor: "pointer",
|
||||
}}
|
||||
>
|
||||
{index}: {value.toString()}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div style={{ marginTop: "20px" }}>
|
||||
<h3>Current Array:</h3>
|
||||
<pre>{JSON.stringify(booleanArray)}</pre>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
//function SocketTest() {
|
||||
// const [booleanArray, setBooleanArray] = useState(new Array(10).fill(false));
|
||||
// const [isConnected, setIsConnected] = useState(false);
|
||||
//
|
||||
// useEffect(() => {
|
||||
// // Connection status
|
||||
// socket.on("connect", () => {
|
||||
// setIsConnected(true);
|
||||
// console.log("Connected to server");
|
||||
// });
|
||||
//
|
||||
// socket.on("disconnect", () => {
|
||||
// setIsConnected(false);
|
||||
// console.log("Disconnected from server");
|
||||
// });
|
||||
//
|
||||
// // Listen for array updates
|
||||
// socket.on("arrayChanged", (newArray) => {
|
||||
// setBooleanArray(newArray);
|
||||
// });
|
||||
//
|
||||
// // Cleanup on unmount
|
||||
// return () => {
|
||||
// socket.off("connect");
|
||||
// socket.off("disconnect");
|
||||
// socket.off("arrayChanged");
|
||||
// };
|
||||
// }, []);
|
||||
//
|
||||
// const toggleValue = (index) => {
|
||||
// const newValue = !booleanArray[index];
|
||||
//
|
||||
// // Emit update to server
|
||||
// socket.emit("setArrayValue", { index, value: newValue });
|
||||
// };
|
||||
//
|
||||
// const refreshArray = () => {
|
||||
// socket.emit("getArray");
|
||||
// };
|
||||
//
|
||||
// return (
|
||||
// <div style={{ padding: "20px" }}>
|
||||
// <h1>Socket.IO Boolean Array</h1>
|
||||
//
|
||||
// <div style={{ marginBottom: "20px" }}>
|
||||
// Status:{" "}
|
||||
// <span style={{ color: isConnected ? "green" : "red" }}>
|
||||
// {isConnected ? "Connected" : "Disconnected"}
|
||||
// </span>
|
||||
// </div>
|
||||
//
|
||||
// <button onClick={refreshArray} style={{ marginBottom: "20px" }}>
|
||||
// Refresh Array
|
||||
// </button>
|
||||
//
|
||||
// <div style={{ display: "grid", gridTemplateColumns: "repeat(5, 100px)", gap: "10px" }}>
|
||||
// {booleanArray.map((value, index) => (
|
||||
// <button
|
||||
// key={index}
|
||||
// onClick={() => toggleValue(index)}
|
||||
// style={{
|
||||
// padding: "20px",
|
||||
// backgroundColor: value ? "#4CAF50" : "#f44336",
|
||||
// color: "white",
|
||||
// border: "none",
|
||||
// borderRadius: "4px",
|
||||
// cursor: "pointer",
|
||||
// }}
|
||||
// >
|
||||
// {index}: {value.toString()}
|
||||
// </button>
|
||||
// ))}
|
||||
// </div>
|
||||
//
|
||||
// <div style={{ marginTop: "20px" }}>
|
||||
// <h3>Current Array:</h3>
|
||||
// <pre>{JSON.stringify(booleanArray)}</pre>
|
||||
// </div>
|
||||
// </div>
|
||||
// );
|
||||
//}
|
||||
|
||||
export function App() {
|
||||
return (
|
||||
@ -123,7 +123,6 @@ export function App() {
|
||||
<Route path=":topicId" element={<FileReader />} />
|
||||
</Route>
|
||||
<Route path="/edit" element={<ResourcePage />} />
|
||||
<Route path="/socket" element={<SocketTest />} />
|
||||
</Routes>
|
||||
</BrowserRouter>
|
||||
);
|
||||
|
||||
@ -12,7 +12,7 @@ function LoadingWrapper() {
|
||||
return <ResourcePage />;
|
||||
}
|
||||
|
||||
function SelectResource({ onChange }) {
|
||||
function SelectResource({ onChange, refresh }) {
|
||||
const subjects = useStore((state) => state.subjects);
|
||||
|
||||
const [selectedSubject, setSelectedSubject] = useState(-1);
|
||||
@ -38,6 +38,10 @@ function SelectResource({ onChange }) {
|
||||
});
|
||||
}
|
||||
|
||||
if (refresh) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<div>
|
||||
{/* File Selector */}
|
||||
@ -130,6 +134,7 @@ function useFileContent(file) {
|
||||
}
|
||||
|
||||
const Content = () => {
|
||||
const [refresh, setRefresh] = useState(false);
|
||||
const authToken = useStore((state) => state.config.token);
|
||||
const changeConfig = useStore((state) => state.changeConfig);
|
||||
const setAuthToken = (token) => changeConfig({ token });
|
||||
@ -157,6 +162,8 @@ const Content = () => {
|
||||
|
||||
const handleSave = async () => {
|
||||
setIsSavingLoading(true);
|
||||
setRefresh(true);
|
||||
|
||||
try {
|
||||
const res = await apiInstance.post(
|
||||
`/resources`,
|
||||
@ -179,8 +186,13 @@ const Content = () => {
|
||||
}
|
||||
} finally {
|
||||
setTimeout(() => {
|
||||
setMessage(null);
|
||||
}, 8000);
|
||||
//setMessage(null);
|
||||
if (window) {
|
||||
window.location.reload();
|
||||
} else {
|
||||
console.warn("No window");
|
||||
}
|
||||
}, 3000);
|
||||
|
||||
setIsSavingLoading(false);
|
||||
setContent("");
|
||||
@ -251,7 +263,7 @@ const Content = () => {
|
||||
// Main content screen
|
||||
return (
|
||||
<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>}
|
||||
{selected && !isLoading && (
|
||||
@ -303,12 +315,12 @@ const Content = () => {
|
||||
<label htmlFor="content" className="block text-sm font-medium text-gray-700 mb-2">
|
||||
Markdown съдържание:
|
||||
</label>
|
||||
<div className="flex-1">
|
||||
<div className="flex-1 flex flex-col">
|
||||
<textarea
|
||||
id="content"
|
||||
value={content}
|
||||
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 съдържание тук..."
|
||||
/>
|
||||
</div>
|
||||
|
||||
@ -57,34 +57,34 @@ app.use(express.urlencoded({ extended: true }));
|
||||
app.use(morgan("tiny"));
|
||||
|
||||
// Socket connection handling
|
||||
io.on("connection", (socket) => {
|
||||
console.log("Client connected:", socket.id);
|
||||
|
||||
// Send current array state to newly connected client
|
||||
socket.emit("arrayChanged", booleanArray);
|
||||
|
||||
// Handle array updates from client
|
||||
socket.on("setArrayValue", (data) => {
|
||||
const { index, value } = data;
|
||||
|
||||
if (index >= 0 && index < booleanArray.length) {
|
||||
booleanArray[index] = value;
|
||||
console.log(`Updated index ${index} to ${value}`);
|
||||
|
||||
// Broadcast updated array to all clients
|
||||
io.emit("arrayChanged", booleanArray);
|
||||
}
|
||||
});
|
||||
|
||||
// Handle getting current array state
|
||||
socket.on("getArray", () => {
|
||||
socket.emit("arrayChanged", booleanArray);
|
||||
});
|
||||
|
||||
socket.on("disconnect", () => {
|
||||
console.log("Client disconnected:", socket.id);
|
||||
});
|
||||
});
|
||||
//io.on("connection", (socket) => {
|
||||
// console.log("Client connected:", socket.id);
|
||||
//
|
||||
// // Send current array state to newly connected client
|
||||
// socket.emit("arrayChanged", booleanArray);
|
||||
//
|
||||
// // Handle array updates from client
|
||||
// socket.on("setArrayValue", (data) => {
|
||||
// const { index, value } = data;
|
||||
//
|
||||
// if (index >= 0 && index < booleanArray.length) {
|
||||
// booleanArray[index] = value;
|
||||
// console.log(`Updated index ${index} to ${value}`);
|
||||
//
|
||||
// // Broadcast updated array to all clients
|
||||
// io.emit("arrayChanged", booleanArray);
|
||||
// }
|
||||
// });
|
||||
//
|
||||
// // Handle getting current array state
|
||||
// socket.on("getArray", () => {
|
||||
// socket.emit("arrayChanged", booleanArray);
|
||||
// });
|
||||
//
|
||||
// socket.on("disconnect", () => {
|
||||
// console.log("Client disconnected:", socket.id);
|
||||
// });
|
||||
//});
|
||||
|
||||
app.get("/_health", (req, res) => {
|
||||
res.json({ healthy: true });
|
||||
|
||||
Loading…
Reference in New Issue
Block a user