Release/0.0.22 (#50)

* Fetch device code
* Device code token retrieved
* Add QR code
* Add WS auth

---------

Co-authored-by: micahg <[email protected]>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@micahg/ntt",
-  "version": "0.0.21",
+  "version": "0.0.22",
   "files": [
     "build"
   ],
@@ -22,6 +22,7 @@
     "@types/react": "^18.2.18",
     "@types/react-dom": "^18.2.7",
     "axios": "^1.4.0",
+    "qrcode": "^1.5.3",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-redux": "^8.1.2",
@@ -59,6 +60,7 @@
     "@babel/preset-env": "^7.22.9",
     "@babel/preset-typescript": "^7.22.5",
     "@types/dom-screen-wake-lock": "^1.0.1",
+    "@types/qrcode": "^1.5.2",
     "babel-jest": "^29.6.2"
   }
 }

src/components/ContentEditor/ContentEditor.tsx

@@ -43,7 +43,7 @@ const ContentEditor = ({populateToolbar, redrawToolbar}: ContentEditorProps) =>
   const [showOpacityMenu, setShowOpacityMenu] = useState<boolean>(false);
   const [showOpacitySlider, setShowOpacitySlider] = useState<boolean>(false);
   const [backgroundSize, setBackgroundSize] = useState<number[]|null>(null);
-  const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
+  const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
 
   /**
    * THIS GUY RIGHT HERE IS REALLY IMPORTANT. Because we use a callback to render
@@ -53,7 +53,7 @@ const ContentEditor = ({populateToolbar, redrawToolbar}: ContentEditorProps) =>
    * To avoid rerendering we start with this flag false until we've triggered and
    * ensure any relevant useEffect calls depend on its truth.
    */
-  const [toolbarPopulated, setToolbarPopulated] = React.useState<boolean>(false);
+  const [toolbarPopulated, setToolbarPopulated] = useState<boolean>(false);
 
   const auth = useSelector((state: AppReducerState) => state.environment.auth);
   const background = useSelector((state: AppReducerState) => state.content.background);

src/components/DeviceCodeComponent/DeviceCodeComponent.lazy.tsx

@@ -0,0 +1,11 @@
+import React, { lazy, Suspense } from 'react';
+
+const LazyDeviceCodeComponent = lazy(() => import('./DeviceCodeComponent'));
+
+const DeviceCodeComponent = (props: JSX.IntrinsicAttributes & { children?: React.ReactNode; }) => (
+  <Suspense fallback={null}>
+    <LazyDeviceCodeComponent {...props} />
+  </Suspense>
+);
+
+export default DeviceCodeComponent;

src/components/DeviceCodeComponent/DeviceCodeComponent.test.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom/extend-expect';
+import DeviceCodeComponent from './DeviceCodeComponent';
+
+describe('<DeviceCodeComponent />', () => {
+  test('it should mount', () => {
+    render(<DeviceCodeComponent />);
+
+    const deviceCodeComponent = screen.getByTestId('DeviceCodeComponent');
+
+    expect(deviceCodeComponent).toBeInTheDocument();
+  });
+});