Improve template display (#519)

backend/src/common/types.ts

@@ -248,7 +248,10 @@ export type ColumnDefinitionType =
   | 'cargo'
   | 'island'
   | 'wind'
-  | 'rock';
+  | 'rock'
+  | 'mad'
+  | 'sad'
+  | 'glad';
 
 export type StripeLocales =
   | 'ar-AR'

docs/docs/self-hosting/optionals.md

@@ -119,6 +119,7 @@ services:
       FRONTEND_GIPHY_API_KEY: '' # Optional, can be obtained here: https://developers.giphy.com/
       FRONTEND_DEFAULT_LANGUAGE: 'en-GB' # Set the default language for new users
       FRONTEND_MARKETING_ROOT: 'https://www.retrospected.com' # URL of the marketing website
+      FRONTEND_AI_FEEDBACK_URL: 'http://' # URL of a freeform feedback form for AI feedback
 
       # -- Do Not Change --
       BACKEND_HOST: backend # This should be the name of the backend service

frontend/.env

@@ -1,7 +1,11 @@
+# Do not fill any of these values except VITE_VERSION
+# use the .env.local file instead
+
 VITE_VERSION=$npm_package_version
 VITE_STRIPE_KEY=
 VITE_GIPHY_API_KEY=
-VITE_MARKETING_ROOT=http://localhost:3001
+VITE_MARKETING_ROOT=
 VITE_GOOGLE_ANALYTICS_ID=
 VITE_GOOGLE_AD_WORDS_ID=
 VITE_GOOGLE_AD_WORDS_CONVERSION_ID=
+VITE_AI_FEEDBACK_URL=

frontend/index.html

@@ -77,11 +77,14 @@
       .loader {
         font-size: 5rem;
         font-weight: bold;
+        padding: 0;
+        margin: 0;
+        display: flex;
       }
       @keyframes blink {
         50% { color: transparent }
       }
-      .loader__dot { animation: 1s blink infinite }
+      .loader__dot { animation: 1s blink infinite; padding: 0; margin: 0; display: block; }
       .loader__dot:nth-child(2) { animation-delay: 250ms }
       .loader__dot:nth-child(3) { animation-delay: 500ms }
     </style>

frontend/src/App.tsx

@@ -14,11 +14,12 @@ import { Suspense } from 'react';
 import { CodeSplitLoader } from './CodeSplitLoader';
 import QuotaManager from './auth/QuotaManager';
 import { ConfirmProvider } from 'material-ui-confirm';
+import { FullScreenLoader } from 'components/loaders/FullScreenLoader';
 
 function App() {
   return (
-    <Suspense fallback>
-      <RecoilRoot>
+    <RecoilRoot>
+      <Suspense fallback={<FullScreenLoader />}>
         <Helmet>
           <meta property="og:title" content="Retrospected.com" />
           <meta
@@ -54,8 +55,8 @@ function App() {
             </ConfirmProvider>
           </ThemeProvider>
         </SnackbarProvider>
-      </RecoilRoot>
-    </Suspense>
+      </Suspense>
+    </RecoilRoot>
   );
 }
 

frontend/src/Layout.tsx

@@ -3,13 +3,13 @@ import { Routes, Route, useLocation } from 'react-router-dom';
 import { trackPageView } from './track';
 import useIsCompatibleBrowser from './hooks/useIsCompatibleBrowser';
 import OutdatedBrowser from './components/OutdatedBrowser';
-import useUser from './auth/useUser';
 import { CodeSplitLoader } from './CodeSplitLoader';
 import { Alert, AlertTitle } from '@mui/material';
 import useBackendCapabilities from './global/useBackendCapabilities';
 import { useTranslation } from 'react-i18next';
 import { Welcome } from 'views/Welcome';
 import { Header } from 'views/layout/Header';
+import useUser from 'state/user/useUser';
 
 const Home = lazy(() => import('./views/Home'));
 const Game = lazy(() => import('./views/Game'));

frontend/src/auth/AccountMenu.tsx

@@ -1,13 +1,12 @@
-import { useCallback, useState, useRef, useContext } from 'react';
+import { useCallback, useState, useRef } from 'react';
 import styled from '@emotion/styled';
 import Menu from '@mui/material/Menu';
 import MenuItem from '@mui/material/MenuItem';
 import Button from '@mui/material/Button';
 import AccountIcon from '@mui/icons-material/AccountCircle';
-import useUser from './useUser';
+import useUser from '../state/user/useUser';
 import LoginModal from './modal/LoginModal';
 import { logout } from '../api';
-import UserContext from './Context';
 import Avatar from '../components/Avatar';
 import { useMatch, useNavigate } from 'react-router-dom';
 import { Key, Logout, Star } from '@mui/icons-material';
@@ -21,10 +20,11 @@ import {
 import AccountCircle from '@mui/icons-material/AccountCircle';
 import useIsAdmin from './useIsAdmin';
 import { useTranslation } from 'react-i18next';
+import { useSetUser } from 'state/user/useSetUser';
 
 const AccountMenu = () => {
   const { t } = useTranslation();
-  const { setUser } = useContext(UserContext);
+  const setUser = useSetUser();
   const [modalOpened, setModalOpen] = useState(false);
   const [menuOpen, setMenuOpen] = useState(false);
   const menuAnchor = useRef<HTMLDivElement>(null);
@@ -79,20 +79,18 @@ const AccountMenu = () => {
           ref={menuAnchor}
           data-cy="account-menu"
         >
-          <Avatar user={user} />
           <DisplayName>{user.name}</DisplayName>
           <ChipContainer>
             {user.accountType === 'anonymous' ? (
               <Chip color="secondary" label={t('Header.anonymous')} />
             ) : null}
           </ChipContainer>
-          <AccountCircleContainer>
-            <AccountCircle fontSize={'large'} />
-          </AccountCircleContainer>
+          <Avatar user={user} />
         </AvatarContainer>
         {menuAnchor.current ? (
           <Menu
             anchorEl={menuAnchor.current}
+            anchorOrigin={{ horizontal: 'right', vertical: 'bottom' }}
             open={menuOpen}
             onClose={closeMenu}
           >
@@ -180,10 +178,4 @@ const ChipContainer = styled.div`
   }
 `;
 
-const AccountCircleContainer = styled.div`
-  @media screen and (max-width: 800px) {
-    display: none;
-  }
-`;
-
 export default AccountMenu;

frontend/src/auth/AuthProvider.tsx

@@ -1,14 +1,10 @@
-import { useState, useEffect, useCallback, PropsWithChildren } from 'react';
-import Context from './Context';
-import { FullUser } from 'common';
-import { me } from '../api';
+import { useEffect, PropsWithChildren } from 'react';
 import { setScope } from '../track';
+import useUser from 'state/user/useUser';
 
 export default function AuthProvider({ children }: PropsWithChildren<{}>) {
-  const [user, setUser] = useState<FullUser | null>(null);
-  const [initialised, setInitialised] = useState(false);
-
-  const handleUser = useCallback((user: FullUser | null) => {
+  const user = useUser();
+  useEffect(() => {
     setScope((scope) => {
       if (scope && user) {
         scope.setUser({
@@ -18,20 +14,7 @@ export default function AuthProvider({ children }: PropsWithChildren<{}>) {
         });
       }
     });
-    setUser(user);
-  }, []);
-
-  useEffect(() => {
-    async function getUser() {
-      setUser(await me());
-      setInitialised(true);
-    }
-    getUser();
-  }, []);
+  }, [user]);
 
-  return (
-    <Context.Provider value={{ setUser: handleUser, user, initialised }}>
-      {children}
-    </Context.Provider>
-  );
+  return <>{children}</>;
 }

frontend/src/auth/QuotaManager.tsx

@@ -2,7 +2,7 @@ import { Quota } from 'common';
 import React, { useEffect } from 'react';
 import { atom, useRecoilState } from 'recoil';
 import { getQuota } from '../views/account/api';
-import useUser from './useUser';
+import useUser from '../state/user/useUser';
 import { getItem } from '../utils/localStorage';
 
 export const LOCAL_STORAGE_POSTS_KEY = 'posts';

frontend/src/auth/modal/LoginContent.tsx

@@ -1,7 +1,6 @@
-import { useCallback, useContext } from 'react';
+import { useCallback } from 'react';
 import DialogContent from '@mui/material/DialogContent';
 import { useTranslation } from 'react-i18next';
-import UserContext from '../Context';
 import SocialAuth from './SocialAuth';
 import AccountAuth from './AccountAuth';
 import useOAuthAvailabilities from '../../global/useOAuthAvailabilities';
@@ -11,7 +10,8 @@ import styled from '@emotion/styled';
 import { anonymousLogin, me, updateLanguage } from 'api';
 import { trackEvent } from 'track';
 import { useLanguage } from 'translations';
-import { Login } from '@mui/icons-material';
+import { NoAccounts } from '@mui/icons-material';
+import { useSetUser } from 'state/user/useSetUser';
 
 interface LoginContentProps {
   anonymous: boolean;
@@ -29,7 +29,7 @@ export default function LoginContent({
     hasNoSocialMediaAuth && disableAnonymous && disablePasswords;
   const hasNoWayOtherThanAnonymous = hasNoSocialMediaAuth && disablePasswords;
   const { t } = useTranslation();
-  const { setUser } = useContext(UserContext);
+  const setUser = useSetUser();
   const [language] = useLanguage();
 
   const handleAnonLogin = useCallback(async () => {
@@ -80,7 +80,7 @@ export default function LoginContent({
                   onClick={handleAnonLogin}
                   variant="text"
                   color="secondary"
-                  startIcon={<Login />}
+                  startIcon={<NoAccounts />}
                   data-cy="login-anonymous"
                 >
                   {t('AuthCommon.skipAndAnonLogin')}

frontend/src/auth/modal/account/Register.tsx

@@ -1,23 +1,16 @@
-import {
-  Suspense,
-  useCallback,
-  useState,
-  useMemo,
-  lazy,
-  useContext,
-} from 'react';
+import { Suspense, useCallback, useState, useMemo, lazy } from 'react';
 import Button from '@mui/material/Button';
 import { Alert } from '@mui/material';
 import { useLanguage } from '../../../translations';
 import Wrapper from './../Wrapper';
 import Input from '../../../components/Input';
 import { Person, Email, VpnKey } from '@mui/icons-material';
 import { register } from '../../../api';
-import UserContext from '../../Context';
 import useBackendCapabilities from 'global/useBackendCapabilities';
 import { useTranslation } from 'react-i18next';
 import { validate } from 'email/validate';
 import { trackEvent } from 'track';
+import { useSetUser } from 'state/user/useSetUser';
 
 type RegisterProps = {
   onClose: () => void;
@@ -35,7 +28,7 @@ const Register = ({ onClose, onCancel }: RegisterProps) => {
   const [passwordScore, setPasswordScore] = useState(0);
   const [generalError, setGeneralError] = useState<string | null>(null);
   const [isSuccessful, setIsSuccessful] = useState(false);
-  const { setUser } = useContext(UserContext);
+  const setUser = useSetUser();
   const { disablePasswordRegistration } = useBackendCapabilities();
 
   const validEmail = useMemo(() => {

frontend/src/auth/useDisplayMarketing.ts

@@ -1,5 +1,5 @@
 import { useLocation } from 'react-router-dom';
-import useUser from './useUser';
+import useUser from '../state/user/useUser';
 
 export default function useDisplayMarketing(): boolean {
   const location = useLocation();

frontend/src/auth/useIsAdmin.ts

@@ -1,5 +1,5 @@
 import useBackendCapabilities from '../global/useBackendCapabilities';
-import useUser from './useUser';
+import useUser from '../state/user/useUser';
 
 export default function useIsAdmin() {
   const user = useUser();

frontend/src/auth/useIsPro.ts

@@ -1,5 +1,5 @@
 import useBackendCapabilities from '../global/useBackendCapabilities';
-import useUser from './useUser';
+import useUser from '../state/user/useUser';
 
 export default function useIsPro() {
   const user = useUser();

frontend/src/auth/useIsTrial.ts

@@ -1,4 +1,4 @@
-import useUser from './useUser';
+import useUser from '../state/user/useUser';
 
 export default function useIsTrial() {
   const user = useUser();

frontend/src/common/types.ts

@@ -248,7 +248,10 @@ export type ColumnDefinitionType =
   | 'cargo'
   | 'island'
   | 'wind'
-  | 'rock';
+  | 'rock'
+  | 'mad'
+  | 'sad'
+  | 'glad';
 
 export type StripeLocales =
   | 'ar-AR'

frontend/src/components/Page.tsx

@@ -1,11 +1,11 @@
 import styled from '@emotion/styled';
 
 export const Page = styled.main`
-  margin: 50px;
+  margin: 0px 50px 50px 50px;
   @media screen and (max-width: 600px) {
     margin: 10px;
     margin-bottom: 80px;
-    margin-top: 30px;
+    margin-top: 0px;
   }
   margin-bottom: 80px;
 `;

frontend/src/components/ProPill.tsx

@@ -3,7 +3,7 @@ import { colors } from '@mui/material';
 import { Star } from '@mui/icons-material';
 import useIsPro from '../auth/useIsPro';
 import useIsTrial from '../auth/useIsTrial';
-import useUser from '../auth/useUser';
+import useUser from '../state/user/useUser';
 
 interface ProPillProps {
   small?: boolean;