Merge branch 'master' into TWS-7

.travis.yml

@@ -14,7 +14,7 @@ script:
 deploy:
   provider: pages
   local-dir: docs
-  repo: TWstartups/twstartups.github.io
+  repo: TWstartups/twstartup.github.io
   skip-cleanup: true
   github-token: $GITHUB_TOKEN
   keep-history: true

README.md

@@ -1,18 +1,18 @@
 <div align="center">
   <!-- <img src='https://github.com/mapitout/design/blob/master/assets/logo.png?raw=true' width='120px' alt='mapitout-logo.png'/> -->
-  <h1>TWstartups</h1>
+  <h1>TWstartup</h1>
   <p>
     a platform for US VCs to receive more information and reach out to asian startups like Taiwan. In the other hand, we also provide taiwanese start ups resources to expand overseas.
   </p>
 </div>
 
-[![Build Status](https://travis-ci.com/TWstartups/twstartups.svg?branch=master)](https://travis-ci.com/TWstartups/twstartups)
+[![Build Status](https://travis-ci.com/TWstartups/twstartup.svg?branch=master)](https://travis-ci.com/TWstartups/twstartup)
 
 ## Initial Setup
 
 ```
-$ git clone [email protected]:TWstartups/twstartups.github.io.git
-$ cd twstartups
+$ git clone [email protected]:TWstartups/twstartup.github.io.git
+$ cd twstartup
 $ ./scripts/setup.sh
 ```
 

client/.env.production

@@ -1,3 +1,3 @@
-REACT_APP_URL=https://twstartups.herokuapp.com
-REACT_APP_API_URL=https://twstartups.herokuapp.com
+REACT_APP_URL=https://twstartup.herokuapp.com
+REACT_APP_API_URL=https://twstartup.herokuapp.com
 NODE_ENV=production

client/public/index.html

@@ -27,6 +27,7 @@
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css">
+    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
     <script src="https://apis.google.com/js/platform.js" async defer></script>
     <title>React App</title>
   </head>

client/src/assets/scss/styles.scss

@@ -2,7 +2,7 @@ $main-color: #54d1db;
 $red-color: #de624f;
 @import url('https://fonts.googleapis.com/css2?family=Bree+Serif&family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap');
 @import './form.scss';
-@import './companyDetail.scss';
+
 body {
   background-color: #FAFAFA;
 }

client/src/components/company/companyDetail/CompanyIntro.js

@@ -12,7 +12,7 @@ class CompanyIntro extends React.Component {
       return (
         <button
           onClick={() => this.setState({ showIntroModal: true })}
-          className="circular ui icon button"
+          className="circular ui icon button yellow"
         >
           <i className="edit outline icon"></i>
         </button>
@@ -26,21 +26,23 @@ class CompanyIntro extends React.Component {
     })
   }
 
-  renderList = (keyPoints) => {
-    return keyPoints.map(key => {
-      return <ul key={key}>{key}</ul>
-    })
+  renderList = (keyPoints = []) => {
+    if (keyPoints.length > 0) {
+      return (<div className="key-points">
+        <div className='session-header'>Key points</div>
+        {this.renderEditbtn()}
+        {keyPoints.map((k, i) => <div className='key-point-item' key={i}>{k}</div>)}
+      </div>)
+    } else {
+      return <div></div>
+    }
   }
 
   render () {
     return (
       <div className="intro-container">
-        <div>
-          <div className="one-liner">{this.props.company.introduction}</div>
-          {this.renderEditbtn()}
-        </div>
         <ul className="bullet-list">
-          {(this.props.company && this.props.company.keyPoints) && this.renderList(this.props.company.keyPoints)}
+          {this.props.company && this.renderList(this.props.company.keyPoints)}
         </ul>
         {this.state.showIntroModal && <KeyPointModal hideModal={this.hideModal}/>}
       </div>

client/src/components/company/companyDetail/Team.js

@@ -20,7 +20,7 @@ class Team extends React.Component {
       return (
         <button
           onClick={() => this.setState({ showTeamModal: true })}
-          className="circular ui icon button"
+          className="circular ui icon button yellow"
         >
           <i className="edit outline icon"></i>
         </button>
@@ -32,26 +32,22 @@ class Team extends React.Component {
     if (exes && exes.length > 0) {
       return exes.map((exe, id) => {
         return (
-          <div className="exe" key={exe._id}>
+          <div className="exe col-sm-12 col-md-4" key={exe._id}>
             <ImageZone
-              className="executive"
+              className="executive circle"
               src={exe.image}
               type="executive"
               editable={this.props.checkOwnership}
               query={{ type: 'executive', companyId: compnayId, exeIndex: id }}
-              dimension={{ width: '300px', height: '300px' }}
+              dimension={{ width: '70%' }}
             />
             <div className="exe-title">{exe.title}</div>
             <div className="exe-name">
               {exe.firstName}{' '}
               {exe.lastName}
             </div>
-            <a href={exe.link}>
-              <img
-                alt="executive"
-                className="linkedin-logo"
-                src={require('../../../assets/images/linedin.png')}
-              ></img>
+            <a className='info-link' href={exe.link}>
+              <i className='fa fa-linkedin'/>
             </a>
             {this.state.showTeamModal && <TeamModal hideModal={this.hideModal}/>}
           </div>
@@ -64,8 +60,9 @@ class Team extends React.Component {
     const { _id, executives } = this.props.company
     return (
       <div className="team-container">
-        <h2 className="team-title">Executive Team{this.renderEditbtn()}</h2>
-        <div className="team-group">
+        <h2 className="session-header">Executive Team</h2>
+        {this.renderEditbtn()}
+        <div className="team-group row">
           {this.renderExecutive(executives, _id)}
         </div>
       </div>

client/src/components/company/companyDetail/TopProfile.js

@@ -4,6 +4,14 @@ import ImageZone from '../imageZone'
 import ProfileModal from '../modals/ProfileModal'
 import { fetchComp } from '../../../actions'
 
+// const socialLinkIcons = {
+//   facebook: 'facebook',
+//   instagram: 'instagram',
+//   linkedIn: 'linkedin',
+//   twitter: 'twitter',
+//   angelList: 'angellist'
+// }
+
 class TopProfile extends React.Component {
   state = {
     showProfileModal: false
@@ -14,7 +22,7 @@ class TopProfile extends React.Component {
       return (
         <button
           onClick={() => this.setState({ showProfileModal: true })}
-          className="circular ui icon button"
+          className="circular ui icon button yellow"
         >
           <i className="edit outline icon"></i>
         </button>
@@ -30,47 +38,43 @@ class TopProfile extends React.Component {
 
   render () {
     const {
-      companyEmail,
       companyNameEn,
+      introduction,
+      companyEmail,
       website,
+      socialLinks,
       logo,
       _id
     } = this.props.company
+    const socialLinksArr = Object.keys(socialLinks || {})
+    console.log(socialLinksArr)
     return (
       <div className="top-profile-container">
-        <div className="top-profile">
-          <div className="" style={{ textAlign: 'center' }}>
-            <ImageZone className="company-img" src={logo} editable={this.props.checkOwnership} query={{ companyId: _id, type: 'logo' }} dimension={{ width: '200px', height: '200px' }}/>
+        <div className="">
+          <div className="session" style={{ textAlign: 'center' }}>
+            <ImageZone className="company-img circle" src={logo} editable={this.props.checkOwnership} query={{ companyId: _id, type: 'logo' }} dimension={{ height: '100', width: '100' }} style={{ width: '250px' }}/>
           </div>
-          <div className="company-info">
+          <div className="session company-info">
+            <div className="companyNameEn">{companyNameEn}{this.props.company && this.renderEditbtn()}</div>
+
+            <div className="introduction">{introduction}</div>
             <div>
-              {/* eslint-disable-next-line camelcase */}
-              <div className="name-group">
-                <div className="company-name">{companyNameEn}</div>
-                <div className="edit-btn">{this.props.company && this.renderEditbtn()}</div>
-              </div>
-              <div className="ui blue labels">
-                <div className="ui label">Happy</div>
-                <div className="ui label">Smart</div>
-                <div className="ui label">Insane</div>
-                <div className="ui label">Exciting</div>
-              </div>
-            </div>
-            <div className="btn-group">
-              <div
-                className="ui teal button"
-                onClick={() => window.open(`${website}`)}
-              >
+              <div className="info-link highlight" onClick={() => window.open(website)}>
+                <i className="fa fa-globe" aria-hidden="true" />
                 Website
               </div>
-              <a
-                className="ui yellow button"
-                // eslint-disable-next-line camelcase
-                href={`mailto:${companyEmail}`}
-              >
-                Contact
-              </a>
             </div>
+            {companyEmail && <a className="info-link" href={`mailto:${companyEmail}`} rel="noopener noreferrer" target='_blank'>
+              <i className="fa fa-envelope" aria-hidden="true"/>
+            </a>}
+            {socialLinksArr.map(s => (<span key={s}>
+              {socialLinks[s] &&
+                <a className="info-link" rel="noopener noreferrer" href={socialLinks[s]} target='_blank'>
+                  <i className={`fa fa-${s.toLowerCase()}`} aria-hidden="true"/>
+                </a>}
+            </span>)
+            )}
+            <div></div>
           </div>
         </div>
         {this.state.showProfileModal && <ProfileModal hideModal={this.hideModal} />}

client/src/components/company/companyDetail/index.js

@@ -3,32 +3,59 @@ import { connect } from 'react-redux'
 import { fetchComp } from '../../../actions'
 import '../index.scss'
 import TopProfile from './TopProfile'
-import CompanyIntro from './CompanyIntro'
 import ImageZone from '../imageZone'
+import CompanyIntro from './CompanyIntro'
 import Team from './Team'
 import Events from './Events'
+import './style.scss'
 
 class Company extends React.Component {
   componentDidMount () {
     console.log('going to fetch comp')
     this.props.fetchComp(this.props.match.params.id)
   }
 
+  renderProfileEditbtn = () => {
+    if (this.checkOwnership()) {
+      return (
+        <button
+          onClick={() => this.setState({ showProfileModal: true })}
+          className="circular ui icon button"
+        >
+          <i className="edit outline icon"></i>
+        </button>
+      )
+    }
+  };
+
+  renderUploadProfilebtn = () => {
+    if (this.checkOwnership()) {
+      return (
+        <button onClick={() => this.setState({ showUploadProfileModal: true })} className='circular ui icon button'>
+          <i className='edit outline icon'/>
+        </button>
+      )
+    }
+  }
+
   checkOwnership = () => {
     const { user, company } = this.props
     return user.type === 'super' || ((user._id && company.owners) && (company.owners.indexOf(user._id) > -1))
   }
 
   render () {
+    console.log('this.props.company', this.props.company)
     if (!this.props.company) {
       return <div>Loading</div>
     }
     // eslint-disable-next-line camelcase
     const { bannerImg, _id } = this.props.company
     return (
-      <div className="company-container">
+      <div className="component-details-component container">
         <TopProfile checkOwnership={this.checkOwnership()}/>
         <CompanyIntro checkOwnership={this.checkOwnership()}/>
+        {/* <KeyPoints keyPoints={this.props.company.keyPoints}/> */}
+        <h2 className="session-header">Banner</h2>
         <ImageZone className="banner-img" src={bannerImg} editable={this.checkOwnership()} query={{ companyId: _id, type: 'bannerImg' }} dimension={{ width: 400, height: 1000 }} style={{ maxWidth: '1000px', width: '100%' }}/>
         <Team checkOwnership={this.checkOwnership()}/>
         <Events checkOwnership={this.checkOwnership()}/>