hermes/meshtastic-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

WIP

Browse Source
This commit is contained in:
Sacha Weatherstone
2022-02-23 14:14:33 +11:00
parent 3b85422ab2
commit 4cf326661f
54 changed files with 403 additions and 255 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/App.tsx
+2 -2
View File
@@ -13,10 +13,10 @@ import { NotFound } from '@pages/NotFound';
export const App = (): JSX.Element => {
const route = useRoute();
const darkMode = useAppSelector((state) => state.app.darkMode);
const appState = useAppSelector((state) => state.app);
return (
<div className={`h-screen w-screen ${darkMode ? 'dark' : ''}`}>
<div className={`h-screen w-screen ${appState.darkMode ? 'dark' : ''}`}>
<ContextMenu>
<Connection />
<div className="flex h-full flex-col bg-gray-200 dark:bg-secondaryDark">
src/components/Connection.tsx
+29 -13
View File
@@ -1,6 +1,7 @@
import React from 'react';
import type React from 'react';
import { useEffect } from 'react';
import { AnimatePresence } from 'framer-motion';
import { AnimatePresence, m } from 'framer-motion';
import { BLE } from '@components/connection/BLE';
import { HTTP } from '@components/connection/HTTP';
@@ -21,10 +22,10 @@ import { Types } from '@meshtastic/meshtasticjs';
export const Connection = (): JSX.Element => {
const dispatch = useAppDispatch();
const state = useAppSelector((state) => state.meshtastic);
const meshtasticState = useAppSelector((state) => state.meshtastic);
const appState = useAppSelector((state) => state.app);
React.useEffect(() => {
useEffect(() => {
if (!import.meta.env.VITE_PUBLIC_HOSTED) {
dispatch(
setConnectionParams({
@@ -41,11 +42,11 @@ export const Connection = (): JSX.Element => {
}
}, [dispatch]);
React.useEffect(() => {
if (state.ready) {
useEffect(() => {
if (meshtasticState.ready) {
dispatch(closeConnectionModal());
}
}, [state.ready, dispatch]);
}, [meshtasticState.ready, dispatch]);
return (
<AnimatePresence>
@@ -67,14 +68,14 @@ export const Connection = (): JSX.Element => {
dispatch(setConnType(parseInt(e.target.value)));
}}
disabled={
state.deviceStatus ===
meshtasticState.deviceStatus ===
Types.DeviceStatusEnum.DEVICE_CONNECTED
}
/>
{appState.connType === connType.HTTP && (
<HTTP
connecting={
state.deviceStatus ===
meshtasticState.deviceStatus ===
Types.DeviceStatusEnum.DEVICE_CONNECTED
}
/>
@@ -82,7 +83,7 @@ export const Connection = (): JSX.Element => {
{appState.connType === connType.BLE && (
<BLE
connecting={
state.deviceStatus ===
meshtasticState.deviceStatus ===
Types.DeviceStatusEnum.DEVICE_CONNECTED
}
/>
@@ -90,7 +91,7 @@ export const Connection = (): JSX.Element => {
{appState.connType === connType.SERIAL && (
<Serial
connecting={
state.deviceStatus ===
meshtasticState.deviceStatus ===
Types.DeviceStatusEnum.DEVICE_CONNECTED
}
/>
@@ -98,8 +99,23 @@ export const Connection = (): JSX.Element => {
</div>
</div>
<div className="md:w-1/2">
<div className="h-96 overflow-y-auto rounded-md bg-gray-200 p-2 dark:bg-secondaryDark dark:text-gray-400">
{state.logs
<div className="h-96 overflow-y-auto rounded-md border border-gray-300 bg-gray-200 p-2 dark:border-gray-600 dark:bg-secondaryDark dark:text-gray-400">
{meshtasticState.logs.length === 0 && (
<div className="flex h-full w-full">
<m.img
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
exit={{ opacity: 0 }}
className="m-auto h-40 w-40 text-green-500"
src={`/placeholders/${
appState.darkMode
? 'View Code Dark.svg'
: 'View Code.svg'
}`}
/>
</div>
)}
{meshtasticState.logs
.filter((log) => {
return ![
Types.Emitter.handleFromRadio,
src/components/MapBox/MapboxProvider.tsx
+11 -10
View File
@@ -1,6 +1,7 @@
import React from 'react';
import type React from 'react';
import { useEffect, useRef } from 'react';
import mapboxgl from 'mapbox-gl';
import { ScaleControl } from 'mapbox-gl';
import { MapboxContext } from '@components/MapBox/mapboxContext';
import {
@@ -26,7 +27,7 @@ export const MapboxProvider = ({
const darkMode = useAppSelector((state) => state.app.darkMode);
const mapState = useAppSelector((state) => state.map);
const dispatch = useAppDispatch();
const ref = React.useRef<HTMLDivElement>(null);
const ref = useRef<HTMLDivElement>(null);
const map = useCreateMapbox({
ref,
@@ -41,9 +42,9 @@ export const MapboxProvider = ({
},
});
React.useEffect(() => {
useEffect(() => {
map?.on('load', () => {
map.addControl(new mapboxgl.ScaleControl());
map.addControl(new ScaleControl());
});
map?.on('styledata', () => {
if (!map.getSource('mapbox-dem')) {
@@ -73,14 +74,14 @@ export const MapboxProvider = ({
});
}, [dispatch, map, mapState.exaggeration]);
React.useEffect(() => {
useEffect(() => {
const center = map?.getCenter();
if (center !== mapState.latLng) {
map?.setCenter(mapState.latLng);
}
}, [map, mapState.latLng]);
React.useEffect(() => {
useEffect(() => {
if (['Light', 'Dark'].includes(mapState.style)) {
dispatch(setMapStyle(darkMode ? 'Dark' : 'Light'));
}
@@ -89,7 +90,7 @@ export const MapboxProvider = ({
/**
* Hill Shading
*/
React.useEffect(() => {
useEffect(() => {
if (map?.loaded()) {
if (mapState.hillShade) {
map.addLayer(
@@ -111,7 +112,7 @@ export const MapboxProvider = ({
/**
* Exaggeration
*/
React.useEffect(() => {
useEffect(() => {
if (map?.loaded()) {
map.setTerrain({
source: 'mapbox-dem',
@@ -123,7 +124,7 @@ export const MapboxProvider = ({
/**
* Map Style
*/
React.useEffect(() => {
useEffect(() => {
if (map?.loaded()) {
map.setStyle(MapStyles[mapState.style].data);
}
src/components/MapBox/mapboxContext.ts
+5 -4
View File
@@ -1,12 +1,13 @@
import React from 'react';
import type React from 'react';
import { createContext } from 'react';
import type mapbox from 'mapbox-gl';
import type { Map } from 'mapbox-gl';
export interface MapboxContextValue {
ref: React.Ref<HTMLDivElement>;
map?: mapbox.Map;
map?: Map;
}
export const MapboxContext = React.createContext<MapboxContextValue>(
export const MapboxContext = createContext<MapboxContextValue>(
{} as MapboxContextValue,
);
src/components/connection/BLE.tsx
+6 -4
View File
@@ -1,4 +1,5 @@
import React from 'react';
import type React from 'react';
import { useCallback, useEffect, useState } from 'react';
import { useForm } from 'react-hook-form';
import { FiArrowRightCircle } from 'react-icons/fi';
@@ -14,19 +15,19 @@ export interface BLEProps {
}
export const BLE = ({ connecting }: BLEProps): JSX.Element => {
const [bleDevices, setBleDevices] = React.useState<BluetoothDevice[]>([]);
const [bleDevices, setBleDevices] = useState<BluetoothDevice[]>([]);
const { handleSubmit } = useForm<{
device?: BluetoothDevice;
}>();
const updateBleDeviceList = React.useCallback(async (): Promise<void> => {
const updateBleDeviceList = useCallback(async (): Promise<void> => {
const ble = new IBLEConnection();
const devices = await ble.getDevices();
setBleDevices(devices);
}, []);
React.useEffect(() => {
useEffect(() => {
void updateBleDeviceList();
}, [updateBleDeviceList]);
@@ -46,6 +47,7 @@ export const BLE = ({ connecting }: BLEProps): JSX.Element => {
>
<div className="my-auto">{device.name}</div>
<IconButton
nested
onClick={async (): Promise<void> => {
await setConnection(connType.BLE);
}}
src/components/connection/Serial.tsx
+6 -4
View File
@@ -1,4 +1,5 @@
import React from 'react';
import type React from 'react';
import { useCallback, useEffect, useState } from 'react';
import { useForm } from 'react-hook-form';
import { FiArrowRightCircle } from 'react-icons/fi';
@@ -15,20 +16,20 @@ export interface SerialProps {
}
export const Serial = ({ connecting }: SerialProps): JSX.Element => {
const [serialDevices, setSerialDevices] = React.useState<SerialPort[]>([]);
const [serialDevices, setSerialDevices] = useState<SerialPort[]>([]);
const dispatch = useAppDispatch();
const { handleSubmit } = useForm<{
device?: SerialPort;
}>();
const updateSerialDeviceList = React.useCallback(async (): Promise<void> => {
const updateSerialDeviceList = useCallback(async (): Promise<void> => {
const serial = new ISerialConnection();
const devices = await serial.getPorts();
setSerialDevices(devices);
}, []);
React.useEffect(() => {
useEffect(() => {
void updateSerialDeviceList();
}, [updateSerialDeviceList]);
@@ -53,6 +54,7 @@ export const Serial = ({ connecting }: SerialProps): JSX.Element => {
</p>
</div>
<IconButton
nested
onClick={async (): Promise<void> => {
dispatch(
setConnectionParams({
src/components/generic/Card.tsx
+44 -9
View File
@@ -1,21 +1,56 @@
import type React from 'react';
import { m } from 'framer-motion';
import Draggable from 'react-draggable';
export interface CardProps {
className?: string;
title?: string;
actions?: React.ReactNode;
children: React.ReactNode;
border?: boolean;
draggable?: boolean;
}
export const Card = ({ className, children }: CardProps): JSX.Element => {
export const Card = ({
className,
title,
actions,
draggable,
border,
children,
}: CardProps): JSX.Element => {
return (
<m.div
className={`flex select-none rounded-md bg-white p-4 shadow-md dark:bg-primaryDark ${className}`}
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
exit={{ opacity: 0 }}
>
{children}
</m.div>
<Draggable handle=".handle" disabled={!draggable}>
<div
className={`flex h-full w-full flex-col rounded-md shadow-md ${
border ? 'border border-gray-300 dark:border-gray-600' : ''
} ${className ?? ''}`}
>
{(title || actions) && (
<div
className={`w-full select-none justify-between rounded-t-md border-b border-gray-300 bg-gray-200 p-2 px-2 text-lg font-medium dark:border-gray-600 dark:bg-primaryDark dark:text-white ${
draggable ? 'cursor-move' : ''
}`}
>
<div className="handle flex h-8 justify-between">
<div className="my-auto ml-2 truncate">{title}</div>
{actions}
</div>
</div>
)}
<m.div
className={`flex flex-grow select-none flex-col gap-4 p-4 ${
title || actions ? 'rounded-b-md backdrop-blur-xl' : 'rounded-md'
} ${draggable ? '' : 'bg-white dark:bg-primaryDark'}`}
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
exit={{ opacity: 0 }}
>
{children}
</m.div>
</div>
</Draggable>
);
};
src/components/generic/ContextMenu.tsx
+4 -3
View File
@@ -1,4 +1,5 @@
import React from 'react';
import type React from 'react';
import { useState } from 'react';
import { FiActivity, FiAperture, FiTag } from 'react-icons/fi';
@@ -13,8 +14,8 @@ export const ContextMenu = ({
items,
children,
}: ContextMenuProps): JSX.Element => {
const [visible, setVisible] = React.useState(false);
const [position, setPosition] = React.useState({ x: 0, y: 0 });
const [visible, setVisible] = useState(false);
const [position, setPosition] = useState({ x: 0, y: 0 });
return (
<div
src/components/generic/Modal.tsx
+10 -8
View File
@@ -37,16 +37,18 @@ export const Modal = ({
&#8203;
</span>
<div className="inline-block w-full max-w-3xl align-middle">
<Card className="relative flex-col gap-4 border border-gray-300 dark:border-gray-600">
<div className="flex justify-between">
<div className="text-2xl font-medium dark:text-white">
{title}
</div>
<div className="flex gap-2">
<Card
border
draggable
title={title}
actions={
<>
{actions}
<IconButton tooltip="Close" icon={<FiX />} onClick={onClose} />
</div>
</div>
</>
}
className="relative flex-col gap-4 "
>
{children}
</Card>
</div>
src/components/generic/Sidebar/CollapsibleSection.tsx
+6 -3
View File
@@ -1,4 +1,5 @@
import React from 'react';
import type React from 'react';
import { useState } from 'react';
import { AnimatePresence, m } from 'framer-motion';
import { FiArrowUp } from 'react-icons/fi';
@@ -14,13 +15,15 @@ export const CollapsibleSection = ({
icon,
children,
}: CollapsibleSectionProps): JSX.Element => {
const [open, setOpen] = React.useState(false);
const [open, setOpen] = useState(false);
const toggleOpen = (): void => setOpen(!open);
return (
<m.div>
<m.div
layout
className="w-full cursor-pointer select-none overflow-hidden border-b border-gray-300 p-2 text-sm font-medium dark:border-primaryDark dark:bg-secondaryDark dark:text-gray-400"
className={`w-full cursor-pointer select-none overflow-hidden border-l-4 border-b border-gray-300 p-2 text-sm font-medium dark:border-primaryDark dark:bg-secondaryDark dark:text-gray-400 ${
open ? 'dark:border-l-primary' : 'dark:border-secondaryDark'
}`}
>
<m.div
layout
src/components/generic/Sidebar/ExternalSection.tsx
+10 -5
View File
@@ -1,20 +1,23 @@
import React from 'react';
import type React from 'react';
import { useState } from 'react';
import { m } from 'framer-motion';
import { FiExternalLink } from 'react-icons/fi';
import { FiChevronRight } from 'react-icons/fi';
export interface ExternalSectionProps {
title: string;
icon?: JSX.Element;
active?: boolean;
onClick: () => void;
}
export const ExternalSection = ({
title,
icon,
active,
onClick,
}: ExternalSectionProps): JSX.Element => {
const [open, setOpen] = React.useState(false);
const [open, setOpen] = useState(false);
const toggleOpen = (): void => setOpen(!open);
return (
<m.div
@@ -24,7 +27,9 @@ export const ExternalSection = ({
>
<m.div
layout
className="w-full cursor-pointer select-none overflow-hidden dark:bg-secondaryDark dark:text-gray-400"
className={`w-full cursor-pointer select-none overflow-hidden border-l-4 dark:bg-secondaryDark dark:text-gray-400 ${
active ? 'border-primary' : 'dark:border-secondaryDark'
}`}
>
<m.div
layout
@@ -38,7 +43,7 @@ export const ExternalSection = ({
{title}
</m.div>
<m.div className="my-auto">
<FiExternalLink />
<FiChevronRight />
</m.div>
</m.div>
</m.div>
src/components/generic/button/Button.tsx
+19 -13
View File
@@ -1,35 +1,37 @@
import React from 'react';
import type React from 'react';
import { useState } from 'react';
import { m } from 'framer-motion';
import { FiCheck } from 'react-icons/fi';
type DefaultButtonProps = JSX.IntrinsicElements['button'];
export enum ButtonSize {
Small = 'small',
Medium = 'medium',
Large = 'large',
}
export interface ButtonProps extends DefaultButtonProps {
export interface ButtonProps {
icon?: JSX.Element;
active?: boolean;
border?: boolean;
className?: string;
disabled?: boolean;
children?: React.ReactNode;
size?: ButtonSize;
onClick?: () => void;
confirmAction?: () => void;
}
export const Button = ({
icon,
className,
active,
border,
size = ButtonSize.Medium,
confirmAction,
onClick,
disabled,
children,
...props
}: ButtonProps): JSX.Element => {
const [hasConfirmed, setHasConfirmed] = React.useState(false);
const [hasConfirmed, setHasConfirmed] = useState(false);
const handleConfirm = (): void => {
if (typeof confirmAction == 'function') {
@@ -44,9 +46,11 @@ export const Button = ({
};
return (
<button
<m.button
whileHover={{ scale: 1.01 }}
whileTap={{ scale: 0.97 }}
onClick={handleConfirm}
className={`flex select-none items-center space-x-3 rounded-md border border-transparent text-sm transition duration-200 ease-in-out focus-within:border-primary focus-within:shadow-border active:scale-95 dark:text-white dark:focus-within:border-primary
className={`flex select-none items-center space-x-3 rounded-md border border-transparent text-sm focus-within:border-primary focus-within:shadow-border dark:text-white dark:focus-within:border-primary
${
size === ButtonSize.Small
? 'p-0'
@@ -58,8 +62,10 @@ export const Button = ({
disabled
? 'cursor-not-allowed bg-white dark:bg-primaryDark'
: 'cursor-pointer hover:bg-gray-100 hover:shadow-md dark:hover:bg-secondaryDark'
} ${border ? 'border-gray-400 dark:border-gray-200' : ''} ${className}`}
{...props}
} ${border ? 'border-gray-400 dark:border-gray-200' : ''} ${
className ?? ''
}`}
onClickCapture={onClick}
>
{icon && (
<div className="text-gray-500 dark:text-gray-400">
@@ -68,6 +74,6 @@ export const Button = ({
)}
<span>{children}</span>
</button>
</m.button>
);
};
src/components/generic/button/IconButton.tsx
+15 -7
View File
@@ -1,5 +1,7 @@
import type React from 'react';
import { m } from 'framer-motion';
import { Tooltip } from '@components/generic/Tooltip';
type DefaulButtonProps = JSX.IntrinsicElements['button'];
@@ -7,26 +9,32 @@ type DefaulButtonProps = JSX.IntrinsicElements['button'];
export interface IconButtonProps extends DefaulButtonProps {
icon: React.ReactNode;
tooltip?: string;
nested?: boolean;
active?: boolean;
}
export const IconButton = ({
icon,
active,
tooltip,
nested,
active,
disabled,
...props
}: IconButtonProps): JSX.Element => {
return (
<Tooltip disabled={!tooltip} content={tooltip}>
<div className="my-auto text-gray-500 dark:text-gray-400">
<m.div
whileHover={{ scale: 1.01 }}
whileTap={{ scale: 0.97 }}
className="my-auto text-gray-500 dark:text-gray-400"
>
<button
type="button"
disabled={disabled}
className={`rounded-md p-2 transition duration-200 ease-in-out active:scale-95 ${
active
? 'bg-gray-200 dark:bg-gray-600'
: 'hover:bg-gray-200 dark:hover:bg-gray-600'
className={`rounded-md p-2 hover:bg-gray-200 ${
active ? 'bg-gray-200 dark:bg-secondaryDark' : ''
} ${
nested ? 'dark:hover:bg-primaryDark' : 'dark:hover:bg-secondaryDark'
} ${
disabled
? 'cursor-not-allowed text-gray-400 dark:text-gray-700'
@@ -37,7 +45,7 @@ export const IconButton = ({
{icon}
<span className="sr-only">Refresh</span>
</button>
</div>
</m.div>
</Tooltip>
);
};
src/components/generic/form/Checkbox.tsx
+3 -2
View File
@@ -1,4 +1,5 @@
import React from 'react';
import type React from 'react';
import { forwardRef } from 'react';
import { Label } from '@components/generic/form/Label';
@@ -12,7 +13,7 @@ export interface CheckboxProps extends DefaultInputProps {
error?: boolean;
}
export const Checkbox = React.forwardRef<HTMLInputElement, CheckboxProps>(
export const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(
function Input(
{ label, valid, validationMessage, id, error, ...props }: CheckboxProps,
ref,
src/components/generic/form/Input.tsx
+25 -23
View File
@@ -1,4 +1,5 @@
import React from 'react';
import type React from 'react';
import { forwardRef } from 'react';
import { InputWrapper } from '@components/generic/form/InputWrapper';
import { Label } from '@components/generic/form/Label';
@@ -13,25 +14,26 @@ export interface InputProps extends DefaultInputProps {
suffix?: string;
}
export const Input = React.forwardRef<HTMLInputElement, InputProps>(
function Input({ label, error, action, suffix, ...props }: InputProps, ref) {
return (
<div className="w-full">
{label && <Label label={label} error={error} />}
<InputWrapper error={error} disabled={props.disabled}>
<input
ref={ref}
className="h-10 w-full bg-transparent px-3 py-2 focus:outline-none disabled:cursor-not-allowed dark:text-white"
{...props}
/>
{suffix && (
<span className="my-auto mr-3 text-sm font-medium text-gray-500 dark:text-gray-400">
{suffix}
</span>
)}
{action && <div className="mr-1 flex">{action}</div>}
</InputWrapper>
</div>
);
},
);
export const Input = forwardRef<HTMLInputElement, InputProps>(function Input(
{ label, error, action, suffix, ...props }: InputProps,
ref,
) {
return (
<div className="w-full">
{label && <Label label={label} error={error} />}
<InputWrapper error={error} disabled={props.disabled}>
<input
ref={ref}
className="h-10 w-full bg-transparent px-3 py-2 focus:outline-none disabled:cursor-not-allowed dark:text-white"
{...props}
/>
{suffix && (
<span className="my-auto mr-3 text-sm font-medium text-gray-500 dark:text-gray-400">
{suffix}
</span>
)}
{action && <div className="mr-1 flex">{action}</div>}
</InputWrapper>
</div>
);
});
src/components/generic/form/Select.tsx
+3 -2
View File
@@ -1,4 +1,5 @@
import React from 'react';
import type React from 'react';
import { forwardRef } from 'react';
import { InputWrapper } from '@components/generic/form/InputWrapper';
import { Label } from '@components/generic/form/Label';
@@ -16,7 +17,7 @@ export interface SelectProps extends DefaultSelectProps {
small?: boolean;
}
export const Select = React.forwardRef<HTMLSelectElement, SelectProps>(
export const Select = forwardRef<HTMLSelectElement, SelectProps>(
({ options, optionsEnum, label, error, small, ...props }, ref) => {
const optionsEnumValues = optionsEnum
? Object.entries(optionsEnum).filter(
src/components/layout/Sidebar/ButtonNav.tsx
+1 -1
View File
@@ -1,4 +1,4 @@
import React from 'react';
import type React from 'react';
import { FiMessageCircle, FiSettings } from 'react-icons/fi';
import { RiMindMap, RiRoadMapLine } from 'react-icons/ri';
src/components/layout/Sidebar/Settings/Channels.tsx
+5 -4
View File
@@ -1,4 +1,5 @@
import React from 'react';
import type React from 'react';
import { useState } from 'react';
import { useForm } from 'react-hook-form';
import { FiSave } from 'react-icons/fi';
@@ -17,9 +18,9 @@ export const Channels = (): JSX.Element => {
channels.find(
(channel) => channel.role === Protobuf.Channel_Role.PRIMARY,
) ?? channels[0];
const [usePreset, setUsePreset] = React.useState(true);
const [loading, setLoading] = React.useState(false);
const [selectedChannel, setSelectedChannel] = React.useState<
const [usePreset, setUsePreset] = useState(true);
const [loading, setLoading] = useState(false);
const [selectedChannel, setSelectedChannel] = useState<
Protobuf.Channel | undefined
>();
src/components/layout/Sidebar/Settings/Index.tsx
+4 -3
View File
@@ -1,4 +1,5 @@
import React from 'react';
import type React from 'react';
import { useState } from 'react';
import {
FiAlignLeft,
@@ -38,8 +39,8 @@ export interface SettingsProps {
}
export const Settings = ({ open, setOpen }: SettingsProps): JSX.Element => {
const [pluginsOpen, setPluginsOpen] = React.useState(false);
const [channelsOpen, setChannelsOpen] = React.useState(false);
const [pluginsOpen, setPluginsOpen] = useState(false);
const [channelsOpen, setChannelsOpen] = useState(false);
const {
rangeTestPluginEnabled,
extNotificationPluginEnabled,
src/components/layout/Sidebar/Settings/Position.tsx
+4 -3
View File
@@ -1,4 +1,5 @@
import React from 'react';
import type React from 'react';
import { useEffect, useState } from 'react';
import { Controller, useForm } from 'react-hook-form';
import { FiSave } from 'react-icons/fi';
@@ -18,7 +19,7 @@ export const Position = (): JSX.Element => {
const preferences = useAppSelector(
(state) => state.meshtastic.radio.preferences,
);
const [loading, setLoading] = React.useState(false);
const [loading, setLoading] = useState(false);
const { register, handleSubmit, formState, reset, control } =
useForm<Protobuf.RadioConfig_UserPreferences>({
defaultValues: {
@@ -32,7 +33,7 @@ export const Position = (): JSX.Element => {
},
});
React.useEffect(() => {
useEffect(() => {
reset(preferences);
}, [reset, preferences]);
src/components/layout/Sidebar/Settings/Power.tsx
+4 -3
View File
@@ -1,4 +1,5 @@
import React from 'react';
import type React from 'react';
import { useEffect, useState } from 'react';
import { useForm } from 'react-hook-form';
import { FiSave } from 'react-icons/fi';
@@ -14,7 +15,7 @@ export const Power = (): JSX.Element => {
const preferences = useAppSelector(
(state) => state.meshtastic.radio.preferences,
);
const [loading, setLoading] = React.useState(false);
const [loading, setLoading] = useState(false);
const { register, handleSubmit, formState, reset } =
useForm<Protobuf.RadioConfig_UserPreferences>({
defaultValues: {
@@ -23,7 +24,7 @@ export const Power = (): JSX.Element => {
},
});
React.useEffect(() => {
useEffect(() => {
reset(preferences);
}, [reset, preferences]);
src/components/layout/Sidebar/Settings/Radio.tsx
+4 -3
View File
@@ -1,4 +1,5 @@
import React from 'react';
import type React from 'react';
import { useEffect, useState } from 'react';
import { useForm } from 'react-hook-form';
import { FiSave } from 'react-icons/fi';
@@ -14,13 +15,13 @@ export const Radio = (): JSX.Element => {
const preferences = useAppSelector(
(state) => state.meshtastic.radio.preferences,
);
const [loading, setLoading] = React.useState(false);
const [loading, setLoading] = useState(false);
const { register, handleSubmit, formState, reset } =
useForm<Protobuf.RadioConfig_UserPreferences>({
defaultValues: preferences,
});
React.useEffect(() => {
useEffect(() => {
reset(preferences);
}, [reset, preferences]);
src/components/layout/Sidebar/Settings/User.tsx
+4 -3
View File
@@ -1,4 +1,5 @@
import React from 'react';
import type React from 'react';
import { useEffect, useState } from 'react';
import { useForm } from 'react-hook-form';
import { FiSave } from 'react-icons/fi';
@@ -13,7 +14,7 @@ import { useAppSelector } from '@hooks/useAppSelector';
import { Protobuf } from '@meshtastic/meshtasticjs';
export const User = (): JSX.Element => {
const [loading, setLoading] = React.useState(false);
const [loading, setLoading] = useState(false);
const myNodeNum = useAppSelector(
(state) => state.meshtastic.radio.hardware,
).myNodeNum;
@@ -40,7 +41,7 @@ export const User = (): JSX.Element => {
},
});
React.useEffect(() => {
useEffect(() => {
reset({
longName: node?.user?.longName,
shortName: node?.user?.shortName,
src/components/layout/Sidebar/Settings/WiFi.tsx
+4 -3
View File
@@ -1,4 +1,5 @@
import React from 'react';
import type React from 'react';
import { useEffect, useState } from 'react';
import { useForm, useWatch } from 'react-hook-form';
import { FiSave } from 'react-icons/fi';
@@ -14,7 +15,7 @@ export const WiFi = (): JSX.Element => {
const preferences = useAppSelector(
(state) => state.meshtastic.radio.preferences,
);
const [loading, setLoading] = React.useState(false);
const [loading, setLoading] = useState(false);
const { register, handleSubmit, formState, reset, control } =
useForm<Protobuf.RadioConfig_UserPreferences>({
defaultValues: preferences,
@@ -32,7 +33,7 @@ export const WiFi = (): JSX.Element => {
defaultValue: false,
});
React.useEffect(() => {
useEffect(() => {
reset(preferences);
}, [reset, preferences]);
src/components/layout/Sidebar/Settings/channels/Channels.tsx
+6 -5
View File
@@ -1,4 +1,5 @@
import React from 'react';
import type React from 'react';
import { useEffect, useState } from 'react';
import { fromByteArray, toByteArray } from 'base64-js';
import { useForm } from 'react-hook-form';
@@ -18,9 +19,9 @@ export interface SettingsPanelProps {
}
export const SettingsPanel = ({ channel }: SettingsPanelProps): JSX.Element => {
const [loading, setLoading] = React.useState(false);
const [keySize, setKeySize] = React.useState<128 | 256>(256);
const [pskHidden, setPskHidden] = React.useState(true);
const [loading, setLoading] = useState(false);
const [keySize, setKeySize] = useState<128 | 256>(256);
const [pskHidden, setPskHidden] = useState(true);
const { register, handleSubmit, setValue, formState, reset } = useForm<
Omit<Protobuf.ChannelSettings, 'psk'> & { psk: string; enabled: boolean }
@@ -37,7 +38,7 @@ export const SettingsPanel = ({ channel }: SettingsPanelProps): JSX.Element => {
},
});
React.useEffect(() => {
useEffect(() => {
reset({
enabled: [
Protobuf.Channel_Role.SECONDARY,
src/components/layout/Sidebar/Settings/plugins/ExternalNotifications.tsx
+4 -3
View File
@@ -1,4 +1,5 @@
import React from 'react';
import type React from 'react';
import { useEffect, useState } from 'react';
import { useForm, useWatch } from 'react-hook-form';
import { FiSave } from 'react-icons/fi';
@@ -12,7 +13,7 @@ import { useAppSelector } from '@hooks/useAppSelector';
import type { Protobuf } from '@meshtastic/meshtasticjs';
export const ExternalNotificationsSettingsPlanel = (): JSX.Element => {
const [loading, setLoading] = React.useState(false);
const [loading, setLoading] = useState(false);
const preferences = useAppSelector(
(state) => state.meshtastic.radio.preferences,
@@ -23,7 +24,7 @@ export const ExternalNotificationsSettingsPlanel = (): JSX.Element => {
defaultValues: preferences,
});
React.useEffect(() => {
useEffect(() => {
reset(preferences);
}, [reset, preferences]);
src/components/layout/Sidebar/Settings/plugins/RangeTest.tsx
+4 -3
View File
@@ -1,4 +1,5 @@
import React from 'react';
import type React from 'react';
import { useEffect, useState } from 'react';
import { useForm, useWatch } from 'react-hook-form';
import { FiSave } from 'react-icons/fi';
@@ -12,7 +13,7 @@ import { useAppSelector } from '@hooks/useAppSelector';
import type { Protobuf } from '@meshtastic/meshtasticjs';
export const RangeTestSettingsPanel = (): JSX.Element => {
const [loading, setLoading] = React.useState(false);
const [loading, setLoading] = useState(false);
const preferences = useAppSelector(
(state) => state.meshtastic.radio.preferences,
@@ -23,7 +24,7 @@ export const RangeTestSettingsPanel = (): JSX.Element => {
defaultValues: preferences,
});
React.useEffect(() => {
useEffect(() => {
reset(preferences);
}, [reset, preferences]);
src/components/layout/Sidebar/Settings/plugins/Serial.tsx
+4 -3
View File
@@ -1,4 +1,5 @@
import React from 'react';
import type React from 'react';
import { useEffect, useState } from 'react';
import { useForm, useWatch } from 'react-hook-form';
import { FiSave } from 'react-icons/fi';
@@ -12,7 +13,7 @@ import { useAppSelector } from '@hooks/useAppSelector';
import type { Protobuf } from '@meshtastic/meshtasticjs';
export const SerialSettingsPanel = (): JSX.Element => {
const [loading, setLoading] = React.useState(false);
const [loading, setLoading] = useState(false);
const preferences = useAppSelector(
(state) => state.meshtastic.radio.preferences,
@@ -23,7 +24,7 @@ export const SerialSettingsPanel = (): JSX.Element => {
defaultValues: preferences,
});
React.useEffect(() => {
useEffect(() => {
reset(preferences);
}, [reset, preferences]);
src/components/layout/Sidebar/Settings/plugins/StoreForward.tsx
+4 -3
View File
@@ -1,4 +1,5 @@
import React from 'react';
import type React from 'react';
import { useEffect, useState } from 'react';
import { useForm, useWatch } from 'react-hook-form';
import { FiSave } from 'react-icons/fi';
@@ -12,7 +13,7 @@ import { useAppSelector } from '@hooks/useAppSelector';
import type { Protobuf } from '@meshtastic/meshtasticjs';
export const StoreForwardSettingsPanel = (): JSX.Element => {
const [loading, setLoading] = React.useState(false);
const [loading, setLoading] = useState(false);
const preferences = useAppSelector(
(state) => state.meshtastic.radio.preferences,
@@ -23,7 +24,7 @@ export const StoreForwardSettingsPanel = (): JSX.Element => {
defaultValues: preferences,
});
React.useEffect(() => {
useEffect(() => {
reset(preferences);
}, [reset, preferences]);
src/components/layout/Sidebar/index.tsx
+3 -2
View File
@@ -1,4 +1,5 @@
import React from 'react';
import type React from 'react';
import { useState } from 'react';
import { ButtonNav } from '@components/layout/Sidebar/ButtonNav';
import { Settings } from '@components/layout/Sidebar/Settings/Index';
@@ -9,7 +10,7 @@ export interface SidebarProps {
}
export const Sidebar = ({ children }: SidebarProps): JSX.Element => {
const [settingsOpen, setSettingsOpen] = React.useState(false);
const [settingsOpen, setSettingsOpen] = useState(false);
const appState = useAppSelector((state) => state.app);
src/components/menu/BottomNav.tsx
+3 -2
View File
@@ -1,4 +1,5 @@
import React from 'react';
import type React from 'react';
import { useState } from 'react';
import {
FiBluetooth,
@@ -31,7 +32,7 @@ import { VersionInfo } from '../modals/VersionInfo';
import { BottomNavItem } from './BottomNavItem';
export const BottomNav = (): JSX.Element => {
const [showVersionInfo, setShowVersionInfo] = React.useState(false);
const [showVersionInfo, setShowVersionInfo] = useState(false);
const dispatch = useAppDispatch();
const meshtasticState = useAppSelector((state) => state.meshtastic);
const appState = useAppSelector((state) => state.app);
src/components/modals/VersionInfo.tsx
+4 -3
View File
@@ -1,4 +1,5 @@
import React from 'react';
import type React from 'react';
import { useEffect } from 'react';
import { AnimatePresence } from 'framer-motion';
import { MdUpgrade } from 'react-icons/md';
@@ -56,7 +57,7 @@ export const VersionInfo = ({
},
);
React.useEffect(() => {
useEffect(() => {
if (data) {
const index = data.findIndex(
(commit) => commit.sha.substring(0, 7) === process.env.COMMIT_HASH,
@@ -90,7 +91,7 @@ export const VersionInfo = ({
data.map((commit) => (
<div
key={commit.sha}
className={`flex gap-2 rounded-md py-1 px-2 ${
className={`flex gap-2 rounded-md border border-transparent py-1 px-2 hover:border-primary ${
commit.sha.substring(0, 7) === process.env.COMMIT_HASH
? 'bg-primary'
: 'dark:bg-secondaryDark'
src/core/slices/mapSlice.ts
+4 -4
View File
@@ -1,4 +1,4 @@
import mapboxgl from 'mapbox-gl';
import { LngLat } from 'mapbox-gl';
import type { MapStyleName } from '@pages/Map/styles';
import type { PayloadAction } from '@reduxjs/toolkit';
@@ -6,7 +6,7 @@ import { createSlice } from '@reduxjs/toolkit';
interface MapState {
firstLoad: boolean;
latLng: mapboxgl.LngLat;
latLng: LngLat;
zoom: number;
bearing: number;
pitch: number;
@@ -18,7 +18,7 @@ interface MapState {
const initialState: MapState = {
firstLoad: true,
latLng: new mapboxgl.LngLat(0, 0),
latLng: new LngLat(0, 0),
zoom: 2,
bearing: 0,
pitch: 0,
@@ -33,7 +33,7 @@ export const mapSlice = createSlice({
name: 'map',
initialState,
reducers: {
setLatLng: (state, action: PayloadAction<mapboxgl.LngLat>) => {
setLatLng: (state, action: PayloadAction<LngLat>) => {
state.latLng = action.payload;
},
setZoom: (state, action: PayloadAction<number>) => {
src/hooks/useCreateMapbox.ts
+10 -11
View File
@@ -1,30 +1,29 @@
import 'mapbox-gl/dist/mapbox-gl.css';
import React from 'react';
import type React from 'react';
import { useEffect, useState } from 'react';
import mapboxgl from 'mapbox-gl';
type AccessToken = string;
import { Map, MapboxOptions } from 'mapbox-gl';
export interface useMapboxProps {
ref: React.RefObject<HTMLDivElement>;
accessToken: AccessToken;
options?: Partial<mapboxgl.MapboxOptions>;
accessToken: string;
options?: Partial<MapboxOptions>;
}
export function useCreateMapbox({
ref,
accessToken,
options,
}: useMapboxProps): mapboxgl.Map | undefined {
const [mapInstance, setMapInstance] = React.useState<mapboxgl.Map>();
React.useEffect(() => {
}: useMapboxProps): Map | undefined {
const [mapInstance, setMapInstance] = useState<Map>();
useEffect(() => {
const container = ref.current as HTMLDivElement;
if (mapInstance || !container) {
return;
}
mapboxgl.accessToken = accessToken;
const map = new mapboxgl.Map({
const map = new Map({
accessToken,
container,
antialias: true,
...options,
src/hooks/useMapbox.ts
+2 -2
View File
@@ -1,8 +1,8 @@
import React from 'react';
import { useContext } from 'react';
import type { MapboxContextValue } from '@components/MapBox/mapboxContext';
import { MapboxContext } from '@components/MapBox/mapboxContext';
export const useMapbox = (): MapboxContextValue => {
return React.useContext(MapboxContext);
return useContext(MapboxContext);
};
src/index.tsx
+4 -3
View File
@@ -1,6 +1,7 @@
import '@app/index.css';
import React from 'react';
import type React from 'react';
import { StrictMode } from 'react';
import { render } from 'react-dom';
import { domAnimation, LazyMotion } from 'framer-motion';
@@ -14,7 +15,7 @@ import { RouteProvider } from '@core/router';
import { store } from '@core/store';
render(
<React.StrictMode>
<StrictMode>
<ErrorBoundary FallbackComponent={ErrorFallback}>
<RouteProvider>
<Provider store={store}>
@@ -25,6 +26,6 @@ render(
</Provider>
</RouteProvider>
</ErrorBoundary>
</React.StrictMode>,
</StrictMode>,
document.getElementById('root'),
);
src/pages/Extensions/Debug.tsx
+1 -1
View File
@@ -1,4 +1,4 @@
import React from 'react';
import type React from 'react';
import { Button } from '@app/components/generic/button/Button';
import { Card } from '@app/components/generic/Card';
src/pages/Extensions/FileBrowser.tsx
+16 -9
View File
@@ -1,8 +1,10 @@
import React from 'react';
import type React from 'react';
import { AnimatePresence, m } from 'framer-motion';
import { FiFilePlus } from 'react-icons/fi';
import useSWR from 'swr';
import { Button } from '@app/components/generic/button/Button';
import { Card } from '@app/components/generic/Card';
import { fetcher } from '@core/utils/fetcher';
import { useAppSelector } from '@hooks/useAppSelector';
@@ -29,22 +31,27 @@ export const FileBrowser = (): JSX.Element => {
const connectionParams = useAppSelector(
(state) => state.app.connectionParams,
);
const darkMode = useAppSelector((state) => state.app.darkMode);
const appState = useAppSelector((state) => state.app);
const meshtasticState = useAppSelector((state) => state.meshtastic);
const { data } = useSWR<Files>(
`${connectionParams.HTTP.tls ? 'https' : 'http'}://${
connectionParams.HTTP.address
}/json/spiffs/browse/static`,
}${
meshtasticState.radio.hardware.firmwareVersion.includes('1.2')
? '/json/spiffs/browse/static'
: '/json/fs/browse/static'
}`,
fetcher,
);
return (
<div className="flex h-full p-4">
<Card className="flex-grow flex-col">
<div className="flex h-10 w-full rounded-t-md border-b border-gray-300 px-4 text-lg font-semibold shadow-md dark:border-gray-600 dark:bg-zinc-700 dark:text-white">
<div className="my-auto w-1/3">FileName</div>
<div className="my-auto w-1/3">Actions</div>
</div>
<Card
title="File Browser"
actions={<Button icon={<FiFilePlus />}>Upload File</Button>}
className="flex-grow flex-col"
>
<div className="h-full px-4">
<AnimatePresence>
{(!data || data?.data.files.length === 0) && (
@@ -55,7 +62,7 @@ export const FileBrowser = (): JSX.Element => {
exit={{ opacity: 0 }}
className="m-auto h-64 w-64 text-green-500"
src={`/placeholders/${
darkMode ? 'Files Dark.svg' : 'Files.svg'
appState.darkMode ? 'Files Dark.svg' : 'Files.svg'
}`}
/>
</div>
src/pages/Extensions/Index.tsx
+8 -2
View File
@@ -1,4 +1,5 @@
import React from 'react';
import type React from 'react';
import { useState } from 'react';
import { FiFile, FiInfo } from 'react-icons/fi';
import { MdSubject } from 'react-icons/md';
@@ -14,7 +15,7 @@ import { Logs } from '@pages/Extensions/Logs';
import { Debug } from './Debug';
export const Extensions = (): JSX.Element => {
const [selectedExtension, setSelectedExtension] = React.useState<
const [selectedExtension, setSelectedExtension] = useState<
'info' | 'logs' | 'fileBrowser' | 'rangeTest' | 'debug'
>('info');
@@ -29,6 +30,7 @@ export const Extensions = (): JSX.Element => {
setSelectedExtension('info');
}}
icon={<FiInfo />}
active={selectedExtension === 'info'}
title="Node Info"
/>
<ExternalSection
@@ -36,6 +38,7 @@ export const Extensions = (): JSX.Element => {
setSelectedExtension('logs');
}}
icon={<MdSubject />}
active={selectedExtension === 'logs'}
title="Logs"
/>
<ExternalSection
@@ -43,6 +46,7 @@ export const Extensions = (): JSX.Element => {
setSelectedExtension('fileBrowser');
}}
icon={<FiFile />}
active={selectedExtension === 'fileBrowser'}
title="File Browser"
/>
<ExternalSection
@@ -50,6 +54,7 @@ export const Extensions = (): JSX.Element => {
setSelectedExtension('rangeTest');
}}
icon={<RiPinDistanceFill />}
active={selectedExtension === 'rangeTest'}
title="Range Test"
/>
<ExternalSection
@@ -57,6 +62,7 @@ export const Extensions = (): JSX.Element => {
setSelectedExtension('debug');
}}
icon={<VscDebug />}
active={selectedExtension === 'debug'}
title="Debug"
/>
</div>
src/pages/Extensions/Info.tsx
+14 -4
View File
@@ -1,7 +1,9 @@
import React from 'react';
import type React from 'react';
import { FiRefreshCw } from 'react-icons/fi';
import JSONPretty from 'react-json-pretty';
import { Button } from '@app/components/generic/button/Button';
import { Card } from '@app/components/generic/Card';
import { Hashicon } from '@emeraldpay/hashicon-react';
import { useAppSelector } from '@hooks/useAppSelector';
@@ -17,8 +19,16 @@ export const Info = (): JSX.Element => {
);
return (
<div className="flex h-full flex-col gap-4 p-4 md:flex-row">
<Card className="md:w-1/4">
<div className="flex h-full flex-col gap-4 p-4 xl:flex-row">
<Card
title="Connected Node Details"
actions={
<Button className="truncate" icon={<FiRefreshCw />}>
Refresh Node info
</Button>
}
className="xl:w-3/5"
>
<div className="m-auto flex flex-col gap-2">
<Hashicon value={hardwareInfo.myNodeNum.toString()} size={180} />
<div className="text-center text-lg font-medium dark:text-white">
@@ -27,7 +37,7 @@ export const Info = (): JSX.Element => {
</div>
</Card>
<Card className="flex-grow">
<Card title="Debug Information" className="flex-grow">
<JSONPretty className="overflow-y-auto" data={hardwareInfo} />
</Card>
</div>
src/pages/Extensions/Logs.tsx
+12 -7
View File
@@ -1,15 +1,16 @@
import type React from 'react';
import { AnimatePresence, m } from 'framer-motion';
import { FiArrowRight, FiPaperclip } from 'react-icons/fi';
import { FiArrowRight, FiPaperclip, FiX } from 'react-icons/fi';
import { Button } from '@app/components/generic/button/Button';
import { Card } from '@app/components/generic/Card';
import { useAppSelector } from '@hooks/useAppSelector';
import { Protobuf, Types } from '@meshtastic/meshtasticjs';
export const Logs = (): JSX.Element => {
const logs = useAppSelector((state) => state.meshtastic.logs);
const darkMode = useAppSelector((state) => state.app.darkMode);
const meshtasticState = useAppSelector((state) => state.meshtastic);
const appState = useAppSelector((state) => state.app);
type lookupType = { [key: number]: string };
@@ -49,14 +50,18 @@ export const Logs = (): JSX.Element => {
return (
<div className="flex h-full flex-col gap-4 p-4">
<Card className="flex-grow overflow-y-auto">
<Card
title="Device Logs"
actions={<Button icon={<FiX />}>Clear Logs</Button>}
className="flex-grow overflow-y-auto"
>
<table className="table-cell flex-grow">
<tbody
className="
block h-full flex-col overflow-y-auto font-mono text-xs dark:text-gray-400"
>
<AnimatePresence>
{logs.length === 0 && (
{meshtasticState.logs.length === 0 && (
<div className="flex h-full w-full">
<m.img
initial={{ opacity: 0 }}
@@ -64,13 +69,13 @@ export const Logs = (): JSX.Element => {
exit={{ opacity: 0 }}
className="m-auto h-64 w-64 text-green-500"
src={`/placeholders/${
darkMode ? 'View Code Dark.svg' : 'View Code.svg'
appState.darkMode ? 'View Code Dark.svg' : 'View Code.svg'
}`}
/>
</div>
)}
</AnimatePresence>
{logs.map((log, index) => (
{meshtasticState.logs.map((log, index) => (
// <ContextMenu
// key={index}
// items={
src/pages/Map/MapContainer.tsx
+3 -2
View File
@@ -1,4 +1,5 @@
import React from 'react';
import type React from 'react';
import { useCallback } from 'react';
import { FaDirections, FaGlobeAfrica, FaMountain } from 'react-icons/fa';
import { MdFullscreen, MdRadar, MdWbShade } from 'react-icons/md';
@@ -23,7 +24,7 @@ export const MapContainer = (): JSX.Element => {
const { ref } = useMapbox();
const ChangeMapStyle = React.useCallback(
const ChangeMapStyle = useCallback(
(styleName: string, style: MapStyle) => {
dispatch(
setMapStyle(
src/pages/Map/Marker.tsx
+13 -11
View File
@@ -1,13 +1,15 @@
import React from 'react';
import ReactDOM from 'react-dom';
import type React from 'react';
import { useCallback, useEffect, useRef } from 'react';
import { createPortal } from 'react-dom';
import mapbox from 'mapbox-gl';
import type { LngLatLike, MarkerOptions } from 'mapbox-gl';
import { Marker as MapboxMarker } from 'mapbox-gl';
import { useMapbox } from '@hooks/useMapbox';
export interface MarkerProps extends Omit<mapbox.MarkerOptions, 'element'> {
export interface MarkerProps extends Omit<MarkerOptions, 'element'> {
children?: React.ReactNode;
center: mapbox.LngLatLike;
center: LngLatLike;
}
export const Marker = ({
@@ -16,22 +18,22 @@ export const Marker = ({
...props
}: MarkerProps): JSX.Element => {
const { map } = useMapbox();
const ref = React.useRef<HTMLDivElement>(document.createElement('div'));
const ref = useRef<HTMLDivElement>(document.createElement('div'));
const addMarker = React.useCallback((): void => {
const addMarker = useCallback((): void => {
if (map) {
const marker = new mapbox.Marker(ref.current, props).setLngLat(center);
const marker = new MapboxMarker(ref.current, props).setLngLat(center);
marker.addTo(map);
}
}, [map, center, props]);
React.useEffect(() => {
useEffect(() => {
map?.on('load', () => {
addMarker();
});
}, [addMarker, map]);
React.useEffect(() => {
useEffect(() => {
if (map?.loaded()) {
addMarker();
}
@@ -39,5 +41,5 @@ export const Marker = ({
<div ref={ref}>{children}</div>;
return ReactDOM.createPortal(children, ref.current);
return createPortal(children, ref.current);
};
src/pages/Map/index.tsx
+3 -2
View File
@@ -1,4 +1,5 @@
import React from 'react';
import type React from 'react';
import { useState } from 'react';
import mapboxgl from 'mapbox-gl';
import { FiMapPin } from 'react-icons/fi';
@@ -13,7 +14,7 @@ import { Marker } from '@pages/Map/Marker';
import { NodeCard } from '@pages/Nodes/NodeCard';
export const Map = (): JSX.Element => {
const [selectedNode, setSelectedNode] = React.useState<Node>();
const [selectedNode, setSelectedNode] = useState<Node>();
const nodes = useAppSelector((state) => state.meshtastic.nodes);
const myNodeNum = useAppSelector(
src/pages/Messages/ChannelChat.tsx
+2 -2
View File
@@ -1,4 +1,4 @@
import React from 'react';
import type React from 'react';
import { m } from 'framer-motion';
import { FiSettings } from 'react-icons/fi';
@@ -41,7 +41,7 @@ export const ChannelChat = ({
setSelected={(): void => {
setSelectedIndex(channel.index);
}}
actions={<IconButton icon={<FiSettings />} />}
actions={<IconButton nested icon={<FiSettings />} />}
>
<Tooltip
content={
src/pages/Messages/DmChat.tsx
+2 -2
View File
@@ -1,4 +1,4 @@
import React from 'react';
import type React from 'react';
import { FiSettings } from 'react-icons/fi';
@@ -25,7 +25,7 @@ export const DmChat = ({
setSelected={(): void => {
setSelectedIndex(node.number);
}}
actions={<IconButton icon={<FiSettings />} />}
actions={<IconButton nested icon={<FiSettings />} />}
>
<div className="flex dark:text-white">
<div className="m-auto">
src/pages/Messages/MessageBar.tsx
+12 -4
View File
@@ -1,4 +1,5 @@
import React from 'react';
import type React from 'react';
import { useState } from 'react';
import { Input } from '@components/generic/form/Input';
import { connection } from '@core/connection';
@@ -14,9 +15,9 @@ export const MessageBar = ({ chatIndex }: MessageBarProps): JSX.Element => {
const dispatch = useAppDispatch();
const meshtasticState = useAppSelector((state) => state.meshtastic);
const [isChannel, setIsChannel] = React.useState(false);
const [isChannel, setIsChannel] = useState(false);
React.useState(() => {
useState(() => {
setIsChannel(
meshtasticState.radio.channels.findIndex(
(channel) => channel.index === chatIndex,
@@ -24,7 +25,7 @@ export const MessageBar = ({ chatIndex }: MessageBarProps): JSX.Element => {
);
});
const [currentMessage, setCurrentMessage] = React.useState('');
const [currentMessage, setCurrentMessage] = useState('');
const sendMessage = (): void => {
if (meshtasticState.ready) {
void connection.sendText(
@@ -33,6 +34,13 @@ export const MessageBar = ({ chatIndex }: MessageBarProps): JSX.Element => {
true,
isChannel ? chatIndex-- : 0,
(id) => {
console.log(`Chat Index, ${chatIndex}`);
console.log(`Chat Index --, ${chatIndex--}`);
console.log(
`Chat Index computed, ${isChannel ? chatIndex-- : chatIndex}`,
);
dispatch(
ackMessage({
chatIndex: isChannel ? chatIndex-- : chatIndex,
src/pages/Messages/index.tsx
+6 -5
View File
@@ -1,4 +1,5 @@
import React from 'react';
import type React from 'react';
import { useEffect, useRef, useState } from 'react';
import { FiHash, FiMessageCircle } from 'react-icons/fi';
@@ -12,9 +13,9 @@ import { Message } from '@pages/Messages/Message';
import { MessageBar } from '@pages/Messages/MessageBar';
export const Messages = (): JSX.Element => {
const [selectedChatIndex, setSelectedChatIndex] = React.useState<number>(0);
const [selectedChatIndex, setSelectedChatIndex] = useState<number>(0);
const chatRef = React.useRef<HTMLDivElement>(null);
const chatRef = useRef<HTMLDivElement>(null);
const myNodeNum = useAppSelector(
(state) => state.meshtastic.radio.hardware,
@@ -25,7 +26,7 @@ export const Messages = (): JSX.Element => {
(state) => state.meshtastic.radio.channels,
).filter((ch) => ch.role !== Protobuf.Channel_Role.DISABLED);
React.useEffect(() => {
useEffect(() => {
if (chatRef.current) {
chatRef.current.scrollTop = chatRef.current.scrollHeight;
}
@@ -66,7 +67,7 @@ export const Messages = (): JSX.Element => {
<div className="flex w-full flex-col">
<div className="flex w-full justify-between border-b border-gray-300 px-2 dark:border-gray-600 dark:text-gray-300">
<div className="my-auto flex gap-2 py-2 text-sm">
<IconButton icon={<FiHash className="h-4 w-4" />} />
<IconButton nested icon={<FiHash className="h-4 w-4" />} />
<div className="my-auto">
{channels.findIndex((ch) => ch.index === selectedChatIndex) !==
-1 ? (
src/pages/Nodes/NodeCard.tsx
+9 -6
View File
@@ -1,7 +1,8 @@
import React from 'react';
import type React from 'react';
import { useEffect, useState } from 'react';
import { m } from 'framer-motion';
import mapbox from 'mapbox-gl';
import { LngLat } from 'mapbox-gl';
import { BiCrown } from 'react-icons/bi';
import {
FiAlignLeft,
@@ -40,11 +41,11 @@ export const NodeCard = ({
setSelected,
}: NodeCardProps): JSX.Element => {
const { map } = useMapbox();
const [infoOpen, setInfoOpen] = React.useState(false);
const [infoOpen, setInfoOpen] = useState(false);
const [PositionConfidence, setPositionConfidence] =
React.useState<PositionConfidence>('none');
useState<PositionConfidence>('none');
React.useEffect(() => {
useEffect(() => {
setPositionConfidence(
node.currentPosition
? new Date(node.currentPosition.posTimestamp * 1000) >
@@ -62,6 +63,7 @@ export const NodeCard = ({
actions={
<>
<IconButton
nested
tooltip={PositionConfidence !== 'none' ? 'Fly to Node' : ''}
disabled={PositionConfidence === 'none'}
onClick={(e): void => {
@@ -69,7 +71,7 @@ export const NodeCard = ({
setSelected();
if (PositionConfidence !== 'none' && node.currentPosition) {
map?.flyTo({
center: new mapbox.LngLat(
center: new LngLat(
node.currentPosition.longitudeI / 1e7,
node.currentPosition.latitudeI / 1e7,
),
@@ -88,6 +90,7 @@ export const NodeCard = ({
}
/>
<IconButton
nested
tooltip="Show Node Info"
onClick={(e): void => {
e.stopPropagation();
src/pages/Nodes/index.tsx
+8 -6
View File
@@ -1,4 +1,5 @@
import React from 'react';
import type React from 'react';
import { useEffect, useState } from 'react';
import { m } from 'framer-motion';
import type { Edge, Node } from 'react-flow-renderer';
@@ -15,15 +16,15 @@ import { Hashicon } from '@emeraldpay/hashicon-react';
import { useAppSelector } from '@hooks/useAppSelector';
export const Nodes = (): JSX.Element => {
const [graphNodes, setGraphNodes] = React.useState<Node[]>([]);
const [graphEdges, setGraphEdges] = React.useState<Edge[]>([]);
const [selected, setSelected] = React.useState<number>(0);
const [graphNodes, setGraphNodes] = useState<Node[]>([]);
const [graphEdges, setGraphEdges] = useState<Edge[]>([]);
const [selected, setSelected] = useState<number>(0);
const nodes = useAppSelector((state) => state.meshtastic.nodes);
const myNodeNum = useAppSelector(
(state) => state.meshtastic.radio.hardware.myNodeNum,
);
React.useEffect(() => {
useEffect(() => {
const tmpNodes: Node[] = [];
// User Terminal
tmpNodes.push({
@@ -45,7 +46,7 @@ export const Nodes = (): JSX.Element => {
setGraphNodes(tmpNodes);
}, [nodes, myNodeNum]);
React.useEffect(() => {
useEffect(() => {
const tmpEdges: Edge[] = [];
nodes.map((node, index) => {
@@ -91,6 +92,7 @@ export const Nodes = (): JSX.Element => {
}}
actions={
<IconButton
nested
onClick={(e): void => {
e.stopPropagation();
setSelected(node.number);