From fd180cca7a8679e044a16e1c95848b4124690585 Mon Sep 17 00:00:00 2001 From: Valerie Date: Sat, 30 Jul 2022 21:27:56 -0400 Subject: [PATCH] good shet eh? --- packages/main/src/mainWindow.ts | 2 + packages/renderer/src/components/Sidebar.tsx | 6 +- packages/renderer/src/hooks/useHover.ts | 30 ++++++++ packages/renderer/src/lib/api.ts | 6 +- packages/renderer/src/lib/native.ts | 4 +- packages/renderer/src/lib/useApi.tsx | 13 +++- packages/renderer/src/pages/Channel.tsx | 68 +++++++++++++++++++ packages/renderer/src/pages/Channels.tsx | 43 +++--------- packages/renderer/src/pages/Chat.tsx | 12 ++-- packages/renderer/src/pages/NameTextbox.tsx | 6 +- packages/server/.env | 2 +- packages/server/src/db/migrate.ts | 6 ++ .../server/src/db/snippets/client/get.sql | 2 +- packages/server/src/lib/WebSocketServer.ts | 3 + packages/server/src/routers/client.ts | 10 ++- packages/server/src/routers/session.ts | 1 - 16 files changed, 157 insertions(+), 57 deletions(-) create mode 100644 packages/renderer/src/hooks/useHover.ts create mode 100644 packages/renderer/src/pages/Channel.tsx diff --git a/packages/main/src/mainWindow.ts b/packages/main/src/mainWindow.ts index 6892929..4355b19 100644 --- a/packages/main/src/mainWindow.ts +++ b/packages/main/src/mainWindow.ts @@ -12,6 +12,8 @@ async function createWindow() { }, }); + browserWindow.setMenu(null); + /** * If you install `show: true` then it can cause issues when trying to close the window. * Use `show: false` and listener events `ready-to-show` to fix these issues. diff --git a/packages/renderer/src/components/Sidebar.tsx b/packages/renderer/src/components/Sidebar.tsx index 6cb9bca..b6d3767 100644 --- a/packages/renderer/src/components/Sidebar.tsx +++ b/packages/renderer/src/components/Sidebar.tsx @@ -40,9 +40,9 @@ export default function Sidebar(props: { useEffect(() => { if(screenRef === null) return; - screenRef.addEventListener('touchstart', pointerDown); - screenRef.addEventListener('touchend', pointerUp); - screenRef.addEventListener('touchmove', pointerMove); + screenRef.addEventListener('touchstart', pointerDown, { passive: true }); + screenRef.addEventListener('touchend', pointerUp, { passive: true }); + screenRef.addEventListener('touchmove', pointerMove, { passive: true }); // screenRef.addEventListener('pointercancel', pointerUp); return () => { screenRef.removeEventListener('touchstart', pointerDown); diff --git a/packages/renderer/src/hooks/useHover.ts b/packages/renderer/src/hooks/useHover.ts new file mode 100644 index 0000000..a7bdb8e --- /dev/null +++ b/packages/renderer/src/hooks/useHover.ts @@ -0,0 +1,30 @@ +import { useEffect, useState } from "react"; + + + +export default function useHover(): [ + (t: T) => void, + boolean +] { + const [value, setValue] = useState(false); + const [ref, setRef] = useState(null); + + const handleMouseOver = () => setValue(true); + const handleMouseOut = () => setValue(false); + + useEffect( + () => { + const node = ref; + if (node) { + node.addEventListener("mouseover", handleMouseOver); + node.addEventListener("mouseout", handleMouseOut); + return () => { + node.removeEventListener("mouseover", handleMouseOver); + node.removeEventListener("mouseout", handleMouseOut); + }; + } + }, + [ref] // Recall only if ref changes + ); + return [setRef, value]; +} \ No newline at end of file diff --git a/packages/renderer/src/lib/api.ts b/packages/renderer/src/lib/api.ts index 17e6feb..d164804 100644 --- a/packages/renderer/src/lib/api.ts +++ b/packages/renderer/src/lib/api.ts @@ -8,7 +8,7 @@ export function connectApi(url: string) { const connect = async () => { try { connectionAttempts ++; - console.log('connecting to', url); + // console.log('connecting to', url); socket = new WebSocket(url); } catch (e) { if(destroy) return; @@ -30,14 +30,12 @@ export function connectApi(url: string) { socket.addEventListener('message', (event) => { const {action, data} = JSON.parse(event.data); - console.log('[IN]', action, data); + // console.debug('[IN]', action, data); const routeFound = routers .map(router => router(action, data)) .reduce((a, b) => a + b, 0); if(routeFound === 0) { console.warn(`route <${action}> not found`); - } else { - console.log(`routed to ${routeFound} elements`); } }); diff --git a/packages/renderer/src/lib/native.ts b/packages/renderer/src/lib/native.ts index 9b75937..213c059 100644 --- a/packages/renderer/src/lib/native.ts +++ b/packages/renderer/src/lib/native.ts @@ -1,6 +1,6 @@ import * as preload from '#preload'; -console.log('#preload', preload); +// console.log('#preload', preload); const functions: any = (function() { const electron = !!preload.versions; @@ -29,7 +29,7 @@ const functions: any = (function() { })(); -console.log('native functions loaded', functions); +// console.log('native functions loaded', functions); export const getClientId = functions.getClientId; export const setClientId = functions.setClientId; diff --git a/packages/renderer/src/lib/useApi.tsx b/packages/renderer/src/lib/useApi.tsx index 94e565d..17cffd7 100644 --- a/packages/renderer/src/lib/useApi.tsx +++ b/packages/renderer/src/lib/useApi.tsx @@ -1,10 +1,12 @@ import { useContext, useEffect } from 'react'; import { ServerConnectionContext } from '../components/ServerConnection'; +import useSessionToken from '../hooks/useSessionToken'; import { Router, router, RouterObject } from './api'; export function useApi(actions: Router | RouterObject, deps: any[]) { const connection = useContext(ServerConnectionContext); const _router = typeof actions === 'object' ? router(actions) : actions; + const { sessionToken } = useSessionToken(); useEffect(() => { connection.registerRouter(_router); @@ -14,6 +16,15 @@ export function useApi(actions: Router | RouterObject, deps: any[]) { }, deps); return { - send: connection.send, + send(action: string, data: Object = {}) { + if('sessionToken' in data) { + console.warn('sessionToken already present in action. this is deprecated.') + console.trace(); + } + connection.send(action, { + ...(data ?? {}), + sessionToken + }); + } }; } diff --git a/packages/renderer/src/pages/Channel.tsx b/packages/renderer/src/pages/Channel.tsx new file mode 100644 index 0000000..252d487 --- /dev/null +++ b/packages/renderer/src/pages/Channel.tsx @@ -0,0 +1,68 @@ +import { CgHashtag } from "react-icons/cg"; +import useChannel from "../hooks/useChannel"; +import useHover from "../hooks/useHover"; + +interface ChannelProps { + unread: number; + uid: string; + name: string; +} + +export default function Channel(props: ChannelProps) { + const { channel, setChannel } = useChannel(); + const { unread, uid, name } = props; + const [ref, hover] = useHover(); + const selected = channel === uid; + + return ( +
{ + setChannel(uid); + }} + ref={ref} + > + +
+ {name.toLowerCase().replaceAll(' ', '-').trim()} +
+ {/* {(unread > 0) && ( + ({unread}) + )} + 0 ? 'bold' : '300', + }}> + {name} + + {}}>Delete */} +
+ ) +} \ No newline at end of file diff --git a/packages/renderer/src/pages/Channels.tsx b/packages/renderer/src/pages/Channels.tsx index 3859844..2e0f7aa 100644 --- a/packages/renderer/src/pages/Channels.tsx +++ b/packages/renderer/src/pages/Channels.tsx @@ -9,20 +9,13 @@ import useClientId from '../hooks/useClientId'; import useHomeServer from '../contexts/PersistentState/useHomeServerNative'; import Logout from '../components/Logout'; import { CgHashtag } from 'react-icons/cg'; +import Channel from './Channel'; interface IChannel { uid: string; name: string; } -function Hashmark() { - return #; -} - interface IUnreads { [uid: string]: number } @@ -81,7 +74,7 @@ export default function Channels() { useEffect(() => { if(clientId === null) return; - send('client:get', clientId); + send('client:get', { clientId }); }, [clientId]); const textbox = useRef(null); @@ -99,30 +92,14 @@ export default function Channels() { }}>

{channels.map(c => ( -
{ - setChannel(c.uid); - }}> - - {(c.uid in unreads) && (unreads[c.uid] > 0) && ( - ({unreads[c.uid]}) - )} - 0 ? 'bold' : '300', - }}> - {c.name} - - {}}>Delete -
+ ))} - ADD

-

+

*/} {/* */} {/* */} diff --git a/packages/renderer/src/pages/Chat.tsx b/packages/renderer/src/pages/Chat.tsx index 9572949..ee3a44e 100644 --- a/packages/renderer/src/pages/Chat.tsx +++ b/packages/renderer/src/pages/Chat.tsx @@ -44,7 +44,7 @@ export default () => { }, [messages]); useEffect(() => { - send('message:recent', { channel, sessionToken }); + send('message:recent', { channel }); }, [channel, sessionToken]); const sendMessage = useCallback(() => { @@ -54,11 +54,11 @@ export default () => { if(sessionToken === null) return; send( 'message:message', - { ...createMessage( + createMessage( clientId, textBoxRef.current.innerText, channel, - ), sessionToken }, + ) ); textBoxRef.current.innerText = ''; }, [channel, sessionToken]); @@ -143,9 +143,11 @@ export default () => { cursor: 'pointer', display: 'grid', placeItems: 'center center', - fontSize: '32px', + paddingLeft: '4px', + // paddingTop: '2px', + boxSizing: 'border-box', }}> - + diff --git a/packages/renderer/src/pages/NameTextbox.tsx b/packages/renderer/src/pages/NameTextbox.tsx index de0386d..e4f6718 100644 --- a/packages/renderer/src/pages/NameTextbox.tsx +++ b/packages/renderer/src/pages/NameTextbox.tsx @@ -15,8 +15,8 @@ export default function NameTextbox() { const [inputElement, setInputElement] = useState(null); const { send } = useApi({ - 'client:get'(_name: string) { - setName(_name); + 'client:get'(data: any) { + setName(data.name); }, }, [name, clientId]); @@ -33,7 +33,7 @@ export default function NameTextbox() { useEffect(() => { if(clientId === null) return; if(inputElement === null) return; - send('client:get', clientId); + send('client:get', { clientId }); }, [inputElement, clientId]); return = new Promise((res, rej) => { migrationConnection.connect((err) => { if(err === null) { diff --git a/packages/server/src/db/snippets/client/get.sql b/packages/server/src/db/snippets/client/get.sql index 5d6e0d5..f54a832 100644 --- a/packages/server/src/db/snippets/client/get.sql +++ b/packages/server/src/db/snippets/client/get.sql @@ -1 +1 @@ -SELECT name FROM clients WHERE uid=? \ No newline at end of file +SELECT name, username, uid FROM clients WHERE uid=? \ No newline at end of file diff --git a/packages/server/src/lib/WebSocketServer.ts b/packages/server/src/lib/WebSocketServer.ts index e5d41d2..e6fe83b 100644 --- a/packages/server/src/lib/WebSocketServer.ts +++ b/packages/server/src/lib/WebSocketServer.ts @@ -25,6 +25,9 @@ export function expose(router: Function, port: number) { if(auth === null) return; data.$clientId = auth; } + if(typeof data !== 'object') { + throw new Error('action ' + action + ' payload not an object'); + } console.log('[IN]', action, data); const _return = await (router(action, data) as unknown as Promise); if(_return) { diff --git a/packages/server/src/routers/client.ts b/packages/server/src/routers/client.ts index 6c26bac..4a941f1 100644 --- a/packages/server/src/routers/client.ts +++ b/packages/server/src/routers/client.ts @@ -16,10 +16,14 @@ export default router({ if(response === null) return; return reply(response[0][0].uid); }, - async 'get'(uid: string) { - const response = await query(_get, uid); + async 'get'(data: any) { + const response = await query(_get, data.clientId); if(response === null) return; - return reply(response[0].name); + return reply({ + name: response[0].name, + clientId: response[0].uid, + username: response[0].username + }); }, async 'rename'(data: any) { const { clientId, name } = data; diff --git a/packages/server/src/routers/session.ts b/packages/server/src/routers/session.ts index a589683..ab69fa9 100644 --- a/packages/server/src/routers/session.ts +++ b/packages/server/src/routers/session.ts @@ -15,7 +15,6 @@ export default router({ }); export async function validateSessionToken(token: string) { - console.log('ASDASDASDASD') const res = await query(_get, token); if(res === null) return null; if(res.length === 1 && res[0].expires > Date.now())