cnhh85 · nghianguyent · Oct 17, 2021 · Oct 17, 2021 · Oct 17, 2021 · Oct 17, 2021
diff --git a/.gitignore b/.gitignore
@@ -13,6 +13,7 @@
 
 # misc
 .DS_Store
+.env
 .env.local
 .env.development.local
 .env.test.local

diff --git a/package.json b/package.json
@@ -9,6 +9,7 @@
     "@testing-library/user-event": "^12.1.10",
     "add": "^2.0.6",
     "aos": "^3.0.0-beta.6",
+    "axios": "^0.23.0",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-multi-carousel": "^2.6.5",

diff --git a/public/manifest.json b/public/manifest.json
@@ -1,25 +1,25 @@
 {
-  'short_name': 'React App',
-  'name': 'Create React App Sample',
-  'icons': [
+  "short_name": "React App",
+  "name": "Create React App Sample",
+  "icons": [
     {
-      'src': 'favicon.ico',
-      'sizes': '64x64 32x32 24x24 16x16',
-      'type': 'image/x-icon'
+      "src": "favicon.ico",
+      "sizes": "64x64 32x32 24x24 16x16",
+      "type": "image/x-icon"
     },
     {
-      'src': 'logo192.png',
-      'type': 'image/png',
-      'sizes': '192x192'
+      "src": "logo192.png",
+      "type": "image/png",
+      "sizes": "192x192"
     },
     {
-      'src': 'logo512.png',
-      'type': 'image/png',
-      'sizes': '512x512'
+      "src": "logo512.png",
+      "type": "image/png",
+      "sizes": "512x512"
     }
   ],
-  'start_url': '.',
-  'display': 'standalone',
-  'theme_color': '#000000',
-  'background_color': '#ffffff'
+  "start_url": ".",
+  "display": "standalone",
+  "theme_color": "#000000",
+  "background_color": "#ffffff"
 }
diff --git a/src/App.js b/src/App.js
@@ -1,4 +1,4 @@
-import React, { useEffect } from 'react';
+import React from 'react';
 
 import Home from './container';
 

diff --git a/src/assets/form/Frame.svg b/src/assets/form/Frame.svg
diff --git a/src/assets/form/bg.png b/src/assets/form/bg.png
diff --git a/src/config/index.js b/src/config/index.js
@@ -0,0 +1,9 @@
+const publicRuntimeConfig = {
+    NODE_ENV: process.env.NODE_ENV || 'production',
+    API_URL: process.env.REACT_APP_API_URL,
+    LOCAL_STORAGE_TOKEN_NAME: 'token',
+};
+
+export const { NODE_ENV, API_URL, LOCAL_STORAGE_TOKEN_NAME } = publicRuntimeConfig;
+
+export default publicRuntimeConfig.NODE_ENV;
diff --git a/src/container/FAQ/Question/question.style.js b/src/container/FAQ/Question/question.style.js
@@ -1,3 +1,5 @@
+import styled from 'styled-components';
+
 const StyledContainer = styled.div`
     display: flex;
     flex-direction: column;

diff --git a/src/container/Header/NavBar/index.js b/src/container/Header/NavBar/index.js
@@ -13,13 +13,15 @@ const NavBar = () => {
             <NavLink to="/activities">
                 <BlankButton>Hoạt động</BlankButton>
             </NavLink>
-            <NavLink to="/timeline">
+            <NavLink to="/#submission">
                 <BlankButton>Timeline</BlankButton>
             </NavLink>
             <NavLink to="/faq">
                 <BlankButton>FAQ</BlankButton>
             </NavLink>
-            <FilledButton>ĐĂNG KÍ</FilledButton>
+            <a href="/form">
+                <FilledButton>ĐĂNG KÍ</FilledButton>
+            </a>
         </StyledNavBar>
     );
 };

diff --git a/src/container/activities/index.js b/src/container/activities/index.js
@@ -77,7 +77,9 @@ const Activities = () => {
                                 Đến với FCode các bạn sẽ được tham gia rất nhiều hoạt động bổ ích,
                                 cũng như trau dồi thêm được nhiều kinh nghiệp quý giá
                             </Detail>
-                            <RegisButton data-aos="fade-up">ĐĂNG KÍ</RegisButton>
+                            <a href="/form">
+                                <RegisButton data-aos="fade-up">ĐĂNG KÍ</RegisButton>
+                            </a>
                         </TitleInfo>
                         <CirclesContainer data-aos="fade-left">
                             <CircleWrap>

diff --git a/src/container/activities/style.js b/src/container/activities/style.js
@@ -60,15 +60,14 @@ export const Detail = styled.p`
 export const RegisButton = styled.button`
     width: 98px;
     height: 44px;
-    left: calc(50% - 98px / 2);
-    top: 0px;
+    transition: all 0.3s;
     background: #00db96;
     border-radius: 4px;
     border: none;
     color: white;
     cursor: pointer;
-    transition: all 0.3s;
-    box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
+    box-shadow: 0px 4px 5px rgba(0, 0, 0, 0.14), 0px 1px 10px rgba(0, 0, 0, 0.12),
+        0px 2px 4px rgba(0, 0, 0, 0.2);
     &:hover {
         filter: brightness(95%);
     }
@@ -239,6 +238,9 @@ export const TBHead = styled.h2`
     @media only screen and (max-width: 1240px) {
         font-size: 5vw;
     }
+    @media only screen and (min-width: 768px) {
+        margin-bottom: 30px;
+    }
 `;
 
 export const TBDetail = styled.p`

diff --git a/src/container/form/index.js b/src/container/form/index.js
@@ -0,0 +1,218 @@
+import React, { useRef, useState } from 'react';
+
+import { useHistory } from 'react-router-dom';
+
+import background from '../../assets/form/Frame.svg';
+import { put } from '../../utils/Apicaller';
+import Popup from './popup';
+import {
+    SectionWrapper,
+    FormContainer,
+    FormContent,
+    ImageContainer,
+    FormImage,
+    FormTitle,
+    FormHead,
+    FormDetail,
+    FormWrap,
+    Label,
+    NameInput,
+    InputSmall,
+    InputSmallLeft,
+    OptionContainer,
+    Select,
+    Option,
+    SmallSelect,
+    FormLineWrap,
+    Input,
+    CheckBox,
+    SubmitButton,
+} from './style.js';
+
+const initialFormData = Object.freeze({
+    lname: '',
+    fname: '',
+    spec: 'Kĩ thuật phần mềm',
+    id: '',
+    sem: 'LUK1',
+    phone: '',
+    confirm: false,
+});
+
+const Form = () => {
+    const [popupSpec, setPopupSpec] = useState({ isShowing: false, type: '' });
+    const [submit, setSubmit] = useState(initialFormData);
+    const history = useHistory();
+    const svg = useRef();
+    const handleChange = (e) => {
+        setSubmit({
+            ...submit,
+            [e.target.name]:
+                e.target.type === 'checkbox' ? e.target.checked : e.target.value.trim(),
+        });
+    };
+    const handleSubmit = async (e) => {
+        e.preventDefault();
+        if (submit.lname === '' || submit.id === '' || submit.fname === '' || submit.phone === '') {
+            setPopupSpec({ isShowing: true, type: 'missing' });
+        } else if (!submit.confirm) {
+            setPopupSpec({ isShowing: true, type: 'notConfirmed' });
+        } else {
+            setPopupSpec({ isShowing: true, type: 'success' });
+            await put('/api/students', {
+                student: submit,
+            });
+        }
+    };
+
+    const animate = () => {
+        const img = svg.current.contentDocument;
+        let paths = img.querySelectorAll('path');
+        [...paths].forEach((item) => {
+            item.style.strokeDasharray = item.getTotalLength();
+            item.style.fillOpacity = 0;
+            item.style.strokeWidth = '0.5px';
+            item.animate(
+                [
+                    {
+                        strokeDashoffset: item.getTotalLength(),
+                        stroke: '#333',
+                        fillOpacity: 0,
+                    },
+                    {
+                        strokeDashoffset: 0,
+                        stroke: '#333',
+                        fillOpacity: 0,
+                    },
+                    {
+                        stroke: 'white',
+                        fillOpacity: '0.5',
+                    },
+                    {
+                        stroke: 'white',
+                        fillOpacity: '1',
+                    },
+                ],
+                {
+                    duration: 4000,
+                    fill: 'forwards',
+                    easing: 'linear',
+                }
+            );
+        });
+    };
+    return (
+        <SectionWrapper>
+            {popupSpec.isShowing ? (
+                <Popup
+                    type={popupSpec.type}
+                    close={() => setPopupSpec({ isShowing: false, type: '' })}
+                    redirect={() => history.push('/')}
+                />
+            ) : null}
+            <FormContainer>
+                <FormContent>
+                    <FormTitle>
+                        <FormHead>Đăng kí</FormHead>
+                        <FormDetail>
+                            Bạn điền đầy đủ các thông tin dưới đây để nhận thử thách sắp tới từ CLB
+                            nhé!
+                        </FormDetail>
+                    </FormTitle>
+                    <FormWrap>
+                        <Label>Tên</Label>
+                        <NameInput>
+                            <InputSmallLeft
+                                type="text"
+                                name="lname"
+                                placeholder="Nhập tên của bạn"
+                                onChange={(e) => handleChange(e)}
+                            ></InputSmallLeft>
+                            <InputSmall
+                                type="text"
+                                name="fname"
+                                placeholder="Nhập họ của bạn"
+                                onChange={(e) => handleChange(e)}
+                            ></InputSmall>
+                        </NameInput>
+                        <Label htmlFor="spec">Ngành học</Label>
+                        <Select id="spec" name="spec" onChange={(e) => handleChange(e)}>
+                            <Option value="Kĩ thuật phần mềm">Kĩ thuật phần mềm</Option>
+                            <Option value="Trí tuệ nhân tạo">Trí tuệ nhân tạo</Option>
+                            <Option value="An toàn thông tin">An toàn thông tin</Option>
+                            <Option value="Hệ thống thông tin">Hệ thống thông tin</Option>
+                            <Option value="IoT (Internet of Things)">
+                                IoT (Internet of Things)
+                            </Option>
+                            <Option value="hiết kế Mỹ thuật số">Thiết kế Mỹ thuật số</Option>
+                            <Option value="Kinh doanh quốc tế">Kinh doanh quốc tế</Option>
+                            <Option value="Quản trị kinh doanh">Quản trị kinh doanh</Option>
+                            <Option value="Truyền thông đa phương tiện">
+                                Truyền thông đa phương tiện
+                            </Option>
+                            <Option value="Digital Marketing">Digital Marketing</Option>
+                            <Option value="Quản trị dịch vụ du lịch & lữ hành">
+                                Quản trị dịch vụ du lịch & lữ hành
+                            </Option>
+                            <Option value="Quản trị khách sạn">Quản trị khách sạn</Option>
+                            <Option value="Ngôn ngữ Anh">Ngôn ngữ Anh</Option>
+                            <Option value="Ngôn ngữ Nhật">Ngôn ngữ Nhật</Option>
+                            <Option value="Ngôn ngữ Hàn Quốc">Ngôn ngữ Hàn Quốc</Option>
+                        </Select>
+                        <OptionContainer>
+                            <FormLineWrap>
+                                <Label>Mã số sinh viên</Label>
+                                <InputSmallLeft
+                                    type="text"
+                                    id="studentId"
+                                    name="id"
+                                    placeholder="SE170000"
+                                    onChange={(e) => handleChange(e)}
+                                ></InputSmallLeft>
+                            </FormLineWrap>
+                            <FormLineWrap>
+                                <Label htmlFor="sem">Kì học hiện tại</Label>
+                                <SmallSelect id="sem" name="sem" onChange={(e) => handleChange(e)}>
+                                    <Option value="LUK1">LUK1</Option>
+                                    <Option value="LUK2">LUK2</Option>
+                                    <Option value="LUK3">LUK3</Option>
+                                    <Option value="LUK4">LUK4</Option>
+                                    <Option value="LV5">LV5</Option>
+                                    <Option value="LV6">LV6</Option>
+                                    <Option value="CN1">CN1</Option>
+                                </SmallSelect>
+                            </FormLineWrap>
+                        </OptionContainer>
+                        <Label>Số điện thoại</Label>
+                        <Input
+                            type="tel"
+                            id="phone"
+                            name="phone"
+                            placeholder="0987654321"
+                            onChange={(e) => handleChange(e)}
+                        ></Input>
+                        <CheckBox
+                            type="checkbox"
+                            id="confirm"
+                            name="confirm"
+                            checked={submit.confirm}
+                            onChange={(e) => handleChange(e)}
+                        ></CheckBox>
+                        <Label htmlFor="confirm">Tôi đồng ý tham gia thử thách của CLB FCode</Label>
+                    </FormWrap>
+                    <SubmitButton onClick={(e) => handleSubmit(e)}>ĐẮNG KÍ</SubmitButton>
+                </FormContent>
+                <ImageContainer>
+                    <FormImage
+                        data={background}
+                        ref={svg}
+                        onLoad={animate}
+                        area-label="sheild"
+                    ></FormImage>
+                </ImageContainer>
+            </FormContainer>
+        </SectionWrapper>
+    );
+};
+
+export default Form;