Commit c907d520 authored by Grant's avatar Grant
Browse files

add connection status, version comparing, not hardlocking until config being... 

add connection status, version comparing, not hardlocking until config being sent (fixes #27) (related #23)
parent eb735976

package-lock.json

+21 −0
Original line number Diff line number Diff line
@@ -12674,6 +12674,26 @@ 
        "react": "^16.8.0 || ^17.0.0 || ^18.0.0"

      }

    },

    "node_modules/react-toastify": {

      "version": "10.0.5",

      "resolved": "https://registry.npmjs.org/react-toastify/-/react-toastify-10.0.5.tgz",

      "integrity": "sha512-mNKt2jBXJg4O7pSdbNUfDdTsK9FIdikfsIE/yUCxbAEXl4HMyJaivrVFcn3Elvt5xvCQYhUZm+hqTIu1UXM3Pw==",

      "dependencies": {

        "clsx": "^2.1.0"

      },

      "peerDependencies": {

        "react": ">=18",

        "react-dom": ">=18"

      }

    },

    "node_modules/react-toastify/node_modules/clsx": {

      "version": "2.1.1",

      "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz",

      "integrity": "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==",

      "engines": {

        "node": ">=6"

      }

    },

    "node_modules/react-zoom-pan-pinch": {

      "version": "3.4.2",

      "resolved": "https://registry.npmjs.org/react-zoom-pan-pinch/-/react-zoom-pan-pinch-3.4.2.tgz",
@@ -16005,6 +16025,7 @@ 
        "prop-types": "^15.8.1",

        "react": "^18.2.0",

        "react-dom": "^18.2.0",

        "react-toastify": "^10.0.5",

        "react-zoom-pan-pinch": "^3.4.1",

        "socket.io-client": "^4.7.4"

      },

packages/client/package.json

+1 −0
Original line number Diff line number Diff line
@@ -29,6 +29,7 @@ 
    "prop-types": "^15.8.1",

    "react": "^18.2.0",

    "react-dom": "^18.2.0",

    "react-toastify": "^10.0.5",

    "react-zoom-pan-pinch": "^3.4.1",

    "socket.io-client": "^4.7.4"

  },

packages/client/src/components/App.tsx

+24 −8
Original line number Diff line number Diff line
@@ -8,14 +8,37 @@ import { ToolbarWrapper } from "./Toolbar/ToolbarWrapper"; 
import React, { lazy, useEffect } from "react";

import { ChatContext } from "../contexts/ChatContext";



import "react-toastify/dist/ReactToastify.css";

import { ToastContainer } from "react-toastify";



const Chat = lazy(() => import("./Chat/Chat"));



console.log("Client init with version " + __COMMIT_HASH__);



const DynamicallyLoadChat = () => {

  const { loadChat } = useAppContext();



  return <React.Suspense>{loadChat && <Chat />}</React.Suspense>;

};



// get access to context data

const AppInner = () => {

  return (

    <>

      <Header />

      <CanvasWrapper />

      <ToolbarWrapper />



      {/* <DynamicallyLoadChat /> */}



      <DebugModal />

      <SettingsSidebar />



      <ToastContainer position="top-left" />

    </>

  );

};



const App = () => {

  useEffect(() => {

    // detect auth callback for chat, regardless of it being loaded
@@ -113,14 +136,7 @@ const App = () => { 
    <AppContext>

      <ChatContext>

        <TemplateContext>

          <Header />

          <CanvasWrapper />

          <ToolbarWrapper />



          {/* <DynamicallyLoadChat /> */}



          <DebugModal />

          <SettingsSidebar />

          <AppInner />

        </TemplateContext>

      </ChatContext>

    </AppContext>

packages/client/src/components/CanvasWrapper.tsx

+4 −2
Original line number Diff line number Diff line
@@ -10,11 +10,13 @@ import { Template } from "./Template"; 
import { IRouterData, Router } from "../lib/router";



export const CanvasWrapper = () => {

  const { config } = useAppContext();

  // to prevent safari from blurring things, use the zoom css property



  return (

    <main>

      <PanZoomWrapper>

        <Template />

        {config && <Template />}

        <CanvasInner />

      </PanZoomWrapper>

    </main>
@@ -31,7 +33,7 @@ const CanvasInner = () => { 
  }, [PanZoom]);



  useEffect(() => {

    if (!config.canvas || !canvasRef.current) return;

    if (!config?.canvas || !canvasRef.current) return;

    const canvas = canvasRef.current!;

    const canvasInstance = new Canvas(config, canvas, PanZoom);

    const initAt = Date.now();

packages/client/src/components/Header.tsx

+10 −2
Original line number Diff line number Diff line 
import { Button } from "@nextui-org/react";

import { Button, Card, CardBody } from "@nextui-org/react";

import { useAppContext } from "../contexts/AppContext";

import { User } from "./Header/User";

import { Debug } from "@sc07-canvas/lib/src/debug";
@@ -13,12 +13,20 @@ const DynamicChat = () => { 
};



export const Header = () => {

  const { setSettingsSidebar } = useAppContext();

  const { setSettingsSidebar, connected } = useAppContext();



  return (

    <header id="main-header">

      <div></div>

      <div className="spacer"></div>

      {!connected && (

        <div>

          <Card>

            <CardBody>Disconnected</CardBody>

          </Card>

        </div>

      )}

      <div className="spacer"></div>

      <div className="box">

        <User />

        <Button onClick={() => setSettingsSidebar(true)}>Settings</Button>