add mobx, groups stub

gatsby-config.ts

@@ -1,5 +1,9 @@
 require('dotenv').config();
 
+export const flags = {
+  PRESERVE_WEBPACK_CACHE: true,
+};
+
 export const siteMetadata = {
   title: `USACO Guide`,
   description: `A free collection of curated, high-quality competitive programming resources to take you from USACO Bronze to USACO Platinum and beyond. Written by top USACO Finalists, these tutorials will guide you through your competitive programming journey.`,
@@ -134,7 +138,7 @@ export const plugins = [
   },
   {
     resolve: `gatsby-plugin-create-client-paths`,
-    options: { prefixes: [`/class/*`] },
+    options: { prefixes: [`/class/*`, '/groups/*'] },
   },
   {
     // This plugin must be placed last in your list of plugins to ensure that it can query all the GraphQL data
@@ -147,7 +151,12 @@ export const plugins = [
       skipIndexing: !!!process.env.ALGOLIA_APP_ID,
     },
   },
-  'gatsby-plugin-webpack-bundle-analyser-v2',
+  {
+    resolve: 'gatsby-plugin-webpack-bundle-analyser-v2',
+    options: {
+      devMode: true,
+    },
+  },
   {
     resolve: `gatsby-plugin-hotjar`,
     options: {

gatsby-ssr.tsx

@@ -3,6 +3,9 @@ import MDXProvider from './src/components/markdown/MDXProvider';
 import { UserDataProvider } from './src/context/UserDataContext/UserDataContext';
 import { FirebaseProvider } from './src/context/FirebaseContext';
 import { darkModeKey } from './src/context/UserDataContext/properties/darkMode';
+import { enableStaticRendering } from 'mobx-react-lite';
+
+enableStaticRendering(typeof window === 'undefined');
 
 export const wrapRootElement = ({ element }) => (
   <FirebaseProvider>

package.json

@@ -63,6 +63,8 @@
     "heroicons-react": "^1.3.0",
     "katex": "^0.12.0",
     "loadjs": "^4.2.0",
+    "mobx": "^6.1.6",
+    "mobx-react-lite": "^3.2.0",
     "moment": "^2.29.1",
     "postcss": "^8.2.4",
     "postcss-import": "^14.0.0",

src/components/Groups/GroupPage/Feed.tsx

@@ -0,0 +1,34 @@
+import * as React from 'react';
+import Tabs from '../../Tabs';
+import { useState } from 'react';
+import FeedItem from './FeedItem';
+
+export default function Feed() {
+  const feedTabs = ['Feed', 'Assignments', 'Announcements'];
+  const [currentFeed, setCurrentFeed] = useState('Feed');
+
+  return (
+    <>
+      <div className="px-4 sm:px-0">
+        <Tabs
+          options={feedTabs}
+          value={currentFeed}
+          onChange={x => setCurrentFeed(x)}
+        />
+      </div>
+      <div className="mt-4">
+        <h1 className="sr-only">Recent questions</h1>
+        <ul className="space-y-4">
+          {[0, 1, 2, 3, 4, 5, 6, 7].map(x => (
+            <li
+              className="bg-white px-3 py-4 shadow sm:px-6 sm:py-5 sm:rounded-lg hover:bg-cyan-50 transition"
+              key={x}
+            >
+              <FeedItem />
+            </li>
+          ))}
+        </ul>
+      </div>
+    </>
+  );
+}

src/components/Groups/GroupPage/FeedItem.tsx

@@ -0,0 +1,96 @@
+import * as React from 'react';
+
+export default function FeedItem() {
+  return (
+    <article>
+      <div className="flex space-x-4">
+        <div className="flex-shrink-0 self-center bg-light-blue-700 rounded-full p-2 inline-flex items-center justify-center">
+          <svg
+            className="h-6 w-6 text-white"
+            xmlns="http://www.w3.org/2000/svg"
+            fill="none"
+            viewBox="0 0 24 24"
+            stroke="currentColor"
+          >
+            <path
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              strokeWidth={2}
+              d="M11 5.882V19.24a1.76 1.76 0 01-3.417.592l-2.147-6.15M18 13a3 3 0 100-6M5.436 13.683A4.001 4.001 0 017 6h1.832c4.1 0 7.625-1.234 9.168-3v14c-1.543-1.766-5.067-3-9.168-3H7a3.988 3.988 0 01-1.564-.317z"
+            />
+          </svg>
+        </div>
+        <div className="min-w-0 flex-1">
+          <h2
+            id="question-title-81614"
+            className="text-base font-medium text-gray-900"
+          >
+            Binary Search on a Sorted Array
+          </h2>
+          <p className="text-sm text-gray-500">December 9 at 11:43 AM</p>
+        </div>
+        <div className="flex-shrink-0 self-center flex">
+          <div className="relative inline-block text-left">
+            <div>
+              <button
+                type="button"
+                className="-m-2 p-2 rounded-full flex items-center text-gray-400 hover:text-gray-600"
+                id="options-menu-0"
+                aria-expanded="false"
+                aria-haspopup="true"
+              >
+                <span className="sr-only">Open options</span>
+                {/* Heroicon name: solid/dots-vertical */}
+                <svg
+                  className="h-5 w-5"
+                  xmlns="http://www.w3.org/2000/svg"
+                  viewBox="0 0 20 20"
+                  fill="currentColor"
+                  aria-hidden="true"
+                >
+                  <path d="M10 6a2 2 0 110-4 2 2 0 010 4zM10 12a2 2 0 110-4 2 2 0 010 4zM10 18a2 2 0 110-4 2 2 0 010 4z" />
+                </svg>
+              </button>
+            </div>
+
+            {/*
+                              Dropdown menu, show/hide based on menu state.
+
+                              Entering: "transition ease-out duration-100"
+                                From: "transform opacity-0 scale-95"
+                                To: "transform opacity-100 scale-100"
+                              Leaving: "transition ease-in duration-75"
+                                From: "transform opacity-100 scale-100"
+                                To: "transform opacity-0 scale-95"
+                            */}
+            {/*<div className="origin-top-right absolute right-0 mt-2 w-56 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5 focus:outline-none" role="menu" aria-orientation="vertical" aria-labelledby="options-menu-0">*/}
+            {/*  <div className="py-1">*/}
+            {/*    <a href="/" className="flex px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-900" role="menuitem">*/}
+            {/*      /!* Heroicon name: solid/star *!/*/}
+            {/*      <svg className="mr-3 h-5 w-5 text-gray-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">*/}
+            {/*        <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />*/}
+            {/*      </svg>*/}
+            {/*      <span>Add to favorites</span>*/}
+            {/*    </a>*/}
+            {/*    <a href="/" className="flex px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-900" role="menuitem">*/}
+            {/*      /!* Heroicon name: solid/code *!/*/}
+            {/*      <svg className="mr-3 h-5 w-5 text-gray-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">*/}
+            {/*        <path fillRule="evenodd" d="M12.316 3.051a1 1 0 01.633 1.265l-4 12a1 1 0 11-1.898-.632l4-12a1 1 0 011.265-.633zM5.707 6.293a1 1 0 010 1.414L3.414 10l2.293 2.293a1 1 0 11-1.414 1.414l-3-3a1 1 0 010-1.414l3-3a1 1 0 011.414 0zm8.586 0a1 1 0 011.414 0l3 3a1 1 0 010 1.414l-3 3a1 1 0 11-1.414-1.414L16.586 10l-2.293-2.293a1 1 0 010-1.414z" clipRule="evenodd" />*/}
+            {/*      </svg>*/}
+            {/*      <span>Embed</span>*/}
+            {/*    </a>*/}
+            {/*    <a href="/" className="flex px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-900" role="menuitem">*/}
+            {/*      /!* Heroicon name: solid/flag *!/*/}
+            {/*      <svg className="mr-3 h-5 w-5 text-gray-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">*/}
+            {/*        <path fillRule="evenodd" d="M3 6a3 3 0 013-3h10a1 1 0 01.8 1.6L14.25 8l2.55 3.4A1 1 0 0116 13H6a1 1 0 00-1 1v3a1 1 0 11-2 0V6z" clipRule="evenodd" />*/}
+            {/*      </svg>*/}
+            {/*      <span>Report content</span>*/}
+            {/*    </a>*/}
+            {/*  </div>*/}
+            {/*</div>*/}
+          </div>
+        </div>
+      </div>
+    </article>
+  );
+}

src/components/Groups/GroupPage/GroupPage.tsx

@@ -0,0 +1,49 @@
+import * as React from 'react';
+import { useContext, useEffect } from 'react';
+import { GroupsContext } from '../../../pages/groups';
+import TopNavigationBar from '../../TopNavigationBar/TopNavigationBar';
+import Tabs from '../../Tabs';
+import Feed from './Feed';
+import LeaderboardSidebar from './LeaderboardSidebar';
+
+export default function GroupPage(props: { path: string }): React.ReactElement {
+  const { groupId } = props as { path: string; groupId: string };
+  const groupsStore = useContext(GroupsContext);
+
+  useEffect(() => {
+    groupsStore.loadCurrentGroup(groupId);
+  }, []);
+
+  return (
+    <>
+      <TopNavigationBar />
+      <div className="min-h-screen bg-gray-100">
+        {/* When the mobile menu is open, add `overflow-hidden` to the `body` element to prevent double scrollbars */}
+        <header className="py-12 bg-gradient-to-r from-light-blue-800 to-cyan-600">
+          <div className="max-w-7xl px-8 mx-auto">
+            <h1 className="text-white text-3xl font-bold">
+              Monta Vista Competitive Programming Club
+            </h1>
+            <p className="text-cyan-100 text-lg mt-2">
+              Meetings every Monday at 11:20am.
+            </p>
+          </div>
+        </header>
+        <div className="py-6">
+          <div className="max-w-3xl mx-auto sm:px-6 lg:max-w-7xl lg:px-8 lg:grid lg:grid-cols-12 lg:gap-8">
+            <main className="lg:col-span-9 xl:col-span-8">
+              <Feed />
+            </main>
+            <aside className="hidden xl:block xl:col-span-4">
+              <div className="sticky top-4 space-y-4">
+                <section aria-labelledby="who-to-follow-heading">
+                  <LeaderboardSidebar />
+                </section>
+              </div>
+            </aside>
+          </div>
+        </div>
+      </div>
+    </>
+  );
+}