useNTState doesn't appear to be working

[fisherjacobc]

Hello there! I am attempting to build a dashboard with the help of this library. For whatever reason, when I try and update the value of something, the react app disconnects and then reconnects.

I am running a simulated robot through WPI's robot simulation tools. Here's the error I am getting.
NT: DISCONNECTED NT4 client '1700087460502@1' (from 127.0.0.1:61606): binary decode error: mpack_error_type

The key is correctly typed and does show up in the robot simulation GUI showing the initial value.

Side note!
The latest version didn't actually publish the code onto NPM (see https://www.npmjs.com/package/ntcore-react?activeTab=code), so I had to install the latest version from git directly.

[CrispyBacon1999]

Any chance you can post the code you're using? Particularly for the actual connection with the NTProvider component.

Also idk how I never noticed that the code has been broken on npm this entire time, but I'll try to get that fixed as well. For now, you should be able to pin the version to 1.1.0 and be fine, since as far as I know, there's no major differences between 1.1.1 and 1.1.0 other than being a different release format.

[fisherjacobc]

I had been using 1.1.0 but updated to 1.1.1 via github in case that might've resolved my issue. I can put the relevant files here:

main.tsx (the relevant env variable is set to "DEVELOPMENT")

import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App'
import './assets/index.css'
import { NTProvider } from 'ntcore-react'

ReactDOM.createRoot(document.getElementById('root')!).render(
  <React.StrictMode>
    {import.meta.env.RENDERER_VITE_NT === "DEVELOPMENT" && <NTProvider uri="127.0.0.1" port={5810}>
      <App />
    </NTProvider>}
    {import.meta.env.RENDERER_VITE_NT !== "DEVELOPMENT" && <NTProvider teamNumber={import.meta.env.RENDERER_VITE_NT}>
      <App />
    </NTProvider>}
  </React.StrictMode>,
)

The dashboard component with the useNTState that is having the issue

import { NetworkTablesTypeInfos } from "ntcore-ts-client";
import { useNTState, useNTValue } from "ntcore-react"

export default function Dashboard2023(): JSX.Element {
    const currentGear = useNTValue<"Gear 1" | "Gear 2" | "Gear 3">("/kilroy/drive/currentGear", NetworkTablesTypeInfos.kString, "Gear 1");
    const inReverse = useNTValue<boolean>("/kilroy/drive/inReverse", NetworkTablesTypeInfos.kBoolean, false);
    const eBrakeEngaged = useNTValue<boolean>("/kilroy/drive/eBrakeEngaged", NetworkTablesTypeInfos.kBoolean, false);

    const autonomousDisabled = useNTValue<boolean>("/kilroy/autonomous/disabled", NetworkTablesTypeInfos.kBoolean, false);
    const [autonomousMode, setAutonomousMode] = useNTState<number>("/kilroy/autonomous/mode", NetworkTablesTypeInfos.kInteger, 0);
    enum LeftRightNone {
        Left = -1,
        None = 0,
        Right = 1
    }
    const [leftRightNone, setLeftRightNone] = useNTState<LeftRightNone>("/kilroy/autonomous/left-right-none", NetworkTablesTypeInfos.kInteger, LeftRightNone.None);

    return (
        <>
            <h1 className="text-center text-5xl text-orange-500 tracking-wider font-black">Kilroy 339</h1>
            <div>
                <span className="text-3xl font-bold">Gears</span>
                <div className="h-full w-full bg-gray-400 rounded-md bg-clip-padding p-4 mt-2 backdrop-filter backdrop-blur-lg bg-opacity-25 border border-gray-100">
                    <span className={`text-2xl px-4 font-semibold ${inReverse ? "text-green-500" : "text-neutral-400"}`}>Reverse</span>
                    <span className={`text-2xl px-4 font-semibold ${!inReverse && currentGear == "Gear 1" ? "text-green-500" : "text-neutral-400"}`}>Gear 1</span>
                    <span className={`text-2xl px-4 font-semibold ${!inReverse && currentGear == "Gear 2" ? "text-green-500" : "text-neutral-400"}`}>Gear 2</span>
                    <span className={`text-2xl px-4 font-semibold ${!inReverse && currentGear == "Gear 3" ? "text-green-500" : "text-neutral-400"}`}>Gear 3</span>
                </div>
            </div>
            <div>
                <span className="text-3xl font-bold">E-Brake Engaged</span>
                <div className="h-full w-full bg-gray-400 rounded-md bg-clip-padding p-4 mt-2 backdrop-filter backdrop-blur-lg bg-opacity-25 border border-gray-100">
                   <div className={`h-20 w-20 rounded-full ${eBrakeEngaged ? "bg-green-500 shadow-[0_0_1px_#fff,inset_0_0_1px_#fff,0_0_5px_#0f8,0_0_5px_#0f8,0_0_20px_#0f8]" : "bg-neutral-400 border-4 border-neutral-500"}`}/>
                </div>
            </div>
            <div className="mt-2">
                <span className="text-3xl font-bold">Autonomous</span>
                <div className="h-full w-full bg-gray-400 rounded-md bg-clip-padding p-4 mt-2 backdrop-filter backdrop-blur-lg bg-opacity-25 border border-gray-100">
                    <div>
                        <span className={`text-2xl px-4 font-semibold ${autonomousDisabled ? "text-neutral-300" : "text-red-500"}`}>Disabled</span>
                        <span className={`text-2xl px-4 font-semibold ${autonomousDisabled ? "text-green-500" : "text-neutral-300"}`}>Enabled</span>
                    </div>
                    <div>
                        <span className="text-2xl font-bold">Autonomous Mode</span>
                        <br />
                        <select name="autoSelector" id="autoSelector" value={autonomousMode} className="bg-neutral-900 rounded-md text-2xl px-4 font-semibold" onChange={(e): void => setAutonomousMode(e.target.value as unknown as number)}>
                            <option value={0}>Drive Forward Only</option>
                            <option value={1}>Drive Turn Drive</option>
                            <option value={2}>Drive Over Charging Station</option>
                            <option value={3}>Drop Cube Drive Forward</option>
                        </select>
                    </div>
                    <div>
                        <span className="text-2xl font-bold">Left-Right-None Setting</span>
                        <br />
                        <select name="autoSelector" id="autoSelector" value={leftRightNone} className="bg-neutral-900 rounded-md text-2xl px-4 font-semibold" onChange={(e): void => setLeftRightNone(e.target.value as unknown as LeftRightNone)}>
                            <option value={LeftRightNone.Left}>Left</option>
                            <option value={LeftRightNone.Right}>Right</option>
                            <option value={LeftRightNone.None}>None</option>
                        </select>
                    </div>
                </div>
            </div>
        </>
    )
}

Video showing what happens:
https://micro.sylo.digital/v/gKSPTK

As for NPM, should just be as simple as unpublishing 1.1.1 and then republishing 1.1.1 with the code

[CrispyBacon1999]

I can't seem to reproduce this locally. I tried both useNTValue and useNTState and both worked fine for me. I also tried using both values that are already announced, along with ones that aren't to see if creating a new one/modifying an existing one was the issue and both of those worked fine as well. I'm going to pass this issue up to the parent package since it seems like an issue on that end more than with this package. cjlawson02/ntcore-ts#111

[fisherjacobc]

Alright, if you get a chance, I just populated the source code into FIRST-TEAM-339/kilroy-dashboard which contains all the source code.

Just a couple notes:

• It's using electron-vite but all you need to know about that is just run pnpm dev or npm run dev after you install the packages
• Make sure you rename example.env to .env and just fill that variable as DEVELOPMENT unless you happen to have a live robot wherever you are currently at (then put the team #)

[fisherjacobc]

Hey there! I am wondering if you are able to updated to the most recent version of ntcore-ts-client, version 2.0.0-beta.2

[CrispyBacon1999]

Working on getting it updated, looks like there's a publishing issue in the parent package though that realistically needs to be resolved first (unless I add a bunch of extra dependencies on my end).

[fisherjacobc]

what kind of issues are there? When I made a fork of this there were some errors but I quickly resolved them, however there were some other publishing issues

[CrispyBacon1999]

The biggest issue is that none of the dependencies for it are included in the package.json, so all of them need to be manually installed.

[fisherjacobc]

Ohhh I checked the package.json of the latest version, and I see what you mean. That's the same issues I was experiencing. I will see if I can figure out a solution to this and post it in the issue on the parent repo

[cjlawson02]

Fixed the publishing issue. Once we verify we have all the fixes we need, I'll take this out of next and move it to latest