Merge pull request #214 from new5558/master

version 0.92 beta

Author: new5558

README.md

@@ -1,16 +1,50 @@
-# CU Blood Component Template
+# CU Blood FrontEnd
 
 
 ## Starting Development Server
 ```
-yarn go
+yarn start:prod
 ```
 
 Runs the app in the development mode.<br>
 Open [http://localhost:3000](http://localhost:3000) to view it in the browser.
 
+## Run production mode
+```
+yarn install
+yarn gencss
+yarn next:build
+yarn start
+```
+
+Need pm2 to always run the node  
+and nginx to reverse proxy to port 80
+
+### There is a login bug when login from localhost
+Since this is only appear in localhost, there will not be a fix for this.  
+- we have provided manual login for localhost use by the following steps:
+1. login from http://next.fives.cloud and copy cookie named "connect.sid" which has value familair to the image
+
+![image](https://user-images.githubusercontent.com/12471844/52804631-423db700-30b7-11e9-8fdf-45b9e28567f7.png)
+
+2. open localhost:3000 and use browser's dev tool to create new cookie named "connect.sid" with the same value copied from the previous step.
+
+![image](https://user-images.githubusercontent.com/12471844/52804581-23d7bb80-30b7-11e9-9b71-886e0c6e393a.png)
+
+3. refreshthe web. you will be now logged in.
+
+![image](https://user-images.githubusercontent.com/12471844/52804671-5b466800-30b7-11e9-928a-9d96375c24ea.png)
+
+
 ## Directory Referencing
 
 Symbol | Directory | Example Usage
 --- | --- | ---
-@ | ./components | `import FacebookCard from '@/shared-components/FacebookCard'`
+@ | ./components | `import FacebookCard from '@/shared-components/FacebookCard'`
+
+
+## Available deployment sites
+https://new5558.surge.sh << old build before migrate from static site to express rendering.  
+https://cu-blood.herokuapp.com << master branch CI/CD NO DOCKER.  
+https://poom-cublood.herokuapp.com << poom branch CI/CD NO DOCKER.  
+http://next.fives.cloud << production branch (same as master but less frequent update)(digital ocean 5$ droplet) NO CD ONLY MANUAL DEPLOY.

components/announcement/local-components/AnnouncementCard.jsx

@@ -1,16 +1,19 @@
-import React from 'react'
+import React, {Component} from 'react'
+import moment from 'moment';
+import I18 from '@/core/i18n';
+let i18n = I18.i18n;
 
-export default class AnnouncementCard extends React.Component {
+export default class AnnouncementCard extends Component {
     render() {
-
         const { text, date, image } = this.props
-
+        i18n.language === 'th' ? moment.locale('th') : moment.locale('en');
+        
         return (
             <div className={"bg-white flex flex-col justify-between shadow-md text-black rounded-lg lg:mb-0 m-5 mt-10"} style={{ width: "19rem" }}>
                 <div className="bg-white flex bg-center bg-cover" style={{ height: '150px', borderTopLeftRadius: '0.5rem', borderTopRightRadius: '0.5rem', backgroundImage: "url(" + image + ")"}}></div>
                 <div className="flex flex-row items-center px-6 bg-white my-5">
                     <div className="pl-2 font-semibold text-lg font-cu-body text-pink-dark">
-                        {date}
+                        {moment(date).format('DD MMMM YYYY')}
                     </div>
                 </div>
                 <div className="px-8 pb-3 bg-white text-sm mb-3 font-cu-body text-lg leading-normal select-none">

components/home/local-components/Statistic.jsx

@@ -42,11 +42,11 @@ class Statistic extends Component {
                             <div className="flex flex-col sm:flex-row w-full items-center">
                                 <div className={`${contentStyle} pt-6 sm:border-b-0 sm:border-r sm:pr-6`}>
                                     {/* <StatisticContent number={statNumber[2]} content={statContent[2]} /> */}
-                                    <StatisticContent number={data[3]} content={t('bloodTypeO')} />
+                                    <StatisticContent number={data[2]} content={t('bloodTypeO')} />
                                 </div>
                                 <div className={`text-center w-full sm:w-1/2 sm:border-b-0 pt-6 sm:pl-6 sm:flex sm:justify-center`}>
                                     {/* <StatisticContent number={statNumber[3]} content={statContent[3]} /> */}
-                                    <StatisticContent number={data[0]} content={t('bloodTypeAB')} />
+                                    <StatisticContent number={data[3]} content={t('bloodTypeAB')} />
                                 </div>
                             </div>
                             <div className="sm:absolute w-full h-full">

components/home/local-components/UrgentAnnouncement.jsx

@@ -1,23 +1,40 @@
 import React, { Component } from "react";
+import moment from 'moment';
+import I18 from '@/core/i18n';
+let i18n = I18.i18n;
 
 class UrgentAnnouncement extends Component {
   render() {
-
-    return (
+    const { commonsData = {}, t } = this.props;
+    i18n.language === 'th' ? moment.locale('th') : moment.locale('en');
+    const startDate = moment(commonsData.startDate);
+    const endDate = moment(commonsData.endDate);
+    const regisEndDate = moment(commonsData.registrationEndDate);
+    const now = moment();
+    const startAndEndMonth = startDate.format('M') === endDate.format('M') 
+      ? startDate.format('MMMM') 
+      : startDate.format('MMM') + '-' + endDate.format('MMM');
+    
+    return commonsData.startDate ?
+    (
       <div className="bg-cb-red flex justify-center sm:block">
         <div className="flex flex-col sm:flex-row py-6 justify-center sm:items-center font-cu-heading text-white">
           <div className=" sm:pb-0 sm:pr-4 md:pr-8 mb-3 sm:mb-0 flex justify-start sm:justify-end">
-            {this.contentDate(`18-21`, `มกราคม`)}
-            {this.contentDesc(`วันบริจาคเลือด`, `อีก 3 วัน`)}
+            {this.contentDate(startDate.format('D') + "-" + endDate.format('D'), startAndEndMonth)}
+            {this.contentDesc(t('donationDate'), `${t('left')} ${endDate.diff(now, 'days')} ${t('days')}`)}
           </div>
           <div className="sm:border-l border-t w-full sm:w-px sm:h-16 special-color"></div>
           <div className=" sm:pl-4 md:pl-8 mt-3 sm:mt-0 flex items-end">
-            {this.contentDate(17, `มกราคม`)}
-            {this.contentDesc(`ปิดการลงทะเบียน`, `อีก 2 วัน`)}
+            {this.contentDate(regisEndDate.format('D'), regisEndDate.format('MMMM'))}
+            {this.contentDesc(t('endOfRegistrationDate'), `${t('left')} ${regisEndDate.diff(now, 'days')} ${t('days')}`)}
           </div>
         </div>
       </div>
-    );
+    ) 
+    :
+    (
+      null
+    )
   }
 
   contentDate = (date, month) => {
@@ -39,4 +56,4 @@ class UrgentAnnouncement extends Component {
   }
 }
 
-export default UrgentAnnouncement;
+export default I18.withNamespaces('index')(UrgentAnnouncement);

components/profile/local-components/Enrollment.jsx

@@ -52,7 +52,7 @@ class Enrollment extends Component {
             return (
                 <div className="bg-cb-grey-lighter pb-10">
                     <div className="layout-wide">
-                        <Header english="ENROLLMENT" thai="ลงทะเบียนเข้าร่วม" englishColor="text-cb-pink" borderColor="border-cb-red" />
+                        <Header english={t('enrollmentSmallHeader')} thai={t('enrollmentBigHeader')} englishColor="text-cb-pink" borderColor="border-cb-red" />
                         <Card>
                             <Detail bigText="ขณะนี้ข้อมูลมีปัญหา โปรดลองใหม่อีกครั้ง" smallText="Error in retrieving information, please try again later"/>
                         </Card>
@@ -68,7 +68,7 @@ class Enrollment extends Component {
             return(
                 <div className="bg-cb-grey-lighter pb-10">
                     <div className="layout-wide">
-                        <Header english="ENROLLMENT" thai="ลงทะเบียนเข้าร่วม" englishColor="text-cb-pink" borderColor="border-cb-red" />
+                        <Header english={t('enrollmentSmallHeader')} thai={t('enrollmentBigHeader')} englishColor="text-cb-pink" borderColor="border-cb-red" />
                         <Card>
                             <Detail bigText="ขณะนี้ไม่ได้อยู่ในช่วงเปิดให้ลงทะเบียน" smallText="Currently, it is not in the registration period."/>
                         </Card>
@@ -109,7 +109,7 @@ class Enrollment extends Component {
         return (
             <div className="bg-cb-grey-lighter pb-10">
                 <div className="layout-wide">
-                    <Header english="ENROLLMENT" thai="ลงทะเบียนเข้าร่วม" englishColor="text-cb-pink" borderColor="border-cb-red" />
+                    <Header english={t('enrollmentSmallHeader')} thai={t('enrollmentBigHeader')} englishColor="text-cb-pink" borderColor="border-cb-red" />
                     <Card>
                         <div className="w-full mb-8 font-cu-heading flex flex-col md:flex-row text-center md:text-left justify-between items-center">
                             <div className="text-3xl">{commonsInfo.name}</div>

components/profile/local-components/EnrollmentHistory.jsx

@@ -12,12 +12,13 @@ class EnrollmentHistory extends Component {
         const commonsInfo = this.props.commonsInfo;
         const sessionInfo = this.props.sessionInfo;
         const content = (commonsInfo !== null) && (sessionInfo !== null) ? this.chooseContent(sessionInfo, commonsInfo) : null
-        
+        const { t } = this.props;
+
         if (commonsInfo === null) {
             return(
             <div className="bg-cb-grey-lighter pb-10">
                 <div className="layout-wide">
-                    <Header english="ENROLLMENT" thai="ลงทะเบียนเข้าร่วม" englishColor="text-cb-pink" borderColor="border-cb-red" />
+                    <Header english={t('enrollmentHistorySmallHeader')} thai={t('enrollmentHistoryBigHeader')} englishColor="text-cb-pink" borderColor="border-cb-red" />
                     <div className="mb-8"><Card><Detail bigText="ขณะนี้ข้อมูลมีปัญหา โปรดลองใหม่อีกครั้ง" smallText="Error in retrieving information, please try again later"/></Card></div>
                 </div>
             </div>
@@ -28,7 +29,7 @@ class EnrollmentHistory extends Component {
             return(
                 <div className="bg-cb-grey-lighter pb-10">
                     <div className="layout-wide">
-                        <Header english="ENROLLMENT" thai="ลงทะเบียนเข้าร่วม" englishColor="text-cb-pink" borderColor="border-cb-red" />
+                        <Header english={t('enrollmentHistorySmallHeader')} thai={t('enrollmentHistoryBigHeader')} englishColor="text-cb-pink" borderColor="border-cb-red" />
                         <div className="mb-8"><Card><Detail bigText="ไม่มีประวัติการเข้าร่วมกิจกรรม" smallText="No enrollment history is available"/></Card></div>
                     </div>
                 </div>
@@ -37,7 +38,7 @@ class EnrollmentHistory extends Component {
         return(
             <div className="bg-cb-grey-lighter">
                 <div className="layout-wide pb-2">
-                    <Header english="ENROLLMENT HISTORY" thai="ประวัติการเข้าร่วมกิจกรรม" englishColor="text-cb-pink" borderColor="border-cb-red" />
+                    <Header english={t('enrollmentHistorySmallHeader')} thai={t('enrollmentHistoryBigHeader')} englishColor="text-cb-pink" borderColor="border-cb-red" />
                     {content}
                 </div>
             </div>
@@ -62,4 +63,4 @@ class EnrollmentHistory extends Component {
     }
 }
 
-export default EnrollmentHistory;
+export default I18.withNamespaces('profile')(EnrollmentHistory);

components/profile/local-components/PersonalInfo.jsx

@@ -13,7 +13,7 @@ class PersonalInfo extends Component {
         return (
             <div className="layout-wide">
                 <div className="flex items-center justify-between">
-                    <Header english="PERSONAL INFORMATION" thai="ข้อมูลส่วนตัว" englishColor="text-cb-pink" borderColor="border-cb-red" />
+                    <Header english={t('personalInfoSmallHeader')} thai={t('personalInfoBigHeader')} englishColor="text-cb-pink" borderColor="border-cb-red" />
                     <Link href="/u/updateInfo" prefetch>
                         <div className="flex font-cu-heading text-sm items-center">
                             <div className="mr-2 hidden sm:block">{t('changeUserInfo')}</div>
@@ -49,7 +49,7 @@ class PersonalInfo extends Component {
                     }}
                 </UserInfoConsumer>
                 <hr className="w-full max-w-xs border border-cb-grey-border" />
-                <Header english="MEDICAL CONDITIONS" thai="โรคประจำตัว / ประวัติการแพ้ยา" englishColor="text-cb-pink" borderColor="border-cb-red" />
+                <Header english={t('medicalInfoSmallHeader')} thai={t('medicalInfoBigHeader')} englishColor="text-cb-pink" borderColor="border-cb-red" />
                 <UserInfoConsumer>
                     {({ userInfo }) => {
                         if ((userInfo === null) || (userInfo === undefined)) {

components/shared-components/UserLogin.jsx

@@ -8,19 +8,19 @@ class UserLogin extends Component {
         const { onSubmit, errorMessage, username, password, onChange, formValid, t} = this.props;
         return (
             <div>
-                <Header borderColor="border-cb-red" english="LOGIN" thai="เข้าสู่ระบบ" englishColor="text-cb-pink" />
-                <div className="text-red mb-4">{errorMessage}</div>
+                <Header borderColor="border-cb-red" english={t('userLoginTitleSmall')} thai={t('userLoginTitleBig')} englishColor="text-cb-pink" />
+                <div className="text-red mb-4">{t(errorMessage)}</div>
                 <form onSubmit={onSubmit}>
-                    <span className="font-cu-heading">อีเมล์</span>
+                    <span className="font-cu-heading">{t('userLogin_Email')}</span>
                     <input autocomplete="new-username" className="bg-cb-grey-light rounded-lg mt-2 w-full h-8 mb-10 p-6" value={username} onChange={onChange} type="text" name="username" />
                     <div className="flex justify-between">
-                        <span className="font-cu-heading">รหัสผ่าน</span>
-                        <span className="font-cu-heading font-semibold text-grey">ลืมรหัสผ่าน</span>
+                        <span className="font-cu-heading">{t('userLogin_Password')}</span>
+                        <span className="font-cu-heading font-semibold text-grey">{t('userLoginForgotPassword')}</span>
                     </div>
                     <input autocomplete="new-password" className="bg-cb-grey-light rounded-lg mt-2 w-full h-8 mb-10 p-6" value={password} onChange={onChange} type="password" name="password" />
                     <div className="flex flex-row justify-between items-center">
-                        <Link href="/registerForm"><a className="no-underline"><span className="font-cu-heading text-grey underline">ลงทะเบียน</span></a></Link>
-                        <button disabled={!formValid} type="submit" className="px-10 py-3 text-white bg-cb-pink rounded-lg btn" id="confirm">เข้าสู่ระบบ</button>
+                        <Link href="/registerForm"><a className="no-underline"><span className="font-cu-heading text-grey underline">{t('userLoginRegister')}</span></a></Link>
+                        <button disabled={!formValid} type="submit" className="px-10 py-3 text-white bg-cb-pink rounded-lg btn" id="confirm">{t('userLoginLogin')}</button>
                     </div>
                 </form>
             </div>

pages/announcement.js

@@ -5,7 +5,6 @@ import Footer from '@/shared-components/Footer';
 import FacebookButton from '@/shared-components/FacebookButton';
 import axios from 'axios';
 import map from 'lodash/map';
-import moment from 'moment';
 
 class Notice extends React.Component {
     constructor(props) {
@@ -16,7 +15,6 @@ class Notice extends React.Component {
             totalPage: this.props.numberOfPage,
             isButtonDisabledRight: false,
             isButtonDisabledLeft: true,
-
         }
     }
 
@@ -117,19 +115,11 @@ class Notice extends React.Component {
 
         const lengthOfArray = this.state.totalPage;
 
-        //format date
-        const announcementDateMoment = (props) => {
-            let data = moment(announcementDate[props]).format('DD MMMM YYYY');
-            return(
-                data
-            );
-        }
-
         //array for cards
         const AnnouncementCardLoop = () => {
             let data = [];
             for(let i = 0; i < lengthOfArray; i++) {
-                data.push(<AnnouncementCard key={i} text={announcementTitle[i]} date={announcementDateMoment(i)} image={announcementImage[i]}/>);
+                data.push(<AnnouncementCard key={i} text={announcementTitle[i]} date={announcementDate[i]} image={announcementImage[i]}/>);
             }
 
             return data;