From 1145df197c1ea1999a4d78fa760e589e511c80fd Mon Sep 17 00:00:00 2001 From: Sacha Weatherstone Date: Mon, 31 May 2021 22:08:49 +1000 Subject: [PATCH] WIP --- package.json | 7 +- src/App.tsx | 26 +++- src/components/ChatMessage.tsx | 18 ++- src/components/Sidebar/Device/Settings.tsx | 104 +--------------- .../Sidebar/Device/SettingsForm.tsx | 95 +++++++++++++++ src/components/Sidebar/Nodes/Node.tsx | 25 +++- yarn.lock | 112 +++++++++++++----- 7 files changed, 232 insertions(+), 155 deletions(-) create mode 100644 src/components/Sidebar/Device/SettingsForm.tsx diff --git a/package.json b/package.json index c6017e9e..3c013050 100644 --- a/package.json +++ b/package.json @@ -15,11 +15,12 @@ "@heroicons/react": "^1.0.1", "@meshtastic/meshtasticjs": "^0.6.12", "@react-rxjs/core": "^0.8.0", + "boring-avatars": "^1.5.4", "observable-hooks": "^4.0.3", "react": "^0.0.0-experimental-d75105fa9", "react-dom": "^0.0.0-experimental-d75105fa9", "react-flags-select": "^2.1.2", - "react-hook-form": "^7.6.10", + "react-hook-form": "^7.7.1", "react-json-pretty": "^2.2.0", "rxjs": "^7.1.0", "yarn": "^1.22.10" @@ -38,9 +39,9 @@ "autoprefixer": "^10.2.6", "eslint": "^7.27.0", "eslint-config-prettier": "^8.3.0", - "eslint-plugin-import": "^2.23.3", + "eslint-plugin-import": "^2.23.4", "eslint-plugin-prettier": "^3.4.0", - "eslint-plugin-react": "^7.23.2", + "eslint-plugin-react": "^7.24.0", "eslint-plugin-react-hooks": "^4.2.0", "gzipper": "^4.5.0", "postcss": "^8.3.0", diff --git a/src/App.tsx b/src/App.tsx index ab19a366..be082d41 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,5 +1,8 @@ import React from 'react'; +import { ObservableResource } from 'observable-hooks'; +import { Subject } from 'rxjs'; + import type { IBLEConnection, ISerialConnection, @@ -40,6 +43,18 @@ export interface languageTemplate { no_message_placeholder: string; } +// const adminPacketResource = useSuspense(props.connection.onAdminPacketEvent); +// const tmp$ = new Subject().pipe( +// filter( +// (adminPacket) => +// adminPacket.data.variant.oneofKind === 'getRadioResponse', +// ), +// ); +// const tmp$ = props.connection.onAdminPacketEvent; +const tmpSubject = new Subject(); + +export const adminPacketResource = new ObservableResource(tmpSubject); + const App = (): JSX.Element => { const [deviceStatus, setDeviceStatus] = React.useState( @@ -134,10 +149,13 @@ const App = (): JSX.Element => { (adminMessage) => { switch (adminMessage.data.variant.oneofKind) { case 'getChannelResponse': - if (adminMessage.data.variant.getChannelResponse) { - const message = adminMessage.data.variant.getChannelResponse; - setChannels((channels) => [...channels, message]); - } + setChannels((channels) => [ + ...channels, + adminMessage.data.variant.getChannelResponse, + ]); + break; + case 'getRadioResponse': + tmpSubject.next(adminMessage.data.variant.getRadioResponse); break; default: break; diff --git a/src/components/ChatMessage.tsx b/src/components/ChatMessage.tsx index 2dcc83ad..e3853431 100644 --- a/src/components/ChatMessage.tsx +++ b/src/components/ChatMessage.tsx @@ -1,9 +1,10 @@ import React, { useState } from 'react'; +import Avatar from 'boring-avatars'; + import { CheckCircleIcon, DotsCircleHorizontalIcon, - UserIcon, } from '@heroicons/react/outline'; import type { Types } from '@meshtastic/meshtasticjs'; @@ -25,15 +26,12 @@ const ChatMessage = (props: ChatMessageProps): JSX.Element => { }, [props.nodes, props.message]); return (
-
- -
+
; -} - const Settings = (props: SettingsProps): JSX.Element => { - // const adminPacketResource = useSuspense(props.connection.onAdminPacketEvent); - const tmp$ = new Subject().pipe( - filter( - (adminPacket) => - adminPacket.data.variant.oneofKind === 'getRadioResponse', - ), - ); - // const tmp$ = props.connection.onAdminPacketEvent; - - const adminPacketResource = new ObservableResource(tmp$); - return ( Loading....
}> ); }; -const SettingsForm = (props: SettingsPropsNew): JSX.Element => { - // const adminPacket: Types.AdminPacket = props.adminPacketResource.data.read(); - const adminPacket = useObservableSuspense(props.adminPacketResource); - - const [preferences, setPreferences] = - React.useState(); - const { register, handleSubmit } = - useForm({ - defaultValues: preferences, - }); - - const onSubmit = handleSubmit((data) => console.log(data)); - return ( -
-
{JSON.stringify(adminPacket)}
-
-
{props.translations.device_region_title}
-
- -
-
-
-
{props.translations.device_wifi_ssid}
-
- -
-
-
-
{props.translations.device_wifi_psk}
-
- -
-
-
- -
- - - ); -}; - export default Settings; diff --git a/src/components/Sidebar/Device/SettingsForm.tsx b/src/components/Sidebar/Device/SettingsForm.tsx new file mode 100644 index 00000000..fd14831b --- /dev/null +++ b/src/components/Sidebar/Device/SettingsForm.tsx @@ -0,0 +1,95 @@ +import React from 'react'; + +import { useObservableSuspense } from 'observable-hooks'; +import { useForm } from 'react-hook-form'; +import JSONPretty from 'react-json-pretty'; + +import { SaveIcon } from '@heroicons/react/outline'; +import type { + IBLEConnection, + IHTTPConnection, + ISerialConnection, +} from '@meshtastic/meshtasticjs'; +import { Protobuf } from '@meshtastic/meshtasticjs'; + +import type { languageTemplate } from '../../../../src/App'; +import { adminPacketResource } from '../../../../src/App'; + +export interface SettingsFormProps { + isReady: boolean; + connection: ISerialConnection | IHTTPConnection | IBLEConnection; + translations: languageTemplate; +} + +const SettingsForm = (props: SettingsFormProps): JSX.Element => { + const preferences = useObservableSuspense(adminPacketResource); + + const { register, handleSubmit } = + useForm({ + defaultValues: preferences, + }); + + const onSubmit = handleSubmit((data) => console.log(data)); + return ( +
+
+
{props.translations.device_region_title}
+
+ +
+
+
+
{props.translations.device_wifi_ssid}
+
+ +
+
+
+
{props.translations.device_wifi_psk}
+
+ +
+
+
+ +
+ + + ); +}; + +export default SettingsForm; diff --git a/src/components/Sidebar/Nodes/Node.tsx b/src/components/Sidebar/Nodes/Node.tsx index 08e86244..329627bb 100644 --- a/src/components/Sidebar/Nodes/Node.tsx +++ b/src/components/Sidebar/Nodes/Node.tsx @@ -1,11 +1,12 @@ import React from 'react'; +import Avatar from 'boring-avatars'; + import { Disclosure } from '@headlessui/react'; import { ChevronDownIcon, ChevronRightIcon, ClockIcon, - DesktopComputerIcon, FlagIcon, GlobeIcon, LightningBoltIcon, @@ -29,11 +30,23 @@ const Node = (props: NodeProps): JSX.Element => { ) : ( )} - {props.node.data.num === props.myId ? ( - - ) : ( - - )} +
+ {props.node.data.num === props.myId ? ( + + ) : null} + +
{props.node.data.user?.longName}
diff --git a/yarn.lock b/yarn.lock index 7884c8cc..175de8a9 100644 --- a/yarn.lock +++ b/yarn.lock @@ -780,6 +780,11 @@ binary-extensions@^2.0.0: resolved "https://registry.yarnpkg.com/binary-extensions/-/binary-extensions-2.2.0.tgz#75f502eeaf9ffde42fc98829645be4ea76bd9e2d" integrity sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA== +boring-avatars@^1.5.4: + version "1.5.4" + resolved "https://registry.yarnpkg.com/boring-avatars/-/boring-avatars-1.5.4.tgz#4ca5608fb16b75322cf5e1bcdc49debfeb2dfd0d" + integrity sha512-sSfAGVAjN0LNILSoQRT2zbG6Dy4j4WMqoDoydsU9xoIi9LKYae4DgaqRhCoGjn0iYRwsWtAu0PsohH1rLVPm+A== + bplist-parser@^0.1.0: version "0.1.1" resolved "https://registry.yarnpkg.com/bplist-parser/-/bplist-parser-0.1.1.tgz#d60d5dcc20cba6dc7e1f299b35d3e1f95dafbae6" @@ -1296,6 +1301,28 @@ es-abstract@^1.18.0-next.1, es-abstract@^1.18.0-next.2: string.prototype.trimstart "^1.0.4" unbox-primitive "^1.0.0" +es-abstract@^1.18.2: + version "1.18.3" + resolved "https://registry.yarnpkg.com/es-abstract/-/es-abstract-1.18.3.tgz#25c4c3380a27aa203c44b2b685bba94da31b63e0" + integrity sha512-nQIr12dxV7SSxE6r6f1l3DtAeEYdsGpps13dR0TwJg1S8gyp4ZPgy3FZcHBgbiQqnoqSTb+oC+kO4UQ0C/J8vw== + dependencies: + call-bind "^1.0.2" + es-to-primitive "^1.2.1" + function-bind "^1.1.1" + get-intrinsic "^1.1.1" + has "^1.0.3" + has-symbols "^1.0.2" + is-callable "^1.2.3" + is-negative-zero "^2.0.1" + is-regex "^1.1.3" + is-string "^1.0.6" + object-inspect "^1.10.3" + object-keys "^1.1.1" + object.assign "^4.1.2" + string.prototype.trimend "^1.0.4" + string.prototype.trimstart "^1.0.4" + unbox-primitive "^1.0.1" + es-get-iterator@^1.1.1: version "1.1.2" resolved "https://registry.yarnpkg.com/es-get-iterator/-/es-get-iterator-1.1.2.tgz#9234c54aba713486d7ebde0220864af5e2b283f7" @@ -1360,10 +1387,10 @@ eslint-module-utils@^2.6.1: debug "^3.2.7" pkg-dir "^2.0.0" -eslint-plugin-import@^2.23.3: - version "2.23.3" - resolved "https://registry.yarnpkg.com/eslint-plugin-import/-/eslint-plugin-import-2.23.3.tgz#8a1b073289fff03c4af0f04b6df956b7d463e191" - integrity sha512-wDxdYbSB55F7T5CC7ucDjY641VvKmlRwT0Vxh7PkY1mI4rclVRFWYfsrjDgZvwYYDZ5ee0ZtfFKXowWjqvEoRQ== +eslint-plugin-import@^2.23.4: + version "2.23.4" + resolved "https://registry.yarnpkg.com/eslint-plugin-import/-/eslint-plugin-import-2.23.4.tgz#8dceb1ed6b73e46e50ec9a5bb2411b645e7d3d97" + integrity sha512-6/wP8zZRsnQFiR3iaPFgh5ImVRM1WN5NUWfTIRqwOdeiGJlBcSk82o1FEVq8yXmy4lkIzTo7YhHCIxlU/2HyEQ== dependencies: array-includes "^3.1.3" array.prototype.flat "^1.2.4" @@ -1393,10 +1420,10 @@ eslint-plugin-react-hooks@^4.2.0: resolved "https://registry.yarnpkg.com/eslint-plugin-react-hooks/-/eslint-plugin-react-hooks-4.2.0.tgz#8c229c268d468956334c943bb45fc860280f5556" integrity sha512-623WEiZJqxR7VdxFCKLI6d6LLpwJkGPYKODnkH3D7WpOG5KM8yWueBd8TLsNAetEJNF5iJmolaAKO3F8yzyVBQ== -eslint-plugin-react@^7.23.2: - version "7.23.2" - resolved "https://registry.yarnpkg.com/eslint-plugin-react/-/eslint-plugin-react-7.23.2.tgz#2d2291b0f95c03728b55869f01102290e792d494" - integrity sha512-AfjgFQB+nYszudkxRkTFu0UR1zEQig0ArVMPloKhxwlwkzaw/fBiH0QWcBBhZONlXqQC51+nfqFrkn4EzHcGBw== +eslint-plugin-react@^7.24.0: + version "7.24.0" + resolved "https://registry.yarnpkg.com/eslint-plugin-react/-/eslint-plugin-react-7.24.0.tgz#eadedfa351a6f36b490aa17f4fa9b14e842b9eb4" + integrity sha512-KJJIx2SYx7PBx3ONe/mEeMz4YE0Lcr7feJTCMyyKb/341NcjuAgim3Acgan89GfPv7nxXK2+0slu0CWXYM4x+Q== dependencies: array-includes "^3.1.3" array.prototype.flatmap "^1.2.4" @@ -1404,12 +1431,12 @@ eslint-plugin-react@^7.23.2: has "^1.0.3" jsx-ast-utils "^2.4.1 || ^3.0.0" minimatch "^3.0.4" - object.entries "^1.1.3" + object.entries "^1.1.4" object.fromentries "^2.0.4" - object.values "^1.1.3" + object.values "^1.1.4" prop-types "^15.7.2" resolve "^2.0.0-next.3" - string.prototype.matchall "^4.0.4" + string.prototype.matchall "^4.0.5" eslint-scope@^5.0.0, eslint-scope@^5.1.1: version "5.1.1" @@ -2169,6 +2196,14 @@ is-regex@^1.1.1, is-regex@^1.1.2: call-bind "^1.0.2" has-symbols "^1.0.1" +is-regex@^1.1.3: + version "1.1.3" + resolved "https://registry.yarnpkg.com/is-regex/-/is-regex-1.1.3.tgz#d029f9aff6448b93ebbe3f33dac71511fdcbef9f" + integrity sha512-qSVXFz28HM7y+IWX6vLCsexdlvzT1PJNFSBuaQLQ5o0IEw8UDYW6/2+eCMVyIsbM8CNLX2a/QWmSpyxYEHY7CQ== + dependencies: + call-bind "^1.0.2" + has-symbols "^1.0.2" + is-set@^2.0.1, is-set@^2.0.2: version "2.0.2" resolved "https://registry.yarnpkg.com/is-set/-/is-set-2.0.2.tgz#90755fa4c2562dc1c5d4024760d6119b94ca18ec" @@ -2184,6 +2219,11 @@ is-string@^1.0.5: resolved "https://registry.yarnpkg.com/is-string/-/is-string-1.0.5.tgz#40493ed198ef3ff477b8c7f92f644ec82a5cd3a6" integrity sha512-buY6VNRjhQMiF1qWDouloZlQbRhDPCebwxSjxMjxgemYT46YMd2NR0/H+fBhEfWX4A/w9TBJ+ol+okqJKFE6vQ== +is-string@^1.0.6: + version "1.0.6" + resolved "https://registry.yarnpkg.com/is-string/-/is-string-1.0.6.tgz#3fe5d5992fb0d93404f32584d4b0179a71b54a5f" + integrity sha512-2gdzbKUuqtQ3lYNrUTQYoClPhm7oQu4UdpSZMp1/DGgkHBT8E2Z1l0yMdb6D4zNAxwDiMv8MdulKROJGNl0Q0w== + is-symbol@^1.0.2, is-symbol@^1.0.3: version "1.0.3" resolved "https://registry.yarnpkg.com/is-symbol/-/is-symbol-1.0.3.tgz#38e1014b9e6329be0de9d24a414fd7441ec61937" @@ -2776,6 +2816,11 @@ object-hash@^2.1.1: resolved "https://registry.yarnpkg.com/object-hash/-/object-hash-2.1.1.tgz#9447d0279b4fcf80cff3259bf66a1dc73afabe09" integrity sha512-VOJmgmS+7wvXf8CjbQmimtCnEx3IAoLxI3fp2fbWehxrWBcAQFbk+vcwb6vzR0VZv/eNCJ/27j151ZTwqW/JeQ== +object-inspect@^1.10.3: + version "1.10.3" + resolved "https://registry.yarnpkg.com/object-inspect/-/object-inspect-1.10.3.tgz#c2aa7d2d09f50c99375704f7a0adf24c5782d369" + integrity sha512-e5mCJlSH7poANfC8z8S9s9S2IN5/4Zb3aZ33f5s8YqoazCFzNLloLU8r5VCG+G7WoqLvAAZoVMcy3tp/3X0Plw== + object-inspect@^1.9.0: version "1.9.0" resolved "https://registry.yarnpkg.com/object-inspect/-/object-inspect-1.9.0.tgz#c90521d74e1127b67266ded3394ad6116986533a" @@ -2804,15 +2849,14 @@ object.assign@^4.1.2: has-symbols "^1.0.1" object-keys "^1.1.1" -object.entries@^1.1.3: - version "1.1.3" - resolved "https://registry.yarnpkg.com/object.entries/-/object.entries-1.1.3.tgz#c601c7f168b62374541a07ddbd3e2d5e4f7711a6" - integrity sha512-ym7h7OZebNS96hn5IJeyUmaWhaSM4SVtAPPfNLQEI2MYWCO2egsITb9nab2+i/Pwibx+R0mtn+ltKJXRSeTMGg== +object.entries@^1.1.4: + version "1.1.4" + resolved "https://registry.yarnpkg.com/object.entries/-/object.entries-1.1.4.tgz#43ccf9a50bc5fd5b649d45ab1a579f24e088cafd" + integrity sha512-h4LWKWE+wKQGhtMjZEBud7uLGhqyLwj8fpHOarZhD2uY3C9cRtk57VQ89ke3moByLXMedqs3XCHzyb4AmA2DjA== dependencies: - call-bind "^1.0.0" + call-bind "^1.0.2" define-properties "^1.1.3" - es-abstract "^1.18.0-next.1" - has "^1.0.3" + es-abstract "^1.18.2" object.fromentries@^2.0.4: version "2.0.4" @@ -2834,6 +2878,15 @@ object.values@^1.1.3: es-abstract "^1.18.0-next.2" has "^1.0.3" +object.values@^1.1.4: + version "1.1.4" + resolved "https://registry.yarnpkg.com/object.values/-/object.values-1.1.4.tgz#0d273762833e816b693a637d30073e7051535b30" + integrity sha512-TnGo7j4XSnKQoK3MfvkzqKCi0nVe/D9I9IjwTNYdb/fxYHpjrluHVOgw0AF6jrRFGMPHdfuidR09tIDiIvnaSg== + dependencies: + call-bind "^1.0.2" + define-properties "^1.1.3" + es-abstract "^1.18.2" + observable-hooks@^4.0.3: version "4.0.3" resolved "https://registry.yarnpkg.com/observable-hooks/-/observable-hooks-4.0.3.tgz#1113d04787fc971481b10cdbdf73c863f90b612f" @@ -3245,10 +3298,10 @@ react-flags-select@^2.1.2: dependencies: classnames "^2.2.6" -react-hook-form@^7.6.10: - version "7.6.10" - resolved "https://registry.yarnpkg.com/react-hook-form/-/react-hook-form-7.6.10.tgz#77e98a08839e53a3222b935a07ef94be316f3521" - integrity sha512-V39bRK1iK4N9TbQf3jR2oUu7OcgnZAe/WUar1otRR8OHgnGM41XJ7UDQX176/nyCjIcmkcArQdsYc9dPYPpQ9Q== +react-hook-form@^7.7.1: + version "7.7.1" + resolved "https://registry.yarnpkg.com/react-hook-form/-/react-hook-form-7.7.1.tgz#b0dc20c7122a8b647cad9adf0db8ee4ffb1d11e2" + integrity sha512-qpiMf670nrbgngH11qmpKTKa/ulTt+5JXNL7lBnF3C3jwusrw17dyyZ9J92mHFAflxwYWndKECPM85DLEnIf0A== react-is@^16.8.1: version "16.13.1" @@ -3680,15 +3733,16 @@ string-width@^4.1.0, string-width@^4.2.0: is-fullwidth-code-point "^3.0.0" strip-ansi "^6.0.0" -string.prototype.matchall@^4.0.4: - version "4.0.4" - resolved "https://registry.yarnpkg.com/string.prototype.matchall/-/string.prototype.matchall-4.0.4.tgz#608f255e93e072107f5de066f81a2dfb78cf6b29" - integrity sha512-pknFIWVachNcyqRfaQSeu/FUfpvJTe4uskUSZ9Wc1RijsPuzbZ8TyYT8WCNnntCjUEqQ3vUHMAfVj2+wLAisPQ== +string.prototype.matchall@^4.0.5: + version "4.0.5" + resolved "https://registry.yarnpkg.com/string.prototype.matchall/-/string.prototype.matchall-4.0.5.tgz#59370644e1db7e4c0c045277690cf7b01203c4da" + integrity sha512-Z5ZaXO0svs0M2xd/6By3qpeKpLKd9mO4v4q3oMEQrk8Ck4xOD5d5XeBOOjGrmVZZ/AHB1S0CgG4N5r1G9N3E2Q== dependencies: call-bind "^1.0.2" define-properties "^1.1.3" - es-abstract "^1.18.0-next.2" - has-symbols "^1.0.1" + es-abstract "^1.18.2" + get-intrinsic "^1.1.1" + has-symbols "^1.0.2" internal-slot "^1.0.3" regexp.prototype.flags "^1.3.1" side-channel "^1.0.4" @@ -3909,7 +3963,7 @@ typescript@^4.3.2: resolved "https://registry.yarnpkg.com/typescript/-/typescript-4.3.2.tgz#399ab18aac45802d6f2498de5054fcbbe716a805" integrity sha512-zZ4hShnmnoVnAHpVHWpTcxdv7dWP60S2FsydQLV8V5PbS3FifjWFFRiHSWpDJahly88PRyV5teTSLoq4eG7mKw== -unbox-primitive@^1.0.0: +unbox-primitive@^1.0.0, unbox-primitive@^1.0.1: version "1.0.1" resolved "https://registry.yarnpkg.com/unbox-primitive/-/unbox-primitive-1.0.1.tgz#085e215625ec3162574dc8859abee78a59b14471" integrity sha512-tZU/3NqK3dA5gpE1KtyiJUrEB0lxnGkMFHptJ7q6ewdZ8s12QrODwNbhIJStmJkd1QDXa1NRA8aF2A1zk/Ypyw==