Added toast notification for party joining

2020-10-27 18:25:50 +11:00 · 2020-10-27 18:25:50 +11:00 · 1d3443414e
commit 1d3443414e
parent a9c45ff4fa
7 changed files with 125 additions and 57 deletions
--- a/package.json
+++ b/package.json
@ -36,6 +36,7 @@
    "react-scripts": "3.4.0",
    "react-select": "^3.1.0",
    "react-spring": "^8.0.27",
+    "react-toast-notifications": "^2.4.0",
    "react-use-gesture": "^7.0.15",
    "shortid": "^2.2.15",
    "simple-peer": "feross/simple-peer#694/head",
--- a/src/App.js
+++ b/src/App.js
@ -19,6 +19,8 @@ import { MapLoadingProvider } from "./contexts/MapLoadingContext";
 import { SettingsProvider } from "./contexts/SettingsContext";
 import { KeyboardProvider } from "./contexts/KeyboardContext";

+import { ToastProvider } from "./components/Toast";
+
 function App() {
  return (
    <ThemeProvider theme={theme}>
@ -26,38 +28,40 @@ function App() {
        <SettingsProvider>
          <AuthProvider>
            <KeyboardProvider>
-              <Router>
-                <Switch>
-                  <Route path="/donate">
-                    <Donate />
-                  </Route>
-                  {/* Legacy support camel case routes */}
-                  <Route path={["/howTo", "/how-to"]}>
-                    <HowTo />
-                  </Route>
-                  <Route path={["/releaseNotes", "/release-notes"]}>
-                    <ReleaseNotes />
-                  </Route>
-                  <Route path="/about">
-                    <About />
-                  </Route>
-                  <Route path="/faq">
-                    <FAQ />
-                  </Route>
-                  <Route path="/game/:id">
-                    <MapLoadingProvider>
-                      <MapDataProvider>
-                        <TokenDataProvider>
-                          <Game />
-                        </TokenDataProvider>
-                      </MapDataProvider>
-                    </MapLoadingProvider>
-                  </Route>
-                  <Route path="/">
-                    <Home />
-                  </Route>
-                </Switch>
-              </Router>
+              <ToastProvider>
+                <Router>
+                  <Switch>
+                    <Route path="/donate">
+                      <Donate />
+                    </Route>
+                    {/* Legacy support camel case routes */}
+                    <Route path={["/howTo", "/how-to"]}>
+                      <HowTo />
+                    </Route>
+                    <Route path={["/releaseNotes", "/release-notes"]}>
+                      <ReleaseNotes />
+                    </Route>
+                    <Route path="/about">
+                      <About />
+                    </Route>
+                    <Route path="/faq">
+                      <FAQ />
+                    </Route>
+                    <Route path="/game/:id">
+                      <MapLoadingProvider>
+                        <MapDataProvider>
+                          <TokenDataProvider>
+                            <Game />
+                          </TokenDataProvider>
+                        </MapDataProvider>
+                      </MapLoadingProvider>
+                    </Route>
+                    <Route path="/">
+                      <Home />
+                    </Route>
+                  </Switch>
+                </Router>
+              </ToastProvider>
            </KeyboardProvider>
          </AuthProvider>
        </SettingsProvider>
--- a/src/components/Banner.js
+++ b/src/components/Banner.js
@ -10,7 +10,7 @@ function Banner({ isOpen, onRequestClose, children, allowClose }) {
      isOpen={isOpen}
      onRequestClose={onRequestClose}
      style={{
-        overlay: { bottom: "0", top: "initial" },
+        overlay: { bottom: "0", top: "initial", zIndex: 2000 },
        content: {
          backgroundColor: theme.colors.highlight,
          color: "hsl(210, 50%, 96%)",
--- a/src/components/Toast.js
+++ b/src/components/Toast.js
@ -0,0 +1,31 @@
+import React from "react";
+import { Box, Text } from "theme-ui";
+import { ToastProvider as DefaultToastProvider } from "react-toast-notifications";
+
+function CustomToast({ children }) {
+  return (
+    <Box
+      m={2}
+      mb={0}
+      bg="overlay"
+      sx={{ borderRadius: "4px", padding: "12px 16px" }}
+    >
+      <Text as="p" variant="body2">
+        {children}
+      </Text>
+    </Box>
+  );
+}
+
+export function ToastProvider({ children }) {
+  return (
+    <DefaultToastProvider
+      components={{ Toast: CustomToast }}
+      autoDismiss={true}
+      autoDismissTimeout={2000}
+      placement="bottom-center"
+    >
+      {children}
+    </DefaultToastProvider>
+  );
+}
--- a/src/network/NetworkedParty.js
+++ b/src/network/NetworkedParty.js
@ -1,4 +1,5 @@
 import React, { useContext, useState, useEffect, useCallback } from "react";
+import { useToasts } from "react-toast-notifications";

 // Load session for auto complete
 // eslint-disable-next-line no-unused-vars
@ -29,6 +30,8 @@ function NetworkedParty({ gameId, session }) {
  const [diceRolls, setDiceRolls] = useState([]);
  const [partyDiceRolls, setPartyDiceRolls] = useState({});

+  const { addToast } = useToasts();
+
  const [shareDice, setShareDice] = useSetting("dice.shareDice");

  function handleNicknameChange(newNickname) {
@ -140,12 +143,22 @@ function NetworkedParty({ gameId, session }) {
    }

    function handlePeerDisconnect({ peer }) {
+      if (partyNicknames[peer.id]) {
+        addToast(`${partyNicknames[peer.id]} Left the Party`);
+      }
      setPartyNicknames((prevNicknames) => omit(prevNicknames, [peer.id]));
      setPartyTimers((prevTimers) => omit(prevTimers, [peer.id]));
    }

-    function handlePeerData({ id, data }) {
+    function handlePeerData({ id, data, peer }) {
      if (id === "nickname") {
+        if (!peer.initiator) {
+          for (let peerId in data) {
+            if (!(peerId in partyNicknames)) {
+              addToast(`${data[peerId]} Joined the Party`);
+            }
+          }
+        }
        setPartyNicknames((prevNicknames) => ({
          ...prevNicknames,
          ...data,
@ -204,7 +217,16 @@ function NetworkedParty({ gameId, session }) {
      session.off("trackAdded", handlePeerTrackAdded);
      session.off("trackRemoved", handlePeerTrackRemoved);
    };
-  }, [session, nickname, stream, timer, shareDice, diceRolls]);
+  }, [
+    session,
+    nickname,
+    stream,
+    timer,
+    shareDice,
+    diceRolls,
+    partyNicknames,
+    addToast,
+  ]);

  useEffect(() => {
    if (stream) {
@ -223,25 +245,27 @@ function NetworkedParty({ gameId, session }) {
  }, [stream, handleStreamEnd]);

  return (
-    <Party
-      gameId={gameId}
-      onNicknameChange={handleNicknameChange}
-      onStreamStart={handleStreamStart}
-      onStreamEnd={handleStreamEnd}
-      nickname={nickname}
-      partyNicknames={partyNicknames}
-      stream={stream}
-      partyStreams={partyStreams}
-      timer={timer}
-      partyTimers={partyTimers}
-      onTimerStart={handleTimerStart}
-      onTimerStop={handleTimerStop}
-      shareDice={shareDice}
-      onShareDiceChage={handleShareDiceChange}
-      diceRolls={diceRolls}
-      onDiceRollsChange={handleDiceRollsChange}
-      partyDiceRolls={partyDiceRolls}
-    />
+    <>
+      <Party
+        gameId={gameId}
+        onNicknameChange={handleNicknameChange}
+        onStreamStart={handleStreamStart}
+        onStreamEnd={handleStreamEnd}
+        nickname={nickname}
+        partyNicknames={partyNicknames}
+        stream={stream}
+        partyStreams={partyStreams}
+        timer={timer}
+        partyTimers={partyTimers}
+        onTimerStart={handleTimerStart}
+        onTimerStop={handleTimerStop}
+        shareDice={shareDice}
+        onShareDiceChage={handleShareDiceChange}
+        diceRolls={diceRolls}
+        onDiceRollsChange={handleDiceRollsChange}
+        partyDiceRolls={partyDiceRolls}
+      />
+    </>
  );
 }

--- a/src/theme.js
+++ b/src/theme.js
@ -8,7 +8,7 @@ export default {
    purple: "hsl(290, 100%, 80%)",
    muted: "hsla(230, 20%, 0%, 20%)",
    gray: "hsl(0, 0%, 70%)",
-    overlay: "hsla(230, 25%, 18%, 0.8)",
+    overlay: "hsla(230, 25%, 15%, 80%)",
    border: "hsla(210, 50%, 96%, 0.5)",
    modes: {
      light: {
@ -18,7 +18,7 @@ export default {
        secondary: "hsl(290, 100%, 80%)",
        highlight: "hsl(260, 20%, 40%)",
        muted: "hsla(230, 20%, 60%, 20%)",
-        overlay: "hsla(230, 100%, 97%, 0.8)",
+        overlay: "hsla(230, 100%, 97%, 80%)",
        border: "hsla(10, 20%, 20%, 0.5)",
      },
    },
--- a/yarn.lock
+++ b/yarn.lock
@ -1227,7 +1227,7 @@
    "@emotion/sheet" "0.9.4"
    "@emotion/utils" "0.11.3"

-"@emotion/core@^10.0.9":
+"@emotion/core@^10.0.14", "@emotion/core@^10.0.9":
  version "10.0.35"
  resolved "https://registry.yarnpkg.com/@emotion/core/-/core-10.0.35.tgz#513fcf2e22cd4dfe9d3894ed138c9d7a859af9b3"
  integrity sha512-sH++vJCdk025fBlRZSAhkRlSUoqSqgCzYf5fMOmqqi3bM6how+sQpg3hkgJonj8GxXM4WbD7dRO+4tegDB9fUw==
@ -9934,6 +9934,14 @@ react-spring@^8.0.27:
    "@babel/runtime" "^7.3.1"
    prop-types "^15.5.8"

+react-toast-notifications@^2.4.0:
+  version "2.4.0"
+  resolved "https://registry.yarnpkg.com/react-toast-notifications/-/react-toast-notifications-2.4.0.tgz#6213730bd1fe158fc01aeef200687ea94c5c5b24"
+  integrity sha512-8tkrbNh7LxkiFmtqAL/AiI55efIeI+fBk3c6ImsiZ0VObb4yvOq0cqYuJHyUiv9fuD2aBxvXGVH+n4Snt8qoWA==
+  dependencies:
+    "@emotion/core" "^10.0.14"
+    react-transition-group "^4.3.0"
+
 react-transition-group@^4.3.0:
  version "4.4.1"
  resolved "https://registry.yarnpkg.com/react-transition-group/-/react-transition-group-4.4.1.tgz#63868f9325a38ea5ee9535d828327f85773345c9"