connection check

mister-teddy · Nov 28, 2023 · a626fd5 · a626fd5
1 parent 5cf43b5
commit a626fd5
Show file tree

Hide file tree

Showing 12 changed files with 104 additions and 104 deletions.
diff --git a/src/components/button.tsx b/src/components/button.tsx
@@ -4,7 +4,6 @@ import {
   useEffect,
   useState,
 } from "react";
-import { useSpring, animated, AnimatedComponent } from "react-spring";
 
 interface ButtonProps extends ButtonHTMLAttributes<HTMLElement> {
   large?: boolean;
@@ -14,56 +13,40 @@ interface ButtonProps extends ButtonHTMLAttributes<HTMLElement> {
     | ((e: React.MouseEvent<HTMLElement>) => Promise<void>);
 }
 
-const Button: AnimatedComponent<FunctionComponent<ButtonProps>> = animated(
-  ({ className, large, loading, children, onClick, style, ...props }) => {
-    const [clickLoading, setLoading] = useState(false);
-    const { angle } = useSpring({
-      from: {
-        angle: 0,
-      },
-      to: {
-        angle: 3600,
-      },
-      loop: true,
-      config: {
-        easing: (t: number) => t,
-        duration: 3000,
-      },
-    });
+const Button: FunctionComponent<ButtonProps> = ({
+  className,
+  large,
+  loading,
+  children,
+  onClick,
+  style,
+  ...props
+}) => {
+  const [clickLoading, setLoading] = useState(false);
 
-    return (
-      <animated.button
-        type="button"
-        className={`min-w-0 border border-secondary backdrop-blur rounded-xl leading py-4 px-8 active:bg-secondary active:text-secondary-text flex justify-center items-center ${
-          large ? `text-xl font-bold` : ""
-        } ${className}`}
-        style={{
-          background:
-            loading || clickLoading
-              ? angle.to(
-                  (a) =>
-                    `linear-gradient(${a}deg, var(--primary), var(--secondary))`
-                )
-              : "",
-          ...(style ?? {}),
-          color: loading || clickLoading ? `var(--primary-text)` : undefined,
-        }}
-        onClick={(e) => {
-          if (onClick) {
-            const result = onClick(e);
-            if (result instanceof Promise) {
-              setLoading(true);
-              result.finally(() => setLoading(false));
-            }
+  return (
+    <button
+      type="button"
+      className={`min-w-0 border border-primary backdrop-blur rounded-xl leading py-4 px-8 active:bg-primary active:text-primary-text flex justify-center items-center ${
+        large ? `text-xl font-bold` : ""
+      } ${
+        loading || clickLoading ? `bg-primary text-primary-text` : ""
+      } ${className}`}
+      onClick={(e) => {
+        if (onClick) {
+          const result = onClick(e);
+          if (result instanceof Promise) {
+            setLoading(true);
+            result.finally(() => setLoading(false));
           }
-        }}
-        disabled={loading || clickLoading}
-        {...props}
-      >
-        {children}
-      </animated.button>
-    );
-  }
-);
+        }
+      }}
+      disabled={loading || clickLoading}
+      {...props}
+    >
+      {children}
+    </button>
+  );
+};
 
 export default Button;
diff --git a/src/components/countdown.tsx b/src/components/countdown.tsx
@@ -43,7 +43,7 @@ function Countdown(props: {
         <div key={i} className="flex-1">
           <div
             key={i}
-            className={`border-2 border-secondary font-bold text-xl p-2 ${
+            className={`border-2 border-primary font-bold text-xl p-2 ${
               i > 0 ? "border-l-0" : ""
             } ${i === 0 ? "rounded-tl rounded-bl" : ""} ${
               i === 3 ? "rounded-tr rounded-br" : ""

diff --git a/src/components/countup.tsx b/src/components/countup.tsx
@@ -35,7 +35,7 @@ function Countup(props: {
         <div key={i} className="flex-1">
           <div
             key={i}
-            className={`border-2 border-secondary font-bold text-xl p-2 ${
+            className={`border-2 border-primary font-bold text-xl p-2 ${
               i > 0 ? "border-l-0" : ""
             } ${i === 0 ? "rounded-tl rounded-bl" : ""} ${
               i === 3 ? "rounded-tr rounded-br" : ""

diff --git a/src/components/quiz/overlay.tsx b/src/components/quiz/overlay.tsx
diff --git a/src/components/quiz/questions/common.tsx b/src/components/quiz/questions/common.tsx
@@ -27,7 +27,7 @@ const CommonQuestion: FunctionComponent<CommonQuestionProps> = ({
           {question.answers!.map((answer, i, items) => (
             <Button
               key={i}
-              className={`px-3 py-3 min-w-0 ${selected === i ? "bg-secondary text-secondary-text" : ""
+              className={`px-3 py-3 min-w-0 ${selected === i ? "bg-primary text-primary-text" : ""
                 }`}
               onClick={() => setSelected(i)}
             >
@@ -50,7 +50,7 @@ const CommonQuestion: FunctionComponent<CommonQuestionProps> = ({
           }}
         >
           <Button
-            className={`bg-secondary text-secondary-text ${selected === -1 ? "invisible" : ""
+            className={`bg-primary text-primary-text ${selected === -1 ? "invisible" : ""
               }`}
             onClick={async () => onAnswer(selected)}
           >

diff --git a/src/components/quiz/questions/reading.tsx b/src/components/quiz/questions/reading.tsx
@@ -36,7 +36,7 @@ const ReadingComprehensionSubQuestion: FC<{
         {question.answers.map((answer, i, items) => (
           <Button
             key={i}
-            className={`px-4 ${selected === i ? "bg-secondary text-secondary-text" : ""
+            className={`px-4 ${selected === i ? "bg-primary text-primary-text" : ""
               }`}
             onClick={() => setSelected(i)}
           >
@@ -106,7 +106,7 @@ const ReadingComprehensionQuestion: FunctionComponent<
         >
           {finished && (
             <Button
-              className="bg-secondary text-secondary-text"
+              className="bg-primary text-primary-text"
               onClick={async () => onAnswer(selected)}
             >
               OK

diff --git a/src/css/app.scss b/src/css/app.scss
@@ -18,17 +18,13 @@ body,
   --text: black;
   --primary: black;
   --primary-text: white;
-  --secondary: gray;
-  --secondary-text: white;
 }
 
 .dark {
   --background: black;
   --text: white;
-  --primary: #9134f2;
+  --primary: #323232;
   --primary-text: white;
-  --secondary: #3eabd8;
-  --secondary-text: white;
   --rsbs-bg: var(--background);
   --rsbs-handle-bg: var(--text);
 }
@@ -68,3 +64,12 @@ input {
     }
   }
 }
+
+.no-safe-top {
+  &[data-rsbs-has-header="false"] [data-rsbs-header] {
+    padding-top: 12px;
+    &::before {
+      top: 8px;
+    }
+  }
+}
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
@@ -1,20 +1,22 @@
 import { useEffect, useState } from "react";
 import { useNavigate } from "react-router-dom";
+import { BottomSheet } from "react-spring-bottom-sheet";
 import {
   useRecoilState,
   useRecoilValue,
   useRecoilValueLoadable,
   useResetRecoilState,
   useSetRecoilState,
 } from "recoil";
-import { closeLoading } from "zmp-sdk";
+import { closeApp, closeLoading } from "zmp-sdk";
 import { AddToCalendar } from "../components/add-to-calendar";
 import Button from "../components/button";
 import { FontSelector } from "../components/font-selector";
 import { FontSizeSelector } from "../components/font-size-selector";
 import { QuizTaker } from "../components/quiz-taker";
 import ZaloMiniApp from "../components/zalo-mini-app";
 import { QuestionType } from "../models/database";
+import { databaseState } from "../state/database";
 import {
   currentQuestionState,
   currentQuestionTypeState,
@@ -66,11 +68,13 @@ function AreYouReady() {
   const pickupQuestionId = useRecoilValue(pickupQuestionIdState);
   const setSeletectedQuizId = useSetRecoilState(selectedQuizIdState);
   useEffect(() => {
-    if (currentQuestion.state === "hasValue" && ready) {
-      if (currentType !== currentQuestion.contents.type) {
-        chooseType(currentQuestion.contents.type);
+    if (ready) {
+      if (currentQuestion.state === "hasValue") {
+        if (currentType !== currentQuestion.contents.type) {
+          chooseType(currentQuestion.contents.type);
+        }
+        navigate("/study");
       }
-      navigate("/study");
     }
   }, [ready, currentQuestion]);
   useEffect(() => {
@@ -131,6 +135,33 @@ function AreYouReady() {
   );
 }
 
+const ConnectionCheck = () => {
+  const db = useRecoilValueLoadable(databaseState);
+
+  if (db.state === "hasError") {
+    return (
+      <BottomSheet
+        expandOnContentDrag
+        open
+        onDismiss={() => closeApp()}
+        className="text-center no-safe-top"
+      >
+        <div className="h-full flex flex-col">
+          <h1 className="text-center font-bold text-lg">
+            🛜 Tips: change your Wifi!
+          </h1>
+          <div className="w-full overflow-y-auto p-4">
+            We cannot fetch questions from our database with your current
+            network connection. Please change your network or try again later!
+          </div>
+        </div>
+      </BottomSheet>
+    );
+  }
+
+  return <></>;
+};
+
 const HomePage = () => {
   useEffect(() => {
     closeLoading({});
@@ -139,6 +170,7 @@ const HomePage = () => {
   return (
     <div className="flex flex-col items-center w-full h-full p-8 space-y-4">
       <AreYouReady />
+      <ConnectionCheck />
       <small className="absolute bottom-5 whitespace-nowrap space-x-2 opacity-75">
         A product of the <ZaloMiniApp className="inline" width={96} /> team
       </small>

diff --git a/src/pages/podium.tsx b/src/pages/podium.tsx
@@ -143,9 +143,6 @@ function LeaderBoardPage() {
                   {quizDetail.data.name}
                 </h2>
               )}
-              <a onClick={share}>
-                <span>🏹</span>
-              </a>
             </div>
             <select
               className="rounded text-black py-1 px-2 text-center mt-2 text-sm max-w-[180px]"
@@ -166,17 +163,25 @@ function LeaderBoardPage() {
         </div>
       </div>
       <Podium />
-      {quizDetail && quizDetail.data && (
-        <Button large className="w-full" onClick={() => navigate("/test")}>
-          <span className="flex flex-col">
-            <span>📝 Enter</span>
-            <span className="text-sm font-normal">
-              {JSON.parse(quizDetail.data.question_ids).length} questions |{" "}
-              {quizDetail.data.duration} minutes
+      <div className="flex space-x-2">
+        {quizDetail && quizDetail.data && (
+          <Button large className="w-full" onClick={() => navigate("/test")}>
+            <span className="flex flex-col">
+              <span>📝 Enter Quiz</span>
+              <span className="text-sm font-normal">
+                {JSON.parse(quizDetail.data.question_ids).length} questions |{" "}
+                {quizDetail.data.duration} minutes
+              </span>
             </span>
+          </Button>
+        )}
+        <Button className="!px-2 flex-none" large onClick={share}>
+          <span className="flex flex-col">
+            <span>📤</span>
+            <span className="text-sm font-normal">Share</span>
           </span>
         </Button>
-      )}
+      </div>
     </div>
   );
 }

diff --git a/src/pages/studyroom.tsx b/src/pages/studyroom.tsx
@@ -27,7 +27,7 @@ function Header() {
   const type = useRecoilValue(currentQuestionTypeState);
   return (
     <div className="flex-none w-full left-0 font-bold">
-      <div className="flex space-x-6 items-center text-lg uppercase">
+      <div className="flex space-x-2 items-center text-lg uppercase">
         {questionTypesLabel[type!]}
       </div>
       <div className="flex my-2 justify-between">

diff --git a/src/pages/testroom.tsx b/src/pages/testroom.tsx
@@ -50,7 +50,7 @@ function Header() {
 
   return (
     <div className="w-full flex-none font-bold">
-      <div className="flex space-x-6 items-center text-lg uppercase">
+      <div className="flex space-x-2 items-center text-lg uppercase">
         {quizDetail?.data?.name}
       </div>
       <div className="flex my-2 justify-between">

diff --git a/tailwind.config.js b/tailwind.config.js
@@ -8,8 +8,6 @@ module.exports = {
         text: `var(--text)`,
         primary: `var(--primary)`,
         "primary-text": `var(--primary-text)`,
-        secondary: `var(--secondary)`,
-        "secondary-text": `var(--secondary-text)`,
       },
     },
   },