Add Setting page (#52)

* Update * Add Setting page * Update README * Add UpdateSetting API * Format * Update * Update * Update * Format * Update
websentry · Jul 18, 2020 · f15a256 · f15a256
1 parent 6a8b92b
commit f15a256
Show file tree

Hide file tree

Showing 9 changed files with 199 additions and 72 deletions.
diff --git a/README.md b/README.md
@@ -2,6 +2,6 @@
 
 [![GitHub](https://img.shields.io/github/license/websentry/WebSentry-FrontEnd.svg)](https://github.com/websentry/WebSentry-FrontEnd/blob/master/LICENSE)
 [![GitHub contributors](https://img.shields.io/github/contributors/websentry/WebSentry-FrontEnd.svg)](https://github.com/websentry/WebSentry-FrontEnd/graphs/contributors)
-[![Build Status](https://travis-ci.com/websentry/WebSentry-FrontEnd.svg?branch=master)](https://travis-ci.com/websentry/WebSentry-FrontEnd)
+[![Netlify Status](https://api.netlify.com/api/v1/badges/ff02aa64-9411-4fb6-87cc-e31112e20353/deploy-status)](https://app.netlify.com/sites/websentry-dev-9f2775/deploys)
 
 This repository only holds the WebSentry Front-end. For more details, please visit [the main repositiory](https://github.com/websentry/WebSentry).
diff --git a/package.json b/package.json
@@ -12,6 +12,7 @@
     "less": "^3.12.0",
     "less-loader": "4.1.0",
     "moment": "^2.27.0",
+    "moment-timezone": "^0.5.31",
     "react": "^16.13.1",
     "react-app-rewired": "^2.1.6",
     "react-dom": "^16.13.1",

diff --git a/src/helpers/Api.js b/src/helpers/Api.js
@@ -71,6 +71,17 @@ api.getUserInfo = async () => {
     return await requestApi('user/info', {}, null, true);
 }
 
+api.updateSetting = async (lang, tz) => {
+    let params = {}
+    if (lang) {
+        params['lang'] = lang
+    }
+    if (tz) {
+        params['tz'] = tz
+    }
+    return await requestApi('user/update', params, null, true);
+}
+
 api.login = async (email, password, remember = true) => {
     localStorage.removeItem('ws-token');
     sessionStorage.removeItem('ws-token');

diff --git a/src/pages/App.js b/src/pages/App.js
@@ -6,7 +6,7 @@ import NoMatch from './NoMatch';
 import Login from './Login';
 import Register from './Register';
 import {UserContext} from '../UserContext';
-import Api from '../helpers/Api';
+import api from '../helpers/Api';
 import { IntlProvider } from 'react-intl';
 import zh_CN from '../locale/lang/zh_CN.js';
 import en_US from '../locale/lang/en_US.js';
@@ -28,9 +28,9 @@ class App extends Component {
         this.setState({isLoading: true});
       }
 
-      const response = await Api.getUserInfo();
+      const response = await api.getUserInfo();
       console.log(response);
-      if (response.code === Api.code.ok) {
+      if (response.code === api.code.ok) {
         this.setState({
           isLoading: false,
           isLoggedIn: true,

diff --git a/src/pages/dashboard/Container.js b/src/pages/dashboard/Container.js
@@ -4,15 +4,19 @@ import NewSentry from './sentry/NewSentry';
 import Notifications from './Notifications.js'
 import Home from './Home';
 import SentryDetail from './sentry/SentryDetail';
+import Settings from './Settings';
+import NoMatch from '../NoMatch';
 
 class Container extends Component {
   render() {
     return(
         <Switch>
-          <Route exact path="/dashboard" component={Home} />
-          <Route path="/dashboard/newSentry" component={NewSentry} />
-          <Route path="/dashboard/notifications" component={Notifications} />
-          <Route path="/dashboard/sentry/:sentryID" component={SentryDetail} />
+          <Route exact path='/dashboard' component={Home} />
+          <Route path='/dashboard/newSentry' component={NewSentry} />
+          <Route path='/dashboard/notifications' component={Notifications} />
+          <Route path='/dashboard/settings' component={Settings} />
+          <Route path='/dashboard/sentry/:sentryID' component={SentryDetail} />
+          <Route component={NoMatch} />
         </Switch>
     );
   }

diff --git a/src/pages/dashboard/Home.js b/src/pages/dashboard/Home.js
@@ -11,8 +11,7 @@ class Home extends Component {
     super(props);
     this.state = {
       isLoading: true,
-      data: [],
-      notificationList:[]
+      data: []
     };
     this.loadData();
     this.showCreateSentry = () => {
@@ -22,26 +21,22 @@ class Home extends Component {
 
   async loadData() {
     if (!this.state.isLoading) {
-      this.setState({isLoading: true});
+      this.setState({
+        isLoading: true
+      });
     }
 
     const response = await api.getAllSentries();
-    const response2 = await api.getAllNotifications();
 
-    console.log(response);
-    console.log(response2);
-    if (response.code === api.code.ok && response2.code === api.code.ok) {
+    if (response.code === api.code.ok) {
       this.setState({
         isLoading: false,
-        data: response.data.sentries,
-        notificationList: response2.data.notifications
+        data: response.data.sentries
       });
     } else {
-      console.log("---- Error ----");
+      console.log('---- Error ----');
       console.log(response);
-      console.log(response2);
     }
-
   }
 
   SentryCard(item) {
@@ -52,30 +47,31 @@ class Home extends Component {
 
   render() {
     return (
-      <DashboardLayout page="home">
-      <div>
-        <PageHeader
-          title="Active Sentrys"
-          extra={
-            <Button
-              type="primary"
-              icon={<PlusCircleOutlined />}
-              size="default"
-              onClick={this.showCreateSentry}>
-              Create Sentry
-            </Button>
-          }
-        />
-        <Divider />
-        <List
-          loading={this.state.isLoading}
-          grid={{
-            gutter: 4, xs: 1, sm: 1, md: 2, xl: 3, xxl: 4,
-          }}
-          dataSource={this.state.data}
-          renderItem={this.SentryCard}
-        />
-      </div>
+      <DashboardLayout page='home'>
+        <div>
+          <PageHeader
+            title='Active Sentries'
+            extra={
+              <Button
+                type='primary'
+                icon={<PlusCircleOutlined />}
+                size='default'
+                onClick={this.showCreateSentry}
+              >
+                Create Sentry
+              </Button>
+            }
+          />
+          <Divider />
+          <List
+            loading={this.state.isLoading}
+            grid={{
+              gutter: 4, xs: 1, sm: 1, md: 2, xl: 3, xxl: 4,
+            }}
+            dataSource={this.state.data}
+            renderItem={this.SentryCard}
+          />
+        </div>
       </DashboardLayout>
     );
   }

diff --git a/src/pages/dashboard/Notifications.js b/src/pages/dashboard/Notifications.js
@@ -16,7 +16,7 @@ class Notifications extends Component {
       notificationList: [],
       visible: false,
       addLoading: false,
-      alertMsg: ""
+      alertMsg: ''
     };
     this.handleServerChanSubmit = this.handleServerChanSubmit.bind(this);
   }
@@ -38,7 +38,7 @@ class Notifications extends Component {
         notificationList: response.data.notifications
       });
     } else {
-      console.log("---- Error ----");
+      console.log('---- Error ----');
       console.log(response);
     }
   }
@@ -60,7 +60,7 @@ class Notifications extends Component {
         if (res.code === api.code.ok) {
           this.setState({
             addLoading: false,
-            alertMsg: intl.formatMessage({ id: "notificationSuccessAdd" })
+            alertMsg: intl.formatMessage({ id: 'notificationSuccessAdd' })
           });
           this.loadData();
           this.handleCancel();
@@ -120,38 +120,38 @@ class Notifications extends Component {
       },
     };
     return (
-      <DashboardLayout page="notifications">
-        <div page="dashboardNotifications">
+      <DashboardLayout page='notifications'>
+        <div page='dashboardNotifications'>
           <PageHeader 
-            title="Notification Methods"
+            title='Notification Methods'
             extra={
               <Button
-                type="primary"
+                type='primary'
                 icon={<PlusCircleOutlined />}
-                size="default"
-                style={{ marginLeft: "32px" }}
+                size='default'
+                style={{ marginLeft: '32px' }}
                 onClick={this.showModal}
               >
                 Create Notification Method
               </Button>
             }
           />
-          <Divider style={{ marginBottom: "0px" }} />
+          <Divider style={{ marginBottom: '0px' }} />
           <List 
-            itemLayout="horizontal"
+            itemLayout='horizontal'
             loading={this.state.isLoading}
             dataSource={this.state.notificationList}
             renderItem={this.NotificationCard}
           />
           <Modal
-            title="Create Notification Method"
+            title='Create Notification Method'
             visible={this.state.visible}
             onOk={this.handleOk}
             onCancel={this.handleCancel}
             footer={[
               <Button
-                key="submit"
-                type="primary"
+                key='submit'
+                type='primary'
                 loading={this.state.addLoading}
                 onClick={this.handleServerChanSubmit}
               >
@@ -161,30 +161,30 @@ class Notifications extends Component {
           >
             <h3>ServerChan</h3>
             <Form {...formItemLayout} onSubmit={this.handleServerChanSubmit}>
-              <Form.Item label="Name">
+              <Form.Item label='Name'>
                 {getFieldDecorator('name', {
                   rules: [
                     {
                       type: 'string',
-                      message: intl.formatMessage({ id: "notificationInvalidString" }),
+                      message: intl.formatMessage({ id: 'notificationInvalidString' }),
                     },
                     {
                       required: true,
-                      message: intl.formatMessage({ id: "notificationServerChanName" }),
+                      message: intl.formatMessage({ id: 'notificationServerChanName' }),
                     },
                   ],
                 })(<Input />)}
               </Form.Item>
-              <Form.Item label="SCKEY">
+              <Form.Item label='SCKEY'>
                 {getFieldDecorator('sckey', {
                   rules: [
                     {
                       type: 'string',
-                      message: intl.formatMessage({ id: "notificationInvalidString" }),
+                      message: intl.formatMessage({ id: 'notificationInvalidString' }),
                     },
                     {
                       required: true,
-                      message: intl.formatMessage({ id: "notificationServerChanSCKEY" }),
+                      message: intl.formatMessage({ id: 'notificationServerChanSCKEY' }),
                     },
                   ],
                 })(<Input />)}