Merge pull request abalone0204#5 from abalone0204/feature/provider

Feature/provider

README.md

@@ -103,3 +103,8 @@
 ## Firfox Plugin
 
 ## Web 
+
+
+## Trouble
+
+- fetch 不能在 header 裡面用中文

front-end/app/API/fetchJob.js

@@ -13,16 +13,14 @@ export default function fetchJob({
     const {
         backend
     } = config
+
     const options = {
         method: 'GET',
-        headers: {
-            "X-Company-Name": company_name,
-            "X-Job-Name": job_name,
-            "X-E04-Job-No": e04_job_no
-        },
         mode: 'cors'
     }
-    return fetch(`${backend}/jobs`, options)
+
+    const url = `${backend}/jobs?company_name=${company_name}&job_name=${job_name}&e04_job_no=${e04_job_no}`
+    return fetch(url, options)
         .then(checkStatus)
         .then(parseJSON)
 }

front-end/app/containers/App.js

@@ -1,3 +1,8 @@
+import getProvider, {
+    getProviderName,
+    getJobQuery
+} from '../providers'
+
 import {
     connect
 } from 'react-redux'
@@ -84,6 +89,7 @@ class App extends React.Component {
         const {
             dispatch
         } = this.props
+
         chrome.storage.sync.get('access_token', (item) => {
             console.log('item ==>', item);
             if (!!item['access_token']) {
@@ -92,6 +98,12 @@ class App extends React.Component {
                 console.log('access token not found');
             }
         })
+
+        const provider = getProvider()
+        const query = getJobQuery(provider)
+        dispatch(requestFetchJob(query))
+
+
     }
 
     render() {
@@ -104,7 +116,7 @@ class App extends React.Component {
         const {
             access_token
         } = user
-        console.log('job==>',job);
+        console.log('job==>', job);
         return (
             <div>
                 test app container

front-end/app/containers/Root.js

@@ -1,16 +1,12 @@
 import { Provider } from 'react-redux'
 import App from './App'
 
-class Root extends React.Component {
-    render() {
-        const {store} = this.props
-        return (
-              <Provider store={store}>
-                  <App/>
-              </Provider>
-            )
-    }
-}
+
+const Root = ({store}) => (
+          <Provider store={store}>
+              <App/>
+          </Provider>
+    )
 
 Root.propTypes = {
   store: React.PropTypes.object.isRequired

front-end/app/index.js

@@ -3,6 +3,10 @@ import Root from './containers/Root'
 import store from './store.js'
 
 
-export default function main(containerId) {
-    ReactDOM.render(<Root store={store}/>, document.getElementById(containerId))
+export default function main(containerId, {
+    job_name,
+    company_name
+}) {
+    ReactDOM.render(<Root store={store} company_name={company_name}/>,
+        document.getElementById(containerId))
 }

front-end/app/providers/104.js

@@ -1,13 +1,15 @@
-const getJobTitile = () => document.querySelector('#job h1')
+const get_job_name = () => document.querySelector('#job h1')
     .firstChild
     .textContent.trim()
-const getCompanyName = () => document.querySelector('#job .company a')
+const get_company_name = () => document.querySelector('#job .company a')
     .firstChild
     .textContent.trim()
+const get_e04_job_no = () => location.search.match(/\?jobno=([^\&]+)/)[1]
 
 const provider = {
-    getJobTitile,
-    getCompanyName
+    get_job_name,
+    get_company_name,
+    get_e04_job_no
 }
 
 export default provider

front-end/app/providers/index.js

@@ -4,4 +4,21 @@ const rootProvider = {
     ["104"]: p104
 }
 
-export default rootProvider
+export function getProviderName() {
+    const matcher = location.host.match(/([^w\.]+)\.com/)
+    if (matcher) {
+        return matcher[1]
+    }
+}
+
+export function getJobQuery(provider) {
+    const jobQuery = {}
+    Object.keys(provider).forEach(key => {
+        jobQuery[key.substring(4)] = provider[key]()
+    })
+    return jobQuery
+}
+
+export default function getProvider () {
+    return rootProvider[getProviderName()]
+}

front-end/app/sagas/fetchJob.js

@@ -13,6 +13,14 @@ import {
     SUCCESS_FETCH_JOB
 } from '../actions/fetchJob.js'
 
+import {
+    REQUEST_CREATE_JOB
+} from '../actions/createJob.js'
+
+import {
+    REQUEST_FETCH_COMMENTS
+} from '../actions/fetchComments.js'
+
 import fetchJob from '../API/fetchJob.js'
 
 export function* watchRequestFetchJob() {
@@ -21,15 +29,29 @@ export function* watchRequestFetchJob() {
 
 export function* fetchJobFlow(action) {
     try {
+
         const job = yield call(fetchJob, action.query)
-        yield put({
-            type: SUCCESS_FETCH_JOB,
-            job
-        })
+        yield call(jobHandler, job, action)
+
     } catch (error) {
         yield put({
             type: FAIL_TO_FETCH_JOB,
             error
         })
     }
-}
+}
+
+export function* jobHandler(job, action) {
+    if (job === null) {
+        yield put({
+            type: REQUEST_CREATE_JOB,
+            params: action.query
+        })
+    } else {
+        yield put({
+            type: SUCCESS_FETCH_JOB,
+            job
+        })
+    }
+}
+

front-end/app/sagas/index.js

@@ -3,12 +3,17 @@ import {watchRequestLeaveComment} from './leaveComment.js'
 import {watchRequestFetchComments} from './fetchComments.js'
 import {watchRequestFetchJob} from './fetchJob.js'
 import {watchRequestCreateJob} from './createJob.js'
+import {
+    transactionOfJobAndComments
+} from './transactionFlows.js'
+
 export default function* rootSaga() {
     yield [
         watchRequestLogin(),
         watchRequestLeaveComment(),
         watchRequestFetchComments(),
         watchRequestFetchJob(),
-        watchRequestCreateJob()
+        watchRequestCreateJob(),
+        transactionOfJobAndComments()
     ]
 }

front-end/app/sagas/leaveComment.js

@@ -11,10 +11,6 @@ import {
 import checkAccessToken from '../API/checkAccessToken.js'
 import createComment from '../API/createComment.js'
 
-import {
-
-} from '../actions/fetchComments.js'
-
 import {
     REQUEST_LEAVE_COMMENT,
     FAIL_TO_LEAVE_COMMENT,

front-end/app/sagas/transactionFlows.js

@@ -0,0 +1,28 @@
+import {
+    takeEvery
+} from 'redux-saga'
+
+import {
+    put,
+    call
+} from 'redux-saga/effects'
+
+import {
+    SUCCESS_CREATE_JOB
+} from '../actions/createJob.js'
+
+import {
+    SUCCESS_FETCH_JOB
+} from '../actions/fetchJob.js'
+
+import {
+    requestFetchComments
+} from '../actions/fetchComments.js'
+
+export function* transactionOfJobAndComments() {
+    yield call(takeEvery, [SUCCESS_CREATE_JOB, SUCCESS_FETCH_JOB], sendRequestToFetchComments)
+}
+
+export function* sendRequestToFetchComments(action) {
+    yield put(requestFetchComments(action.job.id))
+}

front-end/content.js

@@ -1,16 +1,26 @@
-import providers from './app/providers'
+import getProvider, {
+    getProviderName,
+    getJobQuery
+} from './app/providers'
 import renderApp from './app'
 
-console.log('load content script');
 
-const jobTitle = providers['104'].getJobTitile()
-const companyName = providers['104'].getCompanyName()
+const providerName = getProviderName()
+console.log('providerName:', providerName);
+const provider = getProvider()
+console.log('provider:', provider);
+const jobObject = getJobQuery(provider)
+console.log('jobObject:',jobObject);
+const {job_name,company_name} = jobObject
 
 const node = document.createElement('div')
-const nodeId = `${jobTitle}Cla`
+const nodeId = `${job_name}Cla`
 
-console.log(jobTitle,companyName);
+console.log(job_name, company_name);
 node.id = nodeId
 document.body.appendChild(node)
 
-renderApp(nodeId)
+renderApp(nodeId, {
+    job_name,
+    company_name
+})

front-end/dev.js

@@ -1,3 +1,23 @@
 import Loading from './app/components/Loading'
+import fetchJob from './app/API/fetchJob.js'
+import createJob from './app/API/createJob.js'
+const handler = (e) => {
+    const company_name = '中文'
+    const job_name = 'test'
+    const e04_job_no = 'e0444'
 
-ReactDOM.render(<Loading/>, document.querySelector('#container'))
+    fetchJob({
+        company_name,
+        job_name,
+        e04_job_no
+    }).then(result => {
+        console.log('result=>',result);
+    })
+}
+const App = () => (
+    <div>
+        <Loading/>
+        <button onClick={handler}>fetch job</button>
+    </div>
+)
+ReactDOM.render(<App/>, document.querySelector('#container'))