Quiz Shuffling, UI Updates (#17)

* Shuffle quiz types.
* Better navbar

package.json

@@ -1,6 +1,6 @@
 {
   "name": "temp-prisma",
-  "version": "1.0.0-alpha",
+  "version": "1.1.0-alpha",
   "description": "",
   "main": "index.js",
   "scripts": {

pages/_app.tsx

@@ -4,7 +4,7 @@ import { MantineProvider } from "@mantine/core";
 import { trpc } from "@/utils/trpc";
 import { SessionProvider } from "next-auth/react";
 import Navbar from "./_nav";
-import { Notifications } from '@mantine/notifications';
+import { Notifications } from "@mantine/notifications";
 
 function App(props: AppProps) {
   const { Component, pageProps } = props;
@@ -20,9 +20,9 @@ function App(props: AppProps) {
       </Head>
       <SessionProvider session={pageProps.session}>
         <MantineProvider withGlobalStyles withNormalizeCSS>
-          <Notifications/>
+          <Notifications />
+          <Navbar />
           <div style={{ display: "flex", flexDirection: "row" }}>
-            <Navbar />
             <Component {...pageProps} />
           </div>
         </MantineProvider>

pages/_authed.tsx

@@ -6,7 +6,8 @@ type Element = React.JSX.Element;
 
 const SignInButton: React.FC = () => {
   return (
-    <Container>
+    <Container size="s">
+      <h1>Not Logged In</h1>
       <Center style={{ height: "100%" }}>
         <Button onClick={() => signIn()} size="xl" uppercase>
           🔑 Click Here To Log In

pages/_nav.tsx

@@ -1,124 +1,60 @@
-import { Code, Group, Navbar, createStyles, getStylesRef } from "@mantine/core";
-import {
-  IconBook,
-  IconLogout,
-  IconPencil,
-  IconUser,
-  IconDatabaseImport,
-} from "@tabler/icons-react";
-import { signOut } from "next-auth/react";
 import Link from "next/link";
-import { useRouter } from "next/router";
-import { MouseEventHandler } from "react";
-import PJSON from "../package.json";
-
-const signouthandler: MouseEventHandler<HTMLAnchorElement> = (event) => {
-  event.preventDefault();
-  signOut();
-};
-
-const useStyles = createStyles((theme) => ({
-  header: {
-    paddingBottom: theme.spacing.md,
-    marginBottom: `calc(${theme.spacing.md} * 1.5)`,
-  },
+import { signOut } from "next-auth/react";
 
-  link: {
-    ...theme.fn.focusStyles(),
+const NavBar = () => {
+  const navBarStyle = {
+    width: "100%",
+    height: "64px",
     display: "flex",
     alignItems: "center",
-    textDecoration: "none",
-    fontSize: theme.fontSizes.sm,
-    color:
-      theme.colorScheme === "dark"
-        ? theme.colors.dark[1]
-        : theme.colors.gray[7],
-    padding: `${theme.spacing.xs} ${theme.spacing.sm}`,
-    borderRadius: theme.radius.sm,
-    fontWeight: 500,
-
-    "&:hover": {
-      backgroundColor:
-        theme.colorScheme === "dark"
-          ? theme.colors.dark[6]
-          : theme.colors.gray[0],
-      color: theme.colorScheme === "dark" ? theme.white : theme.black,
-
-      [`& .${getStylesRef("icon")}`]: {
-        color: theme.colorScheme === "dark" ? theme.white : theme.black,
-      },
-    },
-  },
-
-  linkIcon: {
-    ref: getStylesRef("icon"),
-    color:
-      theme.colorScheme === "dark"
-        ? theme.colors.dark[2]
-        : theme.colors.gray[6],
-    marginRight: theme.spacing.sm,
-  },
-
-  linkActive: {
-    "&, &:hover": {
-      backgroundColor: theme.fn.variant({
-        variant: "light",
-        color: theme.primaryColor,
-      }).background,
-      color: theme.fn.variant({ variant: "light", color: theme.primaryColor })
-        .color,
-      [`& .${getStylesRef("icon")}`]: {
-        color: theme.fn.variant({ variant: "light", color: theme.primaryColor })
-          .color,
-      },
-    },
-  },
-}));
-
-const data = [
-  { link: "/study", label: "Study", icon: IconBook },
-  { link: "/cards", label: "Edit Cards", icon: IconPencil },
-  { link: "/import", label: "Import Cards", icon: IconDatabaseImport },
-  { link: "/user", label: "User", icon: IconUser },
-];
-
-export default function NavbarSimple() {
-  const { classes, cx } = useStyles();
-  const router = useRouter();
-  const links = data.map((item) => {
-    const isActive = router.pathname === item.link;
-    return (
-      <Link
-        className={cx(classes.link, {
-          [classes.linkActive]: isActive,
-        })}
-        href={item.link}
-        key={item.label}
-      >
-        <item.icon className={classes.linkIcon} stroke={1.5} />
-        <span>{item.label}</span>
-      </Link>
-    );
-  });
+    backgroundColor: "#333",
+    color: "white",
+    padding: "0 16px",
+  };
+
+  const linkStyle = {
+    margin: "0 16px",
+    color: "lightgray",
+    "text-decoration": "none",
+    "font-weight": "bold",
+  };
+
+  const logoutButtonStyle = {
+    ...linkStyle,
+    margin: undefined,
+    marginLeft: "auto",
+    cursor: "pointer",
+  };
+
+  const links = [
+    { path: "/study", name: "Study" },
+    { path: "/import", name: "Import" },
+    { path: "/cards", name: "Edit" },
+    { path: "/user", name: "Settings" },
+  ];
 
   return (
-    <Navbar width={{ sm: 300 }} p="md">
-      <Navbar.Section grow>
-        <Group className={classes.header} position="apart">
-          <span style={{ fontSize: "24px", marginRight: "10px" }}>
-            <span role="img" aria-label="Koala">
-              🐨
-            </span>
-          </span>
-          <span style={{ fontSize: "24px", fontWeight: "bold" }}>KoalaSRS</span>
-          <Code sx={{ fontWeight: 700 }}>v{PJSON.version}</Code>
-        </Group>
-        {links}
-        <a href="#" className={classes.link} onClick={signouthandler}>
-          <IconLogout className={classes.linkIcon} stroke={1.5} />
-          <span>Logout</span>
-        </a>
-      </Navbar.Section>
-    </Navbar>
+    <div style={navBarStyle}>
+      <Link href={"/"} role="img" aria-label="koala" style={linkStyle}>
+        🐨
+      </Link>
+      {links.map((link, index) => (
+        <Link key={index} href={link.path} style={linkStyle}>
+          {link.name}
+        </Link>
+      ))}
+      <div
+        style={logoutButtonStyle}
+        onClick={(event) => {
+          event.preventDefault();
+          signOut();
+          location.assign("/");
+        }}
+      >
+        Log Out
+      </div>
+    </div>
   );
-}
+};
+
+export default NavBar;

pages/_study_reducer.ts

@@ -74,7 +74,7 @@ export function currentQuiz(state: State): CurrentQuiz | undefined {
   if (quiz.repetitions < 2) {
     lessonType = "dictation";
   } else {
-    lessonType = quiz.repetitions % 2 === 0 ? "listening" : "speaking";
+    lessonType = Math.random() > 0.5 ? "listening" : "speaking";
   }
   return (
     quiz && {

pages/import.tsx

@@ -2,11 +2,10 @@ import { trpc } from "@/utils/trpc";
 import {
   Textarea,
   Button,
-  Col,
   Paper,
   Notification,
   Loader,
-  Grid,
+  Container,
 } from "@mantine/core";
 import { useState } from "react";
 
@@ -124,9 +123,9 @@ const ImportPage: React.FC<ImportPageProps> = ({}) => {
     </Paper>
   );
   return (
-    <Grid>
-      <Col style={{ maxWidth: 600 }}>{result.length > 0 ? finish : start}</Col>
-    </Grid>
+    <Container>
+      {result.length > 0 ? finish : start}
+    </Container>
   );
 };
 

phrases.tsv

@@ -594,3 +594,13 @@ TOPIK 시험을 봐야 해요.	I have to take the TOPIK exam.
 먹으려던 참이에요.	I was just about to eat.
 갈려던 참이에요.	I was just about to go.
 읽으려던 참이에요.	I was just about to read.
+노래에 이어서 춤을 췄어요.	Sang then danced.
+첫 이야기에 이어서 두 번째 시작해요.	First story followed by the second.
+수업에 이어서 퀴즈가 있어요.	Class followed by a quiz.
+저녁에 이어서 영화 봤어요.	Dinner followed by a movie.
+이번 주에 이어서 다음 주도 바빠요.	This week and next are busy.
+시험 전에는 늘 긴장이 마련이에요.	It's natural to be nervous before an exam.
+첫 만남에는 어색함이 마련이에요.	Awkwardness is natural at first meetings.
+사람은 실수를 하는 게 마련이에요.	People are bound to make mistakes.
+새로 시작하는 일은 어려운 게 마련이에요.	New beginnings are naturally hard.
+아이들은 호기심이 많은 게 마련이에요.	It's natural for children to be curious.