Get suspense working and cleanup TL system

5 years ago · 59888f32e7
23 changed files with 434 additions and 379 deletions
--- a/package.json
+++ b/package.json
@ -13,9 +13,8 @@
  "dependencies": {
    "@headlessui/react": "^1.2.0",
    "@heroicons/react": "^1.0.1",
-    "@meshtastic/meshtasticjs": "^0.6.12",
-    "@react-rxjs/core": "^0.8.0",
-    "boring-avatars": "^1.5.4",
+    "@meshtastic/meshtasticjs": "^0.6.13",
+    "boring-avatars": "^1.5.5",
    "observable-hooks": "^4.0.3",
    "react": "^0.0.0-experimental-d75105fa9",
    "react-dom": "^0.0.0-experimental-d75105fa9",
@ -34,8 +33,8 @@
    "@types/react": "^17.0.8",
    "@types/react-dom": "^17.0.5",
    "@types/snowpack-env": "^2.3.2",
-    "@typescript-eslint/eslint-plugin": "^4.25.0",
-    "@typescript-eslint/parser": "^4.25.0",
+    "@typescript-eslint/eslint-plugin": "^4.26.0",
+    "@typescript-eslint/parser": "^4.26.0",
    "autoprefixer": "^10.2.6",
    "eslint": "^7.27.0",
    "eslint-config-prettier": "^8.3.0",
--- a/src/App.tsx
+++ b/src/App.tsx
@ -1,8 +1,5 @@
 import React from 'react';

-import { ObservableResource } from 'observable-hooks';
-import { Subject } from 'rxjs';
-
 import type {
  IBLEConnection,
  ISerialConnection,
@ -17,43 +14,12 @@ import {

 import Header from './components/Header';
 import Main from './Main';
+import { channelSubject$, nodeSubject$, preferencesSubject$ } from './streams';
 import Translations_English from './translations/en';
 import Translations_Japanese from './translations/jp';
 import Translations_Portuguese from './translations/pt';
-
-export enum LanguageEnum {
-  ENGLISH,
-  JAPANESE,
-  PORTUGUESE,
-}
-
-export interface languageTemplate {
-  no_messages_message: string;
-  ui_settings_title: string;
-  nodes_title: string;
-  color_scheme_title: string;
-  language_title: string;
-  device_settings_title: string;
-  device_channels_title: string;
-  device_region_title: string;
-  device_wifi_ssid: string;
-  device_wifi_psk: string;
-  save_changes_button: string;
-  no_nodes_message: string;
-  no_message_placeholder: string;
-}
-
-// const adminPacketResource = useSuspense(props.connection.onAdminPacketEvent);
-// const tmp$ = new Subject<Types.AdminPacket>().pipe(
-//   filter(
-//     (adminPacket) =>
-//       adminPacket.data.variant.oneofKind === 'getRadioResponse',
-//   ),
-// );
-// const tmp$ = props.connection.onAdminPacketEvent;
-const tmpSubject = new Subject<Protobuf.RadioConfig_UserPreferences>();
-
-export const adminPacketResource = new ObservableResource(tmpSubject);
+import type { languageTemplate } from './translations/TranslationContext';
+import { LanguageEnum } from './translations/TranslationContext';

 const App = (): JSX.Element => {
  const [deviceStatus, setDeviceStatus] =
@ -63,7 +29,7 @@ const App = (): JSX.Element => {
  const [myNodeInfo, setMyNodeInfo] = React.useState<Protobuf.MyNodeInfo>(
    Protobuf.MyNodeInfo.create(),
  );
-  const [channels, setChannels] = React.useState([] as Protobuf.Channel[]);
+  // const [channels, setChannels] = React.useState([] as Protobuf.Channel[]);
  const [nodes, setNodes] = React.useState<Types.NodeInfoPacket[]>([]);
  const [connection, setConnection] = React.useState<
    ISerialConnection | IHTTPConnection | IBLEConnection
@ -98,9 +64,9 @@ const App = (): JSX.Element => {

  React.useEffect(() => {
    const client = new Client();
-    const connection = client.createHTTPConnection();
+    const tmpConnection = client.createHTTPConnection();

-    connection.connect({
+    tmpConnection.connect({
      address:
        import.meta.env.NODE_ENV === 'production'
          ? window.location.hostname
@ -109,13 +75,11 @@ const App = (): JSX.Element => {
      tls: false,
      fetchInterval: 2000,
    });
-    setConnection(connection);
+    setConnection(tmpConnection);
    SettingsManager.debugMode = Protobuf.LogRecord_Level.TRACE;
  }, []);

  React.useEffect(() => {
-    console.log('UPDATING');
-
    const deviceStatusEvent = connection.onDeviceStatusEvent.subscribe(
      (status) => {
        setDeviceStatus(status);
@ -128,34 +92,21 @@ const App = (): JSX.Element => {
      connection.onMyNodeInfoEvent.subscribe(setMyNodeInfo);

    const nodeInfoPacketEvent = connection.onNodeInfoPacketEvent.subscribe(
-      (node) => {
-        if (
-          nodes.findIndex(
-            (currentNode) => currentNode.data.num === node.data.num,
-          ) >= 0
-        ) {
-          setNodes(
-            nodes.map((currentNode) =>
-              currentNode.data.num === node.data.num ? node : currentNode,
-            ),
-          );
-        } else {
-          setNodes((nodes) => [...nodes, node]);
-        }
-      },
+      (node) => nodeSubject$.next(node),
    );

    const adminPacketEvent = connection.onAdminPacketEvent.subscribe(
      (adminMessage) => {
        switch (adminMessage.data.variant.oneofKind) {
          case 'getChannelResponse':
-            setChannels((channels) => [
-              ...channels,
-              adminMessage.data.variant.getChannelResponse,
-            ]);
+            channelSubject$.next(adminMessage.data.variant.getChannelResponse);
            break;
          case 'getRadioResponse':
-            tmpSubject.next(adminMessage.data.variant.getRadioResponse);
+            if (adminMessage.data.variant.getRadioResponse.preferences) {
+              preferencesSubject$.next(
+                adminMessage.data.variant.getRadioResponse.preferences,
+              );
+            }
            break;
          default:
            break;
@ -190,11 +141,8 @@ const App = (): JSX.Element => {
        isReady={isReady}
        myNodeInfo={myNodeInfo}
        connection={connection}
-        nodes={nodes}
-        channels={channels}
        language={language}
        setLanguage={setLanguage}
-        translations={translations}
        darkmode={darkmode}
        setDarkmode={setDarkmode}
      />
--- a/src/Main.tsx
+++ b/src/Main.tsx
@ -8,25 +8,24 @@ import type {
  Types,
 } from '@meshtastic/meshtasticjs';

-import type { LanguageEnum, languageTemplate } from './App';
 import ChatMessage from './components/ChatMessage';
 import MessageBox from './components/MessageBox';
 import Sidebar from './components/Sidebar';
+import type { LanguageEnum } from './translations/TranslationContext';
+import { TranslationContext } from './translations/TranslationContext';

 interface MainProps {
  connection: ISerialConnection | IHTTPConnection | IBLEConnection;
  myNodeInfo: Protobuf.MyNodeInfo;
-  nodes: Types.NodeInfoPacket[];
-  channels: Protobuf.Channel[];
  isReady: boolean;
  language: LanguageEnum;
  setLanguage: React.Dispatch<React.SetStateAction<LanguageEnum>>;
-  translations: languageTemplate;
  darkmode: boolean;
  setDarkmode: React.Dispatch<React.SetStateAction<boolean>>;
 }

 const Main = (props: MainProps): JSX.Element => {
+  const { translations } = React.useContext(TranslationContext);
  const [messages, setMessages] = React.useState<
    { message: Types.TextPacket; ack: boolean }[]
  >([]);
@ -72,7 +71,6 @@ const Main = (props: MainProps): JSX.Element => {
          {messages.length ? (
            messages.map((message, Main) => (
              <ChatMessage
-                nodes={props.nodes}
                key={Main}
                message={message}
                myId={props.myNodeInfo.myNodeNum}
@ -80,7 +78,7 @@ const Main = (props: MainProps): JSX.Element => {
            ))
          ) : (
            <div className="m-auto text-2xl text-gray-500">
-              {props.translations.no_messages_message}
+              {translations.no_messages_message}
            </div>
          )}
        </div>
@ -89,17 +87,13 @@ const Main = (props: MainProps): JSX.Element => {
          isReady={props.isReady}
          sidebarOpen={sidebarOpen}
          setSidebarOpen={setSidebarOpen}
-          translations={props.translations}
        />
      </div>
      <Sidebar
        isReady={props.isReady}
-        nodes={props.nodes}
-        channels={props.channels}
        connection={props.connection}
        language={props.language}
        setLanguage={props.setLanguage}
-        translations={props.translations}
        myId={props.myNodeInfo.myNodeNum}
        sidebarOpen={sidebarOpen}
        darkmode={props.darkmode}
--- a/src/components/ChatMessage.tsx
+++ b/src/components/ChatMessage.tsx
@ -1,6 +1,7 @@
 import React, { useState } from 'react';

 import Avatar from 'boring-avatars';
+import { useObservableSuspense } from 'observable-hooks';

 import {
  CheckCircleIcon,
@ -8,22 +9,42 @@ import {
 } from '@heroicons/react/outline';
 import type { Types } from '@meshtastic/meshtasticjs';

+import { nodeResource } from '../streams';
+
 interface ChatMessageProps {
  message: { message: Types.TextPacket; ack: boolean };
  myId: number;
-  nodes: Types.NodeInfoPacket[];
 }

 const ChatMessage = (props: ChatMessageProps): JSX.Element => {
+  const nodeSource = useObservableSuspense(nodeResource);
+
+  const [nodes, setNodes] = React.useState<Types.NodeInfoPacket[]>([]);
+
+  React.useEffect(() => {
+    if (
+      nodes.findIndex(
+        (currentNode) => currentNode.data.num === nodeSource.data.num,
+      ) >= 0
+    ) {
+      setNodes(
+        nodes.map((currentNode) =>
+          currentNode.data.num === nodeSource.data.num
+            ? nodeSource
+            : currentNode,
+        ),
+      );
+    } else {
+      setNodes((nodes) => [...nodes, nodeSource]);
+    }
+  }, [nodeSource, nodes]);
  const [node, setNode] = useState<Types.NodeInfoPacket>();

  React.useEffect(() => {
    setNode(
-      props.nodes.find(
-        (node) => node.data.num === props.message.message.packet.from,
-      ),
+      nodes.find((node) => node.data.num === props.message.message.packet.from),
    );
-  }, [props.nodes, props.message]);
+  }, [nodes, props.message]);
  return (
    <div className="flex items-end">
      <Avatar
--- a/src/components/MessageBox.tsx
+++ b/src/components/MessageBox.tsx
@ -7,10 +7,9 @@ import type {
  ISerialConnection,
 } from '@meshtastic/meshtasticjs';

-import type { languageTemplate } from '../App';
+import { TranslationContext } from '../translations/TranslationContext';

 export interface MessageBoxProps {
-  translations: languageTemplate;
  sidebarOpen: boolean;
  setSidebarOpen: React.Dispatch<React.SetStateAction<boolean>>;
  connection: ISerialConnection | IHTTPConnection | IBLEConnection;
@ -18,6 +17,7 @@ export interface MessageBoxProps {
 }

 const MessageBox = (props: MessageBoxProps): JSX.Element => {
+  const { translations } = React.useContext(TranslationContext);
  const [currentMessage, setCurrentMessage] = React.useState('');
  const sendMessage = () => {
    if (props.isReady) {
@ -45,7 +45,7 @@ const MessageBox = (props: MessageBoxProps): JSX.Element => {
        {props.isReady}
        <input
          type="text"
-          placeholder={`${props.translations.no_message_placeholder}...`}
+          placeholder={`${translations.no_message_placeholder}...`}
          disabled={!props.isReady}
          value={currentMessage}
          onChange={(e) => {
--- a/src/components/Sidebar.tsx
+++ b/src/components/Sidebar.tsx
@ -4,11 +4,9 @@ import type {
  IBLEConnection,
  IHTTPConnection,
  ISerialConnection,
-  Protobuf,
-  Types,
 } from '@meshtastic/meshtasticjs';

-import type { LanguageEnum, languageTemplate } from '../App';
+import type { LanguageEnum } from '../translations/TranslationContext';
 import Channels from './Sidebar/Channels/Index';
 import Device from './Sidebar/Device/Index';
 import Nodes from './Sidebar/Nodes/Index';
@ -16,12 +14,9 @@ import UI from './Sidebar/UI/Index';

 interface SidebarProps {
  isReady: boolean;
-  nodes: Types.NodeInfoPacket[];
-  channels: Protobuf.Channel[];
  connection: ISerialConnection | IHTTPConnection | IBLEConnection;
  language: LanguageEnum;
  setLanguage: React.Dispatch<React.SetStateAction<LanguageEnum>>;
-  translations: languageTemplate;
  myId: number;
  sidebarOpen: boolean;
  darkmode: boolean;
@ -35,27 +30,13 @@ const Sidebar = (props: SidebarProps): JSX.Element => {
        props.sidebarOpen ? 'flex' : 'hidden md:flex'
      } flex-col rounded-md md:ml-0 shadow-md border w-full max-w-sm`}
    >
-      <Nodes
-        isReady={props.isReady}
-        nodes={props.nodes}
-        translations={props.translations}
-        myId={props.myId}
-      />
-      <Device
-        isReady={props.isReady}
-        connection={props.connection}
-        translations={props.translations}
-      />
-      <Channels
-        isReady={props.isReady}
-        channels={props.channels}
-        translations={props.translations}
-      />
+      <Nodes myId={props.myId} />
+      <Device isReady={props.isReady} connection={props.connection} />
+      <Channels />
      <div className="flex-grow border-b"></div>
      <UI
        language={props.language}
        setLanguage={props.setLanguage}
-        translations={props.translations}
        darkmode={props.darkmode}
        setDarkmode={props.setDarkmode}
      />
--- a/src/components/Sidebar/Channels/ChannelList.tsx
+++ b/src/components/Sidebar/Channels/ChannelList.tsx
@ -0,0 +1,43 @@
+import React from 'react';
+
+import { useObservableSuspense } from 'observable-hooks';
+
+import { Protobuf } from '@meshtastic/meshtasticjs';
+
+import { channelResource } from '../../../streams';
+import Channel from './Channel';
+
+const ChannelList = (): JSX.Element => {
+  const channelSource = useObservableSuspense(channelResource);
+
+  const [channels, setChannels] = React.useState<Protobuf.Channel[]>([]);
+
+  React.useEffect(() => {
+    if (
+      channels.findIndex(
+        (currentChannel) => currentChannel.index === channelSource.index,
+      ) >= 0
+    ) {
+      setChannels(
+        channels.map((currentChannel) =>
+          currentChannel.index === channelSource.index
+            ? channelSource
+            : currentChannel,
+        ),
+      );
+    } else {
+      setChannels((channels) => [...channels, channelSource]);
+    }
+  }, [channelSource, channels]);
+
+  return (
+    <>
+      {channels.map((channel, index) => {
+        if (channel.role !== Protobuf.Channel_Role.DISABLED)
+          return <Channel key={index} channel={channel} />;
+      })}
+    </>
+  );
+};
+
+export default ChannelList;
--- a/src/components/Sidebar/Channels/Index.tsx
+++ b/src/components/Sidebar/Channels/Index.tsx
@ -6,18 +6,12 @@ import {
  ChevronRightIcon,
  HashtagIcon,
 } from '@heroicons/react/outline';
-import { Protobuf } from '@meshtastic/meshtasticjs';

-import type { languageTemplate } from '../../../App';
-import Channel from './Channel';
+import { TranslationContext } from '../../../translations/TranslationContext';
+import ChannelList from './ChannelList';

-export interface ChannelsProps {
-  isReady: boolean;
-  channels: Protobuf.Channel[];
-  translations: languageTemplate;
-}
-
-const Channels = (props: ChannelsProps): JSX.Element => {
+const Channels = (): JSX.Element => {
+  const { translations } = React.useContext(TranslationContext);
  return (
    <Disclosure>
      {({ open }) => (
@ -30,16 +24,19 @@ const Channels = (props: ChannelsProps): JSX.Element => {
                <ChevronRightIcon className="my-auto w-5 h-5 mr-2" />
              )}
              <HashtagIcon className="my-auto text-gray-600 mr-2 2-5 h-5" />
-              {props.translations.device_channels_title}
+              {translations.device_channels_title}
            </div>
          </Disclosure.Button>
          <Disclosure.Panel>
-            <>
-              {props.channels.map((channel, index) => {
-                if (channel.role !== Protobuf.Channel_Role.DISABLED)
-                  return <Channel key={index} channel={channel} />;
-              })}
-            </>
+            <React.Suspense
+              fallback={
+                <div className="flex border-b border-gray-300">
+                  <div className="m-auto p-3 text-gray-500">Loading...</div>
+                </div>
+              }
+            >
+              <ChannelList />
+            </React.Suspense>
          </Disclosure.Panel>
        </>
      )}
--- a/src/components/Sidebar/Device/Index.tsx
+++ b/src/components/Sidebar/Device/Index.tsx
@ -1,4 +1,4 @@
-import React, { Suspense } from 'react';
+import React from 'react';

 import { Disclosure } from '@headlessui/react';
 import {
@ -12,16 +12,16 @@ import type {
  ISerialConnection,
 } from '@meshtastic/meshtasticjs';

-import type { languageTemplate } from '../../../App';
+import { TranslationContext } from '../../../translations/TranslationContext';
 import Settings from './Settings';

 interface DeviceProps {
  isReady: boolean;
  connection: ISerialConnection | IHTTPConnection | IBLEConnection;
-  translations: languageTemplate;
 }

 const Device = (props: DeviceProps): JSX.Element => {
+  const { translations } = React.useContext(TranslationContext);
  return (
    <Disclosure>
      {({ open }) => (
@ -34,18 +34,23 @@ const Device = (props: DeviceProps): JSX.Element => {
                <ChevronRightIcon className="my-auto w-5 h-5 mr-2" />
              )}
              <AdjustmentsIcon className="text-gray-600 my-auto mr-2 w-5 h-5" />
-              {props.translations.device_settings_title}
+              {translations.device_settings_title}
            </div>
          </Disclosure.Button>
          <Disclosure.Panel>
            <>
-              <Suspense fallback={<div>loading</div>}>
+              <React.Suspense
+                fallback={
+                  <div className="flex border-b border-gray-300">
+                    <div className="m-auto p-3 text-gray-500">Loading...</div>
+                  </div>
+                }
+              >
                <Settings
                  connection={props.connection}
                  isReady={props.isReady}
-                  translations={props.translations}
                />
-              </Suspense>
+              </React.Suspense>
            </>
          </Disclosure.Panel>
        </>
--- a/src/components/Sidebar/Device/Settings.tsx
+++ b/src/components/Sidebar/Device/Settings.tsx
@ -1,29 +1,94 @@
 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 SettingsForm from './SettingsForm';
+import { preferencesResource } from '../../../streams';
+import { TranslationContext } from '../../../translations/TranslationContext';

 export interface SettingsProps {
  isReady: boolean;
  connection: ISerialConnection | IHTTPConnection | IBLEConnection;
-  translations: languageTemplate;
 }

 const Settings = (props: SettingsProps): JSX.Element => {
+  const { translations } = React.useContext(TranslationContext);
+  const preferences = useObservableSuspense(preferencesResource);
+
+  const { register, handleSubmit } =
+    useForm<Protobuf.RadioConfig_UserPreferences>({
+      defaultValues: preferences,
+    });
+
+  const onSubmit = handleSubmit((data) => console.log(data));
  return (
-    <React.Suspense fallback={<div>Loading....</div>}>
-      <SettingsForm
-        connection={props.connection}
-        isReady={props.isReady}
-        translations={props.translations}
-      />
-    </React.Suspense>
+    <form onSubmit={onSubmit}>
+      <div className="flex bg-gray-50 whitespace-nowrap p-3 justify-between border-b">
+        <div className="my-auto">{translations.device_region_title}</div>
+        <div className="flex shadow-md rounded-md ml-2">
+          <select value={preferences?.region ?? Protobuf.RegionCode.Unset}>
+            <option value={Protobuf.RegionCode.ANZ}>
+              {Protobuf.RegionCode[Protobuf.RegionCode.ANZ]}
+            </option>
+            <option value={Protobuf.RegionCode.CN}>
+              {Protobuf.RegionCode[Protobuf.RegionCode.CN]}
+            </option>
+            <option value={Protobuf.RegionCode.EU433}>
+              {Protobuf.RegionCode[Protobuf.RegionCode.EU433]}
+            </option>
+            <option value={Protobuf.RegionCode.EU865}>
+              {Protobuf.RegionCode[Protobuf.RegionCode.EU865]}
+            </option>
+            <option value={Protobuf.RegionCode.JP}>
+              {Protobuf.RegionCode[Protobuf.RegionCode.JP]}
+            </option>
+            <option value={Protobuf.RegionCode.KR}>
+              {Protobuf.RegionCode[Protobuf.RegionCode.KR]}
+            </option>
+            <option value={Protobuf.RegionCode.TW}>
+              {Protobuf.RegionCode[Protobuf.RegionCode.TW]}
+            </option>
+            <option value={Protobuf.RegionCode.US}>
+              {Protobuf.RegionCode[Protobuf.RegionCode.US]}
+            </option>
+            <option value={Protobuf.RegionCode.Unset}>
+              {Protobuf.RegionCode[Protobuf.RegionCode.Unset]}
+            </option>
+          </select>
+        </div>
+      </div>
+      <div className="flex bg-gray-50 whitespace-nowrap p-3 justify-between border-b">
+        <div className="my-auto">{translations.device_wifi_ssid}</div>
+        <div className="flex shadow-md rounded-md ml-2">
+          <input {...register('wifiSsid', {})} type="text" />
+        </div>
+      </div>
+      <div className="flex bg-gray-50 whitespace-nowrap p-3 justify-between border-b">
+        <div className="my-auto">{translations.device_wifi_psk}</div>
+        <div className="flex shadow-md rounded-md ml-2">
+          <input {...register('wifiPassword', {})} type="password" />
+        </div>
+      </div>
+      <div className="flex bg-gray-100 group p-1 cursor-pointer hover:bg-gray-200 border-b">
+        <button
+          type="submit"
+          className="flex m-auto font-medium group-hover:text-gray-700"
+        >
+          <SaveIcon className="m-auto mr-2 group-hover:text-gray-700 w-5 h-5" />
+          {translations.save_changes_button}
+        </button>
+      </div>
+      <JSONPretty data={preferences} />
+    </form>
  );
 };

--- a/src/components/Sidebar/Device/SettingsForm.tsx
+++ b/src/components/Sidebar/Device/SettingsForm.tsx
@ -1,95 +0,0 @@
-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<Protobuf.RadioConfig_UserPreferences>({
-      defaultValues: preferences,
-    });
-
-  const onSubmit = handleSubmit((data) => console.log(data));
-  return (
-    <form onSubmit={onSubmit}>
-      <div className="flex bg-gray-50 whitespace-nowrap p-3 justify-between border-b">
-        <div className="my-auto">{props.translations.device_region_title}</div>
-        <div className="flex shadow-md rounded-md ml-2">
-          <select value={preferences?.region ?? Protobuf.RegionCode.Unset}>
-            <option value={Protobuf.RegionCode.ANZ}>
-              {Protobuf.RegionCode[Protobuf.RegionCode.ANZ]}
-            </option>
-            <option value={Protobuf.RegionCode.CN}>
-              {Protobuf.RegionCode[Protobuf.RegionCode.CN]}
-            </option>
-            <option value={Protobuf.RegionCode.EU433}>
-              {Protobuf.RegionCode[Protobuf.RegionCode.EU433]}
-            </option>
-            <option value={Protobuf.RegionCode.EU865}>
-              {Protobuf.RegionCode[Protobuf.RegionCode.EU865]}
-            </option>
-            <option value={Protobuf.RegionCode.JP}>
-              {Protobuf.RegionCode[Protobuf.RegionCode.JP]}
-            </option>
-            <option value={Protobuf.RegionCode.KR}>
-              {Protobuf.RegionCode[Protobuf.RegionCode.KR]}
-            </option>
-            <option value={Protobuf.RegionCode.TW}>
-              {Protobuf.RegionCode[Protobuf.RegionCode.TW]}
-            </option>
-            <option value={Protobuf.RegionCode.US}>
-              {Protobuf.RegionCode[Protobuf.RegionCode.US]}
-            </option>
-            <option value={Protobuf.RegionCode.Unset}>
-              {Protobuf.RegionCode[Protobuf.RegionCode.Unset]}
-            </option>
-          </select>
-        </div>
-      </div>
-      <div className="flex bg-gray-50 whitespace-nowrap p-3 justify-between border-b">
-        <div className="my-auto">{props.translations.device_wifi_ssid}</div>
-        <div className="flex shadow-md rounded-md ml-2">
-          <input {...register('wifiSsid', {})} type="text" />
-        </div>
-      </div>
-      <div className="flex bg-gray-50 whitespace-nowrap p-3 justify-between border-b">
-        <div className="my-auto">{props.translations.device_wifi_psk}</div>
-        <div className="flex shadow-md rounded-md ml-2">
-          <input {...register('wifiPassword', {})} type="password" />
-        </div>
-      </div>
-      <div className="flex bg-gray-100 group p-1 cursor-pointer hover:bg-gray-200 border-b">
-        <button
-          type="submit"
-          className="flex m-auto font-medium group-hover:text-gray-700"
-        >
-          <SaveIcon className="m-auto mr-2 group-hover:text-gray-700 w-5 h-5" />
-          {props.translations.save_changes_button}
-        </button>
-      </div>
-      <JSONPretty data={preferences} />
-    </form>
-  );
-};
-
-export default SettingsForm;
--- a/src/components/Sidebar/Nodes/Index.tsx
+++ b/src/components/Sidebar/Nodes/Index.tsx
@ -6,19 +6,16 @@ import {
  ChevronRightIcon,
  UsersIcon,
 } from '@heroicons/react/outline';
-import type { Types } from '@meshtastic/meshtasticjs';

-import type { languageTemplate } from '../../../App';
-import Node from './Node';
+import { TranslationContext } from '../../../translations/TranslationContext';
+import NodeList from './NodeList';

 interface NodesProps {
-  isReady: boolean;
-  nodes: Types.NodeInfoPacket[];
-  translations: languageTemplate;
  myId: number;
 }

 const Nodes = (props: NodesProps): JSX.Element => {
+  const { translations } = React.useContext(TranslationContext);
  return (
    <Disclosure>
      {({ open }) => (
@ -31,21 +28,21 @@ const Nodes = (props: NodesProps): JSX.Element => {
                <ChevronRightIcon className="my-auto w-5 h-5 mr-2" />
              )}
              <UsersIcon className="my-auto text-gray-600 mr-2 w-5 h-5" />
-              {props.translations.nodes_title}
+              {translations.nodes_title}
            </div>
          </Disclosure.Button>
          <Disclosure.Panel className="shadow-inner">
-            {props.nodes.length ? (
-              props.nodes.map((node, index) => (
-                <Node key={index} node={node} myId={props.myId} />
-              ))
-            ) : (
-              <div className="flex border-b border-gray-300">
-                <div className="m-auto p-3 text-gray-500">
-                  {props.translations.no_nodes_message}
+            <React.Suspense
+              fallback={
+                <div className="flex border-b border-gray-300">
+                  <div className="m-auto p-3 text-gray-500">
+                    {translations.no_nodes_message}
+                  </div>
                </div>
-              </div>
-            )}
+              }
+            >
+              <NodeList myId={props.myId} />
+            </React.Suspense>
          </Disclosure.Panel>
        </>
      )}
--- a/src/components/Sidebar/Nodes/NodeList.tsx
+++ b/src/components/Sidebar/Nodes/NodeList.tsx
@ -0,0 +1,46 @@
+import React from 'react';
+
+import { useObservableSuspense } from 'observable-hooks';
+
+import type { Types } from '@meshtastic/meshtasticjs';
+
+import { nodeResource } from '../../../streams';
+import Node from './Node';
+
+export interface NodeListProps {
+  myId: number;
+}
+
+const NodeList = (props: NodeListProps): JSX.Element => {
+  const nodeSource = useObservableSuspense(nodeResource);
+
+  const [nodes, setNodes] = React.useState<Types.NodeInfoPacket[]>([]);
+
+  React.useEffect(() => {
+    if (
+      nodes.findIndex(
+        (currentNode) => currentNode.data.num === nodeSource.data.num,
+      ) >= 0
+    ) {
+      setNodes(
+        nodes.map((currentNode) =>
+          currentNode.data.num === nodeSource.data.num
+            ? nodeSource
+            : currentNode,
+        ),
+      );
+    } else {
+      setNodes((nodes) => [...nodes, nodeSource]);
+    }
+  }, [nodeSource, nodes]);
+
+  return (
+    <>
+      {nodes.map((node, index) => (
+        <Node key={index} node={node} myId={props.myId} />
+      ))}
+    </>
+  );
+};
+
+export default NodeList;
--- a/src/components/Sidebar/UI/Index.tsx
+++ b/src/components/Sidebar/UI/Index.tsx
@ -7,18 +7,19 @@ import {
  CogIcon,
 } from '@heroicons/react/outline';

-import type { LanguageEnum, languageTemplate } from '../../../App';
+import type { LanguageEnum } from '../../../translations/TranslationContext';
+import { TranslationContext } from '../../../translations/TranslationContext';
 import Translations from './Translations';

 interface UIProps {
  language: LanguageEnum;
  setLanguage: React.Dispatch<React.SetStateAction<LanguageEnum>>;
-  translations: languageTemplate;
  darkmode: boolean;
  setDarkmode: React.Dispatch<React.SetStateAction<boolean>>;
 }

 const UI = (props: UIProps): JSX.Element => {
+  const { translations } = React.useContext(TranslationContext);
  return (
    <Disclosure>
      {({ open }) => (
@ -31,14 +32,13 @@ const UI = (props: UIProps): JSX.Element => {
                <ChevronRightIcon className="my-auto w-5 h-5 mr-2" />
              )}
              <CogIcon className="my-auto text-gray-600 mr-2 w-5 h-5" />
-              {props.translations.ui_settings_title}
+              {translations.ui_settings_title}
            </div>
          </Disclosure.Button>
          <Disclosure.Panel>
            <Translations
              language={props.language}
              setLanguage={props.setLanguage}
-              translations={props.translations}
            />
          </Disclosure.Panel>
        </>
--- a/src/components/Sidebar/UI/Translations.tsx
+++ b/src/components/Sidebar/UI/Translations.tsx
@ -5,16 +5,18 @@ import { Br, Jp, Us } from 'react-flags-select';
 import { Disclosure } from '@headlessui/react';
 import { ChevronDownIcon, ChevronRightIcon } from '@heroicons/react/outline';

-import type { languageTemplate } from '../../../App';
-import { LanguageEnum } from '../../../App';
+import {
+  LanguageEnum,
+  TranslationContext,
+} from '../../../translations/TranslationContext';

 export interface TranslationsProps {
  language: LanguageEnum;
  setLanguage: React.Dispatch<React.SetStateAction<LanguageEnum>>;
-  translations: languageTemplate;
 }

 const Translations = (props: TranslationsProps): JSX.Element => {
+  const { translations } = React.useContext(TranslationContext);
  return (
    <Disclosure>
      {({ open }) => (
@ -26,7 +28,7 @@ const Translations = (props: TranslationsProps): JSX.Element => {
              ) : (
                <ChevronRightIcon className="my-auto w-5 h-5 mr-2" />
              )}
-              {props.translations.language_title}
+              {translations.language_title}
              <div className="my-auto">
                {props.language === LanguageEnum.ENGLISH ? (
                  <Us className="ml-2 w-8" />
--- a/src/index.tsx
+++ b/src/index.tsx
@ -7,13 +7,27 @@ import React from 'react';
 import ReactDOM from 'react-dom';

 import App from './App';
+import Translations_English from './translations/en';
+import {
+  LanguageEnum,
+  TranslationContext,
+} from './translations/TranslationContext';

 const element = document.getElementById('root');

 if (element) {
+  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+  // @ts-ignore
  ReactDOM.createRoot(element).render(
    <React.StrictMode>
-      <App />
+      <TranslationContext.Provider
+        value={{
+          language: LanguageEnum.ENGLISH,
+          translations: Translations_English,
+        }}
+      >
+        <App />
+      </TranslationContext.Provider>
    </React.StrictMode>,
  );
 }
--- a/src/streams.ts
+++ b/src/streams.ts
@ -0,0 +1,17 @@
+import { ObservableResource } from 'observable-hooks';
+import { Subject } from 'rxjs';
+
+import type { Protobuf, Types } from '@meshtastic/meshtasticjs';
+
+export const preferencesSubject$ =
+  new Subject<Protobuf.RadioConfig_UserPreferences>();
+
+export const preferencesResource = new ObservableResource(preferencesSubject$);
+
+export const nodeSubject$ = new Subject<Types.NodeInfoPacket>();
+
+export const nodeResource = new ObservableResource(nodeSubject$);
+
+export const channelSubject$ = new Subject<Protobuf.Channel>();
+
+export const channelResource = new ObservableResource(channelSubject$);
--- a/src/translations/TranslationContext.tsx
+++ b/src/translations/TranslationContext.tsx
@ -0,0 +1,39 @@
+import React from 'react';
+
+import Translations_English from './en';
+
+export interface languageTemplate {
+  no_messages_message: string;
+  ui_settings_title: string;
+  nodes_title: string;
+  color_scheme_title: string;
+  language_title: string;
+  device_settings_title: string;
+  device_channels_title: string;
+  device_region_title: string;
+  device_wifi_ssid: string;
+  device_wifi_psk: string;
+  save_changes_button: string;
+  no_nodes_message: string;
+  no_message_placeholder: string;
+}
+
+export enum LanguageEnum {
+  ENGLISH,
+  JAPANESE,
+  PORTUGUESE,
+}
+
+export const TranslationContext = React.createContext({
+  language: LanguageEnum.ENGLISH,
+  translations: Translations_English,
+});
+
+// const TranslationProvider: React.FC = ({ children }) => {
+//   const [language, setLanguage] = React.useState<LanguageEnum>(
+//     LanguageEnum.ENGLISH,
+//   );
+//   return { children };
+// };
+
+// export default TranslationProvider;
--- a/src/translations/en.ts
+++ b/src/translations/en.ts
@ -1,4 +1,4 @@
-import type { languageTemplate } from '../App';
+import type { languageTemplate } from './TranslationContext';

 export default {
  no_messages_message: 'No messages yet',
--- a/src/translations/jp.ts
+++ b/src/translations/jp.ts
@ -1,4 +1,4 @@
-import type { languageTemplate } from '../App';
+import type { languageTemplate } from './TranslationContext';

 export default {
  no_messages_message: 'まだメッセージはありません',
--- a/src/translations/pt.ts
+++ b/src/translations/pt.ts
@ -1,4 +1,4 @@
-import type { languageTemplate } from '../App';
+import type { languageTemplate } from './TranslationContext';

 export default {
  no_messages_message: 'Não a mensagens ainda',
--- a/tsconfig.json
+++ b/tsconfig.json
@ -17,20 +17,7 @@
    "noEmit": true,
    /* Additional Options */
    "strict": true,
-    "noImplicitAny": true,
-    "noImplicitThis": true,
-    "noUnusedLocals": true,
-    "noUnusedParameters": true,
-    "noImplicitReturns": true,
-    "noFallthroughCasesInSwitch": true,
-    // "noUncheckedIndexedAccess": true,
-    "noPropertyAccessFromIndexSignature": true,
-    "strictBindCallApply": true,
-    "strictFunctionTypes": true,
    "strictNullChecks": true,
-    "strictPropertyInitialization": true,
-    "experimentalDecorators": true,
-    "emitDecoratorMetadata": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true,
    "resolveJsonModule": true,
--- a/yarn.lock
+++ b/yarn.lock
@ -259,13 +259,13 @@
  resolved "https://registry.yarnpkg.com/@heroicons/react/-/react-1.0.1.tgz#66d25f6441920bd5c2146ea27fd33995885452dd"
  integrity sha512-uikw2gKCmqnvjVxitecWfFLMOKyL9BTFcU4VM3hHj9OMwpkCr5Ke+MRMyY2/aQVmsYs4VTq7NCFX05MYwAHi3g==

-"@meshtastic/meshtasticjs@^0.6.12":
-  version "0.6.12"
-  resolved "https://registry.yarnpkg.com/@meshtastic/meshtasticjs/-/meshtasticjs-0.6.12.tgz#10368d67d983fdedae46fc176bc9da07bb67e7e7"
-  integrity sha512-Ys8odPrmWaLHcyzRE8+iQT2TCMIWPQXldIkEc7ydmAZO3Hc5Ol1pOHHsd/EMh9AvM/pR5ZhbSX2j8q5hBhG6UQ==
+"@meshtastic/meshtasticjs@^0.6.13":
+  version "0.6.13"
+  resolved "https://registry.yarnpkg.com/@meshtastic/meshtasticjs/-/meshtasticjs-0.6.13.tgz#4e459a1380a8761dc119e5f43bbc42c18b18e5a1"
+  integrity sha512-NdS5Cx/da7NW2FXgWvk+3lyFh/iVV3KpoEFkTFOS06liPYty1eKJo/sZgfNd/7DfdiWEDeOq9UG4aAVVsIxnlw==
  dependencies:
-    "@protobuf-ts/runtime" "^2.0.0-alpha.21"
-    rxjs "^6.6.7"
+    "@protobuf-ts/runtime" "^2.0.0-alpha.25"
+    rxjs "^7.1.0"

 "@nodelib/[email protected]":
  version "2.1.4"
@ -341,15 +341,10 @@
    node-gyp "^7.1.0"
    read-package-json-fast "^2.0.1"

-"@protobuf-ts/runtime@^2.0.0-alpha.21":
-  version "2.0.0-alpha.21"
-  resolved "https://registry.yarnpkg.com/@protobuf-ts/runtime/-/runtime-2.0.0-alpha.21.tgz#0814f365d1f155f55a83e13f38dba92856e66ec5"
-  integrity sha512-m6Ohw3ke0RiCW41kKbkPW7z+wEgchX99iAwPjFMHRYEf1w1fX8IBIzANHe13lg2MP1P7zmZYGbQ5nupFqo4cWw==
-
-"@react-rxjs/core@^0.8.0":
-  version "0.8.0"
-  resolved "https://registry.yarnpkg.com/@react-rxjs/core/-/core-0.8.0.tgz#b73c0480a457b654fdcd6d6ede36bbd99c691b2e"
-  integrity sha512-LvmVEel9MPykAJoI0oZafmui2JOU18bmIf0X0P+oEtVii0LNaj8p/3eL52NfWgsQd6hSrjevSwNbbrScsYuaFg==
+"@protobuf-ts/runtime@^2.0.0-alpha.25":
+  version "2.0.0-alpha.25"
+  resolved "https://registry.yarnpkg.com/@protobuf-ts/runtime/-/runtime-2.0.0-alpha.25.tgz#e8e7067c77ddf35a3e310ea93f58a58aa42e9bc2"
+  integrity sha512-+N3Jj61AY8u0MxxaxtovLDWgVdTmOhDG4lDDyfRQPGFzpz+ACFEcTE6WRIj1xe62kbgyQFiWkIfPO1F/mHBF3g==

 "@snowpack/plugin-dotenv@^2.0.5":
  version "2.1.0"
@ -402,7 +397,7 @@
  resolved "https://registry.yarnpkg.com/@types/estree/-/estree-0.0.47.tgz#d7a51db20f0650efec24cd04994f523d93172ed4"
  integrity sha512-c5ciR06jK8u9BstrmJyO97m+klJrrhCf9u3rLu3DEAJBirxRqSCvDQoYKmxuYwQI5SZChAWu+tq9oVlGRuzPAg==

-"@types/json-schema@*", "@types/json-schema@^7.0.3":
+"@types/json-schema@*", "@types/json-schema@^7.0.7":
  version "7.0.7"
  resolved "https://registry.yarnpkg.com/@types/json-schema/-/json-schema-7.0.7.tgz#98a993516c859eb0d5c4c8f098317a9ea68db9ad"
  integrity sha512-cxWFQVseBm6O9Gbw1IWb8r6OS4OhSt3hPZLkFApLjM8TEXROBuQGLAH2i2gZpcXdLBIrpXuTDhH7Vbm1iXmNGA==
@ -457,74 +452,74 @@
  resolved "https://registry.yarnpkg.com/@types/snowpack-env/-/snowpack-env-2.3.3.tgz#d2dfb1fb8557aa8bb517606d5dfa249cc861c3ff"
  integrity sha512-riJuu2fR3qhBfpWJtqQtNwYJFvquiXfqdprXvZjSNmscnZbIVyHoM49ZVEM1bciKM1mWOCdjXymOYHyGh2WLtg==

-"@typescript-eslint/eslint-plugin@^4.25.0":
-  version "4.25.0"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/eslint-plugin/-/eslint-plugin-4.25.0.tgz#d82657b6ab4caa4c3f888ff923175fadc2f31f2a"
-  integrity sha512-Qfs3dWkTMKkKwt78xp2O/KZQB8MPS1UQ5D3YW2s6LQWBE1074BE+Rym+b1pXZIX3M3fSvPUDaCvZLKV2ylVYYQ==
+"@typescript-eslint/eslint-plugin@^4.26.0":
+  version "4.26.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/eslint-plugin/-/eslint-plugin-4.26.0.tgz#12bbd6ebd5e7fabd32e48e1e60efa1f3554a3242"
+  integrity sha512-yA7IWp+5Qqf+TLbd8b35ySFOFzUfL7i+4If50EqvjT6w35X8Lv0eBHb6rATeWmucks37w+zV+tWnOXI9JlG6Eg==
  dependencies:
-    "@typescript-eslint/experimental-utils" "4.25.0"
-    "@typescript-eslint/scope-manager" "4.25.0"
-    debug "^4.1.1"
+    "@typescript-eslint/experimental-utils" "4.26.0"
+    "@typescript-eslint/scope-manager" "4.26.0"
+    debug "^4.3.1"
    functional-red-black-tree "^1.0.1"
-    lodash "^4.17.15"
-    regexpp "^3.0.0"
-    semver "^7.3.2"
-    tsutils "^3.17.1"
-
-"@typescript-eslint/[email protected]":
-  version "4.25.0"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/experimental-utils/-/experimental-utils-4.25.0.tgz#b2febcfa715d2c1806fd5f0335193a6cd270df54"
-  integrity sha512-f0doRE76vq7NEEU0tw+ajv6CrmPelw5wLoaghEHkA2dNLFb3T/zJQqGPQ0OYt5XlZaS13MtnN+GTPCuUVg338w==
-  dependencies:
-    "@types/json-schema" "^7.0.3"
-    "@typescript-eslint/scope-manager" "4.25.0"
-    "@typescript-eslint/types" "4.25.0"
-    "@typescript-eslint/typescript-estree" "4.25.0"
-    eslint-scope "^5.0.0"
-    eslint-utils "^2.0.0"
-
-"@typescript-eslint/parser@^4.25.0":
-  version "4.25.0"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/parser/-/parser-4.25.0.tgz#6b2cb6285aa3d55bfb263c650739091b0f19aceb"
-  integrity sha512-OZFa1SKyEJpAhDx8FcbWyX+vLwh7OEtzoo2iQaeWwxucyfbi0mT4DijbOSsTgPKzGHr6GrF2V5p/CEpUH/VBxg==
-  dependencies:
-    "@typescript-eslint/scope-manager" "4.25.0"
-    "@typescript-eslint/types" "4.25.0"
-    "@typescript-eslint/typescript-estree" "4.25.0"
-    debug "^4.1.1"
-
-"@typescript-eslint/[email protected]":
-  version "4.25.0"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/scope-manager/-/scope-manager-4.25.0.tgz#9d86a5bcc46ef40acd03d85ad4e908e5aab8d4ca"
-  integrity sha512-2NElKxMb/0rya+NJG1U71BuNnp1TBd1JgzYsldsdA83h/20Tvnf/HrwhiSlNmuq6Vqa0EzidsvkTArwoq+tH6w==
-  dependencies:
-    "@typescript-eslint/types" "4.25.0"
-    "@typescript-eslint/visitor-keys" "4.25.0"
-
-"@typescript-eslint/[email protected]":
-  version "4.25.0"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/types/-/types-4.25.0.tgz#0e444a5c5e3c22d7ffa5e16e0e60510b3de5af87"
-  integrity sha512-+CNINNvl00OkW6wEsi32wU5MhHti2J25TJsJJqgQmJu3B3dYDBcmOxcE5w9cgoM13TrdE/5ND2HoEnBohasxRQ==
+    lodash "^4.17.21"
+    regexpp "^3.1.0"
+    semver "^7.3.5"
+    tsutils "^3.21.0"

-"@typescript-eslint/[email protected].0":
-  version "4.25.0"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/typescript-estree/-/typescript-estree-4.25.0.tgz#942e4e25888736bff5b360d9b0b61e013d0cfa25"
-  integrity sha512-1B8U07TGNAFMxZbSpF6jqiDs1cVGO0izVkf18Q/SPcUAc9LhHxzvSowXDTvkHMWUVuPpagupaW63gB6ahTXVlg==
+"@typescript-eslint/[email protected]":
+  version "4.26.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/experimental-utils/-/experimental-utils-4.26.0.tgz#ba7848b3f088659cdf71bce22454795fc55be99a"
+  integrity sha512-TH2FO2rdDm7AWfAVRB5RSlbUhWxGVuxPNzGT7W65zVfl8H/WeXTk1e69IrcEVsBslrQSTDKQSaJD89hwKrhdkw==
  dependencies:
-    "@typescript-eslint/types" "4.25.0"
-    "@typescript-eslint/visitor-keys" "4.25.0"
-    debug "^4.1.1"
-    globby "^11.0.1"
+    "@types/json-schema" "^7.0.7"
+    "@typescript-eslint/scope-manager" "4.26.0"
+    "@typescript-eslint/types" "4.26.0"
+    "@typescript-eslint/typescript-estree" "4.26.0"
+    eslint-scope "^5.1.1"
+    eslint-utils "^3.0.0"
+
+"@typescript-eslint/parser@^4.26.0":
+  version "4.26.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/parser/-/parser-4.26.0.tgz#31b6b732c9454f757b020dab9b6754112aa5eeaf"
+  integrity sha512-b4jekVJG9FfmjUfmM4VoOItQhPlnt6MPOBUL0AQbiTmm+SSpSdhHYlwayOm4IW9KLI/4/cRKtQCmDl1oE2OlPg==
+  dependencies:
+    "@typescript-eslint/scope-manager" "4.26.0"
+    "@typescript-eslint/types" "4.26.0"
+    "@typescript-eslint/typescript-estree" "4.26.0"
+    debug "^4.3.1"
+
+"@typescript-eslint/[email protected]":
+  version "4.26.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/scope-manager/-/scope-manager-4.26.0.tgz#60d1a71df162404e954b9d1c6343ff3bee496194"
+  integrity sha512-G6xB6mMo4xVxwMt5lEsNTz3x4qGDt0NSGmTBNBPJxNsrTXJSm21c6raeYroS2OwQsOyIXqKZv266L/Gln1BWqg==
+  dependencies:
+    "@typescript-eslint/types" "4.26.0"
+    "@typescript-eslint/visitor-keys" "4.26.0"
+
+"@typescript-eslint/[email protected]":
+  version "4.26.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/types/-/types-4.26.0.tgz#7c6732c0414f0a69595f4f846ebe12616243d546"
+  integrity sha512-rADNgXl1kS/EKnDr3G+m7fB9yeJNnR9kF7xMiXL6mSIWpr3Wg5MhxyfEXy/IlYthsqwBqHOr22boFbf/u6O88A==
+
+"@typescript-eslint/[email protected]":
+  version "4.26.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/typescript-estree/-/typescript-estree-4.26.0.tgz#aea17a40e62dc31c63d5b1bbe9a75783f2ce7109"
+  integrity sha512-GHUgahPcm9GfBuy3TzdsizCcPjKOAauG9xkz9TR8kOdssz2Iz9jRCSQm6+aVFa23d5NcSpo1GdHGSQKe0tlcbg==
+  dependencies:
+    "@typescript-eslint/types" "4.26.0"
+    "@typescript-eslint/visitor-keys" "4.26.0"
+    debug "^4.3.1"
+    globby "^11.0.3"
    is-glob "^4.0.1"
-    semver "^7.3.2"
-    tsutils "^3.17.1"
+    semver "^7.3.5"
+    tsutils "^3.21.0"

-"@typescript-eslint/[email protected]":
-  version "4.25.0"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/visitor-keys/-/visitor-keys-4.25.0.tgz#863e7ed23da4287c5b469b13223255d0fde6aaa7"
-  integrity sha512-AmkqV9dDJVKP/TcZrbf6s6i1zYXt5Hl8qOLrRDTFfRNae4+LB8A4N3i+FLZPW85zIxRy39BgeWOfMS3HoH5ngg==
+"@typescript-eslint/[email protected]6.0":
+  version "4.26.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/visitor-keys/-/visitor-keys-4.26.0.tgz#26d2583169222815be4dcd1da4fe5459bc3bcc23"
+  integrity sha512-cw4j8lH38V1ycGBbF+aFiLUls9Z0Bw8QschP3mkth50BbWzgFS33ISIgBzUMuQ2IdahoEv/rXstr8Zhlz4B1Zg==
  dependencies:
-    "@typescript-eslint/types" "4.25.0"
+    "@typescript-eslint/types" "4.26.0"
    eslint-visitor-keys "^2.0.0"

 abbrev@1:
@ -780,10 +775,10 @@ 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==
+boring-avatars@^1.5.5:
+  version "1.5.5"
+  resolved "https://registry.yarnpkg.com/boring-avatars/-/boring-avatars-1.5.5.tgz#ea0b0f0f40299283586c31070ead7285956c0869"
+  integrity sha512-sIvumj2yscTQwcAdp/ANi4i97OKq5yPgXY6MfdHW4b6k6iljn9gFZa6TXgWyBnKXMPytx5e04mxrv7OCZKX9Wg==

 bplist-parser@^0.1.0:
  version "0.1.1"
@ -1087,7 +1082,7 @@ dashdash@^1.12.0:
  dependencies:
    assert-plus "^1.0.0"

-debug@4, debug@^4.0.1, debug@^4.1.0, debug@^4.1.1:
+debug@4, debug@^4.0.1, debug@^4.1.0, debug@^4.1.1, debug@^4.3.1:
  version "4.3.1"
  resolved "https://registry.yarnpkg.com/debug/-/debug-4.3.1.tgz#f0d229c505e0c6d8c49ac553d1b13dc183f6b2ee"
  integrity sha512-doEwdvm4PCeK4K3RQN2ZC2BYUBaxwLARCqZmMjtF8a51J2Rb0xpVloFRnCODwqjpwnAoao4pelN8l3RJdv3gRQ==
@ -1438,7 +1433,7 @@ eslint-plugin-react@^7.24.0:
    resolve "^2.0.0-next.3"
    string.prototype.matchall "^4.0.5"

-eslint-scope@^5.0.0, eslint-scope@^5.1.1:
+eslint-scope@^5.1.1:
  version "5.1.1"
  resolved "https://registry.yarnpkg.com/eslint-scope/-/eslint-scope-5.1.1.tgz#e786e59a66cb92b3f6c1fb0d508aab174848f48c"
  integrity sha512-2NxwbF/hZ0KpepYN0cNbo+FN6XoK7GaHlQhgx/hIZl6Va0bF45RQOOwhLIy8lQDbuCiadSLCBnH2CFYquit5bw==
@ -1446,13 +1441,20 @@ eslint-scope@^5.0.0, eslint-scope@^5.1.1:
    esrecurse "^4.3.0"
    estraverse "^4.1.1"

-eslint-utils@^2.0.0, eslint-utils@^2.1.0:
+eslint-utils@^2.1.0:
  version "2.1.0"
  resolved "https://registry.yarnpkg.com/eslint-utils/-/eslint-utils-2.1.0.tgz#d2de5e03424e707dc10c74068ddedae708741b27"
  integrity sha512-w94dQYoauyvlDc43XnGB8lU3Zt713vNChgt4EWwhXAP2XkBvndfxF0AgIqKOOasjPIPzj9JqgwkwbCYD0/V3Zg==
  dependencies:
    eslint-visitor-keys "^1.1.0"

+eslint-utils@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/eslint-utils/-/eslint-utils-3.0.0.tgz#8aebaface7345bb33559db0a1f13a1d2d48c3672"
+  integrity sha512-uuQC43IGctw68pJA1RgbQS8/NP7rch6Cwd4j3ZBtgo4/8Flj4eGE7ZYSZRN3iq5pVUv6GPdW5Z1RFleo84uLDA==
+  dependencies:
+    eslint-visitor-keys "^2.0.0"
+
 eslint-visitor-keys@^1.1.0, eslint-visitor-keys@^1.3.0:
  version "1.3.0"
  resolved "https://registry.yarnpkg.com/eslint-visitor-keys/-/eslint-visitor-keys-1.3.0.tgz#30ebd1ef7c2fdff01c3a4f151044af25fab0523e"
@ -1828,7 +1830,7 @@ globals@^13.6.0:
  dependencies:
    type-fest "^0.20.2"

-globby@^11.0.0, globby@^11.0.1:
+globby@^11.0.0, globby@^11.0.3:
  version "11.0.3"
  resolved "https://registry.yarnpkg.com/globby/-/globby-11.0.3.tgz#9b1f0cb523e171dd1ad8c7b2a9fb4b644b9593cb"
  integrity sha512-ffdmosjA807y7+lA1NM0jELARVmYul/715xiILEjo3hBLPTcirgQNnXECn5g3mtR8TOLCVbkfua1Hpen25/Xcg==
@ -2469,7 +2471,7 @@ lodash.truncate@^4.4.2:
  resolved "https://registry.yarnpkg.com/lodash.truncate/-/lodash.truncate-4.4.2.tgz#5a350da0b1113b837ecfffd5812cbe58d6eae193"
  integrity sha1-WjUNoLERO4N+z//VgSy+WNbq4ZM=

-lodash@^4.17.15, lodash@^4.17.19, lodash@^4.17.21:
+lodash@^4.17.19, lodash@^4.17.21:
  version "4.17.21"
  resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.21.tgz#679591c564c3bffaae8454cf0b3df370c3d6911c"
  integrity sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==
@ -3396,7 +3398,7 @@ regexp.prototype.flags@^1.3.0, regexp.prototype.flags@^1.3.1:
    call-bind "^1.0.2"
    define-properties "^1.1.3"

-regexpp@^3.0.0, regexpp@^3.1.0:
+regexpp@^3.1.0:
  version "3.1.0"
  resolved "https://registry.yarnpkg.com/regexpp/-/regexpp-3.1.0.tgz#206d0ad0a5648cffbdb8ae46438f3dc51c9f78e2"
  integrity sha512-ZOIzd8yVsQQA7j8GCSlPGXwg5PfmA1mrq0JP4nGhh54LaKN3xdai/vHUDu74pKwV8OxseMS65u2NImosQcSD0Q==
@ -3494,13 +3496,6 @@ run-parallel@^1.1.9:
  dependencies:
    queue-microtask "^1.2.2"

-rxjs@^6.6.7:
-  version "6.6.7"
-  resolved "https://registry.yarnpkg.com/rxjs/-/rxjs-6.6.7.tgz#90ac018acabf491bf65044235d5863c4dab804c9"
-  integrity sha512-hTdwr+7yYNIT5n4AMYp85KA6yw2Va0FLa3Rguvbpa4W3I5xynaBZo41cM3XM+4Q6fRMj3sBYIR1VAmZMXYJvRQ==
-  dependencies:
-    tslib "^1.9.0"
-
 rxjs@^7.1.0:
  version "7.1.0"
  resolved "https://registry.yarnpkg.com/rxjs/-/rxjs-7.1.0.tgz#94202d27b19305ef7b1a4f330277b2065df7039e"
@ -3912,7 +3907,7 @@ tsconfig-paths@^3.9.0:
    minimist "^1.2.0"
    strip-bom "^3.0.0"

-tslib@^1.8.1, tslib@^1.9.0:
+tslib@^1.8.1:
  version "1.14.1"
  resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.14.1.tgz#cf2d38bdc34a134bcaf1091c41f6619e2f672d00"
  integrity sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==
@ -3922,7 +3917,7 @@ tslib@~2.1.0:
  resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.1.0.tgz#da60860f1c2ecaa5703ab7d39bc05b6bf988b97a"
  integrity sha512-hcVC3wYEziELGGmEEXue7D75zbwIIVUMWAVbHItGPx0ziyXxrOMQx4rQEVEV45Ut/1IotuEvwqPopzIOkDMf0A==

-tsutils@^3.17.1:
+tsutils@^3.21.0:
  version "3.21.0"
  resolved "https://registry.yarnpkg.com/tsutils/-/tsutils-3.21.0.tgz#b48717d394cea6c1e096983eed58e9d61715b623"
  integrity sha512-mHKK3iUXL+3UF6xL5k0PEhKRUBKPBCv/+RkEOpjRWxxx27KKRBmmA60A9pgOUvMi8GKhRMPEmjBRPzs2W7O1OA==