-
-
-
- }
-}
+ const onLeaveSession = () => {
+ wsClient.leaveSession();
+ setSessionId(undefined);
+ setChangeToRoute("/index.html");
+ };
-export default App;
\ No newline at end of file
+ return (
+ Just a quick test...
+
-
+
+ );
}
-
diff --git a/src/feature/home/HomePage.tsx b/src/feature/home/HomePage.tsx
index d805248..90cb2b2 100644
--- a/src/feature/home/HomePage.tsx
+++ b/src/feature/home/HomePage.tsx
@@ -1,6 +1,14 @@
import React, { useState } from "react";
import QRCode from "react-qr-code";
-import { IonButton, IonModal } from "@ionic/react";
+import {
+ IonButton,
+ IonContent,
+ IonHeader,
+ IonModal,
+ IonPage,
+ IonToolbar,
+ useIonRouter,
+} from "@ionic/react";
import { ScanClientModal } from "../scan-client/ScanClientModal";
import { IntroSlides } from "../intro-slides/IntroSlides";
@@ -15,6 +23,8 @@ export const HomePage: React.FC = ({
}) => {
const [scanModalOpen, setScanModalOpen] = useState(false);
+ const router = useIonRouter();
+
const closeScannerModal = () => {
console.log("Close scanner");
setScanModalOpen(false);
@@ -24,36 +34,50 @@ export const HomePage: React.FC = ({
if (result) {
closeScannerModal();
onScanClient(result);
+ router.push("session");
}
};
return (
-
+
+
+
+
+
+
+
);
};
diff --git a/src/feature/intro-slides/slides.css b/src/feature/intro-slides/slides.css
index 9008e4b..d53a293 100644
--- a/src/feature/intro-slides/slides.css
+++ b/src/feature/intro-slides/slides.css
@@ -1,12 +1,12 @@
.introSlider {
- margin-bottom: 20px;
+ margin-bottom: 20px;
}
.slideDescription {
- width: 100%;
- margin-bottom: 40px;
+ width: 100%;
+ margin-bottom: 40px;
}
.introSlide img {
- padding: 40px;
-}
\ No newline at end of file
+ padding: 40px;
+}
diff --git a/src/feature/session-actions/OpenWebsiteModal.tsx b/src/feature/session-actions/OpenWebsiteModal.tsx
index 2f357b4..cc27ccc 100644
--- a/src/feature/session-actions/OpenWebsiteModal.tsx
+++ b/src/feature/session-actions/OpenWebsiteModal.tsx
@@ -3,36 +3,43 @@ import React from "react";
import { SessionMessage } from "../session/SessionMessage";
import { SessionActionModal } from "./SessionActionModal";
-export class OpenWebsiteModal extends SessionActionModal<{}, { urlInput: string }> {
-
- state = {
- urlInput: ""
- };
+export class OpenWebsiteModal extends SessionActionModal<
+ {},
+ { urlInput: string }
+> {
+ state = {
+ urlInput: "",
+ };
- onOpenWebsiteClick = () => {
- let id = this.props.wsClient.getId();
- if (this.props.wsClient && id != null) {
- let sessionMsg: SessionMessage = {
- type: "OPEN_WEBSITE",
- text: this.state.urlInput,
- senderId: id,
- senderName: this.props.wsClient.getName()
- };
- this.props.wsClient.sendMessage({
- type: "BroadcastToSession",
- payload: sessionMsg
- });
- }
- this.props.closeModal();
+ onOpenWebsiteClick = () => {
+ let id = this.props.wsClient.getId();
+ if (this.props.wsClient && id != null) {
+ let sessionMsg: SessionMessage = {
+ type: "OPEN_WEBSITE",
+ text: this.state.urlInput,
+ senderId: id,
+ senderName: this.props.wsClient.getName(),
+ };
+ this.props.wsClient.sendMessage({
+ type: "BroadcastToSession",
+ payload: sessionMsg,
+ });
}
+ this.props.closeModal();
+ };
- render() {
- return <> this.setState({ urlInput: e.detail.value! })}>
- Open Website
-
- }
-
-}
\ No newline at end of file
+ render() {
+ return (
+ <>
+ this.setState({ urlInput: e.detail.value! })}
+ >
+ Open Website
+
+ );
+ }
+}
diff --git a/src/feature/session-actions/SessionActionsList.tsx b/src/feature/session-actions/SessionActionsList.tsx
index 8debc96..7ce4683 100644
--- a/src/feature/session-actions/SessionActionsList.tsx
+++ b/src/feature/session-actions/SessionActionsList.tsx
@@ -1,82 +1,107 @@
import React from "react";
-import { globeOutline } from 'ionicons/icons';
+import { globeOutline } from "ionicons/icons";
import { IonIcon, IonModal } from "@ionic/react";
import { OpenWebsiteModal } from "./OpenWebsiteModal";
import { WSClient } from "../../WSClient";
import { SessionActionModal } from "./SessionActionModal";
export interface SessionActionsListProps {
- wsClient: WSClient;
- userIsSessionOwner: boolean;
+ wsClient: WSClient;
+ userIsSessionOwner: boolean;
}
export interface SessionActionsListState {
- actionModalOpen: boolean;
- actionModalComponent?: typeof SessionActionModal;
+ actionModalOpen: boolean;
+ actionModalComponent?: typeof SessionActionModal;
}
export interface SessionActionSummary {
- name: string;
- ionicon: string;
- ownerOnly: boolean;
- modalComponent?: typeof SessionActionModal;
+ name: string;
+ ionicon: string;
+ ownerOnly: boolean;
+ modalComponent?: typeof SessionActionModal;
}
const sessionActions: SessionActionSummary[] = [
- {
- name: "Open Website",
- ionicon: globeOutline,
- ownerOnly: true,
- modalComponent: OpenWebsiteModal
- }
+ {
+ name: "Open Website",
+ ionicon: globeOutline,
+ ownerOnly: true,
+ modalComponent: OpenWebsiteModal,
+ },
];
-export class SessionActionsList extends React.Component {
-
- state: SessionActionsListState = {
- actionModalOpen: false
- };
+export class SessionActionsList extends React.Component<
+ SessionActionsListProps,
+ SessionActionsListState
+> {
+ state: SessionActionsListState = {
+ actionModalOpen: false,
+ };
- render() {
- console.log("User is session owner", this.props.userIsSessionOwner);
- return ;
- wsClient: WSClient;
- onLeaveSession: () => any;
+ sessionId: string | undefined;
+ sessionOwnerId: string | undefined;
+ clientMap: Record;
+ wsClient: WSClient;
+ onLeaveSession: () => any;
}
export interface SessionPageState {
- urlInput: string;
- sessionMessages: SessionMessage[];
+ urlInput: string;
+ sessionMessages: SessionMessage[];
}
-export class SessionPage extends React.Component {
+export class SessionPage extends React.Component<
+ SessionPageProps,
+ SessionPageState
+> {
+ state = {
+ urlInput: "",
+ sessionMessages: [],
+ } as SessionPageState;
- state = {
- urlInput: "",
- sessionMessages: []
- } as SessionPageState;
+ constructor(props: SessionPageProps) {
+ super(props);
+ props.wsClient.addMessageHandler("session_page", this.onWebsocketMessage);
+ }
- constructor(props: SessionPageProps) {
- super(props);
- props.wsClient.addMessageHandler("session_page", this.onWebsocketMessage);
- }
-
- render() {
- return
+ Leave Session
+
+ );
+ }
- onWebsocketMessage = (msg: ServerTypes.Msg) => {
- if (msg.type === "BroadcastFromSession") {
- let payload: SessionMessage = msg.payload;
- if (payload.type && payload.text) {
- let sessionMsgs: SessionMessage[] = [];
- if (this.state.sessionMessages) {
- sessionMsgs = this.state.sessionMessages;
- }
- sessionMsgs.push(payload);
- this.setState({ sessionMessages: sessionMsgs});
- }
- if (msg.senderId !== this.props.wsClient.getId()) {
- if (payload.type === "OPEN_WEBSITE") {
- console.log("Opening url ", payload.text);
- window.open(payload.text, "_blank");
- }
- }
+ onWebsocketMessage = (msg: ServerTypes.Msg) => {
+ if (msg.type === "BroadcastFromSession") {
+ let payload: SessionMessage = msg.payload;
+ if (payload.type && payload.text) {
+ let sessionMsgs: SessionMessage[] = [];
+ if (this.state.sessionMessages) {
+ sessionMsgs = this.state.sessionMessages;
}
+ sessionMsgs.push(payload);
+ this.setState({ sessionMessages: sessionMsgs });
+ }
+ if (msg.senderId !== this.props.wsClient.getId()) {
+ if (payload.type === "OPEN_WEBSITE") {
+ console.log("Opening url ", payload.text);
+ window.open(payload.text, "_blank");
+ }
+ }
}
-
-}
\ No newline at end of file
+ };
+}
diff --git a/src/index.css b/src/index.css
index ec2585e..4a1df4d 100644
--- a/src/index.css
+++ b/src/index.css
@@ -1,13 +1,13 @@
body {
margin: 0;
- font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
- 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
+ font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
+ "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
code {
- font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
+ font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
monospace;
}
diff --git a/src/index.tsx b/src/index.tsx
index d4ec660..b0abd4e 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -1,15 +1,14 @@
-import React from 'react';
-import { createRoot } from 'react-dom/client';
-import './index.css';
-import App from './App';
-import * as serviceWorker from './serviceWorker';
-import '@ionic/react/css/core.css';
-import { setupIonicReact } from '@ionic/react';
+import React from "react";
+import { createRoot } from "react-dom/client";
+import "./index.css";
+import { App } from "./App";
+import * as serviceWorker from "./serviceWorker";
+import "@ionic/react/css/core.css";
+import { setupIonicReact } from "@ionic/react";
setupIonicReact();
-
-const container = document.getElementById('root');
+const container = document.getElementById("root");
const root = createRoot(container!);
root.render(
- 
- 
-
- QR Sync
+ render = () => ( +
+
+
+
+
- )
-
+ QR Sync
+
-
-
-
+
- {ourClientId && (
- <>
- setScanModalOpen(true)}>Open Scanner
-
- Client id {ourClientId}
- - )} -QR Sync
+
+
+
+
+
+ {ourClientId && (
+ <>
+ setScanModalOpen(true)}>
+ Open Scanner
+
+
+ Client id {ourClientId}
+ + )} +Open Website
-Open a website on devices controlled by this session
-Open Website
+Open a website on devices controlled by this session
+
-
- {this.renderModal()}
-
-
- }
+ render() {
+ console.log("User is session owner", this.props.userIsSessionOwner);
+ return (
+ User is session owner? {this.props.userIsSessionOwner ? "yes" : "no"}
- {sessionActions.filter((action) => this.props.userIsSessionOwner || !action.ownerOnly) - .map((action) => this.renderActionButton(action)) - } -
+
+ {this.renderModal()}
+
+
+ );
+ }
- renderActionButton = (action: SessionActionSummary) => {
- return + User is session owner? {this.props.userIsSessionOwner ? "yes" : "no"} +
+ {sessionActions + .filter( + (action) => this.props.userIsSessionOwner || !action.ownerOnly + ) + .map((action) => this.renderActionButton(action))} + this.onActionClicked(action)}
- style={{borderWidth: 1, borderStyle: "solid", borderColor: "white", borderRadius: 20, display: "inline-block"}}
- >
-
- }
+ renderActionButton = (action: SessionActionSummary) => {
+ return (
+ {action.name}
- this.onActionClicked(action)}
+ style={{
+ borderWidth: 1,
+ borderStyle: "solid",
+ borderColor: "white",
+ borderRadius: 20,
+ display: "inline-block",
+ }}
+ >
+
+ );
+ };
- renderModal = () => {
- let ModalComponent = this.state.actionModalComponent;
- if (ModalComponent) {
- return {action.name}
+
- Leave Session
-
- }
+ render() {
+ return (
+ Session Page
-{this.props.sessionId}
-Session Messages
--
- {this.state.sessionMessages.map((sessionMsg) => (
- {sessionMsg.text} ))} -
Session Actions:
-Session Page
+{this.props.sessionId}
+Session Messages
+-
+ {this.state.sessionMessages.map((sessionMsg) => (
+
- {sessionMsg.text} + ))} +