Merge pull request #323 from cofacts/dev

20200827 release
cofacts · Aug 30, 2020 · bb4bb20 · bb4bb20
2 parents ec9e45d + ddf23aa
commit bb4bb20
Show file tree

Hide file tree

Showing 82 changed files with 3,114 additions and 1,771 deletions.
diff --git a/.env.sample b/.env.sample
@@ -46,3 +46,12 @@ WEB_CONCURRENCY=1
 
 # Temp: show category add button in article page
 PUBLIC_SHOW_ADD_CATEGORY=
+
+# IFTTT applet for rss subscription
+PUBLIC_LINE_IFTTT_APPLET_URL=
+PUBLIC_TELEGRAM_IFTTT_APPLET_URL=
+PUBLIC_SLACK_IFTTT_APPLET_URL=
+
+PUBLIC_LINE_IFTTT_TUTORIAL_YOUTUBEID=
+PUBLIC_TELEGRAM_IFTTT_TUTORIAL_YOUTUBEID=
+PUBLIC_SLACK_IFTTT_TUTORIAL_YOUTUBEID=
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -31,8 +31,7 @@ module.exports = {
     node: true,
   },
   settings: {
-    'import/resolver': {
-      'babel-module': {}
-    }
+    'import/resolver': { 'babel-module': {} },
+    'react': { version: 'detect' }
   }
 };
diff --git a/.storybook/preview.js b/.storybook/preview.js
@@ -2,10 +2,10 @@ import React from 'react';
 import { addDecorator } from '@storybook/react';
 import { ThemeProvider } from '@material-ui/core/styles';
 import CssBaseline from '@material-ui/core/CssBaseline';
-import theme from '../lib/theme';
+import { lightTheme } from '../lib/theme';
 
 addDecorator(storyFn => (
-  <ThemeProvider theme={theme}>
+  <ThemeProvider theme={lightTheme}>
     <CssBaseline />
     {storyFn()}
   </ThemeProvider>

diff --git a/Storyshots.test.js b/Storyshots.test.js
@@ -8,7 +8,8 @@ import MockDate from 'mockdate';
 
 Enzyme.configure({ adapter: new Adapter() });
 
-const MAKE_STYLE_REGEXP = /((?:makeStyles|MuiBox)-.+?)-\d+/g;
+/* makeStyle + useStyle hook, <Box> and withStyle HOC */
+const MAKE_STYLE_REGEXP = /((?:makeStyles|MuiBox|Component)-.+?)-\d+/g;
 
 function removeMaterialUIInternals(json) {
   // Remove Portal containerInfo
@@ -31,7 +32,11 @@ function removeMaterialUIInternals(json) {
   }
 
   // Skip HOC components (single children) or excessive wrapper
-  if (json.type.match(/^(ForwardRef|WithStyles|ThemeProvider|Styled)/)) {
+  if (
+    json.type.match(
+      /^(ForwardRef|WithStyles|ThemeProvider|Styled|MockedProvider|ApolloProvider)/
+    )
+  ) {
     // When skipping HOC or wrapper, the first children are usually setups (such as <CssBaseline>),
     // we should ignore together
     return (

diff --git a/components/AppLayout/AppFooter.js b/components/AppLayout/AppFooter.js
@@ -1,15 +1,16 @@
 import React from 'react';
 import { t } from 'ttag';
+import { withStyles, makeStyles } from '@material-ui/core/styles';
+import { Box, useMediaQuery } from '@material-ui/core';
+import MailIcon from '@material-ui/icons/Mail';
+import FacebookIcon from '@material-ui/icons/Facebook';
+import { withDarkTheme } from 'lib/theme';
 import {
   EDITOR_FACEBOOK_GROUP,
   PROJECT_HACKFOLDR,
   CONTACT_EMAIL,
 } from 'constants/urls';
 import NavLink from 'components/NavLink';
-import { withStyles, makeStyles } from '@material-ui/core/styles';
-import { Box, useMediaQuery } from '@material-ui/core';
-import MailIcon from '@material-ui/icons/Mail';
-import FacebookIcon from '@material-ui/icons/Facebook';
 import GoogleWebsiteTranslator from './GoogleWebsiteTranslator';
 
 const useStyles = makeStyles(theme => ({
@@ -23,7 +24,7 @@ const useStyles = makeStyles(theme => ({
   },
   container: {
     width: 800,
-    color: '#FFFFFF',
+    color: theme.palette.text.primary,
     margin: 60,
     display: 'flex',
   },
@@ -52,21 +53,22 @@ const CustomLink = withStyles(theme => ({
     alignItems: 'center',
   },
   link: {
-    color: '#FFFFFF',
+    color: 'inherit',
     textDecoration: 'none',
     lineHeight: '28px',
     fontSize: 20,
     fontWeight: 500,
+    '&:hover': { color: theme.palette.text.secondary },
   },
   linkActive: {
     color: theme.palette.primary[500],
   },
   icon: {
     marginRight: 8,
   },
-}))(({ classes, icon, ...rest }) => (
+}))(({ classes, icon: Icon, ...rest }) => (
   <div className={classes.linkWrapper}>
-    {icon && React.createElement(icon, { className: classes.icon })}
+    {Icon && <Icon className={classes.icon} />}
     <NavLink
       className={classes.link}
       activeClassName={classes.linkActive}
@@ -134,4 +136,4 @@ function AppFooter() {
   );
 }
 
-export default React.memo(AppFooter);
+export default React.memo(withDarkTheme(AppFooter));
diff --git a/components/AppLayout/AppHeader.js b/components/AppLayout/AppHeader.js
@@ -1,8 +1,13 @@
 import React, { useState } from 'react';
-import gql from 'graphql-tag';
+import { gql, useQuery } from '@apollo/client';
 import { c, t } from 'ttag';
 
-import { makeStyles, withStyles, useTheme } from '@material-ui/core/styles';
+import {
+  makeStyles,
+  withStyles,
+  useTheme,
+  ThemeProvider,
+} from '@material-ui/core/styles';
 import Box from '@material-ui/core/Box';
 import Button from '@material-ui/core/Button';
 import Menu from '@material-ui/core/Menu';
@@ -18,14 +23,14 @@ import AccountCircleOutlinedIcon from '@material-ui/icons/AccountCircleOutlined'
 import ExitToAppRoundedIcon from '@material-ui/icons/ExitToAppRounded';
 import InfoIcon from '@material-ui/icons/Info';
 
+import { darkTheme } from 'lib/theme';
 import NavLink from 'components/NavLink';
 import GlobalSearch from './GlobalSearch';
 import * as Widgets from './Widgets';
 import { NAVBAR_HEIGHT, TABS_HEIGHT } from 'constants/size';
 import { EDITOR_FACEBOOK_GROUP } from 'constants/urls';
 import desktopLogo from './images/logo-desktop.svg';
 import mobileLogo from './images/logo-mobile.svg';
-import { useQuery } from '@apollo/react-hooks';
 
 const MENU_BUTTON_WIDTH = 48;
 
@@ -94,7 +99,6 @@ const useStyles = makeStyles(theme => ({
   profileMenu: {
     marginTop: 50,
     backgroundColor: theme.palette.secondary.main,
-    color: theme.palette.common.white,
     overflow: 'inherit',
   },
   divider: {
@@ -237,43 +241,45 @@ function AppHeader({
           {user?.name ? (
             <>
               <Widgets.Avatar user={user} size={40} onClick={openProfileMenu} />
-              <Menu
-                id="profile-menu"
-                classes={{ paper: classes.profileMenu }}
-                anchorEl={anchor}
-                keepMounted
-                open={Boolean(anchor)}
-                onClose={closeProfileMenu}
-              >
-                <Widgets.Level user={user} />
-                <MenuItem onClick={closeProfileMenu}>
-                  <ListItemIcon>
-                    <Widgets.Avatar user={user} size={40} />
-                  </ListItemIcon>
-                  <Typography variant="inherit">{user?.name}</Typography>
-                </MenuItem>
-                <Divider classes={{ root: classes.divider }} />
-                <MenuItem onClick={closeProfileMenu}>
-                  <ListItemIcon className={classes.listIcon}>
-                    <AccountCircleOutlinedIcon />
-                  </ListItemIcon>
-                  <Typography variant="inherit">{t`My Profile`}</Typography>
-                </MenuItem>
-                <Divider classes={{ root: classes.divider }} />
-                <MenuItem onClick={closeProfileMenu}>
-                  <ListItemIcon className={classes.listIcon}>
-                    <InfoIcon />
-                  </ListItemIcon>
-                  <Typography variant="inherit">{t`About Cofacts`}</Typography>
-                </MenuItem>
-                <Divider classes={{ root: classes.divider }} />
-                <MenuItem onClick={onLogout}>
-                  <ListItemIcon className={classes.listIcon}>
-                    <ExitToAppRoundedIcon />
-                  </ListItemIcon>
-                  <Typography variant="inherit">{t`Logout`}</Typography>
-                </MenuItem>
-              </Menu>
+              <ThemeProvider theme={darkTheme}>
+                <Menu
+                  id="profile-menu"
+                  classes={{ paper: classes.profileMenu }}
+                  anchorEl={anchor}
+                  keepMounted
+                  open={Boolean(anchor)}
+                  onClose={closeProfileMenu}
+                >
+                  <Widgets.Level user={user} />
+                  <MenuItem onClick={closeProfileMenu}>
+                    <ListItemIcon>
+                      <Widgets.Avatar user={user} size={40} />
+                    </ListItemIcon>
+                    <Typography variant="inherit">{user?.name}</Typography>
+                  </MenuItem>
+                  <Divider classes={{ root: classes.divider }} />
+                  <MenuItem onClick={closeProfileMenu}>
+                    <ListItemIcon className={classes.listIcon}>
+                      <AccountCircleOutlinedIcon />
+                    </ListItemIcon>
+                    <Typography variant="inherit">{t`My Profile`}</Typography>
+                  </MenuItem>
+                  <Divider classes={{ root: classes.divider }} />
+                  <MenuItem onClick={closeProfileMenu}>
+                    <ListItemIcon className={classes.listIcon}>
+                      <InfoIcon />
+                    </ListItemIcon>
+                    <Typography variant="inherit">{t`About Cofacts`}</Typography>
+                  </MenuItem>
+                  <Divider classes={{ root: classes.divider }} />
+                  <MenuItem onClick={onLogout}>
+                    <ListItemIcon className={classes.listIcon}>
+                      <ExitToAppRoundedIcon />
+                    </ListItemIcon>
+                    <Typography variant="inherit">{t`Logout`}</Typography>
+                  </MenuItem>
+                </Menu>
+              </ThemeProvider>
             </>
           ) : (
             <Button

diff --git a/components/AppLayout/AppLayout.js b/components/AppLayout/AppLayout.js
@@ -1,13 +1,12 @@
 import React, { Fragment, useState, useEffect, useCallback } from 'react';
+import { gql, useLazyQuery } from '@apollo/client';
 import Container from '@material-ui/core/Container';
 import { makeStyles } from '@material-ui/core/styles';
 import Router from 'next/router';
 import { pushToDataLayer } from 'lib/gtm';
 import AppHeader from './AppHeader';
 import AppSidebar from './AppSidebar';
 import AppFooter from './AppFooter';
-import gql from 'graphql-tag';
-import { useLazyQuery } from '@apollo/react-hooks';
 import LoginModal from './LoginModal';
 import fetchAPI from 'lib/fetchAPI';
 

diff --git a/components/AppLayout/AppSidebar.js b/components/AppLayout/AppSidebar.js
@@ -1,15 +1,8 @@
 import React from 'react';
 import { t } from 'ttag';
 import SwipeableDrawer from '@material-ui/core/SwipeableDrawer';
-import {
-  EDITOR_FACEBOOK_GROUP,
-  PROJECT_HACKFOLDR,
-  CONTACT_EMAIL,
-  LINE_URL,
-} from 'constants/urls';
 import { makeStyles } from '@material-ui/core/styles';
 import {
-  useMediaQuery,
   Box,
   Button,
   Typography,
@@ -18,15 +11,21 @@ import {
   ListItem,
 } from '@material-ui/core';
 import * as Widgets from './Widgets';
+import {
+  EDITOR_FACEBOOK_GROUP,
+  PROJECT_HACKFOLDR,
+  CONTACT_EMAIL,
+  LINE_URL,
+} from 'constants/urls';
 import NavLink from 'components/NavLink';
 import { NAVBAR_HEIGHT, TABS_HEIGHT } from 'constants/size';
+import { withDarkTheme } from 'lib/theme';
 import GoogleWebsiteTranslator from './GoogleWebsiteTranslator';
 
 const useStyles = makeStyles(theme => ({
   paper: {
     top: `${NAVBAR_HEIGHT + TABS_HEIGHT}px !important`,
-    background: theme.palette.secondary[600],
-    color: theme.palette.common.white,
+    background: theme.palette.background.default,
     overflow: 'inherit',
   },
   level: {
@@ -36,30 +35,29 @@ const useStyles = makeStyles(theme => ({
     marginLeft: 16,
   },
   login: {
-    color: theme.palette.common.white,
     margin: '24px auto',
-    border: `1px solid ${theme.palette.common.white}`,
     borderRadius: 70,
   },
   list: {
-    padding: 30,
+    padding: 0,
   },
   listItem: {
     justifyContent: 'center',
+    padding: '12px 42px',
+    textTransform: 'uppercase',
     '& a': {
-      color: theme.palette.common.white,
+      color: 'inherit',
       textDecoration: 'none',
     },
   },
   divider: {
-    backgroundColor: theme.palette.common.white,
-    margin: '0 30px',
+    backgroundColor: theme.palette.secondary[400],
+    margin: '12px 42px',
   },
 }));
 
 function AppSidebar({ open, toggle, user, onLoginModalOpen }) {
   const classes = useStyles();
-  const matches = useMediaQuery('(max-width:768px)');
 
   return (
     <SwipeableDrawer
@@ -103,9 +101,12 @@ function AppSidebar({ open, toggle, user, onLoginModalOpen }) {
         </div>
       ) : (
         <Button
+          variant="outlined"
           className={classes.login}
           onClick={onLoginModalOpen}
-        >{t`Login`}</Button>
+        >
+          {t`Login`}
+        </Button>
       )}
       <Divider classes={{ root: classes.divider }} />
       <List className={classes.list}>
@@ -130,11 +131,9 @@ function AppSidebar({ open, toggle, user, onLoginModalOpen }) {
             @cofacts
           </NavLink>
         </ListItem>
-        {matches && (
-          <ListItem classes={{ root: classes.listItem }}>
-            <GoogleWebsiteTranslator />
-          </ListItem>
-        )}
+        <ListItem classes={{ root: classes.listItem }}>
+          <GoogleWebsiteTranslator />
+        </ListItem>
       </List>
       {true && (
         <>
@@ -152,4 +151,4 @@ function AppSidebar({ open, toggle, user, onLoginModalOpen }) {
   );
 }
 
-export default React.memo(AppSidebar);
+export default React.memo(withDarkTheme(AppSidebar));