Merge pull request #690 from thematters/feat/campaign

Campaign List & Detail

scripts/start.js

@@ -1,48 +1,46 @@
-'use strict';
-
 // Do this as the first thing so that any code reading it knows the right env.
-process.env.BABEL_ENV = 'development';
-process.env.NODE_ENV = 'development';
+process.env.BABEL_ENV = 'development'
+process.env.NODE_ENV = 'development'
 
 // Makes the script crash on unhandled rejections instead of silently
 // ignoring them. In the future, promise rejections that are not handled will
 // terminate the Node.js process with a non-zero exit code.
-process.on('unhandledRejection', err => {
-  throw err;
-});
+process.on('unhandledRejection', (err) => {
+  console.log('....unhandledRejection')
+  throw err
+})
 
 // Ensure environment variables are read.
-require('../config/env');
-
+require('../config/env')
 
-const fs = require('fs');
-const chalk = require('chalk');
-const webpack = require('webpack');
-const WebpackDevServer = require('webpack-dev-server');
-const clearConsole = require('react-dev-utils/clearConsole');
-const checkRequiredFiles = require('react-dev-utils/checkRequiredFiles');
+const fs = require('fs')
+const chalk = require('chalk')
+const webpack = require('webpack')
+const WebpackDevServer = require('webpack-dev-server')
+const clearConsole = require('react-dev-utils/clearConsole')
+const checkRequiredFiles = require('react-dev-utils/checkRequiredFiles')
 const {
   choosePort,
   createCompiler,
   prepareProxy,
   prepareUrls,
-} = require('react-dev-utils/WebpackDevServerUtils');
-const openBrowser = require('react-dev-utils/openBrowser');
-const paths = require('../config/paths');
-const configFactory = require('../config/webpack.config');
-const createDevServerConfig = require('../config/webpackDevServer.config');
+} = require('react-dev-utils/WebpackDevServerUtils')
+const openBrowser = require('react-dev-utils/openBrowser')
+const paths = require('../config/paths')
+const configFactory = require('../config/webpack.config')
+const createDevServerConfig = require('../config/webpackDevServer.config')
 
-const useYarn = fs.existsSync(paths.yarnLockFile);
-const isInteractive = process.stdout.isTTY;
+const useYarn = fs.existsSync(paths.yarnLockFile)
+const isInteractive = process.stdout.isTTY
 
 // Warn and crash if required files are missing
 if (!checkRequiredFiles([paths.appHtml, paths.appIndexJs])) {
-  process.exit(1);
+  process.exit(1)
 }
 
 // Tools like Cloud9 rely on this.
-const DEFAULT_PORT = parseInt(process.env.PORT, 10) || 3000;
-const HOST = process.env.HOST || '0.0.0.0';
+const DEFAULT_PORT = parseInt(process.env.PORT, 10) || 3000
+const HOST = process.env.HOST || '0.0.0.0'
 
 if (process.env.HOST) {
   console.log(
@@ -51,75 +49,73 @@ if (process.env.HOST) {
         chalk.bold(process.env.HOST)
       )}`
     )
-  );
+  )
   console.log(
     `If this was unintentional, check that you haven't mistakenly set it in your shell.`
-  );
+  )
   console.log(
     `Learn more here: ${chalk.yellow('http://bit.ly/CRA-advanced-config')}`
-  );
-  console.log();
+  )
+  console.log()
 }
 
 // We require that you explictly set browsers and do not fall back to
 // browserslist defaults.
-const {
-  checkBrowsers
-} = require('react-dev-utils/browsersHelper');
+const { checkBrowsers } = require('react-dev-utils/browsersHelper')
 checkBrowsers(paths.appPath, isInteractive)
   .then(() => {
     // We attempt to use the default port but if it is busy, we offer the user to
     // run on a different port. `choosePort()` Promise resolves to the next free port.
-    return choosePort(HOST, DEFAULT_PORT);
+    return choosePort(HOST, DEFAULT_PORT)
   })
-  .then(port => {
+  .then((port) => {
     if (port == null) {
       // We have not found a port.
-      return;
+      return
     }
-    const config = configFactory('development');
-    const protocol = process.env.HTTPS === 'true' ? 'https' : 'http';
-    const appName = require(paths.appPackageJson).name;
-    const urls = prepareUrls(protocol, HOST, port);
+    const config = configFactory('development')
+    const protocol = process.env.HTTPS === 'true' ? 'https' : 'http'
+    const appName = require(paths.appPackageJson).name
+    const urls = prepareUrls(protocol, HOST, port)
     // Create a webpack compiler that is configured with custom messages.
     const compiler = createCompiler({
       webpack,
       config,
       appName,
       urls,
-      useYarn
-    });
+      useYarn,
+    })
     // Load proxy config
-    const proxySetting = require(paths.appPackageJson).proxy;
-    const proxyConfig = prepareProxy(proxySetting, paths.appPublic);
+    const proxySetting = require(paths.appPackageJson).proxy
+    const proxyConfig = prepareProxy(proxySetting, paths.appPublic)
     // Serve webpack assets generated by the compiler over a web server.
     const serverConfig = createDevServerConfig(
       proxyConfig,
       urls.lanUrlForConfig
-    );
-    const devServer = new WebpackDevServer(compiler, serverConfig);
+    )
+    const devServer = new WebpackDevServer(compiler, serverConfig)
     // Launch WebpackDevServer.
-    devServer.listen(port, HOST, err => {
+    devServer.listen(port, HOST, (err) => {
       if (err) {
-        return console.log(err);
+        return console.log(err)
       }
       if (isInteractive) {
-        clearConsole();
+        clearConsole()
       }
-      console.log(chalk.cyan('Starting the development server...\n'));
-      openBrowser(urls.localUrlForBrowser);
-    });
+      console.log(chalk.cyan('Starting the development server...\n'))
+      openBrowser(urls.localUrlForBrowser)
+    })
 
-    ['SIGINT', 'SIGTERM'].forEach(function (sig) {
+    ;['SIGINT', 'SIGTERM'].forEach(function (sig) {
       process.on(sig, function () {
-        devServer.close();
-        process.exit();
-      });
-    });
+        devServer.close()
+        process.exit()
+      })
+    })
   })
-  .catch(err => {
+  .catch((err) => {
     if (err && err.message) {
-      console.log(err.message);
+      console.log(err.message)
     }
-    process.exit(1);
-  });
+    process.exit(1)
+  })

src/components/Campaign/AddButton/index.tsx

@@ -0,0 +1,99 @@
+import * as React from 'react'
+import { Button, message } from 'antd'
+import gql from 'graphql-tag'
+import { Mutation } from 'react-apollo'
+import { withRouter, RouteComponentProps } from 'react-router-dom'
+
+import ErrorMessage from '../../../components/ErrorMessage'
+import { PATH } from '../../../constants'
+
+const PUT_CAMPAIGN = gql`
+  mutation AddWritingChallenge($input: PutWritingChallengeInput!) {
+    putWritingChallenge(input: $input) {
+      id
+      shortHash
+    }
+  }
+`
+
+type Props = RouteComponentProps & { onSuccess: any }
+
+type State = {
+  loading: boolean
+  warning: string | null
+  error: any
+}
+
+class AddButton extends React.Component<Props, State> {
+  state = {
+    loading: false,
+    warning: null,
+    error: null,
+  }
+
+  private action = async (putWritingChallenge: any): Promise<any> => {
+    const { history } = this.props
+
+    if (!putWritingChallenge) {
+      return
+    }
+
+    this.setState((prev) => ({
+      ...prev,
+      loading: true,
+      warning: null,
+      error: null,
+    }))
+
+    try {
+      const result = await putWritingChallenge({
+        variables: {
+          input: {},
+        },
+      })
+
+      const shortHash = result?.data?.putWritingChallenge.shortHash
+      if (!shortHash) {
+        throw new Error('invalid shortHash')
+      }
+
+      this.setState(
+        (prev) => ({ ...prev, loading: false, error: null }),
+        async () => {
+          if (this.props.onSuccess) {
+            await this.props.onSuccess()
+          }
+          history.push(PATH.CAMPAIGN_EDIT.replace(':id', shortHash))
+        }
+      )
+    } catch (error) {
+      this.setState(
+        (prev) => ({ ...prev, loading: false, error }),
+        () => message.error('新增失敗')
+      )
+    }
+  }
+
+  public render() {
+    const { loading, warning, error } = this.state
+
+    if (error) {
+      return <ErrorMessage error={error} />
+    }
+
+    return (
+      <Mutation mutation={PUT_CAMPAIGN}>
+        {(putWritingChallenge: any) => (
+          <Button
+            onClick={() => this.action(putWritingChallenge)}
+            disabled={loading}
+          >
+            新增
+          </Button>
+        )}
+      </Mutation>
+    )
+  }
+}
+
+export default withRouter(AddButton)