Adding Trivia (#2)

* Working on Trivia app

* Reworking Trivia

* Working on Trivia app, hooking up to external server

* Handling vote stuff with push

* Remove .env

* Hook up to env

* Working on category hookup

* Hooking things up

* Improving bar, more space, etc

* Shuffle the answers

* Fixing bug with onClose on Trivia

* Some cleanup

* Update dev deps

* Upgrade deps

Author: mirshko

.env

@@ -25,6 +25,7 @@ yarn-debug.log*
 yarn-error.log*
 
 # local env files
+.env
 .env.local
 .env.development.local
 .env.test.local

.gitignore

@@ -2,7 +2,10 @@ import { forwardRef, SelectHTMLAttributes } from "react";
 import { ChevronDown } from "react-feather";
 
 interface Props extends SelectHTMLAttributes<HTMLSelectElement> {
-  options: string[];
+  options: {
+    value: any;
+    label: string;
+  }[];
 }
 
 const Select = forwardRef<HTMLSelectElement, Props>(function SelectElement(
@@ -17,8 +20,8 @@ const Select = forwardRef<HTMLSelectElement, Props>(function SelectElement(
         {...rest}
       >
         {options.map((option) => (
-          <option key={option} value={option}>
-            {option}
+          <option key={option.value} value={option.value}>
+            {option.label}
           </option>
         ))}
       </select>

components/inputs/select.tsx

@@ -0,0 +1,26 @@
+import { RoomServiceProvider } from "@roomservice/react";
+import { useSession, useSoapboxRoomId } from "../hooks";
+import { AuthFunction } from "../lib/roomservice";
+import LoadingView from "../views/loading";
+
+export default function RoomService({ children }) {
+  const soapboxRoomId = useSoapboxRoomId();
+
+  const user = useSession();
+
+  const isOnline = user !== null && soapboxRoomId !== null;
+
+  return (
+    <RoomServiceProvider
+      online={isOnline}
+      clientParameters={{
+        auth: AuthFunction,
+        ctx: {
+          userID: String(user?.id),
+        },
+      }}
+    >
+      {isOnline ? children : <LoadingView />}
+    </RoomServiceProvider>
+  );
+}

components/roomService.tsx

@@ -1,6 +1,7 @@
 import { getUser, User } from "@soapboxsocial/minis.js";
 import { useRouter } from "next/router";
 import { useEffect, useRef, useState } from "react";
+import useSWR from "swr";
 
 export function useSession() {
   const [user, userSet] = useState<User>(null);
@@ -60,3 +61,29 @@ export function useInterval(callback: Function, delay: number) {
     }
   }, [delay]);
 }
+
+const getTriviaCategories = async () => {
+  type Data = {
+    trivia_categories: {
+      id: number;
+      name: string;
+    }[];
+  };
+
+  const r = await fetch(`https://opentdb.com/api_category.php`);
+
+  const { trivia_categories }: Data = await r.json();
+
+  const cleaned = trivia_categories.map((val) => ({
+    label: val.name.replace("Entertainment: ", "").replace("Science: ", ""),
+    value: val.id.toString(),
+  }));
+
+  return cleaned;
+};
+
+export function useTriviaCategories() {
+  const { data } = useSWR("TriviaCategories", getTriviaCategories);
+
+  return data;
+}

hooks.ts

@@ -8,25 +8,30 @@
     "start": "next start"
   },
   "dependencies": {
+    "@harelpls/use-pusher": "^7.2.1",
     "@roomservice/react": "^1.0.6",
     "@soapboxsocial/minis.js": "^2.2.1",
     "classnames": "^2.2.6",
-    "framer-motion": "^3.8.1",
+    "dompurify": "^2.2.7",
+    "framer-motion": "^4.0.3",
+    "lodash.shuffle": "^4.2.0",
     "mitt": "^2.1.0",
-    "next": "10.0.6",
-    "react": "17.0.1",
-    "react-dom": "17.0.1",
+    "next": "^10.0.9",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
     "react-feather": "^2.0.9",
-    "react-hook-form": "^6.15.1",
-    "react-use": "^17.1.1"
+    "react-hook-form": "^6.15.5",
+    "react-use": "^17.2.1",
+    "swr": "^0.5.4"
   },
   "devDependencies": {
     "@types/classnames": "^2.2.11",
-    "@types/node": "^14.14.27",
-    "@types/react": "^17.0.1",
-    "autoprefixer": "^10.2.4",
-    "postcss": "^8.2.6",
-    "tailwindcss": "^2.0.3",
-    "typescript": "^4.1.5"
+    "@types/lodash.shuffle": "^4.2.6",
+    "@types/node": "^14.14.35",
+    "@types/react": "^17.0.3",
+    "autoprefixer": "^10.2.5",
+    "postcss": "^8.2.8",
+    "tailwindcss": "^2.0.4",
+    "typescript": "^4.2.3"
   }
 }

package.json

@@ -0,0 +1,15 @@
+import { PusherProvider, PusherProviderProps } from "@harelpls/use-pusher";
+import TriviaView from "../../views/trivia";
+
+const config: PusherProviderProps = {
+  clientKey: process.env.NEXT_PUBLIC_PUSHER_CLIENT_KEY,
+  cluster: "eu",
+};
+
+export default function Trivia() {
+  return (
+    <PusherProvider {...config}>
+      <TriviaView />
+    </PusherProvider>
+  );
+}

pages/trivia/.gitkeep

@@ -0,0 +1,226 @@
+import { useChannel, useEvent } from "@harelpls/use-pusher";
+import { onClose } from "@soapboxsocial/minis.js";
+import cn from "classnames";
+import DOMPurify from "dompurify";
+import shuffle from "lodash.shuffle";
+import { ChangeEvent, useCallback, useEffect, useMemo, useState } from "react";
+import Button from "../../components/inputs/button";
+import Select from "../../components/inputs/select";
+import { useParams, useSoapboxRoomId, useTriviaCategories } from "../../hooks";
+import LoadingView from "../loading";
+
+export type Question = {
+  category: string;
+  correct_answer: string;
+  difficulty: "easy" | "medium" | "hard";
+  incorrect_answers: string[];
+  question: string;
+  type: "boolean" | "multiple";
+};
+
+const SERVER_BASE = process.env.NEXT_PUBLIC_APPS_SERVER_BASE_URL as string;
+
+export default function TriviaView() {
+  const { isAppOpener } = useParams();
+
+  const soapboxRoomId = useSoapboxRoomId();
+
+  const channelName = `mini-trivia-${soapboxRoomId}`;
+  const channel = useChannel(channelName);
+
+  const categories = useTriviaCategories();
+
+  const [category, categorySet] = useState<string>("all");
+
+  const handleSelect = (event: ChangeEvent<HTMLSelectElement>) =>
+    categorySet(event.target.value);
+
+  const [activeQuestion, activeQuestionSet] = useState<Question>();
+
+  useEvent(channel, "question", (data: { question: Question }) => {
+    console.log("Received 'question' event with payload", data);
+
+    activeQuestionSet(data.question);
+  });
+
+  const questions = useMemo(() => {
+    if (activeQuestion)
+      return shuffle([
+        activeQuestion.correct_answer,
+        ...activeQuestion.incorrect_answers,
+      ]);
+
+    return null;
+  }, [activeQuestion]);
+
+  const init = useCallback(async () => {
+    console.log("[init]");
+
+    try {
+      await fetch(
+        `${SERVER_BASE}/trivia/${soapboxRoomId}/setup?category=${category}`
+      );
+    } catch (error) {
+      console.error(error);
+    }
+  }, [category, soapboxRoomId]);
+
+  const [votedAnswer, votedAnswerSet] = useState<string>(null);
+
+  useEffect(() => {
+    if (typeof votedAnswer === "string") votedAnswerSet(null);
+  }, [activeQuestion]);
+
+  const [votes, votesSet] = useState<string[]>([]);
+
+  useEvent(channel, "vote", (data: { votes: string[] }) => {
+    console.log("Received 'vote' event with payload", data);
+
+    votesSet(data.votes);
+  });
+
+  const voteOnQuestion = (answer: string) => async () => {
+    votedAnswerSet(answer);
+
+    await fetch(`${SERVER_BASE}/trivia/${soapboxRoomId}/vote`, {
+      method: "POST",
+      body: JSON.stringify({ vote: answer }),
+      headers: { "Content-Type": "application/json" },
+    });
+  };
+
+  const calcVoteCount = (answer: string) =>
+    votes.filter((vote) => vote === answer).length;
+
+  /**
+   * Mini Cleanup
+   */
+
+  const [isMiniClosed, isMiniClosedSet] = useState(false);
+
+  useEffect(() => {
+    onClose(async () => {
+      isMiniClosedSet(true);
+
+      activeQuestionSet(null);
+      votedAnswerSet(null);
+      categorySet("all");
+      votesSet([]);
+
+      await fetch(`${SERVER_BASE}/trivia/${soapboxRoomId}/reset`);
+    });
+  }, []);
+
+  if (!activeQuestion && isAppOpener && categories) {
+    return (
+      <main className="flex flex-col min-h-screen select-none">
+        <div className="pt-4 px-4">
+          <div className="relative">
+            <h1 className="text-title2 font-bold text-center">Trivia</h1>
+          </div>
+        </div>
+
+        <div className="flex-1 p-4 flex flex-col">
+          <div className="flex-1">
+            <label className="flex mb-2" htmlFor="category">
+              <span className="text-body">Choose a category</span>
+            </label>
+
+            <Select
+              id="category"
+              onChange={handleSelect}
+              value={category}
+              options={[{ label: "All", value: "all" }, ...categories]}
+            />
+          </div>
+
+          <div className="pt-4">
+            <Button onClick={init}>Start a round</Button>
+          </div>
+        </div>
+      </main>
+    );
+  }
+
+  if (activeQuestion)
+    return (
+      <main className="flex flex-col min-h-screen select-none relative">
+        <Timer />
+
+        <div className="flex-1 px-4 flex items-center justify-center">
+          <p
+            className="text-body font-bold text-center break-words"
+            dangerouslySetInnerHTML={{
+              __html: DOMPurify.sanitize(activeQuestion.question),
+            }}
+          />
+        </div>
+
+        <div className="px-4 pb-4 space-y-2">
+          {questions.map((question) => (
+            <TriviaButton
+              active={votedAnswer === question}
+              correct={
+                votedAnswer === question &&
+                votedAnswer === activeQuestion.correct_answer
+              }
+              disabled={votedAnswer}
+              onClick={voteOnQuestion(question)}
+              key={question}
+              text={question}
+              voteCount={calcVoteCount(question)}
+            />
+          ))}
+        </div>
+      </main>
+    );
+
+  return <LoadingView restartCallback={isMiniClosed ? init : null} />;
+}
+
+function Timer() {
+  const soapboxRoomId = useSoapboxRoomId();
+
+  const channelName = `mini-trivia-${soapboxRoomId}`;
+
+  const channel = useChannel(channelName);
+
+  const [timer, timerSet] = useState(0);
+
+  useEvent(channel, "timer", (data: { timer: number }) => {
+    console.log("Received 'timer' event with payload", data);
+
+    timerSet(data.timer);
+  });
+
+  const DURATION = 15;
+
+  return (
+    <div className="absolute top-0 right-0 left-0">
+      <div
+        className="h-1 bg-soapbox"
+        style={{ width: `${(timer / DURATION) * 100}%` }}
+      />
+    </div>
+  );
+}
+
+function TriviaButton({ active, correct, disabled, onClick, text, voteCount }) {
+  const cachedClassNames = cn(
+    "w-full rounded py-3 px-4 text-body font-semibold focus:outline-none focus:ring-4 border-2",
+    disabled ? "flex justify-between" : "",
+    active
+      ? correct
+        ? "bg-accent-green border-accent-green text-black"
+        : "bg-soapbox border-soapbox text-white"
+      : "border-systemGrey4-light dark:border-systemGrey4-dark"
+  );
+
+  return (
+    <button onClick={onClick} className={cachedClassNames} disabled={disabled}>
+      <span>{text}</span>
+
+      {disabled && <span className="text-sm">{voteCount}</span>}
+    </button>
+  );
+}

pages/trivia/index.tsx

@@ -1,8 +1,7 @@
-import { useList, useMap } from "@roomservice/react";
+import { useMap } from "@roomservice/react";
 import { onClose } from "@soapboxsocial/minis.js";
-import { Fragment, useCallback, useEffect, useState } from "react";
+import { useCallback, useEffect, useState } from "react";
 import { ArrowRight } from "react-feather";
-import { useInterval, useStateList } from "react-use";
 import { CircleIconButton } from "../../components/inputs/button";
 import { useParams, useSoapboxRoomId } from "../../hooks";
 import getRandom from "../../lib/getRandom";