feat: add feedback

Author: CSUwangj

src/i18n/index.ts

@@ -19,7 +19,8 @@ i18n
             'home': 'Cryptography Learning Platform',
             'tutorial': 'Tutorial',
             'practice': 'Practice',
-            'learning': 'Learning'
+            'learning': 'Learning',
+            'feedback': 'Feedback',
           },
           'homepage': {
             'intro': {
@@ -67,6 +68,7 @@ i18n
             'tutorial': '教程',
             'practice': '实践',
             'learning': '学习',
+            'feedback': '反馈',
           },
           'homepage': {
             'intro': {

src/pages/feedback/index.tsx

@@ -0,0 +1,20 @@
+import React from 'react'
+import styled from '@emotion/styled/macro'
+import { Div } from 'components/Div'
+import { navbarHeight } from 'components/common'
+import { WIP } from 'components/404'
+
+const Wrapper = styled(Div)`
+  min-height: calc(100vh - ${navbarHeight}px);
+  text-align: center;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+`
+
+export const Page: React.FC = () => {
+
+  return <Wrapper>
+    <WIP />
+  </Wrapper>
+}

src/pages/index/index.tsx

@@ -61,6 +61,8 @@ export const Page: React.FC = ({ children }) => {
   // const items = Object.keys(i18n.services.resourceStore.data)
   const [ dark, setDark ] = useState(false)
   const history = useHistory()
+  const feedbackURL = process.env.REACT_APP_FEEDBACK_URL
+  const handleOpenFeedback = feedbackURL ? () => window.open(feedbackURL) : () => history.push('/feedback')
 
   return <Layout className={dark ? 'bp3-dark' : ''}>
     <Header>
@@ -74,6 +76,7 @@ export const Page: React.FC = ({ children }) => {
             {/* <Button minimal large icon={IconNames.HELP} text={t('nav.tutorial')} onClick={() => history.push('/tutorial')} /> */}
             {/* <Button minimal large icon={IconNames.SEARCH} text={t('nav.learning')} onClick={() => history.push('/learning')} /> */}
             <Button minimal large icon={IconNames.FLAG} text={t('nav.practice')} onClick={() => history.push('/practice')} />
+            <Button minimal large icon={IconNames.ENVELOPE} text={t('nav.feedback')} onClick={handleOpenFeedback} />
           </Unselectable>
         </NavbarGroup>
         <NavbarGroup align={Alignment.RIGHT}>

src/route.tsx

@@ -33,6 +33,7 @@ export const Routes: React.FC = () => {
           <RoutePage exact path={Pattern.Lab} page={import('pages/practice')} />
           <RoutePage path='/practice' page={import('pages/practice')} /> 
           <RoutePage path='/learning' page={import('pages/learning')} /> 
+          <RoutePage path='/feedback' page={import('pages/feedback')} />
           <RoutePage exact path='/' page={import('pages/home')} />
           <Redirect to='/' />
         </Switch>