Skip to content

Commit

Permalink
Improve template display (#519)
Browse files Browse the repository at this point in the history
  • Loading branch information
antoinejaussoin committed Mar 30, 2023
1 parent 724650a commit 95a612f
Show file tree
Hide file tree
Showing 88 changed files with 702 additions and 377 deletions.
5 changes: 4 additions & 1 deletion backend/src/common/types.ts
Original file line number Diff line number Diff line change
Expand Up @@ -248,7 +248,10 @@ export type ColumnDefinitionType =
| 'cargo'
| 'island'
| 'wind'
| 'rock';
| 'rock'
| 'mad'
| 'sad'
| 'glad';

export type StripeLocales =
| 'ar-AR'
Expand Down
1 change: 1 addition & 0 deletions docs/docs/self-hosting/optionals.md
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
6 changes: 5 additions & 1 deletion frontend/.env
Original file line number Diff line number Diff line change
@@ -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=
5 changes: 4 additions & 1 deletion frontend/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
9 changes: 5 additions & 4 deletions frontend/src/App.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -54,8 +55,8 @@ function App() {
</ConfirmProvider>
</ThemeProvider>
</SnackbarProvider>
</RecoilRoot>
</Suspense>
</Suspense>
</RecoilRoot>
);
}

Expand Down
2 changes: 1 addition & 1 deletion frontend/src/Layout.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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'));
Expand Down
20 changes: 6 additions & 14 deletions frontend/src/auth/AccountMenu.tsx
Original file line number Diff line number Diff line change
@@ -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';
Expand All @@ -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);
Expand Down Expand Up @@ -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}
>
Expand Down Expand Up @@ -180,10 +178,4 @@ const ChipContainer = styled.div`
}
`;

const AccountCircleContainer = styled.div`
@media screen and (max-width: 800px) {
display: none;
}
`;

export default AccountMenu;
29 changes: 6 additions & 23 deletions frontend/src/auth/AuthProvider.tsx
Original file line number Diff line number Diff line change
@@ -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({
Expand All @@ -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}</>;
}
16 changes: 0 additions & 16 deletions frontend/src/auth/Context.tsx

This file was deleted.

2 changes: 1 addition & 1 deletion frontend/src/auth/QuotaManager.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down
10 changes: 5 additions & 5 deletions frontend/src/auth/modal/LoginContent.tsx
Original file line number Diff line number Diff line change
@@ -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';
Expand All @@ -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;
Expand All @@ -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 () => {
Expand Down Expand Up @@ -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')}
Expand Down
13 changes: 3 additions & 10 deletions frontend/src/auth/modal/account/Register.tsx
Original file line number Diff line number Diff line change
@@ -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;
Expand All @@ -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(() => {
Expand Down
2 changes: 1 addition & 1 deletion frontend/src/auth/useDisplayMarketing.ts
Original file line number Diff line number Diff line change
@@ -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();
Expand Down
2 changes: 1 addition & 1 deletion frontend/src/auth/useIsAdmin.ts
Original file line number Diff line number Diff line change
@@ -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();
Expand Down
10 changes: 0 additions & 10 deletions frontend/src/auth/useIsInitialised.ts

This file was deleted.

2 changes: 1 addition & 1 deletion frontend/src/auth/useIsPro.ts
Original file line number Diff line number Diff line change
@@ -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();
Expand Down
2 changes: 1 addition & 1 deletion frontend/src/auth/useIsTrial.ts
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import useUser from './useUser';
import useUser from '../state/user/useUser';

export default function useIsTrial() {
const user = useUser();
Expand Down
5 changes: 4 additions & 1 deletion frontend/src/common/types.ts
Original file line number Diff line number Diff line change
Expand Up @@ -248,7 +248,10 @@ export type ColumnDefinitionType =
| 'cargo'
| 'island'
| 'wind'
| 'rock';
| 'rock'
| 'mad'
| 'sad'
| 'glad';

export type StripeLocales =
| 'ar-AR'
Expand Down
4 changes: 2 additions & 2 deletions frontend/src/components/Page.tsx
Original file line number Diff line number Diff line change
@@ -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;
`;
2 changes: 1 addition & 1 deletion frontend/src/components/ProPill.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
Loading

0 comments on commit 95a612f

Please sign in to comment.