merge conflict

.babelrc

@@ -1,18 +1,15 @@
 {
-  "presets": ["next/babel", "@zeit/next-typescript/babel"],
+  "presets": ["next/babel"],
   "plugins": [
     [
       "import",
       {
         "libraryName": "antd",
-        "style": true
+        "style": true,
+        "preprocess": false
       }
     ],
-    ["styled-components", {
-      "ssr": true
-    }],
-    [
-      "babel-plugin-root-import"
-    ]
+    ["styled-components", { "ssr": true, "displayName": true }],
+    ["babel-plugin-root-import"]
   ]
-}
+}

.gitignore

@@ -20,4 +20,7 @@ sketch
 
 .next
 
+#env
+.env
+
 # End of https://www.gitignore.io/api/react

Dockerfile

@@ -1,17 +1,38 @@
-FROM node:10-alpine
+#1st Stage
+FROM node:10-alpine as build
 
 # Setting working directory. All the path will be relative to WORKDIR
+
 WORKDIR /usr/src/app
 
 # Installing dependencies
-COPY package*.json ./
+COPY package*.json yarn.lock ./
+
 RUN yarn install
 
 # Copying source files
 COPY . .
 
 # Building app
-RUN npm run build
+RUN yarn build
+
+#2nd Stage
+FROM node:10-alpine
+
+WORKDIR /usr/src/app
+
+ENV USERNAME="boatnoodle"
+ENV PASSWORD="Nattasit222539"
+ENV IMAGE_NAME="repo.treescale.com/boatnoodle/revhere-frontend:latest"
+ENV API_KEY="AIzaSyCf-zMEDcKa8nFOn96jNm-0mmcPlcpABBs"
+ENV AUTH_DOMAIN="revhere-51751.firebaseapp.com"
+ENV DATABASE_URL="https://revhere-51751.firebaseio.com"
+ENV PROJECT_ID="revhere-51751"
+ENV STORAGE_BUCKET="revhere-51751.appspot.com"
+ENV MESSAGING_SENDER_ID="105192741531"
+ENV APP_ID="1:105192741531:web:268a78d5b3667cc7cc843e"
+ENV MEASUREMENT_ID="G-442W9NDKZE"
+
+COPY --from=build /usr/src/app .
 
-# Running the app
-CMD [ "npm", "start" ]
+CMD ["npm", "start"]

components/Firebase/context.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+
+const FirebaseContext = React.createContext(null);
+
+export default FirebaseContext;

components/Firebase/firebase.ts

@@ -0,0 +1,125 @@
+import 'react';
+import Router from 'next/router';
+import firebase from 'firebase/app';
+import 'firebase/auth';
+import { message } from 'antd';
+
+const config = {
+    apiKey: process.env.API_KEY,
+    authDomain: process.env.AUTH_DOMAIN,
+    databaseURL: process.env.DATABASE_URL,
+    projectId: process.env.PROJECT_ID,
+    storageBucket: process.env.STORAGE_BUCKET,
+    messagingSenderId: process.env.MESSAGING_SENDER_ID,
+};
+
+class Firebase {
+    auth: firebase.auth.Auth;
+    facebookAuthProvider: {};
+    constructor() {
+        const app = !firebase.apps.length ? firebase.initializeApp(config) : firebase.app();
+        this.auth = app.auth();
+        this.facebookAuthProvider = firebase.auth.FacebookAuthProvider.PROVIDER_ID;
+    }
+
+    createUserWithEmailAndPassword = async ({ email, password, firstName, lastName }, rootUrl: string) => {
+        const actionCodeSettings = {
+            url: `${rootUrl}/auth`,
+            handleCodeInApp: true,
+        };
+
+        try {
+            const userData = await this.auth.createUserWithEmailAndPassword(email, password);
+            const displayName = `${firstName} ${lastName}`;
+
+            await this.updateProfile(displayName);
+
+            //Send email verification link
+            await userData.user.sendEmailVerification(actionCodeSettings);
+
+            message.success('Your account was created - please verify using link in email.');
+
+            Router.push('/email-sent/register');
+        } catch (error) {
+            const errorMessage = error.message;
+            message.error(errorMessage);
+        }
+    };
+
+    updateProfile = async displayName => {
+        const user = this.auth.currentUser;
+
+        try {
+            const response = user.updateProfile({
+                displayName,
+            });
+            console.log(response);
+        } catch (error) {
+            const errorMessage = error.message;
+            message.error(errorMessage);
+        }
+    };
+
+    signInWithEmailAndPassword = async ({ email, password }) => {
+        try {
+            const userData = await this.auth.signInWithEmailAndPassword(email, password);
+            if (!userData.user.emailVerified) {
+                message.error('Please verify your email.');
+            } else {
+                message.success('Sign in successfully.');
+            }
+        } catch (error) {
+            const errorMessage = error.message;
+            message.error(errorMessage);
+        }
+    };
+
+    signInWithFacebook = async () => {
+        const provider = new firebase.auth.FacebookAuthProvider();
+
+        try {
+            const response = await this.auth.signInWithPopup(provider);
+            message.success('Sign in successfully.');
+            return response;
+        } catch (error) {
+            const errorMessage = error.message;
+            message.error(errorMessage);
+        }
+    };
+
+    sendPasswordResetEmail = async ({ email }: { email: string }, rootUrl: string) => {
+        const actionCodeSettings = {
+            url: `${rootUrl}/auth`,
+            handleCodeInApp: true,
+        };
+
+        try {
+            await this.auth.sendPasswordResetEmail(email, actionCodeSettings);
+            message.success('Please check your email.');
+            Router.push('/email-sent/forgot-password');
+        } catch (error) {
+            const errorMessage = error.message;
+            message.error(errorMessage);
+        }
+    };
+
+    updatePassword = async newPassword => {
+        try {
+            const user = this.auth.currentUser;
+            const response = await user.updatePassword(newPassword);
+            console.log(response);
+        } catch (error) {
+            const errorMessage = error.message;
+            message.error(errorMessage);
+        }
+    };
+
+    doSignOut = async () => {
+        await this.auth.signOut();
+        localStorage.removeItem('pmbtoken');
+        const text = 'Successfully logged out.';
+        message.success(text);
+    };
+}
+
+export { Firebase };

components/Firebase/index.ts

@@ -0,0 +1,6 @@
+import FirebaseContext from './context';
+import { Firebase } from './firebase';
+
+export default Firebase;
+
+export { FirebaseContext };

components/Layout/Component/ButtonFacebookAuth/index.tsx

@@ -0,0 +1,28 @@
+import React, { useContext, Fragment } from 'react';
+import StyledFirebaseAuth from 'react-firebaseui/StyledFirebaseAuth';
+import { FirebaseContext } from 'components/Firebase';
+
+export const ButtonFacebookAuth = () => {
+    const firebase = useContext(FirebaseContext);
+
+    // Configure FirebaseUI.
+    const uiConfig = {
+        callbacks: {
+            signInSuccessWithAuthResult: function(authResult, redirectUrl) {
+                console.log(authResult, redirectUrl);
+                // User successfully signed in.
+                // Return type determines whether we continue the redirect automatically
+                // or whether we leave that to developer to handle.
+                return true;
+            },
+        },
+        // Popup signin flow rather than redirect flow.
+        signInFlow: 'popup',
+        // Redirect to /signedIn after sign in is successful. Alternatively you can provide a callbacks.signInSuccess function.
+        signInSuccessUrl: '/',
+        // We will display Google and Facebook as auth providers.
+        signInOptions: [firebase.facebookAuthProvider],
+    };
+
+    return <StyledFirebaseAuth uiConfig={uiConfig} firebaseAuth={firebase.auth} />;
+};

components/Layout/Component/ModaAuth/index.tsx

@@ -0,0 +1,16 @@
+import React, { useState, useEffect } from 'react';
+
+import { Modal } from 'antd';
+import { ButtonFacebookAuth } from '../ButtonFacebookAuth';
+
+interface Iprops {
+    visible: boolean;
+    handleCancel(any): void;
+}
+export const ModalAuth: React.FunctionComponent<Iprops> = ({ visible, handleCancel }) => {
+    return (
+        <Modal title="เข้าสู่ระบบ" visible={visible} onCancel={handleCancel} footer={null}>
+            <ButtonFacebookAuth />
+        </Modal>
+    );
+};

components/Layout/Component/Navbar/index.tsx

@@ -0,0 +1,81 @@
+import React, { useState } from 'react';
+import Styled from 'styled-components';
+import RouterLInk from 'next/router';
+
+import { Menu, Input, Button } from 'antd';
+import { ModalAuth } from '../ModaAuth';
+
+const { Search } = Input;
+
+const MenuStyled = Styled(Menu)`
+        text-align: right !important;
+        padding:auto 10px;
+    `;
+
+const Logo = Styled.div`
+  background-image: url('static/logo/logo.png');
+    background-size: 53px 48px;
+    background-repeat: no-repeat;
+    background-position: -2px -2px;
+    width: 48px;
+    height: 46px;
+    position: absolute;
+    top: 14px;
+    left: 10px;
+    border-radius: 100%;
+    `;
+
+const MenuItem = Styled(Menu.Item)`
+        color:black;
+        padding:10px 5px;
+        border:none !important;
+        &.ant-menu-item-selected,&:hover{
+            color: gray!important;
+        }
+    `;
+
+const NotificationIcon = Styled.img`
+    width:30px;
+    height:30px;
+`;
+
+// Functionality
+const linkToUrl = url => (url ? RouterLInk.push(url) : null);
+
+const Navbar: React.FunctionComponent = () => {
+    const [visible, setVisible] = useState();
+
+    const handleCancel = e => {
+        setVisible(!visible);
+    };
+
+    const menuList = [
+        {
+            url: null,
+            component: <Search placeholder="ค้นหาบน Revhere" onSearch={value => console.log(value)} />,
+        },
+        {
+            url: '/',
+            component: <NotificationIcon src="static/icons/icon-bell.png" />,
+        },
+        {
+            url: '/',
+            component: <Button onClick={() => setVisible(true)}>เข้าสู่ระบบ</Button>,
+        },
+    ];
+    return (
+        <nav>
+            <Logo />
+            <MenuStyled mode="horizontal" defaultSelectedKeys={['0']}>
+                <MenuItem></MenuItem>
+                {menuList.map((item, index) => (
+                    <MenuItem onClick={() => linkToUrl(item.url)} key={index}>
+                        {item.component}
+                    </MenuItem>
+                ))}
+            </MenuStyled>
+            <ModalAuth handleCancel={handleCancel} visible={visible} />
+        </nav>
+    );
+};
+export default Navbar;

components/Layout/index.tsx

@@ -8,7 +8,6 @@ type LayoutProps = {
 };
 
 const { Footer, Content } = Layout;
-console.log('This shows errors');
 export const Layouts: FunctionComponent<LayoutProps> = ({ children, title }) => (
     <Layout>
         <Head>

containers/landing-page/Components/ReviewItems.tsx

@@ -40,7 +40,7 @@ interface Props {
     title: string;
     subTitle?: string;
     loading?: boolean;
-    items: Array<number>;
+    items: Array<object>;
 }
 export const ReviewItems: React.FunctionComponent<Props> = ({
     title = 'title',