Merge 0c62b15 into 802dc59

cofacts · Jul 11, 2023 · a981f06 · a981f06
2 parents 802dc59 + 0c62b15
commit a981f06
Show file tree

Hide file tree

Showing 148 changed files with 1,666 additions and 801 deletions.
diff --git a/.eslintignore b/.eslintignore
@@ -4,3 +4,4 @@ node_modules/*
 coverage
 !.storybook
 public/*
+typegen/fragment-masking.ts
diff --git a/.storybook/main.js b/.storybook/main.js
@@ -5,7 +5,7 @@ module.exports = {
     '@storybook/addon-knobs',
     '@storybook/addon-storysource',
   ],
-  env: config => ({
+  env: (config) => ({
     ...config,
     LOCALE: config.LOCALE ?? 'en_US',
   }),

diff --git a/.storybook/preview.js b/.storybook/preview.js
@@ -11,7 +11,7 @@ import Router from 'next/router';
 const mockedRouter = { push: () => {}, prefetch: () => Promise.resolve() };
 Router.router = mockedRouter;
 
-addDecorator(storyFn => (
+addDecorator((storyFn) => (
   <ThemeProvider theme={lightTheme}>
     <CssBaseline />
     {storyFn()}

diff --git a/Storyshots.test.js b/Storyshots.test.js
@@ -9,12 +9,13 @@ import MockDate from 'mockdate';
 Enzyme.configure({ adapter: new Adapter() });
 
 /* makeStyle + useStyle hook, <Box> and withStyle HOC */
-const MAKE_STYLE_REGEXP = /((?:makeStyles|MuiBox|Component|WithStyles|ForwardRef)\W.+?)-\d+/g;
+const MAKE_STYLE_REGEXP =
+  /((?:makeStyles|MuiBox|Component|WithStyles|ForwardRef)\W.+?)-\d+/g;
 
 function removeMaterialUIInternals(json) {
   // Remove props we don't want to snapshot
   if (json.props) {
-    ['classes'].forEach(key => {
+    ['classes'].forEach((key) => {
       delete json.props[key];
     });
   }
@@ -67,7 +68,7 @@ function removeMaterialUIInternals(json) {
 }
 
 initStoryshots({
-  test: arg => {
+  test: (arg) => {
     MockDate.set('2020-01-01');
     multiSnapshotWithOptions({
       renderer: mount,

diff --git a/components/AIReplySection.js b/components/AIReplySection.js
@@ -21,7 +21,7 @@ function AIReplySection({ defaultExpand = false, aiReplyText = '' }) {
           paddingBottom: expand ? undefined : 12,
           cursor: 'pointer',
         }}
-        onClick={() => setExpand(v => !v)}
+        onClick={() => setExpand((v) => !v)}
       >
         {t`Automated analysis from ChatGPT`}
         {expand ? <KeyboardArrowDownIcon /> : <KeyboardArrowUpIcon />}

diff --git a/components/ActionMenu/ActionMenu.js b/components/ActionMenu/ActionMenu.js
@@ -5,7 +5,7 @@ import MoreVertIcon from '@material-ui/icons/MoreVert';
 
 import cx from 'clsx';
 
-const useStyles = makeStyles(theme => ({
+const useStyles = makeStyles((theme) => ({
   button: {
     minWidth: 0, // Override material-ui style
     flexShrink: 0,
@@ -25,7 +25,7 @@ function ActionMenu({ children, className, ...buttonProps }) {
 
   const classes = useStyles({ open: !!anchorEl });
 
-  const handleClick = event => {
+  const handleClick = (event) => {
     setAnchorEl(event.currentTarget);
   };
 

diff --git a/components/AppLayout/AppFooter.js b/components/AppLayout/AppFooter.js
@@ -19,7 +19,7 @@ import facebookIcon from './images/facebook.svg';
 import mailIcon from './images/mail.svg';
 import lineIcon from './images/line.svg';
 
-const useStyles = makeStyles(theme => ({
+const useStyles = makeStyles((theme) => ({
   first: {
     display: 'flex',
     justifyContent: 'center',
@@ -56,7 +56,7 @@ const useStyles = makeStyles(theme => ({
   },
 }));
 
-const CustomLink = withStyles(theme => ({
+const CustomLink = withStyles((theme) => ({
   linkWrapper: {
     margin: '20px 0',
     display: 'flex',

diff --git a/components/AppLayout/AppHeader.js b/components/AppLayout/AppHeader.js
@@ -37,7 +37,7 @@ import LEVEL_NAMES from 'constants/levelNames';
 
 const MENU_BUTTON_WIDTH = 48;
 
-const useStyles = makeStyles(theme => ({
+const useStyles = makeStyles((theme) => ({
   root: {
     position: 'sticky',
     height: NAVBAR_HEIGHT + TABS_HEIGHT,
@@ -130,7 +130,7 @@ const LIST_UNSOLVED_ARTICLES = gql`
   }
 `;
 
-const CustomBadge = withStyles(theme => ({
+const CustomBadge = withStyles((theme) => ({
   root: {
     verticalAlign: 'baseline' /* override badge default */,
   },
@@ -180,7 +180,7 @@ const Links = ({ classes, unsolvedCount }) => (
   </>
 );
 
-const useUserStyles = makeStyles(theme => ({
+const useUserStyles = makeStyles((theme) => ({
   level: {
     padding: '2px 8px 4px 20px',
     '& > strong': {
@@ -217,7 +217,7 @@ const User = ({ user, onLogout }) => {
 
   const [anchor, setAnchor] = useState(null);
 
-  const openProfileMenu = e => setAnchor(e.currentTarget);
+  const openProfileMenu = (e) => setAnchor(e.currentTarget);
   const closeProfileMenu = () => setAnchor(null);
 
   const pointsLeft = user?.points?.nextLevel - user?.points?.total;
@@ -235,7 +235,7 @@ const User = ({ user, onLogout }) => {
         >
           <Ribbon className={classes.level}>
             <strong>Lv. {user?.level}</strong>
-            {LEVEL_NAMES[(user?.level)]}
+            {LEVEL_NAMES[user?.level]}
           </Ribbon>
           <Box px={2} py={1} display="flex" alignItems="center">
             <Avatar user={user} size={40} style={{ marginRight: 12 }} />
@@ -321,7 +321,7 @@ function AppHeader({
             <Links classes={classes} unsolvedCount={unsolvedCount} />
           </Box>
         </div>
-        <GlobalSearch onExpand={expanded => setDisplayLogo(!expanded)} />
+        <GlobalSearch onExpand={(expanded) => setDisplayLogo(!expanded)} />
         <Box display={['none', 'none', 'block']}>
           {user ? (
             <User user={user} onLogout={onLogout} />

diff --git a/components/AppLayout/AppLayout.js b/components/AppLayout/AppLayout.js
@@ -33,7 +33,7 @@ const useStyles = makeStyles({
 });
 
 const apiLogout = () => {
-  return fetchAPI('/logout').then(resp => resp.json());
+  return fetchAPI('/logout').then((resp) => resp.json());
 };
 
 /**
@@ -46,7 +46,7 @@ function AppLayout({ children, container = true }) {
   const [snackMsg, setSnackMsg] = useState('');
 
   const [loadUser, { data, refetch }] = useLazyQuery(USER_QUERY);
-  const toggleSidebar = useCallback(() => setSidebarOpen(open => !open), []);
+  const toggleSidebar = useCallback(() => setSidebarOpen((open) => !open), []);
   const openLoginModal = useCallback(() => setLoginModalOpen(true), []);
   const logout = useCallback(() => apiLogout().then(refetch), [refetch]);
 

diff --git a/components/AppLayout/AppSidebar.js b/components/AppLayout/AppSidebar.js
@@ -23,7 +23,7 @@ import { withDarkTheme } from 'lib/theme';
 import GoogleWebsiteTranslator from './GoogleWebsiteTranslator';
 import LEVEL_NAMES from 'constants/levelNames';
 
-const useStyles = makeStyles(theme => ({
+const useStyles = makeStyles((theme) => ({
   paper: {
     top: `${NAVBAR_HEIGHT + TABS_HEIGHT}px !important`,
     background: theme.palette.background.default,
@@ -94,7 +94,7 @@ function AppSidebar({ open, toggle, user, onLoginModalOpen, onLogout }) {
       ) : (
         <div>
           <Ribbon className={classes.level}>
-            <strong>Lv. {user?.level}</strong> {LEVEL_NAMES[(user?.level)]}
+            <strong>Lv. {user?.level}</strong> {LEVEL_NAMES[user?.level]}
           </Ribbon>
           <Box px={1.5} pb={2} display="flex" alignItems="center">
             <Avatar user={user} size={60} />

diff --git a/components/AppLayout/GlobalSearch.js b/components/AppLayout/GlobalSearch.js
@@ -10,7 +10,7 @@ import {
 } from '@material-ui/core';
 import SearchIcon from '@material-ui/icons/Search';
 
-const useStyles = makeStyles(theme => ({
+const useStyles = makeStyles((theme) => ({
   root: {
     flex: 1,
     position: 'relative',
@@ -82,11 +82,11 @@ function GlobalSearch({ onExpand }) {
   const [value, setValue] = useState(router.query.q || '');
   const classes = useStyles({ focus, value });
 
-  const navigate = type => () =>
+  const navigate = (type) => () =>
     router.push({ pathname: '/search', query: { type, q: value } });
 
   useEffect(
-    () => void setValue(value => (query.q !== value ? query.q || '' : value)),
+    () => void setValue((value) => (query.q !== value ? query.q || '' : value)),
     [query.q]
   );
 
@@ -108,7 +108,7 @@ function GlobalSearch({ onExpand }) {
       }}
       classes={{ root: classes.searchWrapper }}
       value={value}
-      onChange={e => {
+      onChange={(e) => {
         setValue(e.target.value);
       }}
     />

diff --git a/components/AppLayout/GoogleWebsiteTranslator.js b/components/AppLayout/GoogleWebsiteTranslator.js
@@ -44,7 +44,7 @@ class GoogleWebsiteTranslator extends PureComponent {
     }
 
     return (
-      <div ref={container => (this.refContainer = container)}>
+      <div ref={(container) => (this.refContainer = container)}>
         <div id="google_translate_element" />
       </div>
     );

diff --git a/components/AppLayout/LoginModal.js b/components/AppLayout/LoginModal.js
@@ -12,7 +12,7 @@ import Github from './images/github.svg';
 import Google from './images/google.svg';
 // import Instagram from './images/instagram.svg';
 
-const useStyles = makeStyles(theme => ({
+const useStyles = makeStyles((theme) => ({
   title: {
     textAlign: 'center',
   },
@@ -27,7 +27,7 @@ const useStyles = makeStyles(theme => ({
   },
 }));
 
-const useProviderStyles = makeStyles(theme => ({
+const useProviderStyles = makeStyles((theme) => ({
   root: {
     borderRadius: 30,
     display: 'flex',
@@ -70,7 +70,7 @@ const ProviderLink = ({
     redirectPath ||
     location.href.replace(new RegExp(`^${location.origin}`), '');
 
-  const urlFor = provider =>
+  const urlFor = (provider) =>
     `${PUBLIC_API_URL}/login/${provider}?redirect=${redirectUrl}`;
   const classes = useProviderStyles({ color });
 

diff --git a/components/AppLayout/UpgradeDialog.js b/components/AppLayout/UpgradeDialog.js
@@ -43,7 +43,7 @@ const getSpinKeyframes = (steps, startDeg, color1, color2) => {
   return keyframes;
 };
 
-const useStyles = makeStyles(theme => ({
+const useStyles = makeStyles((theme) => ({
   '@keyframes spin': getSpinKeyframes(
     10,
     -15,
@@ -263,7 +263,7 @@ export const UpgradeDialogLayout = ({
   useEffect(() => {
     if (stage < 4 && stage !== 0) {
       timerRef.current = setTimeout(() => {
-        setStage(value => value + 1);
+        setStage((value) => value + 1);
       }, 800);
     }
 
@@ -320,15 +320,15 @@ export const UpgradeDialogLayout = ({
                         <animated.div
                           className={classes.progressBar}
                           style={{
-                            width: progress.interpolate(value => `${value}%`),
+                            width: progress.interpolate((value) => `${value}%`),
                           }}
                         />
                       </div>
                       <div className={classes.progressText}>
                         <span>{c('upgrade dialog').t`EXP`}</span>
                         <animated.span>
                           {progress.interpolate(
-                            value =>
+                            (value) =>
                               `${((value / 100) * nextLevelScore).toFixed(0)}`
                           )}
                         </animated.span>
@@ -378,10 +378,10 @@ export const UpgradeDialogLayout = ({
                   className={classes.levelIcon}
                   style={{
                     width: nextLevelProps.scale.interpolate(
-                      value => `${value * 23}px`
+                      (value) => `${value * 23}px`
                     ),
                     height: nextLevelProps.scale.interpolate(
-                      value => `${value * 23}px`
+                      (value) => `${value * 23}px`
                     ),
                   }}
                 >
@@ -390,7 +390,7 @@ export const UpgradeDialogLayout = ({
                 <animated.div
                   style={{
                     fontSize: nextLevelProps.scale.interpolate(
-                      value => value * 9
+                      (value) => value * 9
                     ),
                   }}
                 >

diff --git a/components/AppLayout/Widgets/Avatar.js b/components/AppLayout/Widgets/Avatar.js
@@ -12,7 +12,7 @@ import { omit } from 'lodash';
 const NULL_USER_IMG =
   'https://www.gravatar.com/avatar/00000000000000000000000000000000?d=mp';
 
-const useStyles = makeStyles(theme => ({
+const useStyles = makeStyles((theme) => ({
   root: {
     width: ({ size }) => size,
     height: ({ size }) => size,
@@ -32,7 +32,7 @@ const peepsStyles = {
   },
 };
 
-const LevelBadge = withStyles(theme => ({
+const LevelBadge = withStyles((theme) => ({
   container: {
     position: 'relative',
   },
@@ -62,7 +62,7 @@ const LevelBadge = withStyles(theme => ({
   </div>
 ));
 
-const StatusBadge = withStyles(theme => ({
+const StatusBadge = withStyles((theme) => ({
   badge: {
     transform: 'translate(30%, -20%)',
     [theme.breakpoints.up('md')]: {
@@ -86,7 +86,7 @@ const StatusBadge = withStyles(theme => ({
   );
 });
 
-const OpenPeepsAvatar = withStyles(theme => ({
+const OpenPeepsAvatar = withStyles((theme) => ({
   showcaseWrapper: {
     display: 'flex',
     justifyContent: 'center',
@@ -113,9 +113,9 @@ const OpenPeepsAvatar = withStyles(theme => ({
       },
 
       transform: ({ avatarData, size }) =>
-        `${
-          avatarData?.flip ? 'scale(-1, 1)' : 'scale(1, 1)'
-        } translateY(${size / 15}px)`,
+        `${avatarData?.flip ? 'scale(-1, 1)' : 'scale(1, 1)'} translateY(${
+          size / 15
+        }px)`,
     },
   },
   // eslint-disable-next-line no-unused-vars

diff --git a/components/AppLayout/Widgets/LevelProgressBar.js b/components/AppLayout/Widgets/LevelProgressBar.js
@@ -3,7 +3,7 @@ import React from 'react';
 import { makeStyles } from '@material-ui/core/styles';
 import cx from 'clsx';
 
-const useStyles = makeStyles(theme => ({
+const useStyles = makeStyles((theme) => ({
   root: {},
   progressBar: {
     border: `1px solid ${theme.palette.secondary[300]}`,
@@ -12,7 +12,7 @@ const useStyles = makeStyles(theme => ({
   },
   progress: {
     display: 'block',
-    width: percent => `${percent}%`,
+    width: (percent) => `${percent}%`,
     backgroundColor: theme.palette.primary[500],
     borderRadius: 3,
     height: 6,

diff --git a/components/AppLayout/Widgets/openPeepsUtils.js b/components/AppLayout/Widgets/openPeepsUtils.js
@@ -35,7 +35,7 @@ export const generateRandomOpenPeepsAvatar = () => {
   };
 };
 
-export const sanitizeAvatarData = data => ({
+export const sanitizeAvatarData = (data) => ({
   ...data,
   accessory:
     data.accessory && accessories.includes(data.accessory)