slococo-uni
/
bsition
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Reformat files and run lint 

Co-authored-by: Ezequiel Bellver <ebellver@itba.edu.ar>
Co-authored-by: Juan Barmasch <jbarmasch@itba.edu.ar>
This commit is contained in:
Santiago Lo Coco 2022-12-20 08:35:02 -03:00
parent afa3dd8ed8
commit 2c0c5b49bf
41 changed files with 6463 additions and 857 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
README.md
View File

@ -80,7 +80,7 @@ sh run.sh -a
Por último, debe levantar el frontend (usará el puerto 3000) mediante: Por último, debe levantar el frontend (usará el puerto 3000) mediante:
``` ```
h run.sh -f sh run.sh -f
``` ```
## Documentación de la API ## Documentación de la API

22
bsition/api/endpoints/documents.py
View File

@ -3,7 +3,7 @@ import json
from fastapi import APIRouter, Depends from fastapi import APIRouter, Depends
from fastapi.responses import JSONResponse from fastapi.responses import JSONResponse
from bsition.api.models.document import Document, DocumentUpdate, Access from bsition.api.models.document import Access, Document, DocumentUpdate
from bsition.api.utils.security import get_current_user from bsition.api.utils.security import get_current_user
from bsition.backend.elastic import search as elastic from bsition.backend.elastic import search as elastic
from bsition.backend.mongo import documents as mongo from bsition.backend.mongo import documents as mongo
@ -14,13 +14,17 @@ router = APIRouter()
@router.post("") @router.post("")
def create(aux: Document, user: tuple = Depends(get_current_user)): def create(aux: Document, user: tuple = Depends(get_current_user)):
doc_id = mongo.create_document({ doc_id = mongo.create_document(
"name": aux.name, {
"owner": user[0], "name": aux.name,
"data": aux.data if aux.data is not None else "" "owner": user[0],
}) "data": aux.data if aux.data is not None else "",
}
)
postgres.give_access_doc(user[0], doc_id, 1) postgres.give_access_doc(user[0], doc_id, 1)
return JSONResponse(content={"detail": "Document created", "id": doc_id}, status_code=201) return JSONResponse(
content={"detail": "Document created", "id": doc_id}, status_code=201
)
@router.get("") @router.get("")
@ -63,7 +67,9 @@ def give_access(id: str, access_type: Access, user: tuple = Depends(get_current_
@router.put("/{id}/access") @router.put("/{id}/access")
def update_access(id: str, access_type: Access, user: tuple = Depends(get_current_user)): def update_access(
id: str, access_type: Access, user: tuple = Depends(get_current_user)
):
postgres.give_access_doc(user[0], id, access_type.access_type) postgres.give_access_doc(user[0], id, access_type.access_type)
return JSONResponse(content={"detail": "Access updated"}, status_code=202) return JSONResponse(content={"detail": "Access updated"}, status_code=202)

6
bsition/api/endpoints/tables.py
View File

@ -5,8 +5,8 @@ from bsition.api.models.document import Access
from bsition.api.models.table import Filter, Sort, Table from bsition.api.models.table import Filter, Sort, Table
from bsition.api.utils.security import get_current_user from bsition.api.utils.security import get_current_user
from bsition.backend.mongo import tables as mongo from bsition.backend.mongo import tables as mongo
from bsition.backend.postgres import tables as postgres_t
from bsition.backend.postgres import relations as postgres_r from bsition.backend.postgres import relations as postgres_r
from bsition.backend.postgres import tables as postgres_t
router = APIRouter() router = APIRouter()
@ -74,7 +74,9 @@ def give_access(id: str, access_type: Access, user: tuple = Depends(get_current_
@router.put("/{id}/access") @router.put("/{id}/access")
def update_access(id: str, access_type: Access, user: tuple = Depends(get_current_user)): def update_access(
id: str, access_type: Access, user: tuple = Depends(get_current_user)
):
postgres_r.give_access_table(user[0], id, access_type.access_type) postgres_r.give_access_table(user[0], id, access_type.access_type)
return JSONResponse(content={"detail": "Access updated"}, status_code=202) return JSONResponse(content={"detail": "Access updated"}, status_code=202)

6
bsition/api/endpoints/token.py
View File

@ -7,7 +7,7 @@ from bsition.api.utils.jwt import write_token
from bsition.api.utils.password import verify_password from bsition.api.utils.password import verify_password
from bsition.api.utils.security import get_current_user, oauth2_scheme from bsition.api.utils.security import get_current_user, oauth2_scheme
from bsition.backend.postgres.users import get_user_by_username from bsition.backend.postgres.users import get_user_by_username
from bsition.backend.redis.tokens import add_token, remove_token, clean_tokens from bsition.backend.redis.tokens import add_token, clean_tokens, remove_token
router = APIRouter() router = APIRouter()
@ -34,6 +34,8 @@ def login(form: OAuth2PasswordRequestForm = Depends()):
@router.delete("/token") @router.delete("/token")
def logout(token: str = Depends(oauth2_scheme), user: tuple = Depends(get_current_user)): def logout(
token: str = Depends(oauth2_scheme), user: tuple = Depends(get_current_user)
):
remove_token(user[1], token) remove_token(user[1], token)
return JSONResponse(content={"detail": "Token deleted."}, status_code=202) return JSONResponse(content={"detail": "Token deleted."}, status_code=202)

12
bsition/backend/elastic/search.py
View File

@ -15,9 +15,7 @@ def search(index, query, user_id):
"must": [ "must": [
{"query_string": {"query": query, "default_field": "data"}}, {"query_string": {"query": query, "default_field": "data"}},
], ],
"filter": [ "filter": [{"terms": {"_id": acc_doc}}],
{"terms": {"_id": acc_doc}}
]
} }
}, },
highlight={"fields": {"data": {}}}, highlight={"fields": {"data": {}}},
@ -29,11 +27,11 @@ def search(index, query, user_id):
# str(hit["highlight"]) + " ---- " + "%(name)s: %(data)s" % hit["_source"] # str(hit["highlight"]) + " ---- " + "%(name)s: %(data)s" % hit["_source"]
# str(hit["highlight"]) + " ---- " + "%(name)s: %(data)s" % hit["_source"] # str(hit["highlight"]) + " ---- " + "%(name)s: %(data)s" % hit["_source"]
{ {
"id": hit['_id'], "id": hit["_id"],
"name": hit['_source']["name"], "name": hit["_source"]["name"],
"highlight": str(hit["highlight"]["data"]) "highlight": str(hit["highlight"]["data"]),
} }
) )
print(hit['_id'], hit['_source']) print(hit["_id"], hit["_source"])
return hits return hits

4
bsition/backend/mongo/documents.py
View File

@ -1,8 +1,8 @@
from bson import ObjectId from bson import ObjectId
from bsition.backend.elastic import utils as elastic from bsition.backend.elastic import utils as elastic
from bsition.backend.postgres import relations as postgres
from bsition.backend.mongo.utils import get_database from bsition.backend.mongo.utils import get_database
from bsition.backend.postgres import relations as postgres
def get_documents(user_id): def get_documents(user_id):
@ -22,7 +22,7 @@ def get_documents(user_id):
"access": 1, "access": 1,
"owner": 1, "owner": 1,
} }
} },
] ]
return list(docs_coll.aggregate(pipeline)) return list(docs_coll.aggregate(pipeline))

6
bsition/backend/postgres/relations.py
View File

@ -118,9 +118,7 @@ def is_public(doc_id):
conn = get_connection() conn = get_connection()
cur = conn.cursor() cur = conn.cursor()
cur.execute( cur.execute(
sql.SQL( sql.SQL("SELECT doc_id FROM public_docs WHERE doc_id = {doc_id}").format(
"SELECT doc_id FROM public_docs WHERE doc_id = {doc_id}"
).format(
doc_id=sql.Literal(doc_id), doc_id=sql.Literal(doc_id),
) )
) )
@ -137,7 +135,7 @@ def make_public(doc_id):
doc_id=sql.Literal(doc_id), doc_id=sql.Literal(doc_id),
) )
) )
def make_private(doc_id): def make_private(doc_id):
conn = get_connection() conn = get_connection()

2
bsition/backend/redis/tokens.py
View File

@ -21,8 +21,6 @@ def remove_token(username, token):
client.zrem(username, token) client.zrem(username, token)
# Puede correr en un cron o, por ejemplo, cada vez que el usuario hace login (o logout)
def clean_tokens(username): def clean_tokens(username):
client = get_client() client = get_client()
client.zremrangebyscore(username, -inf, int(time.time())) client.zremrangebyscore(username, -inf, int(time.time()))

3
bsition/frontend/.eslintrc.json Normal file
View File

@ -0,0 +1,3 @@
{
"extends": "next/core-web-vitals"
}

4244
bsition/frontend/package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

3
bsition/frontend/package.json
View File

@ -3,6 +3,7 @@
"version": "0.1.0", "version": "0.1.0",
"private": true, "private": true,
"scripts": { "scripts": {
"lint": "next lint",
"dev": "next dev", "dev": "next dev",
"build": "next build", "build": "next build",
"start": "next start" "start": "next start"
@ -19,6 +20,8 @@
"@types/node": "^17.0.21", "@types/node": "^17.0.21",
"@types/react": "^17.0.39", "@types/react": "^17.0.39",
"autoprefixer": "^10.4.2", "autoprefixer": "^10.4.2",
"eslint": "8.30.0",
"eslint-config-next": "13.0.7",
"postcss": "^8.4.7", "postcss": "^8.4.7",
"postcss-import": "^14.0.2", "postcss-import": "^14.0.2",
"tailwindcss": "^3.0.23", "tailwindcss": "^3.0.23",

20
bsition/frontend/src/components/Layout.tsx
View File

@ -1,16 +1,16 @@
import React from "react"; import React from "react";
import Sidebar from "./Sidebar"; import Sidebar from "./Sidebar";
const Layout = ({ children }) => { const Layout = ({children}) => {
return ( return (
<div className="h-screen flex flex-row justify-start"> <div className="h-screen flex flex-row justify-start">
<Sidebar /> <Sidebar/>
<div <div
className="bg-primary flex-1 p-4 text-white justify-center align-center h-full"> className="bg-primary flex-1 p-4 text-white justify-center align-center h-full">
{children} {children}
</div> </div>
</div> </div>
); );
}; };
export default Layout; export default Layout;

335
bsition/frontend/src/components/Sidebar.tsx
View File

@ -1,122 +1,121 @@
import classNames from "classnames"; import classNames from "classnames";
import Link from "next/link"; import Link from "next/link";
import { useRouter } from "next/router"; import {useRouter} from "next/router";
import React, {useState, useMemo, useEffect} from "react"; import React, {useState, useMemo, useEffect} from "react";
import { import {
ArticleIcon, ArticleIcon,
CollapsIcon, CollapsIcon,
LogoIcon, LogoIcon,
LogoutIcon, LogoutIcon,
SearchIcon, SearchIcon,
HomeIcon, HomeIcon,
CreateIcon CreateIcon
} from "./icons"; } from "./icons";
const Sidebar = () => { const Sidebar = () => {
const [toggleCollapse, setToggleCollapse] = useState(false); const [toggleCollapse, setToggleCollapse] = useState(false);
const [isCollapsible, setIsCollapsible] = useState(false); const [isCollapsible, setIsCollapsible] = useState(false);
const [menuItems, setMenuItems] = useState([ const [menuItems, setMenuItems] = useState([
{ id: 1, label: "Home", icon: HomeIcon, link: "/" }, {id: 1, label: "Home", icon: HomeIcon, link: "/"},
{ id: 2, label: "Search", icon: SearchIcon, link: "/search" }, {id: 2, label: "Search", icon: SearchIcon, link: "/search"},
{ id: 3, label: "Create document", icon: CreateIcon, link: "/create-document" } {id: 3, label: "Create document", icon: CreateIcon, link: "/create-document"}
]); ]);
const [token, setToken] = useState(""); const [token, setToken] = useState("");
useEffect(() => { useEffect(() => {
setToken(() => localStorage.getItem("token")) setToken(() => localStorage.getItem("token"))
}, []) }, [])
useEffect(() => { useEffect(() => {
if (token) { if (token) {
const fetchData = async () => { const fetchData = async () => {
const res = await fetch("http://localhost:8000/api/documents", { const res = await fetch("http://localhost:8000/api/documents", {
method: "GET", method: "GET",
headers: { headers: {
'Authorization': `Bearer ${token}` 'Authorization': `Bearer ${token}`
} }
}) })
let json = await res.json(); let json = await res.json();
let list = [ let list = [
{ id: 1, label: "Home", icon: HomeIcon, link: "/" }, {id: 1, label: "Home", icon: HomeIcon, link: "/"},
{ id: 2, label: "Search", icon: SearchIcon, link: "/search" }, {id: 2, label: "Search", icon: SearchIcon, link: "/search"},
{ id: 3, label: "Create document", icon: CreateIcon, link: "/create-document" } {id: 3, label: "Create document", icon: CreateIcon, link: "/create-document"}
] ]
json.forEach((doc) => { json.forEach((doc) => {
list.push({ list.push({
id: doc["id"], id: doc["id"],
label: doc["name"], label: doc["name"],
icon: ArticleIcon, icon: ArticleIcon,
link: `/documents/${doc["id"]}` link: `/documents/${doc["id"]}`
})
}) })
})
setMenuItems(() => list) setMenuItems(() => list)
}
fetchData()
} }
}, [token])
fetchData() const router = useRouter();
}
}, [token])
const router = useRouter(); let activeMenu = useMemo(
() => menuItems.find((menu) => {
let activeMenu = useMemo( if (!router.query.id || router.query.id === 'undefined') {
() => menuItems.find((menu) => { return menu.link === router.pathname
if (!router.query.id || router.query.id === 'undefined') { } else if (!(menu.id === 1 || menu.id === 2 || menu.id === 3)) {
return menu.link === router.pathname return menu.id.toString() === router.query.id
} else if (!(menu.id === 1 || menu.id === 2 || menu.id === 3)) { }
return menu.id.toString() === router.query.id return false
} }),
return false [menuItems, router.query.id, router.pathname]
}),
[menuItems, router.query.id, router.pathname]
);
const wrapperClasses = classNames(
"h-screen px-4 pt-8 pb-4 bg-light flex justify-between flex-col",
{
["w-80"]: !toggleCollapse,
["w-20"]: toggleCollapse,
}
);
const collapseIconClasses = classNames(
"p-4 rounded bg-light-lighter absolute right-0",
{
"rotate-180": toggleCollapse,
}
);
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",
{
["bg-light-lighter"]: activeMenu.id === menu.id,
}
); );
};
const onMouseOver = () => { const wrapperClasses = classNames(
setIsCollapsible(!isCollapsible); "h-screen px-4 pt-8 pb-4 bg-light flex justify-between flex-col",
}; {
["w-80"]: !toggleCollapse,
["w-20"]: toggleCollapse,
}
);
const handleSidebarToggle = () => { const collapseIconClasses = classNames(
setToggleCollapse(!toggleCollapse); "p-4 rounded bg-light-lighter absolute right-0",
}; {
"rotate-180": toggleCollapse,
}
);
const handleSubmit = async (event) => { 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",
{
["bg-light-lighter"]: activeMenu.id === menu.id,
}
);
};
const onMouseOver = () => {
setIsCollapsible(!isCollapsible);
};
const handleSidebarToggle = () => {
setToggleCollapse(!toggleCollapse);
};
const handleSubmit = async (event) => {
event.preventDefault() event.preventDefault()
const res = await fetch("http://localhost:8000/api/token", { const res = await fetch("http://localhost:8000/api/token", {
@ -130,79 +129,79 @@ const Sidebar = () => {
router.push("/") router.push("/")
} }
return ( return (
<div <div
className={wrapperClasses} className={wrapperClasses}
onMouseEnter={onMouseOver} onMouseEnter={onMouseOver}
onMouseLeave={onMouseOver} onMouseLeave={onMouseOver}
style={{ transition: "width 300ms cubic-bezier(0.2, 0, 0, 1) 0s" }} style={{transition: "width 300ms cubic-bezier(0.2, 0, 0, 1) 0s"}}
> >
<div className="flex flex-col"> <div className="flex flex-col">
<div className="flex items-center justify-between relative"> <div className="flex items-center justify-between relative">
<div className="flex items-center pl-1 gap-4"> <div className="flex items-center pl-1 gap-4">
<LogoIcon /> <LogoIcon/>
<span <span
className={classNames("mt-2 text-lg font-medium text-text", { className={classNames("mt-2 text-lg font-medium text-text", {
hidden: toggleCollapse, hidden: toggleCollapse,
})} })}
> >
BSition BSition
</span> </span>
</div>
{isCollapsible && (
<button
className={collapseIconClasses}
onClick={handleSidebarToggle}
>
<CollapsIcon />
</button>
)}
</div>
<div className="flex flex-col items-start mt-24">
{menuItems.map(({ icon: Icon, ...menu }) => {
const classes = getNavItemClasses(menu);
return (
<div className={classes} key={menu.id}>
<Link href={menu.link}>
<a className="flex py-4 px-3 items-center w-full h-full">
<div style={{ width: "2.5rem" }}>
<Icon />
</div> </div>
{!toggleCollapse && ( {isCollapsible && (
<span <button
className={classNames( className={collapseIconClasses}
"text-md font-medium text-text-light" onClick={handleSidebarToggle}
)} >
> <CollapsIcon/>
{menu.label} </button>
</span>
)} )}
</a>
</Link>
</div>
);
})}
</div>
</div>
<div className={`${getNavItemClasses({})} px-3 py-4`}> </div>
<div style={{ width: "2.5rem" }}>
<LogoutIcon /> <div className="flex flex-col items-start mt-24">
{menuItems.map(({icon: Icon, ...menu}) => {
const classes = getNavItemClasses(menu);
return (
<div className={classes} key={menu.id}>
<Link href={menu.link}>
<a className="flex py-4 px-3 items-center w-full h-full">
<div style={{width: "2.5rem"}}>
<Icon/>
</div>
{!toggleCollapse && (
<span
className={classNames(
"text-md font-medium text-text-light"
)}
>
{menu.label}
</span>
)}
</a>
</Link>
</div>
);
})}
</div>
</div>
<div className={`${getNavItemClasses({})} px-3 py-4`}>
<div style={{width: "2.5rem"}}>
<LogoutIcon/>
</div>
{!toggleCollapse && (
<form onSubmit={handleSubmit}>
<button name="Logout" value="logout">
<span className={classNames("text-md font-medium text-text-light")}>
Logout
</span>
</button>
</form>
)}
</div>
</div> </div>
{!toggleCollapse && ( );
<form onSubmit={handleSubmit}>
<button name="Logout" value="logout">
<span className={classNames("text-md font-medium text-text-light")}>
Logout
</span>
</button>
</form>
)}
</div>
</div>
);
}; };
export default Sidebar; export default Sidebar;

34
bsition/frontend/src/components/icons/ArticleIcon.jsx
View File

@ -1,22 +1,22 @@
import * as React from "react"; import * as React from "react";
function ArticleIcon({ fill = "#6C7281", ...rest }) { function ArticleIcon({fill = "#6C7281", ...rest}) {
return ( return (
<svg <svg
width={24} width={24}
height={24} height={24}
fill="none" fill="none"
viewBox="0 0 24 24" viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
{...rest} {...rest}
> >
<path <path
d="M19 5v14H5V5h14zm0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z" d="M19 5v14H5V5h14zm0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
fill={fill} fill={fill}
/> />
<path d="M14 17H7v-2h7v2zm3-4H7v-2h10v2zm0-4H7V7h10v2z" fill={fill} /> <path d="M14 17H7v-2h7v2zm3-4H7v-2h10v2zm0-4H7V7h10v2z" fill={fill}/>
</svg> </svg>
); );
} }
export default ArticleIcon; export default ArticleIcon;

38
bsition/frontend/src/components/icons/CollapsIcon.jsx
View File

@ -1,24 +1,24 @@
import * as React from "react"; import * as React from "react";
function CollapsIcon({ fill = "#6C7281", ...rest }) { function CollapsIcon({fill = "#6C7281", ...rest}) {
return ( return (
<svg <svg
width={16} width={16}
height={15} height={15}
fill="none" fill="none"
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
{...rest} {...rest}
> >
<path <path
d="M8.901 1.768L7.134 0 0 7.134l7.134 7.133L8.9 12.5 3.535 7.134l5.366-5.367z" d="M8.901 1.768L7.134 0 0 7.134l7.134 7.133L8.9 12.5 3.535 7.134l5.366-5.367z"
fill={fill} fill={fill}
/> />
<path <path
d="M13.384 0L6.25 7.134l7.134 7.133L15.15 12.5 9.785 7.134l5.366-5.367L13.384 0z" d="M13.384 0L6.25 7.134l7.134 7.133L15.15 12.5 9.785 7.134l5.366-5.367L13.384 0z"
fill={fill} fill={fill}
/> />
</svg> </svg>
); );
} }
export default CollapsIcon; export default CollapsIcon;

32
bsition/frontend/src/components/icons/CreateIcon.jsx
View File

@ -1,21 +1,21 @@
import * as React from "react"; import * as React from "react";
function CreateIcon({ fill = "#6C7281", ...rest }) { function CreateIcon({fill = "#6C7281", ...rest}) {
return ( return (
<svg <svg
width={24} width={24}
height={24} height={24}
fill="none" fill="none"
viewBox="0 0 16 16" viewBox="0 0 16 16"
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
{...rest} {...rest}
> >
<path <path
d="M8 4a.5.5 0 0 1 .5.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3A.5.5 0 0 1 8 4z" d="M8 4a.5.5 0 0 1 .5.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3A.5.5 0 0 1 8 4z"
fill={fill} fill={fill}
/> />
</svg> </svg>
); );
} }
export default CreateIcon; export default CreateIcon;

32
bsition/frontend/src/components/icons/DeleteIcon.jsx
View File

@ -1,21 +1,21 @@
import * as React from "react"; import * as React from "react";
function DeleteIcon({ fill = "#6C7281", ...rest }) { function DeleteIcon({fill = "#6C7281", ...rest}) {
return ( return (
<svg <svg
width={24} width={24}
height={24} height={24}
fill="none" fill="none"
viewBox="0 0 24 24" viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
{...rest} {...rest}
> >
<path <path
d="M7 4a2 2 0 0 1 2-2h6a2 2 0 0 1 2 2v2h4a1 1 0 1 1 0 2h-1.069l-.867 12.142A2 2 0 0 1 17.069 22H6.93a2 2 0 0 1-1.995-1.858L4.07 8H3a1 1 0 0 1 0-2h4V4zm2 2h6V4H9v2zM6.074 8l.857 12H17.07l.857-12H6.074z" d="M7 4a2 2 0 0 1 2-2h6a2 2 0 0 1 2 2v2h4a1 1 0 1 1 0 2h-1.069l-.867 12.142A2 2 0 0 1 17.069 22H6.93a2 2 0 0 1-1.995-1.858L4.07 8H3a1 1 0 0 1 0-2h4V4zm2 2h6V4H9v2zM6.074 8l.857 12H17.07l.857-12H6.074z"
fill={fill} fill={fill}
/> />
</svg> </svg>
); );
} }
export default DeleteIcon; export default DeleteIcon;

32
bsition/frontend/src/components/icons/HomeIcon.jsx
View File

@ -1,21 +1,21 @@
import * as React from "react"; import * as React from "react";
function HomeIcon({ fill = "#6C7281", ...rest }) { function HomeIcon({fill = "#6C7281", ...rest}) {
return ( return (
<svg <svg
width={24} width={24}
height={24} height={24}
fill="none" fill="none"
viewBox="0 0 24 24" viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
{...rest} {...rest}
> >
<path <path
d="M3 13h1v7c0 1.103.897 2 2 2h12c1.103 0 2-.897 2-2v-7h1a1.001 1.001 0 00.707-1.707l-9-9a1 1 0 00-1.414 0l-9 9A1 1 0 003 13zm7 7v-5h4v5h-4zm2-15.586l6 6V15l.001 5H16v-5c0-1.103-.897-2-2-2h-4c-1.103 0-2 .897-2 2v5H6v-9.586l6-6z" d="M3 13h1v7c0 1.103.897 2 2 2h12c1.103 0 2-.897 2-2v-7h1a1.001 1.001 0 00.707-1.707l-9-9a1 1 0 00-1.414 0l-9 9A1 1 0 003 13zm7 7v-5h4v5h-4zm2-15.586l6 6V15l.001 5H16v-5c0-1.103-.897-2-2-2h-4c-1.103 0-2 .897-2 2v5H6v-9.586l6-6z"
fill={fill} fill={fill}
/> />
</svg> </svg>
); );
} }
export default HomeIcon; export default HomeIcon;

32
bsition/frontend/src/components/icons/LockIcon.jsx
View File

@ -1,21 +1,21 @@
import * as React from "react"; import * as React from "react";
function LockIcon({ fill = "#6C7281", ...rest }) { function LockIcon({fill = "#6C7281", ...rest}) {
return ( return (
<svg <svg
width={24} width={24}
height={24} height={24}
fill="none" fill="none"
viewBox="-2.5 -2.5 21.5 21.5" viewBox="-2.5 -2.5 21.5 21.5"
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
{...rest} {...rest}
> >
<path <path
d="M8 1a2 2 0 0 1 2 2v4H6V3a2 2 0 0 1 2-2zm3 6V3a3 3 0 0 0-6 0v4a2 2 0 0 0-2 2v5a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2z" d="M8 1a2 2 0 0 1 2 2v4H6V3a2 2 0 0 1 2-2zm3 6V3a3 3 0 0 0-6 0v4a2 2 0 0 0-2 2v5a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2z"
fill={fill} fill={fill}
/> />
</svg> </svg>
); );
} }
export default LockIcon; export default LockIcon;

24
bsition/frontend/src/components/icons/Logo.jsx
View File

@ -1,14 +1,14 @@
import * as React from "react"; import * as React from "react";
function Logo({ fill = "#3B81F6", ...rest }) { function Logo({fill = "#3B81F6", ...rest}) {
return ( return (
<svg version="1.0" xmlns="http://www.w3.org/2000/svg" <svg version="1.0" xmlns="http://www.w3.org/2000/svg"
width="40.000000pt" height="40.000000pt" viewBox="0 0 500.000000 500.000000" width="40.000000pt" height="40.000000pt" viewBox="0 0 500.000000 500.000000"
preserveAspectRatio="xMidYMid meet"> preserveAspectRatio="xMidYMid meet">
<g transform="translate(0.000000,500.000000) scale(0.100000,-0.100000)" <g transform="translate(0.000000,500.000000) scale(0.100000,-0.100000)"
fill="#000000" stroke="none"> fill="#000000" stroke="none">
<path d="M3020 4444 c-138 -12 -603 -47 -855 -64 -159 -11 -371 -27 -470 -35 <path d="M3020 4444 c-138 -12 -603 -47 -855 -64 -159 -11 -371 -27 -470 -35
-99 -8 -283 -21 -410 -30 -500 -33 -538 -40 -595 -98 -71 -71 -65 49 -65 -99 -8 -283 -21 -410 -30 -500 -33 -538 -40 -595 -98 -71 -71 -65 49 -65
-1387 l0 -1295 42 -80 c24 -44 85 -134 136 -200 51 -66 182 -235 291 -375 223 -1387 l0 -1295 42 -80 c24 -44 85 -134 136 -200 51 -66 182 -235 291 -375 223
-288 253 -315 357 -330 35 -5 96 -7 134 -4 39 2 295 18 570 34 748 45 1638 98 -288 253 -315 357 -330 35 -5 96 -7 134 -4 39 2 295 18 570 34 748 45 1638 98
@ -24,7 +24,7 @@ c9 -5 24 -28 32 -51 15 -39 16 -158 14 -1233 -3 -1116 -4 -1192 -21 -1222 -23
-820 -50 -853 -50 -900 -5 -17 16 -35 45 -41 65 -6 23 -9 431 -7 1217 3 1181 -820 -50 -853 -50 -900 -5 -17 16 -35 45 -41 65 -6 23 -9 431 -7 1217 3 1181
3 1182 24 1210 11 15 32 33 46 40 13 7 108 17 214 23 104 6 374 22 599 35 226 3 1182 24 1210 11 15 32 33 46 40 13 7 108 17 214 23 104 6 374 22 599 35 226
14 457 27 515 30 58 3 290 17 515 31 757 46 734 45 777 23z"/> 14 457 27 515 30 58 3 290 17 515 31 757 46 734 45 777 23z"/>
<path d="M1950 3121 l0 -140 88 -3 87 -3 3 -766 c2 -759 2 -766 -18 -792 -23 <path d="M1950 3121 l0 -140 88 -3 87 -3 3 -766 c2 -759 2 -766 -18 -792 -23
-30 -74 -47 -137 -47 l-43 0 0 -130 0 -130 503 0 c622 0 729 11 901 94 204 99 -30 -74 -47 -137 -47 l-43 0 0 -130 0 -130 503 0 c622 0 729 11 901 94 204 99
310 264 323 503 15 278 -97 443 -376 550 -22 8 -19 11 42 51 151 98 227 240 310 264 323 503 15 278 -97 443 -376 550 -22 8 -19 11 42 51 151 98 227 240
227 422 -1 270 -146 439 -434 502 -83 18 -139 21 -628 25 l-538 5 0 -141z 227 422 -1 270 -146 439 -434 502 -83 18 -139 21 -628 25 l-538 5 0 -141z
@ -33,9 +33,9 @@ m1030 -185 c63 -24 116 -62 142 -105 20 -31 23 -49 23 -141 0 -98 -2 -109 -30
252 -22z m-7 -861 c165 -35 250 -124 272 -285 8 -56 -10 -161 -35 -211 -28 252 -22z m-7 -861 c165 -35 250 -124 272 -285 8 -56 -10 -161 -35 -211 -28
-54 -102 -114 -173 -140 -56 -20 -85 -23 -289 -27 l-228 -4 0 341 0 341 193 0 -54 -102 -114 -173 -140 -56 -20 -85 -23 -289 -27 l-228 -4 0 341 0 341 193 0
c128 0 215 -5 260 -15z"/> c128 0 215 -5 260 -15z"/>
</g> </g>
</svg> </svg>
); );
} }
export default Logo; export default Logo;

32
bsition/frontend/src/components/icons/LogoutIcon.jsx
View File

@ -1,21 +1,21 @@
import * as React from "react"; import * as React from "react";
function LogoutIcon({ fill = "#6C7281", ...rest }) { function LogoutIcon({fill = "#6C7281", ...rest}) {
return ( return (
<svg <svg
width={16} width={16}
height={19} height={19}
fill="none" fill="none"
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
{...rest} {...rest}
> >
<path <path
d="M8 19c4.411 0 8-3.589 8-8 0-3.35-2.072-6.22-5-7.41v2.222A6 6 0 0114 11c0 3.31-2.691 6-6 6s-6-2.69-6-6a5.999 5.999 0 013-5.188V3.59C2.072 4.78 0 7.65 0 11c0 4.411 3.589 8 8 8z" d="M8 19c4.411 0 8-3.589 8-8 0-3.35-2.072-6.22-5-7.41v2.222A6 6 0 0114 11c0 3.31-2.691 6-6 6s-6-2.69-6-6a5.999 5.999 0 013-5.188V3.59C2.072 4.78 0 7.65 0 11c0 4.411 3.589 8 8 8z"
fill={fill} fill={fill}
/> />
<path d="M7 0h2v10H7V0z" fill={fill} /> <path d="M7 0h2v10H7V0z" fill={fill}/>
</svg> </svg>
); );
} }
export default LogoutIcon; export default LogoutIcon;

32
bsition/frontend/src/components/icons/ManageIcon.jsx
View File

@ -1,21 +1,21 @@
import * as React from "react"; import * as React from "react";
function ManageIcon({ fill = "#6C7281", ...rest }) { function ManageIcon({fill = "#6C7281", ...rest}) {
return ( return (
<svg <svg
width={24} width={24}
height={24} height={24}
fill="none" fill="none"
viewBox="-2.5 -2.5 21.5 21.5" viewBox="-2.5 -2.5 21.5 21.5"
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
{...rest} {...rest}
> >
<path <path
d="M.102 2.223A3.004 3.004 0 0 0 3.78 5.897l6.341 6.252A3.003 3.003 0 0 0 13 16a3 3 0 1 0-.851-5.878L5.897 3.781A3.004 3.004 0 0 0 2.223.1l2.141 2.142L4 4l-1.757.364L.102 2.223zm13.37 9.019.528.026.287.445.445.287.026.529L15 13l-.242.471-.026.529-.445.287-.287.445-.529.026L13 15l-.471-.242-.529-.026-.287-.445-.445-.287-.026-.529L11 13l.242-.471.026-.529.445-.287.287-.445.529-.026L13 11l.471.242z" d="M.102 2.223A3.004 3.004 0 0 0 3.78 5.897l6.341 6.252A3.003 3.003 0 0 0 13 16a3 3 0 1 0-.851-5.878L5.897 3.781A3.004 3.004 0 0 0 2.223.1l2.141 2.142L4 4l-1.757.364L.102 2.223zm13.37 9.019.528.026.287.445.445.287.026.529L15 13l-.242.471-.026.529-.445.287-.287.445-.529.026L13 15l-.471-.242-.529-.026-.287-.445-.445-.287-.026-.529L11 13l.242-.471.026-.529.445-.287.287-.445.529-.026L13 11l.471.242z"
fill={fill} fill={fill}
/> />
</svg> </svg>
); );
} }
export default ManageIcon; export default ManageIcon;

32
bsition/frontend/src/components/icons/OptionsIcon.jsx
View File

@ -1,21 +1,21 @@
import * as React from "react"; import * as React from "react";
function OptionsIcon({ fill = "#6C7281", ...rest }) { function OptionsIcon({fill = "#6C7281", ...rest}) {
return ( return (
<svg <svg
width={24} width={24}
height={24} height={24}
fill="none" fill="none"
viewBox="-2.5 -2.5 21.5 21.5" viewBox="-2.5 -2.5 21.5 21.5"
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
{...rest} {...rest}
> >
<path <path
d="M9.5 13a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0z" d="M9.5 13a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0z"
fill={fill} fill={fill}
/> />
</svg> </svg>
); );
} }
export default OptionsIcon; export default OptionsIcon;

32
bsition/frontend/src/components/icons/PublicIcon.jsx
View File

@ -1,21 +1,21 @@
import * as React from "react"; import * as React from "react";
function PublicIcon({ fill = "#6C7281", ...rest }) { function PublicIcon({fill = "#6C7281", ...rest}) {
return ( return (
<svg <svg
width={24} width={24}
height={24} height={24}
fill="none" fill="none"
viewBox="0 0 24 24" viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
{...rest} {...rest}
> >
<path <path
d="M221.6,173.3A102.9,102.9,0,0,0,232,128,104.2,104.2,0,0,0,154.8,27.5h-.5A103.8,103.8,0,0,0,60.4,49l-1.3,1.2A103.9,103.9,0,0,0,128,232h2.4A104.3,104.3,0,0,0,221,174.6h0ZM216,128a89.3,89.3,0,0,1-5.5,30.7l-46.4-28.5a16,16,0,0,0-6.3-2.3l-22.8-3a16.1,16.1,0,0,0-15.3,6.8h-8.6l-3.8-7.9a16.2,16.2,0,0,0-11-8.7l-6.6-1.4,2.5-5.9a8.1,8.1,0,0,1,7.4-4.9h16.1a16.1,16.1,0,0,0,7.7-2l12.2-6.8a16.1,16.1,0,0,0,3-2.1l26.9-24.4A15.7,15.7,0,0,0,170,50.7,88,88,0,0,1,216,128ZM40,128a87.1,87.1,0,0,1,9.5-39.7l10.4,27.9a16.1,16.1,0,0,0,11.6,10l5.5,1.2h.1l12,2.6a7.8,7.8,0,0,1,5.5,4.3l2.1,4.4a16.1,16.1,0,0,0,14.4,9h1.2l-7.7,17.2a15.9,15.9,0,0,0,2.8,17.4l16.1,17.4a8.3,8.3,0,0,1,2,6.9l-1.8,9.3A88.1,88.1,0,0,1,40,128Z" d="M221.6,173.3A102.9,102.9,0,0,0,232,128,104.2,104.2,0,0,0,154.8,27.5h-.5A103.8,103.8,0,0,0,60.4,49l-1.3,1.2A103.9,103.9,0,0,0,128,232h2.4A104.3,104.3,0,0,0,221,174.6h0ZM216,128a89.3,89.3,0,0,1-5.5,30.7l-46.4-28.5a16,16,0,0,0-6.3-2.3l-22.8-3a16.1,16.1,0,0,0-15.3,6.8h-8.6l-3.8-7.9a16.2,16.2,0,0,0-11-8.7l-6.6-1.4,2.5-5.9a8.1,8.1,0,0,1,7.4-4.9h16.1a16.1,16.1,0,0,0,7.7-2l12.2-6.8a16.1,16.1,0,0,0,3-2.1l26.9-24.4A15.7,15.7,0,0,0,170,50.7,88,88,0,0,1,216,128ZM40,128a87.1,87.1,0,0,1,9.5-39.7l10.4,27.9a16.1,16.1,0,0,0,11.6,10l5.5,1.2h.1l12,2.6a7.8,7.8,0,0,1,5.5,4.3l2.1,4.4a16.1,16.1,0,0,0,14.4,9h1.2l-7.7,17.2a15.9,15.9,0,0,0,2.8,17.4l16.1,17.4a8.3,8.3,0,0,1,2,6.9l-1.8,9.3A88.1,88.1,0,0,1,40,128Z"
fill={fill} fill={fill}
/> />
</svg> </svg>
); );
} }
export default PublicIcon; export default PublicIcon;

32
bsition/frontend/src/components/icons/SearchIcon.jsx
View File

@ -1,21 +1,21 @@
import * as React from "react"; import * as React from "react";
function SearchIcon({ fill = "#6C7281", ...rest }) { function SearchIcon({fill = "#6C7281", ...rest}) {
return ( return (
<svg <svg
width={24} width={24}
height={24} height={24}
fill="none" fill="none"
viewBox="-2 -2 22 22" viewBox="-2 -2 22 22"
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
{...rest} {...rest}
> >
<path <path
d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z" d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z"
fill={fill} fill={fill}
/> />
</svg> </svg>
); );
} }
export default SearchIcon; export default SearchIcon;

32
bsition/frontend/src/components/icons/ShareIcon.jsx
View File

@ -1,21 +1,21 @@
import * as React from "react"; import * as React from "react";
function ShareIcon({ fill = "#6C7281", ...rest }) { function ShareIcon({fill = "#6C7281", ...rest}) {
return ( return (
<svg <svg
width={24} width={24}
height={24} height={24}
fill="none" fill="none"
viewBox="-2.5 -2.5 21.5 21.5" viewBox="-2.5 -2.5 21.5 21.5"
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
{...rest} {...rest}
> >
<path <path
d="M11 2.5a2.5 2.5 0 1 1 .603 1.628l-6.718 3.12a2.499 2.499 0 0 1 0 1.504l6.718 3.12a2.5 2.5 0 1 1-.488.876l-6.718-3.12a2.5 2.5 0 1 1 0-3.256l6.718-3.12A2.5 2.5 0 0 1 11 2.5z" d="M11 2.5a2.5 2.5 0 1 1 .603 1.628l-6.718 3.12a2.499 2.499 0 0 1 0 1.504l6.718 3.12a2.5 2.5 0 1 1-.488.876l-6.718-3.12a2.5 2.5 0 1 1 0-3.256l6.718-3.12A2.5 2.5 0 0 1 11 2.5z"
fill={fill} fill={fill}
/> />
</svg> </svg>
); );
} }
export default ShareIcon; export default ShareIcon;

38
bsition/frontend/src/components/icons/UsersIcon.jsx
View File

@ -1,24 +1,24 @@
import * as React from "react"; import * as React from "react";
function UsersIcon({ stroke = "#6C7281", ...rest }) { function UsersIcon({stroke = "#6C7281", ...rest}) {
return ( return (
<svg <svg
width={24} width={24}
height={24} height={24}
fill="none" fill="none"
viewBox="0 0 24 24" viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
{...rest} {...rest}
> >
<path <path
d="M12 4.354a4 4 0 110 5.292V4.354zM15 21H3v-1a6 6 0 1112 0v1zm0 0h6v-1a6 6 0 00-9-5.197L15 21zM13 7a4 4 0 11-8 0 4 4 0 018 0v0z" d="M12 4.354a4 4 0 110 5.292V4.354zM15 21H3v-1a6 6 0 1112 0v1zm0 0h6v-1a6 6 0 00-9-5.197L15 21zM13 7a4 4 0 11-8 0 4 4 0 018 0v0z"
stroke={stroke} stroke={stroke}
strokeWidth={2} strokeWidth={2}
strokeLinecap="round" strokeLinecap="round"
strokeLinejoin="round" strokeLinejoin="round"
/> />
</svg> </svg>
); );
} }
export default UsersIcon; export default UsersIcon;

34
bsition/frontend/src/components/icons/VideosIcon.jsx
View File

@ -1,22 +1,22 @@
import * as React from "react"; import * as React from "react";
function VideosIcon({ fill = "#6C7281", ...rest }) { function VideosIcon({fill = "#6C7281", ...rest}) {
return ( return (
<svg <svg
width={24} width={24}
height={24} height={24}
fill="none" fill="none"
viewBox="0 0 24 24" viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
{...rest} {...rest}
> >
<path d="M4 8H2v12a2 2 0 002 2h12v-2H4V8z" fill={fill} /> <path d="M4 8H2v12a2 2 0 002 2h12v-2H4V8z" fill={fill}/>
<path <path
d="M20 2H8a2 2 0 00-2 2v12a2 2 0 002 2h12a2 2 0 002-2V4a2 2 0 00-2-2zm-9 12V6l7 4-7 4z" d="M20 2H8a2 2 0 00-2 2v12a2 2 0 002 2h12a2 2 0 002-2V4a2 2 0 00-2-2zm-9 12V6l7 4-7 4z"
fill={fill} fill={fill}
/> />
</svg> </svg>
); );
} }
export default VideosIcon; export default VideosIcon;

30
bsition/frontend/src/components/icons/index.js
View File

@ -1,16 +1,16 @@
export { default as ArticleIcon } from "./ArticleIcon"; export {default as ArticleIcon} from "./ArticleIcon";
export { default as HomeIcon } from "./HomeIcon"; export {default as HomeIcon} from "./HomeIcon";
export { default as UsersIcon } from "./UsersIcon"; export {default as UsersIcon} from "./UsersIcon";
export { default as VideosIcon } from "./VideosIcon"; export {default as VideosIcon} from "./VideosIcon";
export { default as CollapsIcon } from "./CollapsIcon"; export {default as CollapsIcon} from "./CollapsIcon";
export { default as LogoIcon } from "./Logo"; export {default as LogoIcon} from "./Logo";
export { default as LogoutIcon } from "./LogoutIcon"; export {default as LogoutIcon} from "./LogoutIcon";
export { default as SearchIcon } from "./SearchIcon"; export {default as SearchIcon} from "./SearchIcon";
export { default as ShareIcon } from "./ShareIcon"; export {default as ShareIcon} from "./ShareIcon";
export { default as LockIcon } from "./LockIcon"; export {default as LockIcon} from "./LockIcon";
export { default as PublicIcon } from "./PublicIcon"; export {default as PublicIcon} from "./PublicIcon";
export { default as DeleteIcon } from "./DeleteIcon"; export {default as DeleteIcon} from "./DeleteIcon";
export { default as OptionsIcon } from "./OptionsIcon"; export {default as OptionsIcon} from "./OptionsIcon";
export { default as ManageIcon } from "./ManageIcon"; export {default as ManageIcon} from "./ManageIcon";
export { default as CreateIcon } from "./CreateIcon"; export {default as CreateIcon} from "./CreateIcon";

30
bsition/frontend/src/pages/api/socket.tsx
View File

@ -1,20 +1,20 @@
import { Server } from "socket.io"; import {Server} from "socket.io";
import messageHandler from "../../utils/sockets/messageHandler"; import messageHandler from "../../utils/sockets/messageHandler";
export default function SocketHandler(req, res) { export default function SocketHandler(req, res) {
if (res.socket.server.io) { if (res.socket.server.io) {
res.end();
return;
}
const io = new Server(res.socket.server);
res.socket.server.io = io;
const onConnection = (socket) => {
messageHandler(io, socket);
};
io.on("connection", onConnection);
res.end(); res.end();
return;
}
const io = new Server(res.socket.server);
res.socket.server.io = io;
const onConnection = (socket) => {
messageHandler(io, socket);
};
io.on("connection", onConnection);
res.end();
} }

20
bsition/frontend/src/pages/create-document.tsx
View File

@ -39,15 +39,19 @@ export default function CreateDocument() {
return ( return (
<Layout> <Layout>
<div className="flex items-center justify-center w-full h-full"> <div className="flex items-center justify-center w-full h-full">
<form onSubmit={handleSubmit} className="flex items-center justify-center align-center w-full h-full login-form" style={{flexDirection: "column"}}> <form onSubmit={handleSubmit}
<div> className="flex items-center justify-center align-center w-full h-full login-form"
<input type="text" id="name" name="name" required placeholder="name" style={{flexDirection: "column"}}>
style={{border: "1px solid grey", color: "black", padding: "2px 4px"}}/> <div>
</div> <input type="text" id="name" name="name" required placeholder="name"
style={{border: "1px solid grey", color: "black", padding: "2px 4px"}}/>
</div>
<button type="submit" className="rounded bg-pink-600 rounded" style={{border: "1px solid grey", padding: "4px"}}>Create</button> <button type="submit" className="rounded bg-pink-600 rounded"
</form> style={{border: "1px solid grey", padding: "4px"}}>Create
</div> </button>
</form>
</div>
</Layout> </Layout>
); );
} }

206
bsition/frontend/src/pages/documents/[id].tsx
View File

@ -1,6 +1,6 @@
import io from "socket.io-client"; import io from "socket.io-client";
import { useState, useEffect } from "react"; import {useState, useEffect} from "react";
import { useRouter } from "next/router"; import {useRouter} from "next/router";
import Layout from "../../components/Layout"; import Layout from "../../components/Layout";
import { import {
OptionsIcon, OptionsIcon,
@ -15,120 +15,132 @@ import Link from "next/link";
let socket; let socket;
export default function Document() { export default function Document() {
const router = useRouter(); const router = useRouter();
const [text, setText] = useState(""); const [text, setText] = useState("");
const [token, setToken] = useState(""); const [token, setToken] = useState("");
const [title, setTitle] = useState(""); const [title, setTitle] = useState("");
useEffect(() => { useEffect(() => {
socketInitializer(); socketInitializer();
}, [router.query.id]); }, [router.query.id]);
useEffect(() => { useEffect(() => {
setToken(() => localStorage.getItem("token")) setToken(() => localStorage.getItem("token"))
}, []) }, [])
useEffect(() => { useEffect(() => {
if (token && router.query.id) { if (token && router.query.id) {
const fetchData = async () => { const fetchData = async () => {
const res = await fetch(`http://localhost:8000/api/documents/${router.query.id}`, { const res = await fetch(`http://localhost:8000/api/documents/${router.query.id}`, {
method: "GET", method: "GET",
headers: { headers: {
'Authorization': `Bearer ${token}` 'Authorization': `Bearer ${token}`
} }
}) })
const json = await res.json(); const json = await res.json();
setText(() => json["data"]) setText(() => json["data"])
setTitle(() => json["name"]) setTitle(() => json["name"])
}
fetchData()
} }
}, [token, router.query.id])
fetchData() useEffect(() => {
} if (token && router.query.id) {
}, [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);
useEffect(() => { return () => clearInterval(interval);
if (token && router.query.id) { }
const interval = setInterval(() => { }, [token, text, router.query.id])
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); const socketInitializer = async () => {
} await fetch("/api/socket");
}, [token, text, router.query.id])
const socketInitializer = async () => { socket = io();
await fetch("/api/socket");
socket = io(); socket.emit('create', router.query.id);
socket.emit('create', router.query.id); socket.on("newIncomingText", (text) => {
setText(() => text);
console.log('text' + text);
});
};
socket.on("newIncomingText", (text) => { const sendText = async () => {
socket.emit("createdText", text, router.query.id);
setText(() => text); setText(() => text);
console.log('text' + text); };
});
};
const sendText = async () => { const handleKey = () => {
socket.emit("createdText", text, router.query.id); if (text) {
setText(() => text); sendText();
}; }
};
const handleKey = () => { let access = router.query.id + "/access"
if (text) {
sendText();
}
};
let access = router.query.id + "/access" return (
<Layout>
return ( <div style={{height: "50px", justifyContent: "space-between"}}
<Layout> className="align-center flex">
<div style={{height: "50px", justifyContent: "space-between"}}
className="align-center flex">
<span className="docTitle"> <span className="docTitle">
{title} {title}
</span> </span>
<div className="dropdown"> <div className="dropdown">
<OptionsIcon onClick={(e) => { <OptionsIcon onClick={(e) => {
document.getElementById("myDropdown").classList.toggle("show"); document.getElementById("myDropdown").classList.toggle("show");
window.onclick = function(event) { window.onclick = function (event) {
if (!event.target.matches('.dropbtn')) { if (!event.target.matches('.dropbtn')) {
var dropdowns = document.getElementsByClassName("dropdown-content"); var dropdowns = document.getElementsByClassName("dropdown-content");
var i; var i;
for (i = 0; i < dropdowns.length; i++) { for (i = 0; i < dropdowns.length; i++) {
var openDropdown = dropdowns[i]; var openDropdown = dropdowns[i];
if (openDropdown.classList.contains('show')) { if (openDropdown.classList.contains('show')) {
openDropdown.classList.remove('show'); openDropdown.classList.remove('show');
}
}
} }
} }
}}}} className="dropbtn"></OptionsIcon> }} className="dropbtn"></OptionsIcon>
<div id="myDropdown" className="dropdown-content"> <div id="myDropdown" className="dropdown-content">
<Link href={access}> <Link href={access}>
<div className="flex flex-row items-center justify-start align-center menu-opt"><ManageIcon/><span>Manage access</span></div> <div className="flex flex-row items-center justify-start align-center menu-opt">
</Link> <ManageIcon/><span>Manage access</span></div>
<a href="#"><div className="flex flex-row items-center justify-start align-center menu-opt"><ShareIcon/><span>Share</span></div></a> </Link>
<a href="#"><div className="flex flex-row items-center justify-start align-center menu-opt"><LockIcon/><span>Public/private</span></div></a> <a href="#">
<a href="#"><div className="flex flex-row items-center justify-start align-center menu-opt"><DeleteIcon/><span>Delete document</span></div></a> <div className="flex flex-row items-center justify-start align-center menu-opt"><ShareIcon/><span>Share</span>
</div> </div>
</div> </a>
</div> <a href="#">
<textarea <div className="flex flex-row items-center justify-start align-center menu-opt">
className="document_area" <LockIcon/><span>Public/private</span></div>
placeholder="Type..." </a>
onKeyUp={handleKey} <a href="#">
value={text} <div className="flex flex-row items-center justify-start align-center menu-opt">
onChange={(e) => setText(e.target.value)} <DeleteIcon/><span>Delete document</span></div>
/> </a>
</Layout> </div>
); </div>
</div>
<textarea
className="document_area"
placeholder="Type..."
onKeyUp={handleKey}
value={text}
onChange={(e) => setText(e.target.value)}
/>
</Layout>
);
} }

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

@ -1,5 +1,5 @@
import React, { useState, useEffect } from "react"; import React, {useState, useEffect} from "react";
import { useRouter } from "next/router"; import {useRouter} from "next/router";
import Layout from "../../../components/Layout"; import Layout from "../../../components/Layout";
import { import {
OptionsIcon, OptionsIcon,
@ -13,40 +13,40 @@ import Link from "next/link";
import classNames from "classnames"; import classNames from "classnames";
export default function Document() { export default function Document() {
const router = useRouter(); const router = useRouter();
const [token, setToken] = useState(""); const [token, setToken] = useState("");
const [users, setUsers] = useState([]); const [users, setUsers] = useState([]);
useEffect(() => { useEffect(() => {
setToken(() => localStorage.getItem("token")) setToken(() => localStorage.getItem("token"))
}, []) }, [])
useEffect(() => { useEffect(() => {
if (token && router.query.id) { if (token && router.query.id) {
const fetchData = async () => { const fetchData = async () => {
const res = await fetch(`http://localhost:8000/api/documents/${router.query.id}/access`, { const res = await fetch(`http://localhost:8000/api/documents/${router.query.id}/access`, {
method: "GET", method: "GET",
headers: { headers: {
'Authorization': `Bearer ${token}` 'Authorization': `Bearer ${token}`
} }
})
const json = await res.json();
console.log(json)
let list = []
json.forEach((user) => {
list.push({
id: user[0],
username: user[1],
access: user[2]
}) })
}) const json = await res.json();
setUsers(() => list) console.log(json)
} let list = []
json.forEach((user) => {
list.push({
id: user[0],
username: user[1],
access: user[2]
})
})
setUsers(() => list)
}
fetchData() fetchData()
} }
}, [token, router.query.id]) }, [token, router.query.id])
const handleSubmit = async (event) => { const handleSubmit = async (event) => {
event.preventDefault() event.preventDefault()
@ -69,45 +69,47 @@ export default function Document() {
} }
return ( return (
<Layout> <Layout>
<div style={{height: "50px", justifyContent: "space-between"}} <div style={{height: "50px", justifyContent: "space-between"}}
className="align-center flex"> className="align-center flex">
<table> <table>
<tr> <tr>
<th>Username</th> <th>Username</th>
<th>Access</th> <th>Access</th>
</tr> </tr>
{users.map(({ icon: Icon, ...user }) => { {users.map(({icon: Icon, ...user}) => {
return ( return (
<> <>
<tr style={{color: "black"}}> <tr style={{color: "black"}}>
<td>{user.username}</td> <td>{user.username}</td>
<td> <td>
<select style={{padding: "4px"}} value={user.access} onChange={handleSubmit}> <select style={{padding: "4px"}} value={user.access} onChange={handleSubmit}>
<option value={1} label="Full-access"></option> <option value={1} label="Full-access"></option>
<option value={2} label="Edit"></option> <option value={2} label="Edit"></option>
<option value={3} label="Read-only"></option> <option value={3} label="Read-only"></option>
</select> </select>
</td> </td>
</tr> </tr>
<div className="flex items-center justify-center w-full h-full"> <div className="flex items-center justify-center w-full h-full">
{/*<form onSubmit={handleSubmit} className="flex items-center justify-center align-center w-full h-full login-form" style={{flexDirection: "column"}}>*/} {/*<form onSubmit={handleSubmit} className="flex items-center justify-center align-center w-full h-full login-form" style={{flexDirection: "column"}}>*/}
<div> <div>
<input type="text" id="name" name="name" required placeholder="name" <input type="text" id="name" name="name" required placeholder="name"
style={{border: "1px solid grey", color: "black", padding: "2px 4px"}}/> style={{border: "1px solid grey", color: "black", padding: "2px 4px"}}/>
</div> </div>
<button type="submit" className="rounded bg-pink-600 rounded" style={{border: "1px solid grey", padding: "4px"}}>Create</button> <button type="submit" className="rounded bg-pink-600 rounded"
{/*</form>*/} style={{border: "1px solid grey", padding: "4px"}}>Create
</div> </button>
</> {/*</form>*/}
); </div>
})} </>
</table> );
</div> })}
</Layout> </table>
); </div>
</Layout>
);
} }

30
bsition/frontend/src/pages/index.tsx
View File

@ -3,7 +3,7 @@ import {useRouter} from "next/router";
import {useEffect, useState} from "react"; import {useEffect, useState} from "react";
export default function Home() { export default function Home() {
const router = useRouter(); const router = useRouter();
const [isLoading, setIsLoading] = useState(true); const [isLoading, setIsLoading] = useState(true);
useEffect(() => { useEffect(() => {
@ -19,18 +19,18 @@ export default function Home() {
return <></> return <></>
} }
return <Layout> return <Layout>
<div className="flex flex-col justify-center h-full w-full align-center items-center"> <div className="flex flex-col justify-center h-full w-full align-center items-center">
<div style={{width: "fit-content"}}> <div style={{width: "fit-content"}}>
<h1 style={{fontSize: "xxx-large"}}>BSition</h1> <h1 style={{fontSize: "xxx-large"}}>BSition</h1>
<h3 style={{margin: "0"}}>Created by:</h3> <h3 style={{margin: "0"}}>Created by:</h3>
<h2 style={{margin: "0"}}>Bottler</h2> <h2 style={{margin: "0"}}>Bottler</h2>
<ul style={{margin: "0"}}> <ul style={{margin: "0"}}>
<li>Barmasch, Juan Martín</li> <li>Barmasch, Juan Martín</li>
<li>Bellver, Ezequiel</li> <li>Bellver, Ezequiel</li>
<li>Lo Coco, Santiago</li> <li>Lo Coco, Santiago</li>
</ul> </ul>
</div> </div>
</div> </div>
</Layout>; </Layout>;
} }

8
bsition/frontend/src/pages/login.tsx
View File

@ -38,7 +38,9 @@ export default function Login() {
return ( return (
<div className="flex items-center justify-center w-full h-full" style={{marginTop: "30%"}}> <div className="flex items-center justify-center w-full h-full" style={{marginTop: "30%"}}>
<form onSubmit={handleSubmit} className="flex items-center justify-center align-center w-full h-full login-form" style={{flexDirection: "column"}}> <form onSubmit={handleSubmit}
className="flex items-center justify-center align-center w-full h-full login-form"
style={{flexDirection: "column"}}>
<div> <div>
<input type="text" id="username" name="username" required placeholder="username" <input type="text" id="username" name="username" required placeholder="username"
style={{border: "1px solid grey", color: "black", padding: "2px 4px"}}/> style={{border: "1px solid grey", color: "black", padding: "2px 4px"}}/>
@ -48,7 +50,9 @@ export default function Login() {
style={{border: "1px solid grey", color: "black", padding: "2px 4px"}}/> style={{border: "1px solid grey", color: "black", padding: "2px 4px"}}/>
</div> </div>
<button type="submit" className="rounded bg-pink-600 rounded" style={{border: "1px solid grey", padding: "4px"}}>Log in</button> <button type="submit" className="rounded bg-pink-600 rounded"
style={{border: "1px solid grey", padding: "4px"}}>Log in
</button>
</form> </form>
</div> </div>
); );

120
bsition/frontend/src/styles/Home.module.css
View File

@ -1,116 +1,116 @@
.container { .container {
padding: 0 2rem; padding: 0 2rem;
} }
.main { .main {
min-height: 100vh; min-height: 100vh;
padding: 4rem 0; padding: 4rem 0;
flex: 1; flex: 1;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
} }
.footer { .footer {
display: flex; display: flex;
flex: 1; flex: 1;
padding: 2rem 0; padding: 2rem 0;
border-top: 1px solid #eaeaea; border-top: 1px solid #eaeaea;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
} }
.footer a { .footer a {
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
flex-grow: 1; flex-grow: 1;
} }
.title a { .title a {
color: #0070f3; color: #0070f3;
text-decoration: none; text-decoration: none;
} }
.title a:hover, .title a:hover,
.title a:focus, .title a:focus,
.title a:active { .title a:active {
text-decoration: underline; text-decoration: underline;
} }
.title { .title {
margin: 0; margin: 0;
line-height: 1.15; line-height: 1.15;
font-size: 4rem; font-size: 4rem;
} }
.title, .title,
.description { .description {
text-align: center; text-align: center;
} }
.description { .description {
margin: 4rem 0; margin: 4rem 0;
line-height: 1.5; line-height: 1.5;
font-size: 1.5rem; font-size: 1.5rem;
} }
.code { .code {
background: #fafafa; background: #fafafa;
border-radius: 5px; border-radius: 5px;
padding: 0.75rem; padding: 0.75rem;
font-size: 1.1rem; font-size: 1.1rem;
font-family: Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono, font-family: Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono,
Bitstream Vera Sans Mono, Courier New, monospace; Bitstream Vera Sans Mono, Courier New, monospace;
} }
.grid { .grid {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
flex-wrap: wrap; flex-wrap: wrap;
max-width: 800px; max-width: 800px;
} }
.card { .card {
margin: 1rem; margin: 1rem;
padding: 1.5rem; padding: 1.5rem;
text-align: left; text-align: left;
color: inherit; color: inherit;
text-decoration: none; text-decoration: none;
border: 1px solid #eaeaea; border: 1px solid #eaeaea;
border-radius: 10px; border-radius: 10px;
transition: color 0.15s ease, border-color 0.15s ease; transition: color 0.15s ease, border-color 0.15s ease;
max-width: 300px; max-width: 300px;
} }
.card:hover, .card:hover,
.card:focus, .card:focus,
.card:active { .card:active {
color: #0070f3; color: #0070f3;
border-color: #0070f3; border-color: #0070f3;
} }
.card h2 { .card h2 {
margin: 0 0 1rem 0; margin: 0 0 1rem 0;
font-size: 1.5rem; font-size: 1.5rem;
} }
.card p { .card p {
margin: 0; margin: 0;
font-size: 1.25rem; font-size: 1.25rem;
line-height: 1.5; line-height: 1.5;
} }
.logo { .logo {
height: 1em; height: 1em;
margin-left: 0.5rem; margin-left: 0.5rem;
} }
@media (max-width: 600px) { @media (max-width: 600px) {
.grid { .grid {
width: 100%; width: 100%;
flex-direction: column; flex-direction: column;
} }
} }

96
bsition/frontend/src/styles/index.css
View File

@ -5,99 +5,103 @@
/* Your own custom component styles */ /* Your own custom component styles */
.document_area { .document_area {
width: 100%; width: 100%;
height: calc(100% - 50px); height: calc(100% - 50px);
/*margin: 40px;*/ /*margin: 40px;*/
border: none; border: none;
outline: none; outline: none;
resize: none; resize: none;
color: black; color: black;
padding: 10px; padding: 10px;
} }
.docTitle { .docTitle {
color: black; color: black;
font-size: large; font-size: large;
font-weight: bold; font-weight: bold;
} }
.dropbtn { .dropbtn {
width: 40px; width: 40px;
height: 40px; height: 40px;
border-radius: 100%; border-radius: 100%;
padding: 3px; padding: 3px;
border: none; border: none;
stroke: #404040; stroke: #404040;
cursor: pointer; cursor: pointer;
} }
.dropbtn:hover, .dropbtn:focus { .dropbtn:hover, .dropbtn:focus {
border-radius: 100%; border-radius: 100%;
background-color: #419de8; background-color: #419de8;
} }
.dropdown { .dropdown {
float: right; float: right;
position: relative; position: relative;
display: inline-block; display: inline-block;
} }
.dropdown-content { .dropdown-content {
display: none; display: none;
position: absolute; position: absolute;
background-color: white; background-color: white;
min-width: 220px; min-width: 220px;
overflow: auto; overflow: auto;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
right: 0; right: 0;
z-index: 1; z-index: 1;
} }
.dropdown-content a { .dropdown-content a {
color: black; color: black;
padding: 12px 16px; padding: 12px 16px;
text-decoration: none; text-decoration: none;
display: block; display: block;
} }
.dropdown a:hover {background-color: #ddd;} .dropdown a:hover {
background-color: #ddd;
}
.show {display: block;} .show {
display: block;
}
svg { svg {
display: inline; display: inline;
} }
.login-form div { .login-form div {
margin: 10px; margin: 10px;
} }
.menu-opt span { .menu-opt span {
margin-left: 4px; margin-left: 4px;
} }
h1 { h1 {
all: revert; all: revert;
} }
h2 { h2 {
all: revert; all: revert;
} }
h3 { h3 {
all: revert; all: revert;
} }
ul { ul {
all: revert; all: revert;
} }
li { li {
all: revert; all: revert;
} }
table { table {
all: revert all: revert
} }

14
bsition/frontend/src/utils/sockets/messageHandler.tsx
View File

@ -1,11 +1,11 @@
export default (io, socket) => { export default (io, socket) => {
const createdText = (text, room) => { const createdText = (text, room) => {
socket.to(room).emit("newIncomingText", text); socket.to(room).emit("newIncomingText", text);
}; };
socket.on('create', function(room) { socket.on('create', function (room) {
socket.join(room); socket.join(room);
}); });
socket.on("createdText", createdText); socket.on("createdText", createdText);
}; };

46
bsition/frontend/tailwind.config.js
View File

@ -1,28 +1,28 @@
const defaultTheme = require('tailwindcss/defaultConfig'); const defaultTheme = require('tailwindcss/defaultConfig');
module.exports = { module.exports = {
content: [ content: [
'./src/components/**/*.{ts,tsx,js,jsx}', './src/components/**/*.{ts,tsx,js,jsx}',
'./src/pages/**/*.{ts,tsx,js,jsx}', './src/pages/**/*.{ts,tsx,js,jsx}',
'./src/pages/login.tsx' './src/pages/login.tsx'
], ],
theme: { theme: {
...defaultTheme, ...defaultTheme,
colors: { colors: {
...defaultTheme.colors, ...defaultTheme.colors,
primary: "#71aaff", primary: "#71aaff",
white: '#ffffff', white: '#ffffff',
text: { text: {
DEFAULT: "#1F2937", DEFAULT: "#1F2937",
light: "#6C7281", light: "#6C7281",
}, },
light: { light: {
DEFAULT: "#FAFBFC", DEFAULT: "#FAFBFC",
lighter: "#F3F4F6", lighter: "#F3F4F6",
}, },
},
extend: {},
}, },
extend: {}, variants: {},
}, plugins: [],
variants: {},
plugins: [],
} }

1425
bsition/frontend/yarn.lock
View File

File diff suppressed because it is too large Load Diff

2
run.sh
View File

@ -14,7 +14,7 @@ EOF
} }
RUN= RUN=
while getopts "hadic" OPTION; do while getopts "hadicf" OPTION; do
case $OPTION in case $OPTION in
a) RUN=api ;; a) RUN=api ;;
d) RUN=docker ;; d) RUN=docker ;;