From 4e35cf326e54b3479ce2b6d42336a2c6ee2665f4 Mon Sep 17 00:00:00 2001 From: Anthony Hawk <4062673+tdhawk@users.noreply.github.com> Date: Sat, 18 Jan 2025 14:10:30 -0600 Subject: [PATCH 1/7] updated container port --- README.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index ec46a087..5f72c2fa 100644 --- a/README.md +++ b/README.md @@ -24,10 +24,10 @@ The base image used is [Nginx 1.27](https://hub.docker.com/_/nginx) ```bash # With Docker -docker run -d -p 8080:80 --restart always --name Meshtastic-Web ghcr.io/meshtastic/web +docker run -d -p 8080:8080 --restart always --name Meshtastic-Web ghcr.io/meshtastic/web #With Podman -podman run -d -p 8080:80 --restart always --name Meshtastic-Web ghcr.io/meshtastic/web +podman run -d -p 8080:8080 --restart always --name Meshtastic-Web ghcr.io/meshtastic/web ``` ## Development & Building From fe2b76eeb98103f4f45b5662407cd1e82c14aed8 Mon Sep 17 00:00:00 2001 From: Dan Ditomaso Date: Sat, 25 Jan 2025 16:09:59 -0500 Subject: [PATCH 2/7] fix: moving tailwind libs to dev dependency, removed unused deps --- package.json | 8 ++------ 1 file changed, 2 insertions(+), 6 deletions(-) diff --git a/package.json b/package.json index 194cc62c..ffa864da 100644 --- a/package.json +++ b/package.json @@ -42,7 +42,6 @@ "@radix-ui/react-tooltip": "^1.1.1", "@turf/turf": "^6.5.0", "base64-js": "^1.5.1", - "class-transformer": "^0.5.1", "class-validator": "^0.14.1", "class-variance-authority": "^0.7.0", "clsx": "^2.1.1", @@ -59,15 +58,12 @@ "react-map-gl": "7.1.7", "react-qrcode-logo": "^2.10.0", "rfc4648": "^1.5.3", - "tailwind-merge": "^2.3.0", - "tailwindcss-animate": "^1.0.7", "timeago-react": "^3.0.6", "vite-plugin-node-polyfills": "^0.22.0", "zustand": "4.5.2" }, "devDependencies": { "@biomejs/biome": "^1.8.2", - "@buf/meshtastic_protobufs.bufbuild_es": "1.10.0-20240906232734-3da561588c55.1", "@rsbuild/core": "^1.0.10", "@rsbuild/plugin-react": "^1.0.3", "@types/chrome": "^0.0.263", @@ -80,10 +76,10 @@ "autoprefixer": "^10.4.19", "gzipper": "^7.2.0", "postcss": "^8.4.38", - "rollup-plugin-visualizer": "^5.12.0", "tailwindcss": "^3.4.4", + "tailwind-merge": "^2.3.0", + "tailwindcss-animate": "^1.0.7", "tar": "^6.2.1", - "tslib": "^2.6.3", "typescript": "^5.5.2" }, "packageManager": "pnpm@9.15.4" From d0ca24ae6f37f47b86137baf894ae79d904bfa4e Mon Sep 17 00:00:00 2001 From: Dan Ditomaso Date: Sat, 25 Jan 2025 16:41:42 -0500 Subject: [PATCH 3/7] feat: debounce message draft state updates to reduce zustand/immer store writes on Messages page --- .../PageComponents/Messages/MessageInput.tsx | 28 +++++++++++++++---- src/core/utils/debounce.ts | 13 +++++++++ 2 files changed, 35 insertions(+), 6 deletions(-) create mode 100644 src/core/utils/debounce.ts diff --git a/src/components/PageComponents/Messages/MessageInput.tsx b/src/components/PageComponents/Messages/MessageInput.tsx index 9a7c865a..29dc673d 100644 --- a/src/components/PageComponents/Messages/MessageInput.tsx +++ b/src/components/PageComponents/Messages/MessageInput.tsx @@ -1,8 +1,12 @@ +import { debounce } from "@app/core/utils/debounce"; import { Button } from "@components/UI/Button.tsx"; import { Input } from "@components/UI/Input.tsx"; import { useDevice } from "@core/stores/deviceStore.ts"; import type { Types } from "@meshtastic/js"; import { SendIcon } from "lucide-react"; +import { useCallback, useState, useMemo } from "react"; + + export interface MessageInputProps { to: Types.Destination; @@ -20,10 +24,15 @@ export const MessageInput = ({ setMessageDraft, hardware, } = useDevice(); - const myNodeNum = hardware.myNodeNum; + const [localDraft, setLocalDraft] = useState(messageDraft); - const sendText = async (message: string) => { + const debouncedSetMessageDraft = useMemo( + () => debounce(setMessageDraft, 300), + [setMessageDraft] + ); + + const sendText = useCallback(async (message: string) => { await connection ?.sendText(message, to, true, channel) .then((id) => @@ -46,6 +55,12 @@ export const MessageInput = ({ e.error, ), ); + }, [channel, connection, myNodeNum, setMessageState, to]); + + const handleInputChange = (e: React.ChangeEvent) => { + const newValue = e.target.value; + setLocalDraft(newValue); + debouncedSetMessageDraft(newValue); }; return ( @@ -54,7 +69,8 @@ export const MessageInput = ({ className="w-full" onSubmit={(e) => { e.preventDefault(); - sendText(messageDraft); + sendText(localDraft); + setLocalDraft(""); setMessageDraft(""); }} > @@ -64,8 +80,8 @@ export const MessageInput = ({ autoFocus={true} minLength={1} placeholder="Enter Message" - value={messageDraft} - onChange={(e) => setMessageDraft(e.target.value)} + value={localDraft} + onChange={handleInputChange} />