Merge pull request #8 from boatnoodle/develop

update style by eyor
boatnoodle · Feb 17, 2020 · bc4eb78 · bc4eb78
2 parents 77a2f3d + 756a531
commit bc4eb78
Show file tree

Hide file tree

Showing 11 changed files with 283 additions and 255 deletions.
diff --git a/.eslintignore b/.eslintignore
@@ -1,4 +1,6 @@
 /public/
 /node_modules/
 /.next
-/public
+/public
+/utils
+/providers
diff --git a/@types/global.d.ts b/@types/global.d.ts
@@ -1,36 +1,36 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 interface Window {
-    __REDUX_DEVTOOLS_EXTENSION__: any;
-    __REDUX_DEVTOOLS_EXTENSION_COMPOSE__: any;
-    __REACT_DEVTOOLS_GLOBAL_HOOK__: any;
+  __REDUX_DEVTOOLS_EXTENSION__: any;
+  __REDUX_DEVTOOLS_EXTENSION_COMPOSE__: any;
+  __REACT_DEVTOOLS_GLOBAL_HOOK__: any;
 }
 declare module '*.png' {
-    const resource: string;
-    export = resource;
+  const resource: string;
+  export = resource;
 }
 declare module '*.svg' {
-    const resource: string;
-    export = resource;
+  const resource: string;
+  export = resource;
 }
 declare module '*.css' {
-    const resource: any;
-    export = resource;
+  const resource: any;
+  export = resource;
 }
 declare module '*.pcss' {
-    const resource: string;
-    export = resource;
+  const resource: string;
+  export = resource;
 }
 declare module '*.json' {
-    const resource: any;
-    export = resource;
+  const resource: any;
+  export = resource;
 }
 
 declare namespace NodeJS {
-    interface Process {
-        browser: boolean;
-    }
-    export interface Global {
-        window: any;
-        fetch: any;
-    }
+  interface Process {
+    browser: boolean;
+  }
+  export interface Global {
+    window: any;
+    fetch: any;
+  }
 }
diff --git a/components/Authentication/context.ts b/components/Authentication/context.ts
@@ -1,11 +1,11 @@
 import React from 'react';
 
 export interface UserSession {
-    initializing: boolean;
-    user?: any;
+  initializing: boolean;
+  user?: any;
 }
 
 export const UserContext = React.createContext<UserSession>({
-    initializing: true,
-    user: null,
+  initializing: true,
+  user: null,
 });
diff --git a/components/Authentication/index.tsx b/components/Authentication/index.tsx
@@ -3,6 +3,6 @@ import { useAuth } from './useAuth';
 import { UserContext } from './context';
 
 export const ProvideAuth = ({ children }) => {
-    const auth = useAuth();
-    return <UserContext.Provider value={auth}>{children}</UserContext.Provider>;
+  const auth = useAuth();
+  return <UserContext.Provider value={auth}>{children}</UserContext.Provider>;
 };
diff --git a/components/Authentication/useAuth.ts b/components/Authentication/useAuth.ts
@@ -3,42 +3,42 @@ import firebase, { User } from 'firebase/app';
 import 'firebase/auth';
 
 export const useAuth = () => {
-    const [initializing, setInitializing] = useState(true);
-    const [user, setUser] = useState();
-    // const [role, setRole] = useState(null);
-    // const [getUserRole, { error }] = useLazyQuery(GET_USER_ROLE, {
-    //     onCompleted: data => {
-    //         const role = data?.User?.role;
-    //         setRole(role);
-    //         setInitializing(false);
-    //         localStorage.setItem('pmbpermissions', role);
-    //     },
-    // });
+  const [initializing, setInitializing] = useState(true);
+  const [user, setUser] = useState();
+  // const [role, setRole] = useState(null);
+  // const [getUserRole, { error }] = useLazyQuery(GET_USER_ROLE, {
+  //     onCompleted: data => {
+  //         const role = data?.User?.role;
+  //         setRole(role);
+  //         setInitializing(false);
+  //         localStorage.setItem('pmbpermissions', role);
+  //     },
+  // });
 
-    const subscribeAuthChange = (user, isSubscribed) => {
-        const authUserJson = user?.toJSON() as any;
-        const authProvider = authUserJson?.providerData[0].providerId;
-        console.log(authUserJson, 'from firebase');
+  const subscribeAuthChange = (user, isSubscribed) => {
+    const authUserJson = user?.toJSON() as any;
+    const authProvider = authUserJson?.providerData[0].providerId;
+    console.log(authUserJson, 'from firebase');
 
-        if (isSubscribed && authUserJson && authProvider === 'facebook.com') {
-            localStorage.setItem('token', authUserJson?.stsTokenManager?.accessToken);
-            setUser(authUserJson);
-        } else {
-            setUser(null);
-            setInitializing(false);
-        }
-    };
+    if (isSubscribed && authUserJson && authProvider === 'facebook.com') {
+      localStorage.setItem('token', authUserJson?.stsTokenManager?.accessToken);
+      setUser(authUserJson);
+    } else {
+      setUser(null);
+      setInitializing(false);
+    }
+  };
 
-    useEffect(() => {
-        let isSubscribed = true;
+  useEffect(() => {
+    let isSubscribed = true;
 
-        const unsubscribe = firebase.auth().onAuthStateChanged(user => subscribeAuthChange(user, isSubscribed));
+    const unsubscribe = firebase.auth().onAuthStateChanged(user => subscribeAuthChange(user, isSubscribed));
 
-        return () => {
-            isSubscribed = false;
-            unsubscribe();
-        };
-    }, []);
+    return () => {
+      isSubscribed = false;
+      unsubscribe();
+    };
+  }, []);
 
-    return { user, initializing };
+  return { user, initializing };
 };
diff --git a/containers/landing-page/Components/TabPaneComponent.tsx b/containers/landing-page/Components/TabPaneComponent.tsx
@@ -1,25 +1,79 @@
-import React, { FunctionComponent, Fragment } from 'react';
-import { Tabs, Icon } from 'antd';
+import React, { FunctionComponent } from 'react';
+import { Tabs } from 'antd';
+import IconHot from '../../../assets/icons/icon-hot.svg';
+import IconTime from '../../../assets/icons/icon-time.svg';
+import IconHashTag from '../../../assets/icons/icon-hastag.svg';
+import IconLike from '../../../assets/icons/icon-like.svg';
+import Styled from 'styled-components';
 
 const { TabPane } = Tabs;
+const tabLists = [
+  {
+    icon: <IconHot />,
+    content: 'test',
+    title: 'กระแส',
+  },
+  {
+    icon: <IconTime />,
+    content: 'test',
+    title: 'ล่าสุด',
+  },
+  {
+    icon: <IconHashTag />,
+    content: 'test',
+    title: 'มาแรง',
+  },
+  {
+    icon: <IconLike />,
+    content: 'test',
+    title: 'แนะนำสำหรับคุณ',
+  },
+];
+const Span = Styled.span`
+    
+    & path.a,& path.b{
+        fill: #657786;
+    },
+    & svg{
+        color:#657786;
+        display:flex;
+    }
+`;
+const AddReviewBtn = Styled.button`
+    position: absolute;
+    top: 0;
+    right: 10px;
+    border-radius: 21px;
+    border: 0;
+    background: #17BF63;
+    color: white;
+    padding: 8px 35px;
+`;
 
+const TabsStyled = Styled(Tabs)`
+    .ant-tabs-tab-active span  path{
+        fill: #17BF63 !important;
+    }
+`;
 export const TabPaneComponent: FunctionComponent = () => {
   return (
-    <Tabs defaultActiveKey="2">
-      <TabPane tab={<span>Tab 1</span>} key="1">
-        Tab 1
-      </TabPane>
-      <TabPane
-        tab={
-          <span>
-            <Icon type="android" />
-            Tab 2
-          </span>
-        }
-        key="2"
-      >
-        Tab 2
-      </TabPane>
-    </Tabs>
+    <React.Fragment>
+      <TabsStyled defaultActiveKey="0">
+        {tabLists.map(({ icon, content, title }, index) => (
+          <TabPane
+            tab={
+              <Span>
+                {icon}
+                {title}
+              </Span>
+            }
+            key={String(index)}
+          >
+            {content}
+          </TabPane>
+        ))}
+      </TabsStyled>
+      <AddReviewBtn>เขียนรีวิว</AddReviewBtn>
+    </React.Fragment>
   );
 };
diff --git a/hooks/ีuseSession.tsx b/hooks/ีuseSession.tsx
@@ -5,5 +5,5 @@ import { UserContext, UserSession } from 'components/Authentication/context';
  * you can useSession only if your component is wrapped with <ProvideAuth>
  */
 export const useSession = () => {
-    return useContext<UserSession>(UserContext);
+  return useContext<UserSession>(UserContext);
 };