Refactor and update README.md

README.md

@@ -13,7 +13,6 @@
 #### Opcionales
 
 - Documentos públicos
-- Anidación de documentos
 - Compartir bases de datos
 
 ### Presentación
@@ -24,10 +23,11 @@ Puede verla en el siguiente [link](https://www.canva.com/design/DAFSnStE99g/k9QG
 
 Debe instalar:
 
-- Docker
-- Docker-compose
-- Python >= 3.10
-- Poetry
+- docker
+- docker-compose
+- python >= 3.10
+- poetry
+- npm
 
 ## Instalación
 
@@ -49,11 +49,13 @@ POSTGRES_HOST=localhost
 POSTGRES_DB=bd2
 POSTGRES_USER=root
 POSTGRES_PASSWORD=password
+REDIS_HOST=localhost
+REDIS_PORT=6379
 ```
 
 En un ambiente de testeo (como es el caso) puede simplemente copiar el archivo, pero, si se corriese en producción, se deberá cambiar dependiendo el caso de uso.
 
-Debe dejar los URLs de las bases de datos como se indicaron pues así se las configuró con docker. Por lo tanto, deberá dejar libres los puertos 5432, 27017 y 9200.
+Debe dejar los URLs de las bases de datos como se indicaron pues así se las configuró con docker. Por lo tanto, deberá dejar libres los puertos 5432, 27017, 9200 y 6379.
 
 Ahora, para levantar las bases de datos (usando `docker-compose`) debe correr:
 
@@ -69,12 +71,18 @@ Luego, en otra terminal, debe configurar las bases de datos mediante el siguient
 sh run.sh -c
 ```
 
-Por último, para correr la API + backend, debe hacerlo mediante:
+Además, para correr la API + backend (notando que la API correrá por defecto en el puerto 8000), debe hacerlo mediante:
 
 ```
 sh run.sh -a
 ```
 
+Por último, debe levantar el frontend (usará el puerto 3000) mediante:
+
+```
+h run.sh -f
+```
+
 ## Documentación de la API
 
 Puede ir a `http://localhost:8000/docs` para ver el `Swagger`. Notemos que se usó en todo momento `localhost` pues se supone un ambiente de testeo.

bsition/frontend/nextjs/src/components/Document.tsx

@@ -1,128 +0,0 @@
-import io from "socket.io-client";
-import { useState, useEffect } from "react";
-
-let socket;
-
-export default function Document() {
-  const [username, setUsername] = useState("");
-  const [chosenUsername, setChosenUsername] = useState("");
-  const [text, setText] = useState("");
-  const [token, setToken] = useState("");
-
-  useEffect(() => {
-    socketInitializer();
-  }, [chosenUsername]);
-
-  useEffect(() => {
-    const data = new URLSearchParams();
-    data.append("username", "user")
-    data.append("password", "passtest")
-
-    const fetchData = async (data) => {
-        const res = await fetch("http://localhost:8000/api/token", { method: 'POST', body: data})
-        const json = await res.json();
-        setToken(() => json["access_token"])
-      }
-
-      fetchData(data)
-  }, [])
-
-  useEffect(() => {
-    if (token) {
-        const fetchData = async () => {
-            const res = await fetch("http://localhost:8000/api/documents/63866c991b4175934db26981", {
-                method: "GET",
-                headers: {
-                    'Authorization': `Bearer ${token}`
-                }
-            })
-            const json = await res.json();
-            setText(() => json["data"])
-        }
-
-        fetchData()
-    }
-  }, [token])
-
-  useEffect(() => {
-    const interval = setInterval(() => {
-      fetch("http://localhost:8000/api/documents/63866c991b4175934db26981", {
-        method: 'PUT',
-        body: `{"data": "${text}"}`,
-        headers: {
-            'Content-type': 'application/json',
-            'Authorization': `Bearer ${token}`
-        }
-    })
-    }, 500);
-
-    return () => clearInterval(interval);
-  }, [token, text])
-
-  const socketInitializer = async () => {
-    await fetch("/api/socket");
-
-    socket = io();
-
-    socket.emit('create', chosenUsername);
-    console.log(chosenUsername)
-
-    socket.on("newIncomingText", (text) => {
-        setText(() => text);
-        console.log('text' + text);
-      });
-  };
-
-  const sendText = async () => {
-    socket.emit("createdText", text, chosenUsername);
-    setText(() => text);
-  };
-
-  const handleKey = () => {
-    if (text) {
-      sendText();
-    }
-  };
-
-  return (
-    <div className="flex items-center p-4 mx-auto min-h-screen justify-center bg-purple-500">
-      <main className="gap-4 flex flex-col items-center justify-center w-full h-full">
-        {!chosenUsername ? (
-          <>
-            <h3 className="font-bold text-white text-xl">
-              doc_id?
-            </h3>
-            <input
-              type="text"
-              placeholder="Identity..."
-              value={username}
-              className="p-3 rounded-md outline-none"
-              onChange={(e) => setUsername(e.target.value)}
-            />
-            <button
-              onClick={() => {
-                setChosenUsername(username);
-              }}
-              className="bg-white rounded-md px-4 py-2 text-xl"
-            >
-              Go!
-            </button>
-          </>
-        ) : (
-          <>
-            <p className="font-bold text-white text-xl">
-              Your username: {username}
-            </p>
-
-            <textarea
-                placeholder="Type..."
-                onKeyUp={handleKey}
-                value={text}
-                onChange={(e) => setText(e.target.value)}
-            />
-          </>
-        )}
-      </main>
-    </div>
-  );
-}

bsition/frontend/package-lock.json

@@ -1,11 +1,11 @@
 {
-  "name": "nextjs-tailwindcss-typescript-starter",
+  "name": "bsition",
   "version": "0.1.0",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
-      "name": "nextjs-tailwindcss-typescript-starter",
+      "name": "bsition",
       "version": "0.1.0",
       "dependencies": {
         "classnames": "^2.3.1",

bsition/frontend/package.json

@@ -1,5 +1,5 @@
 {
-  "name": "nextjs-tailwindcss-typescript-starter",
+  "name": "bsition",
   "version": "0.1.0",
   "private": true,
   "scripts": {

bsition/frontend/src/components/Sidebar.tsx

@@ -59,14 +59,14 @@ const Sidebar = () => {
 
   const router = useRouter();
 
-  const activeMenu = useMemo(
+  let activeMenu = useMemo(
     () => menuItems.find((menu) => {
         if (!router.query.id || router.query.id === 'undefined') {
             return menu.link === router.pathname
         } else if (!(menu.id === 1 || menu.id === 2 || menu.id === 3)) {
             return menu.id.toString() === router.query.id
         }
-        return true
+        return false
     }),
     [menuItems, router.query.id, router.pathname]
   );
@@ -87,6 +87,19 @@ const Sidebar = () => {
   );
 
   const getNavItemClasses = (menu) => {
+      if (!activeMenu || !menu || menu === "undefined") {
+          if (!router.query || !router.query.id) {
+              return classNames("flex items-center cursor-pointer hover:bg-light-lighter rounded w-full overflow-hidden whitespace-nowrap");
+          }
+          else {
+              return classNames(
+                  "flex items-center cursor-pointer hover:bg-light-lighter rounded w-full overflow-hidden whitespace-nowrap",
+                  {
+                      ["bg-light-lighter"]: router.query.id === menu.id,
+                  }
+              );
+          }
+      }
     return classNames(
       "flex items-center cursor-pointer hover:bg-light-lighter rounded w-full overflow-hidden whitespace-nowrap",
       {

bsition/frontend/src/pages/api/socket.tsx

@@ -3,7 +3,6 @@ import messageHandler from "../../utils/sockets/messageHandler";
 
 export default function SocketHandler(req, res) {
   if (res.socket.server.io) {
-    console.log("Already set up");
     res.end();
     return;
   }
@@ -17,6 +16,5 @@ export default function SocketHandler(req, res) {
 
   io.on("connection", onConnection);
 
-  console.log("Setting up socket");
   res.end();
 }

bsition/frontend/src/pages/documents/[id]/access.tsx

@@ -12,12 +12,9 @@ import {
 import Link from "next/link";
 import classNames from "classnames";
 
-let socket;
-
 export default function Document() {
   const router = useRouter();
 
-  const [text, setText] = useState("");
   const [token, setToken] = useState("");
   const [users, setUsers] = useState([]);
 
@@ -51,23 +48,6 @@ export default function Document() {
     }
   }, [token, router.query.id])
 
-  useEffect(() => {
-      if (token && router.query.id) {
-          const interval = setInterval(() => {
-              fetch(`http://localhost:8000/api/documents/${router.query.id}`, {
-                  method: 'PUT',
-                  body: `{"data": "${text}"}`,
-                  headers: {
-                      'Content-type': 'application/json',
-                      'Authorization': `Bearer ${token}`
-                  }
-              })
-          }, 500);
-
-          return () => clearInterval(interval);
-      }
-  }, [token, text, router.query.id])
-
     const handleSubmit = async (event) => {
         event.preventDefault()
 

bsition/frontend/src/pages/search.tsx

@@ -9,7 +9,9 @@ export default function Search() {
 
     const [token, setToken] = useState("");
     const [search, setSearch] = useState("");
-    const [menuItems, setMenuItems] = useState([{id: 1, label: "", link: "/"}]);
+    const [menuItems, setMenuItems] = useState([
+        {id: 1, label: "", link: "/", first: "", bold: "", second: ""}
+    ]);
 
     useEffect(() => {
         setToken(() => localStorage.getItem("token"))
@@ -36,12 +38,12 @@ export default function Search() {
             if (highlight.length < end + 15) {
                 second_str = highlight.substring(end, highlight.length)
             } else {
-                second_str = highlight.substring(end, end + 15)
+                second_str = highlight.substring(end, end + 15) + " ..."
             }
             if (initial - 10 < 0) {
                 first_str = highlight.substring(0, initial)
             } else {
-                first_str = highlight.substring(0, initial - 10)
+                first_str = "... " + highlight.substring(initial - 10, initial)
             }
             highlight = highlight.substring(initial + 4, end)
             list.push({

bsition/frontend/src/utils/sockets/messageHandler.tsx

@@ -1,7 +1,5 @@
 export default (io, socket) => {
   const createdText = (text, room) => {
-    console.log(room);
-    console.log(text);
     socket.to(room).emit("newIncomingText", text);
   };
 

run.sh

@@ -8,6 +8,7 @@ usage: ${0##*/} [command]
     -i          Install dependencies.
     -d          Run docker-compose up.
     -c          Configure databases.
+    -f          Build and run frontend.
 EOF
     exit 1
 }
@@ -19,6 +20,7 @@ while getopts "hadic" OPTION; do
     d) RUN=docker ;;
     i) RUN=install ;;
     c) RUN=configure  ;;
+    f) RUN=front  ;;
     *) usage ;;
     esac
 done
@@ -29,6 +31,11 @@ elif [ "$RUN" = 'api' ]; then
     poetry run uvicorn bsition.api.main:app --host 0.0.0.0
 elif [ "$RUN" = 'configure' ]; then
     poetry run configure
+elif [ "$RUN" = 'front' ]; then
+    cd bsition/frontend
+    npm install
+    npm run build
+    npm run start
 else
     [ ! -d data ] && mkdir data
     [ ! -d data/postgres ] && mkdir data/postgres