From 510498f1d32dc80bd046a84ce171a71b8a21639f Mon Sep 17 00:00:00 2001
From: Qadzif Kamil Zahari <qadzifi@gmail.com>
Date: Sat, 9 Oct 2021 13:07:13 +0700
Subject: [PATCH 01/37] feat: add survey route

---
 src/routes/App.jsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/routes/App.jsx b/src/routes/App.jsx
index 6f72f0c..487a522 100644
--- a/src/routes/App.jsx
+++ b/src/routes/App.jsx
@@ -63,6 +63,7 @@ function App() {
         <Route exact path="/thread/edit/:thread" component={EditThread} />
         <Route exact path="/profile/update" component={UpdateProfileForm} />
         <Route exact path="/comment/edit/:comment" component={EditComment} />
+        <Route exact path="/survey" />
         <Redirect exact from="" to="page/1" />
       </Switch>
       <Footer />
-- 
GitLab


From f606cbac49099f5b194ea204836b0c3e226a4647 Mon Sep 17 00:00:00 2001
From: "ashila.ghassani" <ashila.ghassani@gmail.com>
Date: Sat, 9 Oct 2021 14:55:12 +0700
Subject: [PATCH 02/37] Initial commit README.md for survey app

---
 src/components/survey/README.md | 14 ++++++++++++++
 1 file changed, 14 insertions(+)
 create mode 100644 src/components/survey/README.md

diff --git a/src/components/survey/README.md b/src/components/survey/README.md
new file mode 100644
index 0000000..bc54639
--- /dev/null
+++ b/src/components/survey/README.md
@@ -0,0 +1,14 @@
+# Diskuy Survey FrontEnd
+
+## Tentang fitur
+
+Fitur ini adalah sebuah fitur yang ditujukan untuk memfasilitasi pengguna Diskuy apabila akan mengadakan survey. Pengguna dapat mengadakan suatu survey lalu meminta pengguna lain untuk mengisi surveynya. Pembuat survey dapat melihat hasil survey apabila masa survey telah berakhir.
+
+## Authors
+Kelompok MemePro
+
+* Ashila Ghassani - NPM : 1806205395
+* Kezia Sulami - NPM: 1806133755
+* Qadzif Kamil Zahari - NPM: 1806205565
+* Iqrar Agalosi Nureyza - NPM: 1806204902
+* Christopher Samuel - NPM: 1806141151
\ No newline at end of file
-- 
GitLab


From d0c440c39c5c1c99c315b6dad651220002011c0d Mon Sep 17 00:00:00 2001
From: Kezia <keziasulami.pooh@gmail.com>
Date: Sat, 30 Oct 2021 15:53:37 +0100
Subject: [PATCH 03/37] Init survey page

---
 src/components/{thread => }/Pagination.jsx |  2 +-
 src/components/Search.jsx                  |  2 +-
 src/components/profile/Profile.jsx         |  2 +-
 src/components/survey/ListSurveys.jsx      | 58 ++++++++++++++++
 src/components/survey/PreviewSurvey.jsx    | 29 ++++++++
 src/components/survey/RecentSurveys.jsx    | 55 +++++++++++++++
 src/components/survey/SurveyList.jsx       | 18 +++++
 src/components/survey/TopSurveys.jsx       | 54 +++++++++++++++
 src/components/thread/RecentThreads.jsx    |  2 +-
 src/components/thread/Thread.jsx           |  2 +-
 src/components/thread/TopThreads.jsx       |  2 +-
 src/components/topic/Topic.jsx             |  2 +-
 src/routes/App.jsx                         | 25 ++++++-
 src/styles/{thread => }/Pagination.css     |  0
 src/styles/survey/ListSurveys.css          | 78 +++++++++++++++++++++
 src/styles/survey/PreviewSurvey.css        | 79 ++++++++++++++++++++++
 16 files changed, 402 insertions(+), 8 deletions(-)
 rename src/components/{thread => }/Pagination.jsx (93%)
 create mode 100644 src/components/survey/ListSurveys.jsx
 create mode 100644 src/components/survey/PreviewSurvey.jsx
 create mode 100644 src/components/survey/RecentSurveys.jsx
 create mode 100644 src/components/survey/SurveyList.jsx
 create mode 100644 src/components/survey/TopSurveys.jsx
 rename src/styles/{thread => }/Pagination.css (100%)
 create mode 100644 src/styles/survey/ListSurveys.css
 create mode 100644 src/styles/survey/PreviewSurvey.css

diff --git a/src/components/thread/Pagination.jsx b/src/components/Pagination.jsx
similarity index 93%
rename from src/components/thread/Pagination.jsx
rename to src/components/Pagination.jsx
index 1def241..82a770e 100644
--- a/src/components/thread/Pagination.jsx
+++ b/src/components/Pagination.jsx
@@ -1,6 +1,6 @@
 import React, { useState } from 'react';
 import PaginationComponent from 'react-js-pagination';
-import '../../styles/thread/Pagination.css';
+import '../styles/Pagination.css';
 
 export default function Pagination(props) {
   const [activePage, setActivePage] = useState(parseInt(props.activePage));
diff --git a/src/components/Search.jsx b/src/components/Search.jsx
index edaaf4c..322df36 100644
--- a/src/components/Search.jsx
+++ b/src/components/Search.jsx
@@ -3,7 +3,7 @@ import React, { useState, useEffect } from 'react';
 import axios from 'axios';
 import ThreadList from './thread/ThreadList';
 import { API_URL } from '../config/keys';
-import Pagination from './thread/Pagination';
+import Pagination from './Pagination';
 import '../styles/Search.css';
 
 export default function Search(props) {
diff --git a/src/components/profile/Profile.jsx b/src/components/profile/Profile.jsx
index a2a4945..32674e4 100644
--- a/src/components/profile/Profile.jsx
+++ b/src/components/profile/Profile.jsx
@@ -6,7 +6,7 @@ import ThreadList from '../thread/ThreadList';
 import axios from 'axios';
 import AuthService from '../../helpers/services/auth.service';
 import { API_URL } from '../../config/keys';
-import Pagination from '../thread/Pagination';
+import Pagination from '../Pagination';
 
 export default function Profile(props) {
   const { params } = props.match;
diff --git a/src/components/survey/ListSurveys.jsx b/src/components/survey/ListSurveys.jsx
new file mode 100644
index 0000000..df5ad58
--- /dev/null
+++ b/src/components/survey/ListSurveys.jsx
@@ -0,0 +1,58 @@
+import React from 'react';
+import '../../styles/survey/ListSurveys.css';
+import Button from '../utility/Button';
+import TopSurveys from './TopSurveys';
+import RecentSurveys from './RecentSurveys';
+import { loggedIn } from '../../helpers/services/auth.service';
+import { Link } from 'react-router-dom';
+
+export default function ListSurveys(props) {
+  return (
+    <div className="listSurveysContainer">
+      <div className="header">
+        <h1>
+          <b>Survey</b>
+        </h1>
+      </div>
+
+      {props.isRecent ? (
+        <div className="listSurveysSection">
+          <div className="subHeaderListSurveys">
+            <div className="tab">
+              <Link to="/survey/1" style={{ textDecoration: 'none' }}>
+                <h3 className="active">Recent</h3>
+              </Link>
+              <Link to="/top/survey/1" style={{ textDecoration: 'none' }}>
+                <h3>Top</h3>
+              </Link>
+            </div>
+            {loggedIn && (
+              <Button text="Create Survey" color="orange" url="create/Survey" />
+            )}
+          </div>
+          <RecentSurveys
+            pageNumber={props.pageNumber}
+            history={props.history}
+          />
+        </div>
+      ) : (
+        <div className="listSurveysSection">
+          <div className="subHeaderListSurveys">
+            <div className="tab">
+              <Link to="/survey/1" style={{ textDecoration: 'none' }}>
+                <h3>Recent</h3>
+              </Link>
+              <Link to="/top/survey/1" style={{ textDecoration: 'none' }}>
+                <h3 className="active">Top</h3>
+              </Link>
+            </div>
+            {loggedIn && (
+              <Button text="Create Survey" color="orange" url="create/Survey" />
+            )}
+          </div>
+          <TopSurveys pageNumber={props.pageNumber} history={props.history} />
+        </div>
+      )}
+    </div>
+  );
+}
diff --git a/src/components/survey/PreviewSurvey.jsx b/src/components/survey/PreviewSurvey.jsx
new file mode 100644
index 0000000..d4a91d0
--- /dev/null
+++ b/src/components/survey/PreviewSurvey.jsx
@@ -0,0 +1,29 @@
+import '../../styles/survey/PreviewSurvey.css';
+import { translate } from '../../helpers/time-util';
+import { Link } from 'react-router-dom';
+
+export default function PreviewSurvey(props) {
+  const { content } = props;
+  const time = translate(content.inserted_at);
+  return (
+    <div className="surveyCard">
+      <div className="surveyCardHeader">
+        <h2 className="previewSurveyTitle">
+          <b>{content.title}</b>
+        </h2>
+      </div>
+      <p className="previewSurveyTopic">{content.topic_name}</p>
+      <div className="surveyCardContent">
+        <p>
+          By{' '}
+          <Link to={`/profile/${content.username}/1`}>{content.username}</Link>{' '}
+          {', '}
+          {window.innerWidth < 780 && (
+            <br></br>
+          )}
+          {time} - <i className="far fa-thumbs-up" /> {content.points}
+        </p>
+      </div>
+    </div>
+  );
+}
diff --git a/src/components/survey/RecentSurveys.jsx b/src/components/survey/RecentSurveys.jsx
new file mode 100644
index 0000000..26c7269
--- /dev/null
+++ b/src/components/survey/RecentSurveys.jsx
@@ -0,0 +1,55 @@
+/* eslint-disable eqeqeq */
+import React, { useEffect, useState, Fragment } from 'react';
+import axios from 'axios';
+import SurveyList from './SurveyList';
+import { API_URL } from '../../config/keys';
+import Pagination from '../Pagination';
+
+export default function RecentSurveys(props) {
+  const [surveys, setSurveys] = useState([]);
+  const [totalItems, setTotalItems] = useState(0);
+
+  const currentPage = props.pageNumber;
+
+  if (currentPage != props.pageNumber) {
+    window.location.reload();
+  }
+
+  useEffect(() => {
+    const fetch = async () => {
+      const responseSurveys = await axios.get(
+        `${API_URL}/surveys/pages/recent/?page=${currentPage}`
+      );
+      const { data } = responseSurveys;
+      setSurveys(data?.data);
+      setTotalItems(data?.metadata?.total_data);
+    };
+    fetch();
+  }, [currentPage]);
+
+  function switchPage(pageNumber) {
+    props.history.push(`/survey/${pageNumber}`);
+    window.location.reload();
+  }
+
+  return (
+    <div className="recentSurveys">
+      {totalItems == 0 ? (
+        <div className="noSurveysMessage">
+          <p>There is no surveys yet.</p>
+        </div>
+      ) : (
+        <Fragment>
+          <SurveyList survey={surveys} />
+          <div className="paginationContainer">
+            <Pagination
+              activePage={currentPage}
+              totalItems={totalItems}
+              switchPage={switchPage}
+            />
+          </div>
+        </Fragment>
+      )}
+    </div>
+  );
+}
diff --git a/src/components/survey/SurveyList.jsx b/src/components/survey/SurveyList.jsx
new file mode 100644
index 0000000..d5944d7
--- /dev/null
+++ b/src/components/survey/SurveyList.jsx
@@ -0,0 +1,18 @@
+import PreviewSurvey from './PreviewSurvey';
+import { Link } from 'react-router-dom';
+
+export default function SurveyList(props) {
+  return (
+    <div className="list_surveys">
+      {props.survey.map((value) => (
+        <Link
+          key={value.id}
+          to={`/topic/${value.topic_name}/${value.id}/page/1`}
+          style={{ textDecoration: 'none' }}
+        >
+          <PreviewSurvey content={value} />
+        </Link>
+      ))}
+    </div>
+  );
+}
diff --git a/src/components/survey/TopSurveys.jsx b/src/components/survey/TopSurveys.jsx
new file mode 100644
index 0000000..b3ae317
--- /dev/null
+++ b/src/components/survey/TopSurveys.jsx
@@ -0,0 +1,54 @@
+/* eslint-disable eqeqeq */
+import React, { useEffect, useState, Fragment } from 'react';
+import axios from 'axios';
+import SurveyList from './SurveyList';
+import { API_URL } from '../../config/keys';
+import Pagination from '../Pagination';
+
+export default function TopSurveys(props) {
+  const [surveys, setSurveys] = useState([]);
+  const currentPage = props.pageNumber;
+  const [totalItems, setTotalItems] = useState(0);
+
+  if (currentPage != props.pageNumber) {
+    window.location.reload();
+  }
+
+  useEffect(() => {
+    const fetch = async () => {
+      const responseSurveys = await axios.get(
+        `${API_URL}/surveys/pages/top/?page=${currentPage}`
+      );
+      const { data } = responseSurveys;
+      setSurveys(data?.data);
+      setTotalItems(data?.metadata?.total_data);
+    };
+    fetch();
+  }, [currentPage]);
+
+  function switchPage(pageNumber) {
+    props.history.push(`/top/survey/${pageNumber}`);
+    window.location.reload();
+  }
+
+  return (
+    <div className="topSurveys">
+      {totalItems == 0 ? (
+        <div className="noSurveysMessage">
+          <p>There is no surveys yet.</p>
+        </div>
+      ) : (
+        <Fragment>
+          <SurveyList survey={surveys} />
+          <div className="paginationContainer">
+            <Pagination
+              activePage={currentPage}
+              totalItems={totalItems}
+              switchPage={switchPage}
+            />
+          </div>
+        </Fragment>
+      )}
+    </div>
+  );
+}
diff --git a/src/components/thread/RecentThreads.jsx b/src/components/thread/RecentThreads.jsx
index ea47f67..7b9d43c 100644
--- a/src/components/thread/RecentThreads.jsx
+++ b/src/components/thread/RecentThreads.jsx
@@ -3,7 +3,7 @@ import React, { useEffect, useState, Fragment } from 'react';
 import axios from 'axios';
 import ThreadList from './ThreadList';
 import { API_URL } from '../../config/keys';
-import Pagination from './Pagination';
+import Pagination from '../Pagination';
 
 export default function RecentThreads(props) {
   const [threads, setThreads] = useState([]);
diff --git a/src/components/thread/Thread.jsx b/src/components/thread/Thread.jsx
index a7fbd64..9726c1e 100644
--- a/src/components/thread/Thread.jsx
+++ b/src/components/thread/Thread.jsx
@@ -10,7 +10,7 @@ import AuthService, {
   loggedIn,
 } from '../../helpers/services/auth.service';
 import { API_URL } from '../../config/keys';
-import Pagination from './Pagination';
+import Pagination from '../Pagination';
 
 export default function Thread(props) {
   const currentUserId = AuthService.getCurrentUserId();
diff --git a/src/components/thread/TopThreads.jsx b/src/components/thread/TopThreads.jsx
index c33b302..ab5b7f0 100644
--- a/src/components/thread/TopThreads.jsx
+++ b/src/components/thread/TopThreads.jsx
@@ -3,7 +3,7 @@ import React, { useEffect, useState, Fragment } from 'react';
 import axios from 'axios';
 import ThreadList from './ThreadList';
 import { API_URL } from '../../config/keys';
-import Pagination from './Pagination';
+import Pagination from '../Pagination';
 
 export default function TopThreads(props) {
   const [threads, setThreads] = useState([]);
diff --git a/src/components/topic/Topic.jsx b/src/components/topic/Topic.jsx
index 32f3b67..3839771 100644
--- a/src/components/topic/Topic.jsx
+++ b/src/components/topic/Topic.jsx
@@ -5,7 +5,7 @@ import ThreadList from '../thread/ThreadList';
 import { API_URL } from '../../config/keys';
 import '../../styles/topic/Topic.css';
 import Button from '../utility/Button';
-import Pagination from '../thread/Pagination';
+import Pagination from '../Pagination';
 import {
   loggedIn,
   authHeader,
diff --git a/src/routes/App.jsx b/src/routes/App.jsx
index 487a522..6373c4d 100644
--- a/src/routes/App.jsx
+++ b/src/routes/App.jsx
@@ -4,6 +4,7 @@ import Topic from '../components/topic/Topic';
 import Navbar from '../components/utility/Navbar';
 import Profile from '../components/profile/Profile';
 import ListThreads from '../components/thread/ListThreads';
+import ListSurveys from '../components/survey/ListSurveys';
 import CreateThread from '../components/thread/CreateThread';
 import LoginForm from '../components/LoginForm';
 import TopicList from '../components/topic/TopicList';
@@ -47,6 +48,28 @@ function App() {
             />
           )}
         />
+        <Route
+          exact
+          path="/survey/:pageNumber"
+          component={(props) => (
+            <ListSurveys
+              isRecent={true}
+              pageNumber={props.match.params.pageNumber}
+              history={props.history}
+            />
+          )}
+        />
+        <Route
+          exact
+          path="/top/survey/:pageNumber"
+          component={(props) => (
+            <ListSurveys
+              isRecent={false}
+              pageNumber={props.match.params.pageNumber}
+              history={props.history}
+            />
+          )}
+        />
         <Route exact path="/topic" component={TopicList} />
         <Route exact path="/profile/:user/page/:pageNumber" component={Profile} />
         <Route exact path="/login" component={LoginForm} />
@@ -63,7 +86,7 @@ function App() {
         <Route exact path="/thread/edit/:thread" component={EditThread} />
         <Route exact path="/profile/update" component={UpdateProfileForm} />
         <Route exact path="/comment/edit/:comment" component={EditComment} />
-        <Route exact path="/survey" />
+        <Route exact path="/surveys" component={ListSurveys}/>
         <Redirect exact from="" to="page/1" />
       </Switch>
       <Footer />
diff --git a/src/styles/thread/Pagination.css b/src/styles/Pagination.css
similarity index 100%
rename from src/styles/thread/Pagination.css
rename to src/styles/Pagination.css
diff --git a/src/styles/survey/ListSurveys.css b/src/styles/survey/ListSurveys.css
new file mode 100644
index 0000000..ad41acb
--- /dev/null
+++ b/src/styles/survey/ListSurveys.css
@@ -0,0 +1,78 @@
+.listSurveysSection {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    margin-top: 56px;
+}
+
+.subHeaderListSurveys {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 28px;
+}
+
+.tab {
+    display: flex;
+    align-items: center;
+}
+
+.tab h3 {
+    font-family: "DM Sans";
+    font-size: 18px;
+    color: #000000;
+    margin-right: 24px;
+    margin-top: 4px;
+    opacity: 0.5;
+}
+
+.tab .active {
+    color: #DE6600 !important;
+    font-weight: bold;
+    opacity: 1!important;
+}
+
+.listSurveysContainer {
+    margin-top: 36px;
+    margin-left: 72px;
+    margin-right: 72px;
+    min-height: 100vh;
+    margin-bottom: 72px;
+}
+
+@media only screen and (min-device-width : 320px) and (max-device-width : 540px) {
+    .listSurveysContainer {
+        margin-top: 24px;
+        margin-left: 36px;
+        margin-right: 36px;
+    }
+    
+    .listSurveysSection {
+        margin-top: 36px;
+    }
+    
+    .subHeaderListSurveys {
+        margin-bottom: 28px;
+        flex-wrap: wrap;
+        justify-content: center;
+        flex-direction: column;
+        justify-content: center;
+    }
+    
+    .tab .active {
+        color: #DE6600 !important;
+        font-weight: bold;
+        opacity: 1!important;
+    }
+
+    .tab h3 {
+        font-size: 16px;
+        margin-right: 28px;
+        margin-left: 28px;
+        margin-top: 4px;
+    }
+
+    .noSurveysMessage p{
+        text-align: center;
+    }
+}
diff --git a/src/styles/survey/PreviewSurvey.css b/src/styles/survey/PreviewSurvey.css
new file mode 100644
index 0000000..27e00b2
--- /dev/null
+++ b/src/styles/survey/PreviewSurvey.css
@@ -0,0 +1,79 @@
+.surveyCard {
+    min-width: 303px;
+    max-width: 3696px;
+    margin-bottom: 20px;
+    padding:20px;
+    box-shadow: 0px 0px 8px 1px rgba(0,0,0,0.25);
+    border-radius: 8px;
+    font-family: "DM Sans";
+}
+
+.previewSurveyTopic {
+    background: #DE6600;
+    color:#ffffff;
+    padding: 4px;
+    border-radius: 4px;
+    width: max-content;
+    margin: 24px 0px 0px 0px;
+    border-radius: 4px;
+    font-size: 14px;
+}
+
+.newSurveyButton {
+    margin-top: 20px;
+    margin-left: 20px;
+}
+
+.fa-thumbs-up {
+    height: 16px;
+    color: #DE6600;
+}
+
+.previewSurveyTitle {
+    font-size: 24px;
+    color: #000000;
+}
+
+.surveyCardContent {
+    margin-top: 8px;
+}
+
+.surveyCardContent p{
+    margin-bottom: 0px;
+    color: #000000;
+}
+
+@media only screen and (min-device-width : 320px) and (max-device-width : 540px) {
+    .surveyCard {
+        min-width: 248px;
+        max-width: 468px;
+        margin-bottom: 20px;
+        padding: 16px;
+    }
+    
+    .previewSurveyTopic {
+        font-size: 14px;
+    }
+    
+    .newSurveyButton {
+        margin-top: 20px;
+        margin-left: 20px;
+    }
+    
+    .previewSurveyTitle {
+        font-size: 24px;
+        color: #000000;
+    }
+    
+    .surveyCardContent {
+        margin-top: 8px;
+    }
+    
+    .surveyCardContent p{
+        margin-bottom: 0px;
+    }
+
+    .surveyCardContent p{
+        text-align: left;
+    }
+}
\ No newline at end of file
-- 
GitLab


From 3565451272514547ed206df2b0145d55627ade64 Mon Sep 17 00:00:00 2001
From: Qadzif Kamil Zahari <qadzifi@gmail.com>
Date: Sat, 30 Oct 2021 22:20:37 +0700
Subject: [PATCH 04/37] feat: :sparkles: add surveys to navbar

---
 src/components/utility/Navbar.jsx | 10 ++++++++++
 1 file changed, 10 insertions(+)

diff --git a/src/components/utility/Navbar.jsx b/src/components/utility/Navbar.jsx
index a6f8038..8e5d7b1 100644
--- a/src/components/utility/Navbar.jsx
+++ b/src/components/utility/Navbar.jsx
@@ -57,6 +57,16 @@ const Navbar = (props) => {
           </button>
         </form>
         <ul className="navbar-nav ml-auto">
+          <li className="nav-item mr-auto">
+            <NavLink
+              exact
+              activeClassName="navbar--active"
+              className="nav-link"
+              to="/surveys"
+            >
+              <b>Surveys</b>
+            </NavLink>
+          </li>
           <li className="nav-item mr-auto">
             <NavLink
               exact
-- 
GitLab


From eb869ec616a50e64afcd7b350299340e52c407f8 Mon Sep 17 00:00:00 2001
From: "ashila.ghassani" <ashila.ghassani@gmail.com>
Date: Sat, 30 Oct 2021 22:30:02 +0700
Subject: [PATCH 05/37] add survey navbar

---
 src/components/utility/Navbar.jsx | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/components/utility/Navbar.jsx b/src/components/utility/Navbar.jsx
index 8e5d7b1..7b427a3 100644
--- a/src/components/utility/Navbar.jsx
+++ b/src/components/utility/Navbar.jsx
@@ -62,9 +62,9 @@ const Navbar = (props) => {
               exact
               activeClassName="navbar--active"
               className="nav-link"
-              to="/surveys"
+              to="/page/1"
             >
-              <b>Surveys</b>
+              <b>Threads</b>
             </NavLink>
           </li>
           <li className="nav-item mr-auto">
@@ -72,9 +72,9 @@ const Navbar = (props) => {
               exact
               activeClassName="navbar--active"
               className="nav-link"
-              to="/page/1"
+              to="/surveys"
             >
-              <b>Threads</b>
+              <b>Surveys</b>
             </NavLink>
           </li>
           <li className="nav-item mr-auto">
-- 
GitLab


From 8e7654fda53d950a2928bdf94f55fc412379fee7 Mon Sep 17 00:00:00 2001
From: "ashila.ghassani" <ashila.ghassani@gmail.com>
Date: Sat, 30 Oct 2021 22:56:25 +0700
Subject: [PATCH 06/37] add search bar survey

---
 src/components/survey/ListSurveys.jsx | 19 ++++++++++++++++++-
 src/components/utility/Navbar.jsx     | 10 +++++-----
 2 files changed, 23 insertions(+), 6 deletions(-)

diff --git a/src/components/survey/ListSurveys.jsx b/src/components/survey/ListSurveys.jsx
index df5ad58..3edbc3d 100644
--- a/src/components/survey/ListSurveys.jsx
+++ b/src/components/survey/ListSurveys.jsx
@@ -46,8 +46,25 @@ export default function ListSurveys(props) {
                 <h3 className="active">Top</h3>
               </Link>
             </div>
+
+            <form
+              className="form-inline my-2 my-lg-0 ml-auto"
+              // onSubmit={handleSearch}
+            >
+              <input
+                className="form-control mr-sm-2"
+                placeholder="Search a Survey"
+                aria-label="Search"
+                required="false"
+                // {...bindSearch}
+              />
+              <button className="btn my-2 my-sm-0 search" type="submit">
+                <i className="fas fa-search" />
+              </button>
+            </form>
+            
             {loggedIn && (
-              <Button text="Create Survey" color="orange" url="create/Survey" />
+              <Button text="Add Survey" color="orange" url="create/Survey" />
             )}
           </div>
           <TopSurveys pageNumber={props.pageNumber} history={props.history} />
diff --git a/src/components/utility/Navbar.jsx b/src/components/utility/Navbar.jsx
index 7b427a3..af9fb38 100644
--- a/src/components/utility/Navbar.jsx
+++ b/src/components/utility/Navbar.jsx
@@ -57,14 +57,14 @@ const Navbar = (props) => {
           </button>
         </form>
         <ul className="navbar-nav ml-auto">
-          <li className="nav-item mr-auto">
+        <li className="nav-item mr-auto">
             <NavLink
               exact
               activeClassName="navbar--active"
               className="nav-link"
-              to="/page/1"
+              to="/surveys"
             >
-              <b>Threads</b>
+              <b>Surveys</b>
             </NavLink>
           </li>
           <li className="nav-item mr-auto">
@@ -72,9 +72,9 @@ const Navbar = (props) => {
               exact
               activeClassName="navbar--active"
               className="nav-link"
-              to="/surveys"
+              to="/page/1"
             >
-              <b>Surveys</b>
+              <b>Threads</b>
             </NavLink>
           </li>
           <li className="nav-item mr-auto">
-- 
GitLab


From 6f639b9a55284aee2bbea8440c30e63be028147f Mon Sep 17 00:00:00 2001
From: Kezia <keziasulami.pooh@gmail.com>
Date: Fri, 26 Nov 2021 00:31:23 +0700
Subject: [PATCH 07/37] Add CI/CD

---
 .gitlab-ci.yml    | 18 ++++++++++++++++++
 netlify.toml      |  2 ++
 public/_redirects |  1 +
 3 files changed, 21 insertions(+)
 create mode 100644 .gitlab-ci.yml
 create mode 100644 netlify.toml
 create mode 100644 public/_redirects

diff --git a/.gitlab-ci.yml b/.gitlab-ci.yml
new file mode 100644
index 0000000..88a8557
--- /dev/null
+++ b/.gitlab-ci.yml
@@ -0,0 +1,18 @@
+image: node:14.18.1
+
+stages:
+  - deploy-to-staging
+
+deploy-to-staging:
+  stage: deploy-to-staging
+  environment:
+    name: staging
+    url: https://memepro-diskuy-frontend.netlify.app
+  only:
+    - staging
+  script:
+    - npm i
+    # your build command
+    - REACT_APP_ENV=staging npm run build
+    - npm install netlify-cli -g --unsafe-perm=true
+    - netlify deploy --prod
diff --git a/netlify.toml b/netlify.toml
new file mode 100644
index 0000000..ca1043a
--- /dev/null
+++ b/netlify.toml
@@ -0,0 +1,2 @@
+[build]
+  publish = "build"
diff --git a/public/_redirects b/public/_redirects
new file mode 100644
index 0000000..f824337
--- /dev/null
+++ b/public/_redirects
@@ -0,0 +1 @@
+/* /index.html 200
\ No newline at end of file
-- 
GitLab


From 003df309f3070c1143373e17e91c318829a4e31e Mon Sep 17 00:00:00 2001
From: Kezia <keziasulami.pooh@gmail.com>
Date: Fri, 26 Nov 2021 00:39:52 +0700
Subject: [PATCH 08/37] Handle if data is undefined, show error message

---
 src/components/survey/RecentSurveys.jsx | 2 +-
 src/components/survey/TopSurveys.jsx    | 2 +-
 src/components/thread/RecentThreads.jsx | 2 +-
 src/components/thread/TopThreads.jsx    | 2 +-
 4 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/components/survey/RecentSurveys.jsx b/src/components/survey/RecentSurveys.jsx
index 26c7269..be72d9d 100644
--- a/src/components/survey/RecentSurveys.jsx
+++ b/src/components/survey/RecentSurveys.jsx
@@ -34,7 +34,7 @@ export default function RecentSurveys(props) {
 
   return (
     <div className="recentSurveys">
-      {totalItems == 0 ? (
+      {totalItems == undefined || totalItems == 0 ? (
         <div className="noSurveysMessage">
           <p>There is no surveys yet.</p>
         </div>
diff --git a/src/components/survey/TopSurveys.jsx b/src/components/survey/TopSurveys.jsx
index b3ae317..3473cc1 100644
--- a/src/components/survey/TopSurveys.jsx
+++ b/src/components/survey/TopSurveys.jsx
@@ -33,7 +33,7 @@ export default function TopSurveys(props) {
 
   return (
     <div className="topSurveys">
-      {totalItems == 0 ? (
+      {totalItems == undefined || totalItems == 0 ? (
         <div className="noSurveysMessage">
           <p>There is no surveys yet.</p>
         </div>
diff --git a/src/components/thread/RecentThreads.jsx b/src/components/thread/RecentThreads.jsx
index 7b9d43c..b50faac 100644
--- a/src/components/thread/RecentThreads.jsx
+++ b/src/components/thread/RecentThreads.jsx
@@ -34,7 +34,7 @@ export default function RecentThreads(props) {
 
   return (
     <div className="recentThreads">
-      {totalItems == 0 ? (
+      {totalItems == undefined || totalItems == 0 ? (
         <div className="noThreadsMessage">
           <p>There is no threads yet.</p>
         </div>
diff --git a/src/components/thread/TopThreads.jsx b/src/components/thread/TopThreads.jsx
index ab5b7f0..f9a49e5 100644
--- a/src/components/thread/TopThreads.jsx
+++ b/src/components/thread/TopThreads.jsx
@@ -33,7 +33,7 @@ export default function TopThreads(props) {
 
   return (
     <div className="topThreads">
-      {totalItems == 0 ? (
+      {totalItems == undefined || totalItems == 0 ? (
         <div className="noThreadsMessage">
           <p>There is no threads yet.</p>
         </div>
-- 
GitLab


From f8fb5fcb1270d7d559a23054ef7bc872b343a16f Mon Sep 17 00:00:00 2001
From: Kezia <keziasulami.pooh@gmail.com>
Date: Sat, 27 Nov 2021 23:37:41 +0700
Subject: [PATCH 09/37] Show survey data when backend not ready

---
 src/components/survey/RecentSurveys.jsx | 14 +++++++---
 src/components/survey/SurveyList.jsx    |  2 +-
 src/components/survey/TopSurveys.jsx    | 17 ++++++++----
 src/config/keys.js                      |  5 +---
 src/helpers/data-util.js                | 35 +++++++++++++++++++++++++
 5 files changed, 59 insertions(+), 14 deletions(-)
 create mode 100644 src/helpers/data-util.js

diff --git a/src/components/survey/RecentSurveys.jsx b/src/components/survey/RecentSurveys.jsx
index be72d9d..8c2f414 100644
--- a/src/components/survey/RecentSurveys.jsx
+++ b/src/components/survey/RecentSurveys.jsx
@@ -4,6 +4,7 @@ import axios from 'axios';
 import SurveyList from './SurveyList';
 import { API_URL } from '../../config/keys';
 import Pagination from '../Pagination';
+import { dummyData } from '../../helpers/data-util';
 
 export default function RecentSurveys(props) {
   const [surveys, setSurveys] = useState([]);
@@ -17,10 +18,15 @@ export default function RecentSurveys(props) {
 
   useEffect(() => {
     const fetch = async () => {
-      const responseSurveys = await axios.get(
-        `${API_URL}/surveys/pages/recent/?page=${currentPage}`
-      );
-      const { data } = responseSurveys;
+      let data;
+      try {
+        const responseSurveys = await axios.get(
+          `${API_URL}/surveys/pages/recent/?page=${currentPage}`
+        );
+        ({ data } = responseSurveys);
+      } catch (error) {
+        data = dummyData();
+      }
       setSurveys(data?.data);
       setTotalItems(data?.metadata?.total_data);
     };
diff --git a/src/components/survey/SurveyList.jsx b/src/components/survey/SurveyList.jsx
index d5944d7..1e7db16 100644
--- a/src/components/survey/SurveyList.jsx
+++ b/src/components/survey/SurveyList.jsx
@@ -7,7 +7,7 @@ export default function SurveyList(props) {
       {props.survey.map((value) => (
         <Link
           key={value.id}
-          to={`/topic/${value.topic_name}/${value.id}/page/1`}
+          to={`/survey/${value.topic_name}/${value.id}`}
           style={{ textDecoration: 'none' }}
         >
           <PreviewSurvey content={value} />
diff --git a/src/components/survey/TopSurveys.jsx b/src/components/survey/TopSurveys.jsx
index 3473cc1..2d129f4 100644
--- a/src/components/survey/TopSurveys.jsx
+++ b/src/components/survey/TopSurveys.jsx
@@ -4,22 +4,29 @@ import axios from 'axios';
 import SurveyList from './SurveyList';
 import { API_URL } from '../../config/keys';
 import Pagination from '../Pagination';
+import { dummyData } from '../../helpers/data-util';
 
 export default function TopSurveys(props) {
   const [surveys, setSurveys] = useState([]);
-  const currentPage = props.pageNumber;
   const [totalItems, setTotalItems] = useState(0);
 
+  const currentPage = props.pageNumber;
+
   if (currentPage != props.pageNumber) {
     window.location.reload();
   }
 
   useEffect(() => {
     const fetch = async () => {
-      const responseSurveys = await axios.get(
-        `${API_URL}/surveys/pages/top/?page=${currentPage}`
-      );
-      const { data } = responseSurveys;
+      let data;
+      try {
+        const responseSurveys = await axios.get(
+          `${API_URL}/surveys/pages/top/?page=${currentPage}`
+        );
+        ({ data } = responseSurveys);
+      } catch (error) {
+        data = dummyData();
+      }
       setSurveys(data?.data);
       setTotalItems(data?.metadata?.total_data);
     };
diff --git a/src/config/keys.js b/src/config/keys.js
index 7486a93..9b898cd 100644
--- a/src/config/keys.js
+++ b/src/config/keys.js
@@ -1,6 +1,3 @@
-export const API_URL =
-	process.env.NODE_ENV === 'development'
-		? process.env.REACT_APP_API_URL || 'https://diskuyapi-google.herokuapp.com/api'
-		: process.env.REACT_APP_API_URL || '/api';
+export const API_URL = process.env.REACT_APP_API_URL || 'https://diskuyapi-google.herokuapp.com/api';
 export const CLIENT_ID =
 	process.env.REACT_APP_CLIENT_ID
diff --git a/src/helpers/data-util.js b/src/helpers/data-util.js
new file mode 100644
index 0000000..cb8efd9
--- /dev/null
+++ b/src/helpers/data-util.js
@@ -0,0 +1,35 @@
+import moment from 'moment';
+
+function getRandomTime(start, end) {
+  return new Date(start.getTime() + Math.random() * (end.getTime() - start.getTime()));
+}
+
+function dummySurveyList(N) {
+  return [ ...Array(N).keys() ]
+  .map(i => i+1)
+  .map(i => ({
+    id: i,
+    title: 'Survey ' + i,
+    topic_name: 'Kategori ' + i,
+    username: 'User ' + i,
+    points: i,
+    inserted_at: getRandomTime(
+      moment().subtract(3, 'd').toDate(),
+      moment().add(3, 'd').toDate(),
+    )
+  }))
+}
+
+function dummyData() {
+  const N = 5;
+  const surveyList = dummySurveyList(N);
+
+  return {
+    data: surveyList,
+    metadata: {
+      total_data: N,
+    }
+  }
+}
+
+export { dummyData };
-- 
GitLab


From 9764e6fc4868874b99f3b0d5ea27193e26a0692e Mon Sep 17 00:00:00 2001
From: "ashila.ghassani" <ashila.ghassani@gmail.com>
Date: Sat, 27 Nov 2021 23:43:13 +0700
Subject: [PATCH 10/37] add front end create number questions

---
 src/components/survey/CreateNumber.jsx | 56 ++++++++++++++++++++++++++
 src/components/survey/CreateSurvey.jsx | 51 +++++++++++++++++++++++
 src/components/survey/ListSurveys.jsx  | 25 +-----------
 src/components/thread/ListThreads.jsx  |  7 ++--
 src/routes/App.jsx                     |  4 ++
 src/styles/thread/Form.css             | 31 ++++++++++++++
 6 files changed, 147 insertions(+), 27 deletions(-)
 create mode 100644 src/components/survey/CreateNumber.jsx
 create mode 100644 src/components/survey/CreateSurvey.jsx

diff --git a/src/components/survey/CreateNumber.jsx b/src/components/survey/CreateNumber.jsx
new file mode 100644
index 0000000..dfdd81f
--- /dev/null
+++ b/src/components/survey/CreateNumber.jsx
@@ -0,0 +1,56 @@
+import axios from 'axios';
+import React, { useState, useEffect } from 'react';
+import { useInput } from '../../helpers/hooks/input-hook';
+import { authHeader } from '../../helpers/services/auth.service';
+import { API_URL } from '../../config/keys';
+import Button from '../utility/Button';
+import { useHistory } from 'react-router';
+import '../../styles/thread/Form.css';
+
+export default function CreateNumber(props) {
+  // const [totalNumber, setTotalNumber] = useState(0);
+  const [input, setInput] = useState(0);
+  const history = useHistory();
+
+
+  const onSubmit = (e) => {
+    e.preventDefault();
+    history.push('/create/survey?value='+input)
+  }
+  
+  return (
+    <div className="formComponentContainer">
+        <div className="header">
+          <h1>
+            <b>Create Survey</b>
+          </h1>
+        </div>
+        <div class = "row">
+          <form onSubmit={onSubmit}>
+            <label htmlFor="Enter number of questions in your survey : "></label>
+            <div class="row">
+              <h5>Enter number of questions in your survey : </h5>
+              <input
+                  type="number" 
+                  value={input}
+                  onChange={(e) => setInput(e.target.value)}
+                  className="num_quest"
+                  name="num_quest"
+                  required="true"
+                  
+              />
+              </div>
+              <div class ="row">
+                <button type="submit" className="btn btn-orange">
+                    <span className="button">Next</span>
+                </button>
+              </div>
+
+            </form>
+        </div>
+   
+    </div>
+  );
+}
+
+
diff --git a/src/components/survey/CreateSurvey.jsx b/src/components/survey/CreateSurvey.jsx
new file mode 100644
index 0000000..1f46b31
--- /dev/null
+++ b/src/components/survey/CreateSurvey.jsx
@@ -0,0 +1,51 @@
+import axios from 'axios';
+import React, { useState, useEffect } from 'react';
+import { useInput } from '../../helpers/hooks/input-hook';
+import { authHeader } from '../../helpers/services/auth.service';
+import { API_URL } from '../../config/keys';
+import Button from '../utility/Button';
+import '../../styles/thread/Form.css';
+
+export default function CreateSurvey({ location }) {
+  const urlParams = new URLSearchParams(location.search);
+  const keywordParam = urlParams.get('value');
+
+  let input_quest = [];
+
+  for (let i = 0; i < keywordParam; i++) {
+    input_quest.push(
+      <li>
+        <h5>Questions {i+1}</h5>
+          <input
+          type="text"
+          className="survey"
+          name="survey"
+          placeholder="Your Survey's Question"
+          required="true"
+        />
+      </li>
+    )    
+  }
+
+  return (
+    <div className="formComponentContainer">
+        <div className="header">
+          <h1>
+            <b>Create Survey</b>
+          </h1>
+
+          <form action="">
+            <ul>
+              {input_quest}
+            </ul>
+               
+            <button type="submit" className="btn btn-orange">
+              <span className="button">Create</span>
+            </button>
+              
+          </form>
+           
+        </div>
+    </div>
+  );
+}
diff --git a/src/components/survey/ListSurveys.jsx b/src/components/survey/ListSurveys.jsx
index 3edbc3d..77c80f9 100644
--- a/src/components/survey/ListSurveys.jsx
+++ b/src/components/survey/ListSurveys.jsx
@@ -26,9 +26,7 @@ export default function ListSurveys(props) {
                 <h3>Top</h3>
               </Link>
             </div>
-            {loggedIn && (
-              <Button text="Create Survey" color="orange" url="create/Survey" />
-            )}
+              <Button text="Create Survey" color="orange" url="create/number" />
           </div>
           <RecentSurveys
             pageNumber={props.pageNumber}
@@ -46,26 +44,7 @@ export default function ListSurveys(props) {
                 <h3 className="active">Top</h3>
               </Link>
             </div>
-
-            <form
-              className="form-inline my-2 my-lg-0 ml-auto"
-              // onSubmit={handleSearch}
-            >
-              <input
-                className="form-control mr-sm-2"
-                placeholder="Search a Survey"
-                aria-label="Search"
-                required="false"
-                // {...bindSearch}
-              />
-              <button className="btn my-2 my-sm-0 search" type="submit">
-                <i className="fas fa-search" />
-              </button>
-            </form>
-            
-            {loggedIn && (
-              <Button text="Add Survey" color="orange" url="create/Survey" />
-            )}
+            <Button text="Create Survey" color="orange" url="create/number" />
           </div>
           <TopSurveys pageNumber={props.pageNumber} history={props.history} />
         </div>
diff --git a/src/components/thread/ListThreads.jsx b/src/components/thread/ListThreads.jsx
index 665c5ef..74c15d5 100644
--- a/src/components/thread/ListThreads.jsx
+++ b/src/components/thread/ListThreads.jsx
@@ -26,9 +26,8 @@ export default function ListThreads(props) {
                 <h3>Top</h3>
               </Link>
             </div>
-            {loggedIn && (
               <Button text="Create Thread" color="orange" url="create/thread" />
-            )}
+            
           </div>
           <RecentThreads
             pageNumber={props.pageNumber}
@@ -46,9 +45,9 @@ export default function ListThreads(props) {
                 <h3 className="active">Top</h3>
               </Link>
             </div>
-            {loggedIn && (
+         
               <Button text="Create Thread" color="orange" url="create/thread" />
-            )}
+          
           </div>
           <TopThreads pageNumber={props.pageNumber} history={props.history} />
         </div>
diff --git a/src/routes/App.jsx b/src/routes/App.jsx
index 6373c4d..80768ae 100644
--- a/src/routes/App.jsx
+++ b/src/routes/App.jsx
@@ -14,6 +14,8 @@ import EditThread from '../components/thread/EditThread';
 import Footer from '../components/utility/Footer';
 import UpdateProfileForm from '../components/profile/UpdateProfileForm.jsx';
 import EditComment from '../components/thread/EditComment';
+import CreateNumber from '../components/survey/CreateNumber';
+import CreateSurvey from '../components/survey/CreateSurvey';
 import {
   BrowserRouter as Router,
   Route,
@@ -75,6 +77,8 @@ function App() {
         <Route exact path="/login" component={LoginForm} />
         <Route exact path="/create/topic" component={CreateTopicForm} />
         <Route exact path="/create/thread" component={CreateThread} />
+        <Route exact path="/create/number" component={CreateNumber} />
+        <Route exact path="/create/survey" component={CreateSurvey} />
         <Route exact path="/search/:input/page/:pageNumber" component={Search} />
         <Route
           exact
diff --git a/src/styles/thread/Form.css b/src/styles/thread/Form.css
index a8909a5..37db4b9 100644
--- a/src/styles/thread/Form.css
+++ b/src/styles/thread/Form.css
@@ -67,6 +67,37 @@ label {
     margin-bottom: 32px;
 }
 
+.num_quest {
+    width: 15%;
+    font-family: "DM Sans";
+    height: 40px;
+    padding: 12px 16px;
+    border-radius: 8px;
+    border: 0;
+    box-shadow: 0px 0px 8px 1px rgba(0,0,0,0.25);
+    margin-bottom: 12px;
+
+}
+
+
+.survey {
+    width: 100%;
+    font-family: "DM Sans";
+    height: 45px;
+    padding: 12px 16px;
+    border-radius: 8px;
+    border: 0;
+    box-shadow: 0px 0px 8px 1px rgba(0,0,0,0.25);
+    margin-bottom: 32px;
+}
+
+ul {
+    list-style-type: none;
+}
+
+.btn-orange{background-color:#DE6600;color: #FFF;}
+.btn-orange:hover{color: #FFF;}
+
 .body {
     min-width: 303px;
     max-width: 3696px;
-- 
GitLab


From c81c76efa79d01ef852608270c778069682017d3 Mon Sep 17 00:00:00 2001
From: "ashila.ghassani" <ashila.ghassani@gmail.com>
Date: Sat, 27 Nov 2021 23:50:30 +0700
Subject: [PATCH 11/37] fixed error

---
 src/components/survey/CreateNumber.jsx | 7 +------
 src/components/survey/CreateSurvey.jsx | 7 +------
 src/components/survey/ListSurveys.jsx  | 1 -
 src/components/thread/ListThreads.jsx  | 7 ++++++-
 4 files changed, 8 insertions(+), 14 deletions(-)

diff --git a/src/components/survey/CreateNumber.jsx b/src/components/survey/CreateNumber.jsx
index dfdd81f..146e0fe 100644
--- a/src/components/survey/CreateNumber.jsx
+++ b/src/components/survey/CreateNumber.jsx
@@ -1,9 +1,4 @@
-import axios from 'axios';
-import React, { useState, useEffect } from 'react';
-import { useInput } from '../../helpers/hooks/input-hook';
-import { authHeader } from '../../helpers/services/auth.service';
-import { API_URL } from '../../config/keys';
-import Button from '../utility/Button';
+import React, { useState} from 'react';
 import { useHistory } from 'react-router';
 import '../../styles/thread/Form.css';
 
diff --git a/src/components/survey/CreateSurvey.jsx b/src/components/survey/CreateSurvey.jsx
index 1f46b31..68197f8 100644
--- a/src/components/survey/CreateSurvey.jsx
+++ b/src/components/survey/CreateSurvey.jsx
@@ -1,9 +1,4 @@
-import axios from 'axios';
-import React, { useState, useEffect } from 'react';
-import { useInput } from '../../helpers/hooks/input-hook';
-import { authHeader } from '../../helpers/services/auth.service';
-import { API_URL } from '../../config/keys';
-import Button from '../utility/Button';
+import React from 'react';
 import '../../styles/thread/Form.css';
 
 export default function CreateSurvey({ location }) {
diff --git a/src/components/survey/ListSurveys.jsx b/src/components/survey/ListSurveys.jsx
index 77c80f9..5fddcfd 100644
--- a/src/components/survey/ListSurveys.jsx
+++ b/src/components/survey/ListSurveys.jsx
@@ -3,7 +3,6 @@ import '../../styles/survey/ListSurveys.css';
 import Button from '../utility/Button';
 import TopSurveys from './TopSurveys';
 import RecentSurveys from './RecentSurveys';
-import { loggedIn } from '../../helpers/services/auth.service';
 import { Link } from 'react-router-dom';
 
 export default function ListSurveys(props) {
diff --git a/src/components/thread/ListThreads.jsx b/src/components/thread/ListThreads.jsx
index 74c15d5..a179fe8 100644
--- a/src/components/thread/ListThreads.jsx
+++ b/src/components/thread/ListThreads.jsx
@@ -26,8 +26,10 @@ export default function ListThreads(props) {
                 <h3>Top</h3>
               </Link>
             </div>
+            {loggedIn && (
               <Button text="Create Thread" color="orange" url="create/thread" />
-            
+            )}
+
           </div>
           <RecentThreads
             pageNumber={props.pageNumber}
@@ -46,7 +48,10 @@ export default function ListThreads(props) {
               </Link>
             </div>
          
+            {loggedIn && (
               <Button text="Create Thread" color="orange" url="create/thread" />
+            )}
+
           
           </div>
           <TopThreads pageNumber={props.pageNumber} history={props.history} />
-- 
GitLab


From 575cd396e6214064670bdd7c2be2c42c3c51664b Mon Sep 17 00:00:00 2001
From: Qadzif Kamil Zahari <qadzifi@gmail.com>
Date: Mon, 29 Nov 2021 07:07:00 +0700
Subject: [PATCH 12/37] feat: show answer table

---
 src/components/survey/ViewSurveyAnswer.jsx | 57 ++++++++++++++++++++++
 src/helpers/data-util.js                   | 14 +++++-
 src/routes/App.jsx                         |  2 +
 src/styles/survey/ViewSurveyAnswer.css     | 40 +++++++++++++++
 4 files changed, 112 insertions(+), 1 deletion(-)
 create mode 100644 src/components/survey/ViewSurveyAnswer.jsx
 create mode 100644 src/styles/survey/ViewSurveyAnswer.css

diff --git a/src/components/survey/ViewSurveyAnswer.jsx b/src/components/survey/ViewSurveyAnswer.jsx
new file mode 100644
index 0000000..592d19c
--- /dev/null
+++ b/src/components/survey/ViewSurveyAnswer.jsx
@@ -0,0 +1,57 @@
+import React from 'react';
+import { dummyQuestionList } from '../../helpers/data-util';
+import '../../styles/survey/ViewSurveyAnswer.css';
+import Button from '../utility/Button'
+
+function SurveyQuestionHeader (props) {
+    const { questionList } = props;
+    console.log(questionList);
+
+    return (
+        <thead>
+            <th>Username</th>
+            { questionList.map(({question}) => <th>{question}</th>)}
+            <th>Timestamp</th>
+        </thead>
+    )
+}
+
+function SurveyQuestionAnswer(props) {
+    const { userId, questionList } = props;
+    const username = `Username ${userId}`
+
+    return (
+        <tbody>
+            <td>{username}</td>
+            { questionList.map(val => <td></td>) }
+            <td>Times</td>
+        </tbody>
+    )
+}
+
+export default function ViewSurveyAnswer (props) {
+    const { params } = props.match;
+    const { survey, page } = params;
+
+    const questionList = dummyQuestionList(10);
+
+    return (
+        <div className="answer-table-container">
+            <div className="header">
+                <h1>
+                    <b>Survey Title</b>
+                </h1>
+            </div>
+            <div className="sub-header">
+                <Button text="Back" color="orange" url="#" />
+            </div>
+            <table>
+                <SurveyQuestionHeader questionList={questionList}/>
+                { [1,2,3,4,5].map(val => <SurveyQuestionAnswer userId={val} questionList={questionList}/>) }
+            </table>
+            <div className="bottom-section">
+                <Button text="Delete Survey" color="orange" url="#" />
+            </div>
+        </div>
+    );
+}
diff --git a/src/helpers/data-util.js b/src/helpers/data-util.js
index cb8efd9..ed4e588 100644
--- a/src/helpers/data-util.js
+++ b/src/helpers/data-util.js
@@ -32,4 +32,16 @@ function dummyData() {
   }
 }
 
-export { dummyData };
+function dummyQuestion (question, id) {
+  return {
+    question,
+    id,
+  }
+}
+
+function dummyQuestionList(amount) {
+  return [...Array(amount).keys()]
+    .map(i => dummyQuestion(`Question ${i+1}`, i+1));
+}
+
+export { dummyData, dummyQuestionList };
diff --git a/src/routes/App.jsx b/src/routes/App.jsx
index 80768ae..da57061 100644
--- a/src/routes/App.jsx
+++ b/src/routes/App.jsx
@@ -16,6 +16,7 @@ import UpdateProfileForm from '../components/profile/UpdateProfileForm.jsx';
 import EditComment from '../components/thread/EditComment';
 import CreateNumber from '../components/survey/CreateNumber';
 import CreateSurvey from '../components/survey/CreateSurvey';
+import ViewSurveyAnswer from '../components/survey/ViewSurveyAnswer';
 import {
   BrowserRouter as Router,
   Route,
@@ -91,6 +92,7 @@ function App() {
         <Route exact path="/profile/update" component={UpdateProfileForm} />
         <Route exact path="/comment/edit/:comment" component={EditComment} />
         <Route exact path="/surveys" component={ListSurveys}/>
+        <Route exact path="/survey/:survey/answer/:page" component={ViewSurveyAnswer}/>
         <Redirect exact from="" to="page/1" />
       </Switch>
       <Footer />
diff --git a/src/styles/survey/ViewSurveyAnswer.css b/src/styles/survey/ViewSurveyAnswer.css
new file mode 100644
index 0000000..b259c15
--- /dev/null
+++ b/src/styles/survey/ViewSurveyAnswer.css
@@ -0,0 +1,40 @@
+table td, table th {
+    max-width: 25%;
+    padding-top: 18px;
+    padding-bottom: 18px;
+}
+
+table th {
+    white-space: nowrap;
+    padding-right: 72px;
+    border-bottom: solid;
+    border-bottom-color: #CFDCE5;
+    border-bottom-width: 2px;
+}
+
+table {
+    display: block;
+    overflow: auto;
+    max-width: 100%;
+    font-family: "DM Sans";
+    font-size: 14px;
+}
+
+.answer-table-container {
+    margin-top: 36px;
+    margin-left: 72px;
+    margin-right: 72px;
+    min-height: 100vh;
+    margin-bottom: 72px;
+}
+
+.sub-header {
+    display: flex;
+    justify-content: end;
+    margin-top: 18px;
+    margin-bottom: 18px;
+}
+
+.bottom-section {
+    margin-top: 144px;
+}
-- 
GitLab


From e23b2c5615e374cdec7b53d7c8ce55c44e895c79 Mon Sep 17 00:00:00 2001
From: Qadzif Kamil Zahari <qadzifi@gmail.com>
Date: Mon, 29 Nov 2021 07:14:53 +0700
Subject: [PATCH 13/37] fix: bypass build error

---
 src/components/survey/ViewSurveyAnswer.jsx | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/components/survey/ViewSurveyAnswer.jsx b/src/components/survey/ViewSurveyAnswer.jsx
index 592d19c..4ae270c 100644
--- a/src/components/survey/ViewSurveyAnswer.jsx
+++ b/src/components/survey/ViewSurveyAnswer.jsx
@@ -33,10 +33,12 @@ export default function ViewSurveyAnswer (props) {
     const { params } = props.match;
     const { survey, page } = params;
 
+    const hotFixVariable = `${survey}${page}`
     const questionList = dummyQuestionList(10);
 
     return (
         <div className="answer-table-container">
+            <div hidden>{hotFixVariable}</div>
             <div className="header">
                 <h1>
                     <b>Survey Title</b>
-- 
GitLab


From 1ac495cab3b93bd69191941b146d3815c7f9dd86 Mon Sep 17 00:00:00 2001
From: Kezia <keziasulami.pooh@gmail.com>
Date: Sat, 4 Dec 2021 10:56:04 +0700
Subject: [PATCH 14/37] google client

---
 src/config/keys.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/config/keys.js b/src/config/keys.js
index 9b898cd..4bb616f 100644
--- a/src/config/keys.js
+++ b/src/config/keys.js
@@ -1,3 +1,3 @@
 export const API_URL = process.env.REACT_APP_API_URL || 'https://diskuyapi-google.herokuapp.com/api';
 export const CLIENT_ID =
-	process.env.REACT_APP_CLIENT_ID
+	process.env.REACT_APP_CLIENT_ID || '501878885013-126phco7bblqngas8kd1ubfa3r0hciq3.apps.googleusercontent.com';
-- 
GitLab


From 7f281d2b7a6b1f069081308b047ea25401c1b6f0 Mon Sep 17 00:00:00 2001
From: Kezia <keziasulami.pooh@gmail.com>
Date: Sun, 5 Dec 2021 09:29:36 +0700
Subject: [PATCH 15/37] 1st Function: Notify Discord when a new thread is
 created

---
 .gitlab-ci.yml                         |  2 +-
 src/components/thread/CreateThread.jsx | 10 ++++++++--
 src/config/keys.js                     |  1 +
 src/helpers/services/auth.service.js   |  5 +++++
 4 files changed, 15 insertions(+), 3 deletions(-)

diff --git a/.gitlab-ci.yml b/.gitlab-ci.yml
index 88a8557..52b5c89 100644
--- a/.gitlab-ci.yml
+++ b/.gitlab-ci.yml
@@ -7,7 +7,7 @@ deploy-to-staging:
   stage: deploy-to-staging
   environment:
     name: staging
-    url: https://memepro-diskuy-frontend.netlify.app
+    url: https://faas-kezia.netlify.app
   only:
     - staging
   script:
diff --git a/src/components/thread/CreateThread.jsx b/src/components/thread/CreateThread.jsx
index 11870d5..dc4399b 100644
--- a/src/components/thread/CreateThread.jsx
+++ b/src/components/thread/CreateThread.jsx
@@ -1,8 +1,8 @@
 import axios from 'axios';
 import React, { useState, useEffect } from 'react';
 import { useInput } from '../../helpers/hooks/input-hook';
-import { authHeader } from '../../helpers/services/auth.service';
-import { API_URL } from '../../config/keys';
+import { authHeader, userData } from '../../helpers/services/auth.service';
+import { API_URL, FAAS_URL } from '../../config/keys';
 import '../../styles/thread/Form.css';
 
 export default function ListThreads(props) {
@@ -51,6 +51,12 @@ export default function ListThreads(props) {
           headers: authHeader(),
         }
       );
+
+      const discordMessage = userData();
+      discordMessage.title = title;
+      axios
+        .post(`${FAAS_URL}/notifyDiscord`, discordMessage);
+
       const { data } = thisThread?.data;
       redirect(`/topic/${data?.topic_name}/${data?.id}/page/1`);
     } catch (error) {
diff --git a/src/config/keys.js b/src/config/keys.js
index 4bb616f..5d90122 100644
--- a/src/config/keys.js
+++ b/src/config/keys.js
@@ -1,3 +1,4 @@
 export const API_URL = process.env.REACT_APP_API_URL || 'https://diskuyapi-google.herokuapp.com/api';
+export const FAAS_URL = 'https://kezia-faas.herokuapp.com/api';
 export const CLIENT_ID =
 	process.env.REACT_APP_CLIENT_ID || '501878885013-126phco7bblqngas8kd1ubfa3r0hciq3.apps.googleusercontent.com';
diff --git a/src/helpers/services/auth.service.js b/src/helpers/services/auth.service.js
index 246d025..5390766 100644
--- a/src/helpers/services/auth.service.js
+++ b/src/helpers/services/auth.service.js
@@ -28,6 +28,11 @@ export const authHeader = () => {
   }
 };
 
+export const userData = () => {
+  const user = JSON.parse(localStorage.getItem('user'));
+  return user.data;
+}
+
 export const loggedIn = JSON.parse(localStorage.getItem('user')) && 1;
 
 export const isAdmin =
-- 
GitLab


From 152fe1c9d25602c5a9a355b59edbae58803144e1 Mon Sep 17 00:00:00 2001
From: Kezia <keziasulami.pooh@gmail.com>
Date: Sun, 5 Dec 2021 09:48:39 +0700
Subject: [PATCH 16/37] google client

---
 src/config/keys.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/config/keys.js b/src/config/keys.js
index 5d90122..9785dbd 100644
--- a/src/config/keys.js
+++ b/src/config/keys.js
@@ -1,4 +1,4 @@
 export const API_URL = process.env.REACT_APP_API_URL || 'https://diskuyapi-google.herokuapp.com/api';
 export const FAAS_URL = 'https://kezia-faas.herokuapp.com/api';
 export const CLIENT_ID =
-	process.env.REACT_APP_CLIENT_ID || '501878885013-126phco7bblqngas8kd1ubfa3r0hciq3.apps.googleusercontent.com';
+	process.env.REACT_APP_CLIENT_ID || '272732138595-ep2nguvntea9lp8jvjok97a235efos69.apps.googleusercontent.com';
-- 
GitLab


From 79df99d0bdbd34d4df5cb7f620ed274a965266b9 Mon Sep 17 00:00:00 2001
From: Kezia <keziasulami.pooh@gmail.com>
Date: Sun, 5 Dec 2021 11:20:41 +0700
Subject: [PATCH 17/37] Update FaaS URL

---
 src/config/keys.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/config/keys.js b/src/config/keys.js
index 9785dbd..7e77404 100644
--- a/src/config/keys.js
+++ b/src/config/keys.js
@@ -1,4 +1,4 @@
 export const API_URL = process.env.REACT_APP_API_URL || 'https://diskuyapi-google.herokuapp.com/api';
-export const FAAS_URL = 'https://kezia-faas.herokuapp.com/api';
+export const FAAS_URL = 'https://faas-kezia-be.netlify.app/.netlify/functions';
 export const CLIENT_ID =
 	process.env.REACT_APP_CLIENT_ID || '272732138595-ep2nguvntea9lp8jvjok97a235efos69.apps.googleusercontent.com';
-- 
GitLab


From 36a9a35738f62d2f8e5f1ae93e1ebf36f665edf3 Mon Sep 17 00:00:00 2001
From: Qadzif Kamil Zahari <qadzifi@gmail.com>
Date: Sat, 11 Dec 2021 02:18:36 +0700
Subject: [PATCH 18/37] feat: pie chart generator

---
 src/components/survey/ViewSurveyAnswer.jsx    | 20 ++--------
 .../survey/diagram/CircleDiagram.jsx          | 40 +++++++++++++++++++
 src/helpers/color.js                          |  9 +++++
 3 files changed, 53 insertions(+), 16 deletions(-)
 create mode 100644 src/components/survey/diagram/CircleDiagram.jsx
 create mode 100644 src/helpers/color.js

diff --git a/src/components/survey/ViewSurveyAnswer.jsx b/src/components/survey/ViewSurveyAnswer.jsx
index 4ae270c..3f3574f 100644
--- a/src/components/survey/ViewSurveyAnswer.jsx
+++ b/src/components/survey/ViewSurveyAnswer.jsx
@@ -2,6 +2,7 @@ import React from 'react';
 import { dummyQuestionList } from '../../helpers/data-util';
 import '../../styles/survey/ViewSurveyAnswer.css';
 import Button from '../utility/Button'
+import CircleDiagram from './diagram/CircleDiagram';
 
 function SurveyQuestionHeader (props) {
     const { questionList } = props;
@@ -34,26 +35,13 @@ export default function ViewSurveyAnswer (props) {
     const { survey, page } = params;
 
     const hotFixVariable = `${survey}${page}`
-    const questionList = dummyQuestionList(10);
 
     return (
         <div className="answer-table-container">
             <div hidden>{hotFixVariable}</div>
-            <div className="header">
-                <h1>
-                    <b>Survey Title</b>
-                </h1>
-            </div>
-            <div className="sub-header">
-                <Button text="Back" color="orange" url="#" />
-            </div>
-            <table>
-                <SurveyQuestionHeader questionList={questionList}/>
-                { [1,2,3,4,5].map(val => <SurveyQuestionAnswer userId={val} questionList={questionList}/>) }
-            </table>
-            <div className="bottom-section">
-                <Button text="Delete Survey" color="orange" url="#" />
-            </div>
+            <svg width={200} height={200}>
+                <CircleDiagram cx={100} cy={100} radius={50} data={[3, 3, 2, 2, 2]}/>
+            </svg>
         </div>
     );
 }
diff --git a/src/components/survey/diagram/CircleDiagram.jsx b/src/components/survey/diagram/CircleDiagram.jsx
new file mode 100644
index 0000000..7964db7
--- /dev/null
+++ b/src/components/survey/diagram/CircleDiagram.jsx
@@ -0,0 +1,40 @@
+import React from 'react';
+import { diagram5Color } from '../../../helpers/color';
+
+export default function CircleDiagram(props) {
+    const { data, radius, cx, cy } = props || {
+        radius: 20,
+    };
+    const strokeWidth = 2*radius;
+    const perimeter = 2 * Math.PI * radius;
+    const cumulativeSum = data.map((val, idx) => data.slice(0,idx).reduce(add, 0));
+    const total = cumulativeSum.slice(-1).pop() + data.slice(-1).pop();
+    const transform = `translate(${cx} ${cy})`;
+
+    return (
+        <g transform={transform}>
+            { data.map((val, idx) =>
+                <CircleSector key={idx} radius={radius} val={val}
+                    width={strokeWidth} total={total} perimeter={perimeter}
+                    offset={cumulativeSum[idx]} color={diagram5Color[idx]}
+                />)
+            }
+        </g>
+    );
+}
+
+function CircleSector(props) {
+    const { radius, color, width, val, total, perimeter, offset } = props;
+    const colorCode = `#${color}`;
+    const length = val / total * perimeter;
+    const dashArray = `${length} ${perimeter - length}`;
+    const transform = `rotate(${offset / total * 360})`
+
+    return (
+        <circle fill='transparent' r={radius} stroke={colorCode} strokeWidth={width}
+            strokeDasharray={dashArray} transform={transform}
+        />
+    )
+}
+
+function add(a,b) { return a+b; }
diff --git a/src/helpers/color.js b/src/helpers/color.js
new file mode 100644
index 0000000..c6a8b4e
--- /dev/null
+++ b/src/helpers/color.js
@@ -0,0 +1,9 @@
+const diagram5Color = {
+    1: '003F5C',
+    2: '58508D',
+    3: 'BC5090',
+    4: 'FF6361',
+    0: 'FFA600',
+}
+
+export { diagram5Color };
-- 
GitLab


From 5bf19e0c7163002ccbcebc8256bb1bf01037d581 Mon Sep 17 00:00:00 2001
From: Kezia <keziasulami.pooh@gmail.com>
Date: Sat, 11 Dec 2021 14:19:57 +0700
Subject: [PATCH 19/37] Redirect to new backend

---
 src/config/keys.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/config/keys.js b/src/config/keys.js
index 4bb616f..173524d 100644
--- a/src/config/keys.js
+++ b/src/config/keys.js
@@ -1,3 +1,3 @@
-export const API_URL = process.env.REACT_APP_API_URL || 'https://diskuyapi-google.herokuapp.com/api';
+export const API_URL = process.env.REACT_APP_API_URL || 'https://secure-thicket-91695.herokuapp.com/api';
 export const CLIENT_ID =
 	process.env.REACT_APP_CLIENT_ID || '501878885013-126phco7bblqngas8kd1ubfa3r0hciq3.apps.googleusercontent.com';
-- 
GitLab


From c8346b037d38b3359c1796b66d32d66fa778867a Mon Sep 17 00:00:00 2001
From: Kezia <keziasulami.pooh@gmail.com>
Date: Sun, 12 Dec 2021 15:09:49 +0700
Subject: [PATCH 20/37] End-to-end implementation of viewing survey questions
 and submitting the answers

---
 src/components/survey/ViewSurvey.jsx   | 99 ++++++++++++++++++++++++++
 src/routes/App.jsx                     |  8 ++-
 src/styles/survey/ViewSurveyAnswer.css |  2 +-
 src/styles/thread/Form.css             | 16 +++--
 4 files changed, 116 insertions(+), 9 deletions(-)
 create mode 100644 src/components/survey/ViewSurvey.jsx

diff --git a/src/components/survey/ViewSurvey.jsx b/src/components/survey/ViewSurvey.jsx
new file mode 100644
index 0000000..951fa7d
--- /dev/null
+++ b/src/components/survey/ViewSurvey.jsx
@@ -0,0 +1,99 @@
+import axios from 'axios';
+import React, { useState, useEffect } from 'react';
+import { authHeader } from '../../helpers/services/auth.service';
+import { API_URL } from '../../config/keys';
+import '../../styles/thread/Form.css';
+
+const likert = [...Array(5).keys()].map(i => i + 1);
+
+export default function ViewSurvey(props) {
+  const { history } = props;
+  const { survey } = props.match.params;
+  const [title, setTitle] = useState('');
+  const [questions, setQuestions] = useState([]);
+  const [answers, setAnswers] = useState({});
+
+  useEffect(() => {
+    async function getSurveyTitle() {
+      const title = (await axios.get(
+        `${API_URL}/surveys/${survey}`,
+        { headers: authHeader() }
+      ))?.data?.data?.title;
+      setTitle(title);
+    }
+
+    let questionList;
+    async function getSurveyQuestions() {
+      questionList = (await axios.get(
+        `${API_URL}/questions/by_survey_id/${survey}`,
+        { headers: authHeader() }
+      ))?.data?.data;
+      setQuestions(questionList);
+    }
+
+    getSurveyTitle();
+    getSurveyQuestions().then(() => {
+      let newAnswers = {}
+      questionList.forEach(({ id }) => {
+        newAnswers[id] = { question_id: id };
+      })
+      setAnswers(newAnswers);
+    })
+
+  }, [survey]);
+
+  const handleSubmit = async (event) => {
+    event.preventDefault();
+    try {
+      Object.entries(answers).forEach(async ([_, answer]) => {
+        await axios.post(
+          `${API_URL}/answers`,
+          { answer: answer },
+          { headers: authHeader() }
+        );
+      })
+      window.alert("Submitted your answer successfully");
+      history.push('');
+    } catch (error) {
+      window.alert("Error submitting your answer");
+    }
+  };
+
+  return (
+    <div className="formComponentContainer">
+      <div className="header">
+        <h1><b>{title}</b></h1>
+
+        <form onSubmit={handleSubmit}>
+          {questions.map(({ id, question }, idx) =>
+            <Question id={id} question={question} idx={idx} key={idx} />
+          )}
+          <br />
+          <input type="submit" className="btn btn-orange" />
+        </form>
+      </div>
+    </div>
+  );
+
+  function updateAnswer(id, answer) {
+    let newAnswers = answers;
+    newAnswers[id]['answer'] = answer;
+    setAnswers(newAnswers);
+  }
+
+  function Question({ id, question, idx }) {
+    return <>
+      <br />
+      <h5>{idx + 1}. {question}</h5>
+      <fieldset className="btn-group btn-group-toggle"
+        onChange={(event) => updateAnswer(id, event.target.value)}
+      >
+        {likert.map((i) =>
+          <label key={i}>
+            <input type="radio" id={i} name={idx} value={i} required /> {i}
+          </label>
+        )}
+      </fieldset>
+    </>
+  }
+}
diff --git a/src/routes/App.jsx b/src/routes/App.jsx
index da57061..bc34461 100644
--- a/src/routes/App.jsx
+++ b/src/routes/App.jsx
@@ -16,6 +16,7 @@ import UpdateProfileForm from '../components/profile/UpdateProfileForm.jsx';
 import EditComment from '../components/thread/EditComment';
 import CreateNumber from '../components/survey/CreateNumber';
 import CreateSurvey from '../components/survey/CreateSurvey';
+import ViewSurvey from '../components/survey/ViewSurvey';
 import ViewSurveyAnswer from '../components/survey/ViewSurveyAnswer';
 import {
   BrowserRouter as Router,
@@ -91,9 +92,10 @@ function App() {
         <Route exact path="/thread/edit/:thread" component={EditThread} />
         <Route exact path="/profile/update" component={UpdateProfileForm} />
         <Route exact path="/comment/edit/:comment" component={EditComment} />
-        <Route exact path="/surveys" component={ListSurveys}/>
-        <Route exact path="/survey/:survey/answer/:page" component={ViewSurveyAnswer}/>
-        <Redirect exact from="" to="page/1" />
+        <Route exact path="/surveys" component={ListSurveys} />
+        <Route exact path="/survey/:survey/fill" component={ViewSurvey} />
+        <Route exact path="/survey/:survey/answer/:page" component={ViewSurveyAnswer} />
+        <Redirect exact from="" to="surveys" />
       </Switch>
       <Footer />
     </Router>
diff --git a/src/styles/survey/ViewSurveyAnswer.css b/src/styles/survey/ViewSurveyAnswer.css
index b259c15..9ee2b76 100644
--- a/src/styles/survey/ViewSurveyAnswer.css
+++ b/src/styles/survey/ViewSurveyAnswer.css
@@ -30,7 +30,7 @@ table {
 
 .sub-header {
     display: flex;
-    justify-content: end;
+    justify-content: flex-end;
     margin-top: 18px;
     margin-bottom: 18px;
 }
diff --git a/src/styles/thread/Form.css b/src/styles/thread/Form.css
index 37db4b9..9292026 100644
--- a/src/styles/thread/Form.css
+++ b/src/styles/thread/Form.css
@@ -32,7 +32,7 @@
 
 .formContainer {
     display: flex;
-    flex-direction: column; 
+    flex-direction: column;
 }
 
 label {
@@ -98,6 +98,12 @@ ul {
 .btn-orange{background-color:#DE6600;color: #FFF;}
 .btn-orange:hover{color: #FFF;}
 
+.btn-group {
+    display: flex;
+    width: 50%;
+    justify-content: space-between;
+}
+
 .body {
     min-width: 303px;
     max-width: 3696px;
@@ -150,7 +156,7 @@ textarea:focus, input:focus, select:focus{
     .back {
         margin-top: 32px;
         margin-bottom: 12px;
-    }   
+    }
 
     label {
         font-size: 14px;
@@ -174,17 +180,17 @@ textarea:focus, input:focus, select:focus{
         min-width: 248px;
         max-width: 468px;
     }
-    
+
     .topic {
         min-width: 248px;
         max-width: 468px;
     }
-    
+
     .body {
         min-width: 248px;
         max-width: 468px;
     }
-    
+
     .username {
         min-width: 248px;
         max-width: 468px;
-- 
GitLab


From 88182d050b489d5165c504b3bff1dcc3577edaa0 Mon Sep 17 00:00:00 2001
From: Kezia <keziasulami.pooh@gmail.com>
Date: Sun, 12 Dec 2021 16:05:59 +0700
Subject: [PATCH 21/37] Accomodate new survey API

---
 src/components/survey/ViewSurvey.jsx | 21 ++++++++-------------
 1 file changed, 8 insertions(+), 13 deletions(-)

diff --git a/src/components/survey/ViewSurvey.jsx b/src/components/survey/ViewSurvey.jsx
index 951fa7d..f5ce6d8 100644
--- a/src/components/survey/ViewSurvey.jsx
+++ b/src/components/survey/ViewSurvey.jsx
@@ -14,25 +14,20 @@ export default function ViewSurvey(props) {
   const [answers, setAnswers] = useState({});
 
   useEffect(() => {
-    async function getSurveyTitle() {
-      const title = (await axios.get(
-        `${API_URL}/surveys/${survey}`,
-        { headers: authHeader() }
-      ))?.data?.data?.title;
-      setTitle(title);
-    }
 
     let questionList;
-    async function getSurveyQuestions() {
-      questionList = (await axios.get(
-        `${API_URL}/questions/by_survey_id/${survey}`,
+    async function getSurveyData() {
+      const surveyData = (await axios.get(
+        `${API_URL}/surveys/show_questions/${survey}`,
         { headers: authHeader() }
-      ))?.data?.data;
+      ))?.data;
+      const title = surveyData?.title;
+      setTitle(title);
+      questionList = surveyData?.questions;
       setQuestions(questionList);
     }
 
-    getSurveyTitle();
-    getSurveyQuestions().then(() => {
+    getSurveyData().then(() => {
       let newAnswers = {}
       questionList.forEach(({ id }) => {
         newAnswers[id] = { question_id: id };
-- 
GitLab


From 0f4284e47d5f20a24d4a57df9b87ffcbc611c292 Mon Sep 17 00:00:00 2001
From: Qadzif Kamil Zahari <qadzifi@gmail.com>
Date: Sun, 12 Dec 2021 17:23:16 +0700
Subject: [PATCH 22/37] feat: show answer circle diagram

---
 src/components/survey/ViewAnswer.jsx          | 51 +++++++++++++++++++
 src/components/survey/ViewSurveyAnswer.jsx    | 51 ++++++++++++++++---
 .../survey/diagram/CircleDiagram.jsx          |  4 +-
 src/components/survey/diagram/ShowDiagram.jsx | 13 +++++
 4 files changed, 110 insertions(+), 9 deletions(-)
 create mode 100644 src/components/survey/ViewAnswer.jsx
 create mode 100644 src/components/survey/diagram/ShowDiagram.jsx

diff --git a/src/components/survey/ViewAnswer.jsx b/src/components/survey/ViewAnswer.jsx
new file mode 100644
index 0000000..bc48369
--- /dev/null
+++ b/src/components/survey/ViewAnswer.jsx
@@ -0,0 +1,51 @@
+import React, { useEffect, useState } from 'react';
+import axios from 'axios';
+import { API_URL } from '../../config/keys';
+import { authHeader } from '../../helpers/services/auth.service';
+import ShowDiagram from './diagram/ShowDiagram';
+import { diagram5Color } from '../../helpers/color';
+
+export default function ViewAnswer(props) {
+    const { survey } = props;
+    const { id, question } = props.question;
+    const [answer, setAnswer] = useState([]);
+
+    useEffect(() => {
+        async function getAnswer() {
+            const answer = (await axios.get(
+                `${API_URL}/answers/${survey}/${id}`,
+                { headers: authHeader() }
+            ))?.data;
+            setAnswer(answer);
+        }
+        getAnswer();
+    }, [id]);
+
+    return (
+        <div>
+            <div>
+                <h5>{question}</h5>
+            </div>
+            <div>
+                <ShowDiagram data={answer}/>
+            </div>
+            { answer.map((val, idx) => <ColorLabel key={idx} label={val.answer} idx={idx}/>) }
+        </div>
+    )
+}
+
+function ColorLabel(props) {
+    const { idx, label } = props;
+    const style = {
+        backgroundColor: `#${diagram5Color[idx]}`,
+        marginLeft: '24px',
+        paddingLeft: '48px',
+    };
+
+    return (
+        <div>
+            <span><strong>{label}</strong></span>
+            <span style={style}>&nbsp;</span>
+        </div>
+    )
+}
diff --git a/src/components/survey/ViewSurveyAnswer.jsx b/src/components/survey/ViewSurveyAnswer.jsx
index 3f3574f..006ba17 100644
--- a/src/components/survey/ViewSurveyAnswer.jsx
+++ b/src/components/survey/ViewSurveyAnswer.jsx
@@ -1,8 +1,11 @@
-import React from 'react';
-import { dummyQuestionList } from '../../helpers/data-util';
+import React, { useEffect, useState } from 'react';
+import axios from 'axios';
+import { API_URL } from '../../config/keys';
+import { authHeader } from '../../helpers/services/auth.service';
 import '../../styles/survey/ViewSurveyAnswer.css';
 import Button from '../utility/Button'
-import CircleDiagram from './diagram/CircleDiagram';
+import ShowDiagram from './diagram/ShowDiagram';
+import ViewAnswer from './ViewAnswer';
 
 function SurveyQuestionHeader (props) {
     const { questionList } = props;
@@ -33,15 +36,51 @@ function SurveyQuestionAnswer(props) {
 export default function ViewSurveyAnswer (props) {
     const { params } = props.match;
     const { survey, page } = params;
+    const [title, setTitle] = useState('');
+    const [questions, setQuestions] = useState([]);
+    const [answers, setAnswers] = useState({});
+    
+    useEffect(() => {
+        async function getSurveyTitle() {
+            const title = (await axios.get(
+                `${API_URL}/surveys/${survey}`,
+                { headers: authHeader() }
+            ))?.data?.data?.title;
+            setTitle(title);
+        }
+            
+        let questionList;
+        async function getSurveyQuestions() {
+            questionList = (await axios.get(
+                // `${API_URL}/questions`,
+                `${API_URL}/surveys/show_questions/${survey}`,
+                { headers: authHeader() }
+            ))?.data?.questions;
+            console.log(questionList);
+            setQuestions(questionList);
+        }
+            
+        getSurveyTitle();
+        getSurveyQuestions().then(() => {
+            // let newAnswers = {}
+            // questionList.forEach(({ id }) => {
+            //     newAnswers[id] = { question_id: id };
+            // })
+            // setAnswers(newAnswers);
+        })
+            
+    }, [survey]);
 
     const hotFixVariable = `${survey}${page}`
+    questions.forEach(val => console.log(val));
 
     return (
         <div className="answer-table-container">
             <div hidden>{hotFixVariable}</div>
-            <svg width={200} height={200}>
-                <CircleDiagram cx={100} cy={100} radius={50} data={[3, 3, 2, 2, 2]}/>
-            </svg>
+            { questions.map((val, idx) => <ViewAnswer key={idx} question={val} survey={survey}/>)}
+            {/* <svg width={200} height={200}>
+                { questions.map((val, idx) => <ShowDiagram question={val} survey={survey}/>) }
+            </svg> */}
         </div>
     );
 }
diff --git a/src/components/survey/diagram/CircleDiagram.jsx b/src/components/survey/diagram/CircleDiagram.jsx
index 7964db7..122a6a4 100644
--- a/src/components/survey/diagram/CircleDiagram.jsx
+++ b/src/components/survey/diagram/CircleDiagram.jsx
@@ -2,9 +2,7 @@ import React from 'react';
 import { diagram5Color } from '../../../helpers/color';
 
 export default function CircleDiagram(props) {
-    const { data, radius, cx, cy } = props || {
-        radius: 20,
-    };
+    const { data, radius, cx, cy } = props;
     const strokeWidth = 2*radius;
     const perimeter = 2 * Math.PI * radius;
     const cumulativeSum = data.map((val, idx) => data.slice(0,idx).reduce(add, 0));
diff --git a/src/components/survey/diagram/ShowDiagram.jsx b/src/components/survey/diagram/ShowDiagram.jsx
new file mode 100644
index 0000000..de7f7b6
--- /dev/null
+++ b/src/components/survey/diagram/ShowDiagram.jsx
@@ -0,0 +1,13 @@
+import React from 'react';
+import CircleDiagram from './CircleDiagram';
+
+export default function ShowDiagram(props) {
+    const { data:rawData } = props;
+    const data = rawData.map(val => val.answer_count);
+
+    return (
+        <svg>
+            <CircleDiagram cx={50} cy={50} data={data} radius={25}/>
+        </svg>
+    )
+}
-- 
GitLab


From add771e0575ca6393a9332dcfe6c06f9a7311d50 Mon Sep 17 00:00:00 2001
From: Qadzif Kamil Zahari <qadzifi@gmail.com>
Date: Sun, 12 Dec 2021 17:27:17 +0700
Subject: [PATCH 23/37] fix: fix build error

---
 src/components/survey/ViewAnswer.jsx       |  1 +
 src/components/survey/ViewSurveyAnswer.jsx | 41 ++--------------------
 2 files changed, 3 insertions(+), 39 deletions(-)

diff --git a/src/components/survey/ViewAnswer.jsx b/src/components/survey/ViewAnswer.jsx
index bc48369..fc84d26 100644
--- a/src/components/survey/ViewAnswer.jsx
+++ b/src/components/survey/ViewAnswer.jsx
@@ -19,6 +19,7 @@ export default function ViewAnswer(props) {
             setAnswer(answer);
         }
         getAnswer();
+        // eslint-disable-next-line
     }, [id]);
 
     return (
diff --git a/src/components/survey/ViewSurveyAnswer.jsx b/src/components/survey/ViewSurveyAnswer.jsx
index 006ba17..1671412 100644
--- a/src/components/survey/ViewSurveyAnswer.jsx
+++ b/src/components/survey/ViewSurveyAnswer.jsx
@@ -3,42 +3,13 @@ import axios from 'axios';
 import { API_URL } from '../../config/keys';
 import { authHeader } from '../../helpers/services/auth.service';
 import '../../styles/survey/ViewSurveyAnswer.css';
-import Button from '../utility/Button'
-import ShowDiagram from './diagram/ShowDiagram';
 import ViewAnswer from './ViewAnswer';
 
-function SurveyQuestionHeader (props) {
-    const { questionList } = props;
-    console.log(questionList);
-
-    return (
-        <thead>
-            <th>Username</th>
-            { questionList.map(({question}) => <th>{question}</th>)}
-            <th>Timestamp</th>
-        </thead>
-    )
-}
-
-function SurveyQuestionAnswer(props) {
-    const { userId, questionList } = props;
-    const username = `Username ${userId}`
-
-    return (
-        <tbody>
-            <td>{username}</td>
-            { questionList.map(val => <td></td>) }
-            <td>Times</td>
-        </tbody>
-    )
-}
-
 export default function ViewSurveyAnswer (props) {
     const { params } = props.match;
     const { survey, page } = params;
     const [title, setTitle] = useState('');
     const [questions, setQuestions] = useState([]);
-    const [answers, setAnswers] = useState({});
     
     useEffect(() => {
         async function getSurveyTitle() {
@@ -61,13 +32,7 @@ export default function ViewSurveyAnswer (props) {
         }
             
         getSurveyTitle();
-        getSurveyQuestions().then(() => {
-            // let newAnswers = {}
-            // questionList.forEach(({ id }) => {
-            //     newAnswers[id] = { question_id: id };
-            // })
-            // setAnswers(newAnswers);
-        })
+        getSurveyQuestions();
             
     }, [survey]);
 
@@ -77,10 +42,8 @@ export default function ViewSurveyAnswer (props) {
     return (
         <div className="answer-table-container">
             <div hidden>{hotFixVariable}</div>
+            <div><h1>{title}</h1></div>
             { questions.map((val, idx) => <ViewAnswer key={idx} question={val} survey={survey}/>)}
-            {/* <svg width={200} height={200}>
-                { questions.map((val, idx) => <ShowDiagram question={val} survey={survey}/>) }
-            </svg> */}
         </div>
     );
 }
-- 
GitLab


From d344ff7575d1b062a4e29585f08b411a918201b5 Mon Sep 17 00:00:00 2001
From: Qadzif Kamil Zahari <qadzifi@gmail.com>
Date: Sun, 12 Dec 2021 18:04:34 +0700
Subject: [PATCH 24/37] feat: restyle answer

---
 src/components/survey/ViewAnswer.jsx          | 30 ++++++++++++++-----
 src/components/survey/ViewSurveyAnswer.jsx    |  9 ++----
 .../survey/diagram/CircleDiagram.jsx          |  9 +++---
 src/components/survey/diagram/ShowDiagram.jsx |  5 ++--
 src/helpers/color.js                          |  1 +
 src/routes/App.jsx                            |  2 +-
 6 files changed, 34 insertions(+), 22 deletions(-)

diff --git a/src/components/survey/ViewAnswer.jsx b/src/components/survey/ViewAnswer.jsx
index fc84d26..fa49905 100644
--- a/src/components/survey/ViewAnswer.jsx
+++ b/src/components/survey/ViewAnswer.jsx
@@ -9,6 +9,7 @@ export default function ViewAnswer(props) {
     const { survey } = props;
     const { id, question } = props.question;
     const [answer, setAnswer] = useState([]);
+    const total = answer.map(val => val.answer_count).reduce((a,b) => a+b, 0);
 
     useEffect(() => {
         async function getAnswer() {
@@ -22,31 +23,46 @@ export default function ViewAnswer(props) {
         // eslint-disable-next-line
     }, [id]);
 
+    const styleDiagram = {
+        display: 'flex',
+    };
+
+    const styleLabel = {
+        marginRight: '24px',
+    }
+
     return (
         <div>
             <div>
                 <h5>{question}</h5>
             </div>
-            <div>
-                <ShowDiagram data={answer}/>
+            <div style={styleDiagram}>
+                <div style={styleLabel}>
+                    { answer.map((val, idx) => <ColorLabel key={idx} label={val.answer} amount={val.answer_count} total={total} idx={idx}/>) }
+                </div>
+                <div>
+                    <ShowDiagram data={answer}/>
+                </div>
             </div>
-            { answer.map((val, idx) => <ColorLabel key={idx} label={val.answer} idx={idx}/>) }
         </div>
     )
 }
 
 function ColorLabel(props) {
-    const { idx, label } = props;
+    const { idx, label, amount, total } = props;
     const style = {
-        backgroundColor: `#${diagram5Color[idx]}`,
+        backgroundColor: `#${diagram5Color[label]}`,
         marginLeft: '24px',
         paddingLeft: '48px',
+        marginRight: '12px',
     };
+    const percent = total !== 0 ? amount / total * 100 : 0;
 
     return (
-        <div>
-            <span><strong>{label}</strong></span>
+        <div style={{ width:'fit-content' }}>
+            <span>Answer: <strong>{label}</strong></span>
             <span style={style}>&nbsp;</span>
+            <span>Amount: <strong>{amount}</strong>&nbsp;({percent.toFixed(2)}%)</span>
         </div>
     )
 }
diff --git a/src/components/survey/ViewSurveyAnswer.jsx b/src/components/survey/ViewSurveyAnswer.jsx
index 1671412..83380de 100644
--- a/src/components/survey/ViewSurveyAnswer.jsx
+++ b/src/components/survey/ViewSurveyAnswer.jsx
@@ -7,7 +7,7 @@ import ViewAnswer from './ViewAnswer';
 
 export default function ViewSurveyAnswer (props) {
     const { params } = props.match;
-    const { survey, page } = params;
+    const { survey } = params;
     const [title, setTitle] = useState('');
     const [questions, setQuestions] = useState([]);
     
@@ -27,7 +27,6 @@ export default function ViewSurveyAnswer (props) {
                 `${API_URL}/surveys/show_questions/${survey}`,
                 { headers: authHeader() }
             ))?.data?.questions;
-            console.log(questionList);
             setQuestions(questionList);
         }
             
@@ -36,13 +35,9 @@ export default function ViewSurveyAnswer (props) {
             
     }, [survey]);
 
-    const hotFixVariable = `${survey}${page}`
-    questions.forEach(val => console.log(val));
-
     return (
         <div className="answer-table-container">
-            <div hidden>{hotFixVariable}</div>
-            <div><h1>{title}</h1></div>
+            <div className='header'><h1><b>{title}</b></h1></div>
             { questions.map((val, idx) => <ViewAnswer key={idx} question={val} survey={survey}/>)}
         </div>
     );
diff --git a/src/components/survey/diagram/CircleDiagram.jsx b/src/components/survey/diagram/CircleDiagram.jsx
index 122a6a4..787a47b 100644
--- a/src/components/survey/diagram/CircleDiagram.jsx
+++ b/src/components/survey/diagram/CircleDiagram.jsx
@@ -2,7 +2,8 @@ import React from 'react';
 import { diagram5Color } from '../../../helpers/color';
 
 export default function CircleDiagram(props) {
-    const { data, radius, cx, cy } = props;
+    const { rawData, radius, cx, cy } = props;
+    const data = rawData.map(val => val.answer_count);
     const strokeWidth = 2*radius;
     const perimeter = 2 * Math.PI * radius;
     const cumulativeSum = data.map((val, idx) => data.slice(0,idx).reduce(add, 0));
@@ -11,10 +12,10 @@ export default function CircleDiagram(props) {
 
     return (
         <g transform={transform}>
-            { data.map((val, idx) =>
-                <CircleSector key={idx} radius={radius} val={val}
+            { rawData.map((val, idx) =>
+                <CircleSector key={idx} radius={radius} val={val.answer_count}
                     width={strokeWidth} total={total} perimeter={perimeter}
-                    offset={cumulativeSum[idx]} color={diagram5Color[idx]}
+                    offset={cumulativeSum[idx]} color={diagram5Color[val.answer]}
                 />)
             }
         </g>
diff --git a/src/components/survey/diagram/ShowDiagram.jsx b/src/components/survey/diagram/ShowDiagram.jsx
index de7f7b6..1265765 100644
--- a/src/components/survey/diagram/ShowDiagram.jsx
+++ b/src/components/survey/diagram/ShowDiagram.jsx
@@ -2,12 +2,11 @@ import React from 'react';
 import CircleDiagram from './CircleDiagram';
 
 export default function ShowDiagram(props) {
-    const { data:rawData } = props;
-    const data = rawData.map(val => val.answer_count);
+    const { data } = props;
 
     return (
         <svg>
-            <CircleDiagram cx={50} cy={50} data={data} radius={25}/>
+            <CircleDiagram cx={50} cy={50} rawData={data} radius={25}/>
         </svg>
     )
 }
diff --git a/src/helpers/color.js b/src/helpers/color.js
index c6a8b4e..87994fa 100644
--- a/src/helpers/color.js
+++ b/src/helpers/color.js
@@ -4,6 +4,7 @@ const diagram5Color = {
     3: 'BC5090',
     4: 'FF6361',
     0: 'FFA600',
+    5: 'FFA600',
 }
 
 export { diagram5Color };
diff --git a/src/routes/App.jsx b/src/routes/App.jsx
index bc34461..a08bc0f 100644
--- a/src/routes/App.jsx
+++ b/src/routes/App.jsx
@@ -94,7 +94,7 @@ function App() {
         <Route exact path="/comment/edit/:comment" component={EditComment} />
         <Route exact path="/surveys" component={ListSurveys} />
         <Route exact path="/survey/:survey/fill" component={ViewSurvey} />
-        <Route exact path="/survey/:survey/answer/:page" component={ViewSurveyAnswer} />
+        <Route exact path="/survey/:survey/answer" component={ViewSurveyAnswer} />
         <Redirect exact from="" to="surveys" />
       </Switch>
       <Footer />
-- 
GitLab


From f8ed678344e05c66261290efcf5f430a0e8e0526 Mon Sep 17 00:00:00 2001
From: Qadzif Kamil Zahari <qadzifi@gmail.com>
Date: Sun, 12 Dec 2021 18:09:04 +0700
Subject: [PATCH 25/37] fix: unused variable

---
 src/components/survey/ViewAnswer.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/survey/ViewAnswer.jsx b/src/components/survey/ViewAnswer.jsx
index fa49905..7e53ff6 100644
--- a/src/components/survey/ViewAnswer.jsx
+++ b/src/components/survey/ViewAnswer.jsx
@@ -49,7 +49,7 @@ export default function ViewAnswer(props) {
 }
 
 function ColorLabel(props) {
-    const { idx, label, amount, total } = props;
+    const { label, amount, total } = props;
     const style = {
         backgroundColor: `#${diagram5Color[label]}`,
         marginLeft: '24px',
-- 
GitLab


From f3b53494c20532ffa6160121cd4bcb383cbcb7e3 Mon Sep 17 00:00:00 2001
From: Qadzif Kamil Zahari <qadzifi@gmail.com>
Date: Sun, 12 Dec 2021 18:46:18 +0700
Subject: [PATCH 26/37] feat: set default for no answer

---
 src/components/survey/ViewAnswer.jsx            | 5 ++++-
 src/components/survey/diagram/CircleDiagram.jsx | 2 +-
 2 files changed, 5 insertions(+), 2 deletions(-)

diff --git a/src/components/survey/ViewAnswer.jsx b/src/components/survey/ViewAnswer.jsx
index 7e53ff6..1a58aaa 100644
--- a/src/components/survey/ViewAnswer.jsx
+++ b/src/components/survey/ViewAnswer.jsx
@@ -17,7 +17,10 @@ export default function ViewAnswer(props) {
                 `${API_URL}/answers/${survey}/${id}`,
                 { headers: authHeader() }
             ))?.data;
-            setAnswer(answer);
+            const existingAnswer = answer.map(val => val.answer);
+            const emptyAnswer = ['1','2','3','4','5'].filter(val => !existingAnswer.includes(val))
+                .map(val => { return { answer:val, answer_count: 0 }; });
+            setAnswer(answer.concat(emptyAnswer).sort((a, b) => parseInt(a.answer) - parseInt(b.answer)));
         }
         getAnswer();
         // eslint-disable-next-line
diff --git a/src/components/survey/diagram/CircleDiagram.jsx b/src/components/survey/diagram/CircleDiagram.jsx
index 787a47b..cf94876 100644
--- a/src/components/survey/diagram/CircleDiagram.jsx
+++ b/src/components/survey/diagram/CircleDiagram.jsx
@@ -12,7 +12,7 @@ export default function CircleDiagram(props) {
 
     return (
         <g transform={transform}>
-            { rawData.map((val, idx) =>
+            { total && rawData.map((val, idx) =>
                 <CircleSector key={idx} radius={radius} val={val.answer_count}
                     width={strokeWidth} total={total} perimeter={perimeter}
                     offset={cumulativeSum[idx]} color={diagram5Color[val.answer]}
-- 
GitLab


From 28d66bdec69ae885a140ba962be4376073a7e5fa Mon Sep 17 00:00:00 2001
From: "ashila.ghassani" <ashila.ghassani@gmail.com>
Date: Sun, 12 Dec 2021 20:54:37 +0700
Subject: [PATCH 27/37] add questions

---
 src/components/survey/CreateSurvey.jsx | 68 ++++++++++++++++++--------
 1 file changed, 48 insertions(+), 20 deletions(-)

diff --git a/src/components/survey/CreateSurvey.jsx b/src/components/survey/CreateSurvey.jsx
index 68197f8..8960ca2 100644
--- a/src/components/survey/CreateSurvey.jsx
+++ b/src/components/survey/CreateSurvey.jsx
@@ -1,27 +1,40 @@
-import React from 'react';
 import '../../styles/thread/Form.css';
+import React, { useState,useEffect} from 'react';
 
 export default function CreateSurvey({ location }) {
   const urlParams = new URLSearchParams(location.search);
   const keywordParam = urlParams.get('value');
+  const [question, setQuestions] = useState({});
 
-  let input_quest = [];
-
-  for (let i = 0; i < keywordParam; i++) {
-    input_quest.push(
-      <li>
-        <h5>Questions {i+1}</h5>
-          <input
-          type="text"
-          className="survey"
-          name="survey"
-          placeholder="Your Survey's Question"
-          required="true"
-        />
-      </li>
-    )    
+  // const ids = [...Array(keywordParam).keys()]
+
+  
+  useEffect(() => {
+    let question = {}
+    for (let i = 0; i < keywordParam; i++) {
+      question[i] = {}
+    }
+    setQuestions(question)
+
+  },[keywordParam,question])
+
+  
+
+  const addQuestion = (id,question) => {
+    let newQuestions = question;
+    newQuestions[id]['question'] = question;
+    setQuestions(newQuestions);
   }
 
+  const onSubmit = async (event) => {
+    event.preventDefault();
+    console.log(question)
+  };
+
+
+ 
+
+
   return (
     <div className="formComponentContainer">
         <div className="header">
@@ -29,15 +42,30 @@ export default function CreateSurvey({ location }) {
             <b>Create Survey</b>
           </h1>
 
-          <form action="">
+          <form onSubmit={onSubmit}>
             <ul>
-              {input_quest}
+              {[...Array.from(Array(parseInt(keywordParam)).keys())].map((num, i) => 
+                  <li  key={i}>
+                    <h5>Questions {i+1}</h5>
+                      <input
+                      type="text"
+                      className="survey"
+                      name="survey"
+                      placeholder="Your Survey's Question"
+                      required="true"  
+                      onInput={(e) =>
+                        addQuestion(i,e.target.value)
+                      }
+        
+                    />
+                  </li>
+              )}   
+
             </ul>
-               
+             
             <button type="submit" className="btn btn-orange">
               <span className="button">Create</span>
             </button>
-              
           </form>
            
         </div>
-- 
GitLab


From 3999e5644c8259dc24790c1098ac8c896d8ff630 Mon Sep 17 00:00:00 2001
From: Kezia <keziasulami.pooh@gmail.com>
Date: Mon, 13 Dec 2021 15:04:12 +0700
Subject: [PATCH 28/37] Update view survey

---
 src/components/survey/ListSurveys.jsx         | 47 ++++----------
 src/components/survey/PreviewSurvey.jsx       |  9 +--
 src/components/survey/RecentSurveys.jsx       | 12 ++--
 .../{SurveyList.jsx => SurveyCards.jsx}       |  4 +-
 src/components/survey/TopSurveys.jsx          | 61 -------------------
 src/routes/App.jsx                            |  2 +-
 src/styles/survey/ListSurveys.css             |  8 +--
 7 files changed, 28 insertions(+), 115 deletions(-)
 rename src/components/survey/{SurveyList.jsx => SurveyCards.jsx} (77%)
 delete mode 100644 src/components/survey/TopSurveys.jsx

diff --git a/src/components/survey/ListSurveys.jsx b/src/components/survey/ListSurveys.jsx
index 5fddcfd..4f63d86 100644
--- a/src/components/survey/ListSurveys.jsx
+++ b/src/components/survey/ListSurveys.jsx
@@ -1,9 +1,8 @@
 import React from 'react';
 import '../../styles/survey/ListSurveys.css';
 import Button from '../utility/Button';
-import TopSurveys from './TopSurveys';
 import RecentSurveys from './RecentSurveys';
-import { Link } from 'react-router-dom';
+import { loggedIn } from '../../helpers/services/auth.service';
 
 export default function ListSurveys(props) {
   return (
@@ -14,40 +13,18 @@ export default function ListSurveys(props) {
         </h1>
       </div>
 
-      {props.isRecent ? (
-        <div className="listSurveysSection">
-          <div className="subHeaderListSurveys">
-            <div className="tab">
-              <Link to="/survey/1" style={{ textDecoration: 'none' }}>
-                <h3 className="active">Recent</h3>
-              </Link>
-              <Link to="/top/survey/1" style={{ textDecoration: 'none' }}>
-                <h3>Top</h3>
-              </Link>
-            </div>
-              <Button text="Create Survey" color="orange" url="create/number" />
-          </div>
-          <RecentSurveys
-            pageNumber={props.pageNumber}
-            history={props.history}
-          />
-        </div>
-      ) : (
-        <div className="listSurveysSection">
-          <div className="subHeaderListSurveys">
-            <div className="tab">
-              <Link to="/survey/1" style={{ textDecoration: 'none' }}>
-                <h3>Recent</h3>
-              </Link>
-              <Link to="/top/survey/1" style={{ textDecoration: 'none' }}>
-                <h3 className="active">Top</h3>
-              </Link>
-            </div>
-            <Button text="Create Survey" color="orange" url="create/number" />
-          </div>
-          <TopSurveys pageNumber={props.pageNumber} history={props.history} />
+      <div className="listSurveysSection">
+        <div className="subHeaderListSurveys">
+          {loggedIn && (
+            <Button text="Create Survey" color="orange" url="create/survey" />
+          )}
+
         </div>
-      )}
+        <RecentSurveys
+          pageNumber={props.pageNumber}
+          history={props.history}
+        />
+      </div>
     </div>
   );
 }
diff --git a/src/components/survey/PreviewSurvey.jsx b/src/components/survey/PreviewSurvey.jsx
index d4a91d0..5b1b75c 100644
--- a/src/components/survey/PreviewSurvey.jsx
+++ b/src/components/survey/PreviewSurvey.jsx
@@ -12,16 +12,13 @@ export default function PreviewSurvey(props) {
           <b>{content.title}</b>
         </h2>
       </div>
-      <p className="previewSurveyTopic">{content.topic_name}</p>
+      <Link to={`/survey/${content.id}/answer`}>View Results</Link>
       <div className="surveyCardContent">
         <p>
           By{' '}
-          <Link to={`/profile/${content.username}/1`}>{content.username}</Link>{' '}
+          <Link to={`/profile/${content.username}/1`}>{content.username}</Link>
           {', '}
-          {window.innerWidth < 780 && (
-            <br></br>
-          )}
-          {time} - <i className="far fa-thumbs-up" /> {content.points}
+          {time}
         </p>
       </div>
     </div>
diff --git a/src/components/survey/RecentSurveys.jsx b/src/components/survey/RecentSurveys.jsx
index 8c2f414..6f7ba71 100644
--- a/src/components/survey/RecentSurveys.jsx
+++ b/src/components/survey/RecentSurveys.jsx
@@ -1,7 +1,7 @@
 /* eslint-disable eqeqeq */
 import React, { useEffect, useState, Fragment } from 'react';
 import axios from 'axios';
-import SurveyList from './SurveyList';
+import SurveyCards from './SurveyCards';
 import { API_URL } from '../../config/keys';
 import Pagination from '../Pagination';
 import { dummyData } from '../../helpers/data-util';
@@ -21,14 +21,14 @@ export default function RecentSurveys(props) {
       let data;
       try {
         const responseSurveys = await axios.get(
-          `${API_URL}/surveys/pages/recent/?page=${currentPage}`
+          `${API_URL}/surveys/pages/top/?page=${currentPage}`
         );
-        ({ data } = responseSurveys);
+        ({ data } = responseSurveys.data);
       } catch (error) {
         data = dummyData();
       }
-      setSurveys(data?.data);
-      setTotalItems(data?.metadata?.total_data);
+      setSurveys(data);
+      setTotalItems(data.length);
     };
     fetch();
   }, [currentPage]);
@@ -46,7 +46,7 @@ export default function RecentSurveys(props) {
         </div>
       ) : (
         <Fragment>
-          <SurveyList survey={surveys} />
+          <SurveyCards survey={surveys} />
           <div className="paginationContainer">
             <Pagination
               activePage={currentPage}
diff --git a/src/components/survey/SurveyList.jsx b/src/components/survey/SurveyCards.jsx
similarity index 77%
rename from src/components/survey/SurveyList.jsx
rename to src/components/survey/SurveyCards.jsx
index 1e7db16..251284b 100644
--- a/src/components/survey/SurveyList.jsx
+++ b/src/components/survey/SurveyCards.jsx
@@ -1,13 +1,13 @@
 import PreviewSurvey from './PreviewSurvey';
 import { Link } from 'react-router-dom';
 
-export default function SurveyList(props) {
+export default function SurveyCards(props) {
   return (
     <div className="list_surveys">
       {props.survey.map((value) => (
         <Link
           key={value.id}
-          to={`/survey/${value.topic_name}/${value.id}`}
+          to={`/survey/${value.id}/fill`}
           style={{ textDecoration: 'none' }}
         >
           <PreviewSurvey content={value} />
diff --git a/src/components/survey/TopSurveys.jsx b/src/components/survey/TopSurveys.jsx
deleted file mode 100644
index 2d129f4..0000000
--- a/src/components/survey/TopSurveys.jsx
+++ /dev/null
@@ -1,61 +0,0 @@
-/* eslint-disable eqeqeq */
-import React, { useEffect, useState, Fragment } from 'react';
-import axios from 'axios';
-import SurveyList from './SurveyList';
-import { API_URL } from '../../config/keys';
-import Pagination from '../Pagination';
-import { dummyData } from '../../helpers/data-util';
-
-export default function TopSurveys(props) {
-  const [surveys, setSurveys] = useState([]);
-  const [totalItems, setTotalItems] = useState(0);
-
-  const currentPage = props.pageNumber;
-
-  if (currentPage != props.pageNumber) {
-    window.location.reload();
-  }
-
-  useEffect(() => {
-    const fetch = async () => {
-      let data;
-      try {
-        const responseSurveys = await axios.get(
-          `${API_URL}/surveys/pages/top/?page=${currentPage}`
-        );
-        ({ data } = responseSurveys);
-      } catch (error) {
-        data = dummyData();
-      }
-      setSurveys(data?.data);
-      setTotalItems(data?.metadata?.total_data);
-    };
-    fetch();
-  }, [currentPage]);
-
-  function switchPage(pageNumber) {
-    props.history.push(`/top/survey/${pageNumber}`);
-    window.location.reload();
-  }
-
-  return (
-    <div className="topSurveys">
-      {totalItems == undefined || totalItems == 0 ? (
-        <div className="noSurveysMessage">
-          <p>There is no surveys yet.</p>
-        </div>
-      ) : (
-        <Fragment>
-          <SurveyList survey={surveys} />
-          <div className="paginationContainer">
-            <Pagination
-              activePage={currentPage}
-              totalItems={totalItems}
-              switchPage={switchPage}
-            />
-          </div>
-        </Fragment>
-      )}
-    </div>
-  );
-}
diff --git a/src/routes/App.jsx b/src/routes/App.jsx
index a08bc0f..48ec4bb 100644
--- a/src/routes/App.jsx
+++ b/src/routes/App.jsx
@@ -95,7 +95,7 @@ function App() {
         <Route exact path="/surveys" component={ListSurveys} />
         <Route exact path="/survey/:survey/fill" component={ViewSurvey} />
         <Route exact path="/survey/:survey/answer" component={ViewSurveyAnswer} />
-        <Redirect exact from="" to="surveys" />
+        <Redirect exact from="" to="survey/1" />
       </Switch>
       <Footer />
     </Router>
diff --git a/src/styles/survey/ListSurveys.css b/src/styles/survey/ListSurveys.css
index ad41acb..77a7ef0 100644
--- a/src/styles/survey/ListSurveys.css
+++ b/src/styles/survey/ListSurveys.css
@@ -7,7 +7,7 @@
 
 .subHeaderListSurveys {
     display: flex;
-    justify-content: space-between;
+    justify-content: flex-end;
     align-items: center;
     margin-bottom: 28px;
 }
@@ -46,11 +46,11 @@
         margin-left: 36px;
         margin-right: 36px;
     }
-    
+
     .listSurveysSection {
         margin-top: 36px;
     }
-    
+
     .subHeaderListSurveys {
         margin-bottom: 28px;
         flex-wrap: wrap;
@@ -58,7 +58,7 @@
         flex-direction: column;
         justify-content: center;
     }
-    
+
     .tab .active {
         color: #DE6600 !important;
         font-weight: bold;
-- 
GitLab


From d35cc06f39835cae64476aaba1ddc45398a7686a Mon Sep 17 00:00:00 2001
From: "ashila.ghassani" <ashila.ghassani@gmail.com>
Date: Mon, 13 Dec 2021 16:21:29 +0700
Subject: [PATCH 29/37]  add hit be add question

---
 package.json                           |  1 +
 src/components/survey/CreateNumber.jsx | 15 ++++++--
 src/components/survey/CreateSurvey.jsx | 49 ++++++++++++++++++++++----
 3 files changed, 57 insertions(+), 8 deletions(-)

diff --git a/package.json b/package.json
index 12f9fb0..45d8e85 100644
--- a/package.json
+++ b/package.json
@@ -17,6 +17,7 @@
     "react-js-pagination": "^3.0.3",
     "react-router-dom": "^5.2.0",
     "react-scripts": "4.0.1",
+    "response": "^0.18.0",
     "uuid": "^8.3.2",
     "validator": "^13.5.2",
     "web-vitals": "^0.2.4"
diff --git a/src/components/survey/CreateNumber.jsx b/src/components/survey/CreateNumber.jsx
index 146e0fe..cc96ced 100644
--- a/src/components/survey/CreateNumber.jsx
+++ b/src/components/survey/CreateNumber.jsx
@@ -5,12 +5,13 @@ import '../../styles/thread/Form.css';
 export default function CreateNumber(props) {
   // const [totalNumber, setTotalNumber] = useState(0);
   const [input, setInput] = useState(0);
+  const [title, setTitle] = useState('');
   const history = useHistory();
 
 
   const onSubmit = (e) => {
     e.preventDefault();
-    history.push('/create/survey?value='+input)
+    history.push('/create/survey?value='+ input + '&title='+title)
   }
   
   return (
@@ -23,6 +24,17 @@ export default function CreateNumber(props) {
         <div class = "row">
           <form onSubmit={onSubmit}>
             <label htmlFor="Enter number of questions in your survey : "></label>
+            <div class="row">
+              <h5>Title Survey : </h5>
+              <input
+                    type="Text" 
+                    value={title}
+                    onChange={(e) => setTitle(e.target.value)}
+                    className="title"
+                    name="title"
+                    required="true"
+                />
+            </div>
             <div class="row">
               <h5>Enter number of questions in your survey : </h5>
               <input
@@ -32,7 +44,6 @@ export default function CreateNumber(props) {
                   className="num_quest"
                   name="num_quest"
                   required="true"
-                  
               />
               </div>
               <div class ="row">
diff --git a/src/components/survey/CreateSurvey.jsx b/src/components/survey/CreateSurvey.jsx
index 8960ca2..6ced5e1 100644
--- a/src/components/survey/CreateSurvey.jsx
+++ b/src/components/survey/CreateSurvey.jsx
@@ -1,10 +1,17 @@
 import '../../styles/thread/Form.css';
 import React, { useState,useEffect} from 'react';
+import axios from 'axios';
+import { authHeader } from '../../helpers/services/auth.service';
+import { API_URL } from '../../config/keys';
+import { useHistory } from 'react-router';
+
 
 export default function CreateSurvey({ location }) {
   const urlParams = new URLSearchParams(location.search);
   const keywordParam = urlParams.get('value');
-  const [question, setQuestions] = useState({});
+  const title = urlParams.get('title');
+  const [questions, setQuestions] = useState({});
+  const history = useHistory();
 
   // const ids = [...Array(keywordParam).keys()]
 
@@ -16,19 +23,49 @@ export default function CreateSurvey({ location }) {
     }
     setQuestions(question)
 
-  },[keywordParam,question])
-
-  
+  },[keywordParam])
 
   const addQuestion = (id,question) => {
-    let newQuestions = question;
+    let newQuestions = questions;
     newQuestions[id]['question'] = question;
     setQuestions(newQuestions);
   }
 
   const onSubmit = async (event) => {
     event.preventDefault();
-    console.log(question)
+    console.log(questions);
+   
+    try {
+      const result = await axios.post(
+        `${API_URL}/surveys`,
+        { 
+          survey : {
+            title: title
+          }
+        },
+        { headers: authHeader() }
+      );
+
+      const id = result.data.data.id;
+       
+      Object.entries(questions).forEach(async ([_, question]) => {
+          let x =   { 
+            question: question
+          };
+          x['question']['survey_id'] = parseInt(id);
+          await axios.post(
+            `${API_URL}/questions`,
+            x,
+            { headers: authHeader() }
+          );
+      })
+      
+      window.alert("Submitted your questions successfully");
+      history.push('');
+    } catch (error) {
+      console.log(error);
+    }
+    
   };
 
 
-- 
GitLab


From 61da83fc008c1658c2b99e60be396b7f94989e55 Mon Sep 17 00:00:00 2001
From: Kezia <keziasulami.pooh@gmail.com>
Date: Mon, 13 Dec 2021 16:34:32 +0700
Subject: [PATCH 30/37] Implement delete survey

---
 src/components/survey/ListSurveys.jsx   | 10 +++-----
 src/components/survey/PreviewSurvey.jsx | 16 ++++++++++++-
 src/components/survey/RecentSurveys.jsx | 17 ++++++++++----
 src/components/survey/SurveyCards.jsx   |  8 +------
 src/components/survey/ViewSurvey.jsx    | 15 ++++++------
 src/styles/survey/ListSurveys.css       | 13 ++++-------
 src/styles/survey/PreviewSurvey.css     | 31 +++++++++++++++++++++----
 7 files changed, 70 insertions(+), 40 deletions(-)

diff --git a/src/components/survey/ListSurveys.jsx b/src/components/survey/ListSurveys.jsx
index 4f63d86..96412d6 100644
--- a/src/components/survey/ListSurveys.jsx
+++ b/src/components/survey/ListSurveys.jsx
@@ -11,15 +11,11 @@ export default function ListSurveys(props) {
         <h1>
           <b>Survey</b>
         </h1>
+        {loggedIn && (
+          <Button text="Create Survey" color="orange" url="create/survey" />
+        )}
       </div>
-
       <div className="listSurveysSection">
-        <div className="subHeaderListSurveys">
-          {loggedIn && (
-            <Button text="Create Survey" color="orange" url="create/survey" />
-          )}
-
-        </div>
         <RecentSurveys
           pageNumber={props.pageNumber}
           history={props.history}
diff --git a/src/components/survey/PreviewSurvey.jsx b/src/components/survey/PreviewSurvey.jsx
index 5b1b75c..11dc901 100644
--- a/src/components/survey/PreviewSurvey.jsx
+++ b/src/components/survey/PreviewSurvey.jsx
@@ -1,6 +1,7 @@
 import '../../styles/survey/PreviewSurvey.css';
 import { translate } from '../../helpers/time-util';
 import { Link } from 'react-router-dom';
+import AuthService from '../../helpers/services/auth.service';
 
 export default function PreviewSurvey(props) {
   const { content } = props;
@@ -11,8 +12,21 @@ export default function PreviewSurvey(props) {
         <h2 className="previewSurveyTitle">
           <b>{content.title}</b>
         </h2>
+        {AuthService.getCurrentUserId() === content.user_id &&
+          <button className="trashButton" onClick={() => props.deleteSurvey(content.id)}>
+            <svg width="20" height="24" viewBox="0 0 20 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+              <path d="M6.25 0.75V2H0V4.5H1.25V20.75C1.25 21.413 1.51339 22.0489 1.98223 22.5178C2.45107 22.9866 3.08696 23.25 3.75 23.25H16.25C16.913 23.25 17.5489 22.9866 18.0178 22.5178C18.4866 22.0489 18.75 21.413 18.75 20.75V4.5H20V2H13.75V0.75H6.25ZM3.75 4.5H16.25V20.75H3.75V4.5ZM6.25 7V18.25H8.75V7H6.25ZM11.25 7V18.25H13.75V7H11.25Z" fill="#DE6600" />
+            </svg>
+          </button>
+        }
       </div>
-      <Link to={`/survey/${content.id}/answer`}>View Results</Link>
+      <Link to={`/survey/${content.id}/fill`} style={{ textDecoration: 'none' }}>
+        Fill
+      </Link>
+      {' | '}
+      <Link to={`/survey/${content.id}/answer`} style={{ textDecoration: 'none' }}>
+        View Results
+      </Link>
       <div className="surveyCardContent">
         <p>
           By{' '}
diff --git a/src/components/survey/RecentSurveys.jsx b/src/components/survey/RecentSurveys.jsx
index 6f7ba71..13d1641 100644
--- a/src/components/survey/RecentSurveys.jsx
+++ b/src/components/survey/RecentSurveys.jsx
@@ -5,6 +5,7 @@ import SurveyCards from './SurveyCards';
 import { API_URL } from '../../config/keys';
 import Pagination from '../Pagination';
 import { dummyData } from '../../helpers/data-util';
+import { authHeader } from '../../helpers/services/auth.service';
 
 export default function RecentSurveys(props) {
   const [surveys, setSurveys] = useState([]);
@@ -18,17 +19,17 @@ export default function RecentSurveys(props) {
 
   useEffect(() => {
     const fetch = async () => {
-      let data;
+      let data, metadata;
       try {
         const responseSurveys = await axios.get(
           `${API_URL}/surveys/pages/top/?page=${currentPage}`
         );
-        ({ data } = responseSurveys.data);
+        ({ data, metadata } = responseSurveys.data);
       } catch (error) {
         data = dummyData();
       }
       setSurveys(data);
-      setTotalItems(data.length);
+      setTotalItems(metadata.total_data);
     };
     fetch();
   }, [currentPage]);
@@ -38,6 +39,14 @@ export default function RecentSurveys(props) {
     window.location.reload();
   }
 
+  async function deleteSurvey(id) {
+    setSurveys(surveys.filter(survey => survey.id !== id));
+    await axios.delete(
+      `${API_URL}/surveys/${id}`,
+      { headers: authHeader() }
+    );
+  }
+
   return (
     <div className="recentSurveys">
       {totalItems == undefined || totalItems == 0 ? (
@@ -46,7 +55,7 @@ export default function RecentSurveys(props) {
         </div>
       ) : (
         <Fragment>
-          <SurveyCards survey={surveys} />
+          <SurveyCards survey={surveys} deleteSurvey={deleteSurvey} />
           <div className="paginationContainer">
             <Pagination
               activePage={currentPage}
diff --git a/src/components/survey/SurveyCards.jsx b/src/components/survey/SurveyCards.jsx
index 251284b..5390de2 100644
--- a/src/components/survey/SurveyCards.jsx
+++ b/src/components/survey/SurveyCards.jsx
@@ -5,13 +5,7 @@ export default function SurveyCards(props) {
   return (
     <div className="list_surveys">
       {props.survey.map((value) => (
-        <Link
-          key={value.id}
-          to={`/survey/${value.id}/fill`}
-          style={{ textDecoration: 'none' }}
-        >
-          <PreviewSurvey content={value} />
-        </Link>
+        <PreviewSurvey content={value} deleteSurvey={props.deleteSurvey} />
       ))}
     </div>
   );
diff --git a/src/components/survey/ViewSurvey.jsx b/src/components/survey/ViewSurvey.jsx
index f5ce6d8..0437456 100644
--- a/src/components/survey/ViewSurvey.jsx
+++ b/src/components/survey/ViewSurvey.jsx
@@ -58,15 +58,14 @@ export default function ViewSurvey(props) {
     <div className="formComponentContainer">
       <div className="header">
         <h1><b>{title}</b></h1>
-
-        <form onSubmit={handleSubmit}>
-          {questions.map(({ id, question }, idx) =>
-            <Question id={id} question={question} idx={idx} key={idx} />
-          )}
-          <br />
-          <input type="submit" className="btn btn-orange" />
-        </form>
       </div>
+      <form onSubmit={handleSubmit}>
+        {questions.map(({ id, question }, idx) =>
+          <Question id={id} question={question} idx={idx} key={idx} />
+        )}
+        <br />
+        <input type="submit" className="btn btn-orange" />
+      </form>
     </div>
   );
 
diff --git a/src/styles/survey/ListSurveys.css b/src/styles/survey/ListSurveys.css
index 77a7ef0..399ce3e 100644
--- a/src/styles/survey/ListSurveys.css
+++ b/src/styles/survey/ListSurveys.css
@@ -1,15 +1,12 @@
-.listSurveysSection {
+.header {
     display: flex;
-    flex-direction: column;
-    justify-content: center;
-    margin-top: 56px;
+    justify-content: space-between;
 }
 
-.subHeaderListSurveys {
+.listSurveysSection {
     display: flex;
-    justify-content: flex-end;
-    align-items: center;
-    margin-bottom: 28px;
+    flex-direction: column;
+    justify-content: center;
 }
 
 .tab {
diff --git a/src/styles/survey/PreviewSurvey.css b/src/styles/survey/PreviewSurvey.css
index 27e00b2..d8d899b 100644
--- a/src/styles/survey/PreviewSurvey.css
+++ b/src/styles/survey/PreviewSurvey.css
@@ -8,6 +8,17 @@
     font-family: "DM Sans";
 }
 
+.surveyCardHeader {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    margin-bottom: 0.5rem;
+}
+
+h2 {
+    margin-bottom: 0px;
+}
+
 .previewSurveyTopic {
     background: #DE6600;
     color:#ffffff;
@@ -24,6 +35,16 @@
     margin-left: 20px;
 }
 
+.trashButton {
+    background-color: transparent;
+    background-repeat: no-repeat;
+    border: none;
+    cursor: pointer;
+    overflow: hidden;
+    outline: none;
+    z-index: 1;
+}
+
 .fa-thumbs-up {
     height: 16px;
     color: #DE6600;
@@ -50,25 +71,25 @@
         margin-bottom: 20px;
         padding: 16px;
     }
-    
+
     .previewSurveyTopic {
         font-size: 14px;
     }
-    
+
     .newSurveyButton {
         margin-top: 20px;
         margin-left: 20px;
     }
-    
+
     .previewSurveyTitle {
         font-size: 24px;
         color: #000000;
     }
-    
+
     .surveyCardContent {
         margin-top: 8px;
     }
-    
+
     .surveyCardContent p{
         margin-bottom: 0px;
     }
-- 
GitLab


From f4c982d051db0552f3a7f178db4886f6a7d2bc97 Mon Sep 17 00:00:00 2001
From: Kezia <keziasulami.pooh@gmail.com>
Date: Mon, 13 Dec 2021 16:40:15 +0700
Subject: [PATCH 31/37] Remove unused import

---
 src/components/survey/SurveyCards.jsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/components/survey/SurveyCards.jsx b/src/components/survey/SurveyCards.jsx
index 5390de2..724f787 100644
--- a/src/components/survey/SurveyCards.jsx
+++ b/src/components/survey/SurveyCards.jsx
@@ -1,5 +1,4 @@
 import PreviewSurvey from './PreviewSurvey';
-import { Link } from 'react-router-dom';
 
 export default function SurveyCards(props) {
   return (
-- 
GitLab


From e404e7e0228a1f24e4a55e5271e24dd9617b32a9 Mon Sep 17 00:00:00 2001
From: Kezia <keziasulami.pooh@gmail.com>
Date: Mon, 13 Dec 2021 16:55:54 +0700
Subject: [PATCH 32/37] Fix create number

---
 src/components/survey/CreateSurvey.jsx | 104 ++++++++++++-------------
 src/components/survey/ListSurveys.jsx  |   2 +-
 2 files changed, 53 insertions(+), 53 deletions(-)

diff --git a/src/components/survey/CreateSurvey.jsx b/src/components/survey/CreateSurvey.jsx
index 6ced5e1..852facc 100644
--- a/src/components/survey/CreateSurvey.jsx
+++ b/src/components/survey/CreateSurvey.jsx
@@ -1,5 +1,5 @@
 import '../../styles/thread/Form.css';
-import React, { useState,useEffect} from 'react';
+import React, { useState, useEffect } from 'react';
 import axios from 'axios';
 import { authHeader } from '../../helpers/services/auth.service';
 import { API_URL } from '../../config/keys';
@@ -15,7 +15,7 @@ export default function CreateSurvey({ location }) {
 
   // const ids = [...Array(keywordParam).keys()]
 
-  
+
   useEffect(() => {
     let question = {}
     for (let i = 0; i < keywordParam; i++) {
@@ -23,9 +23,9 @@ export default function CreateSurvey({ location }) {
     }
     setQuestions(question)
 
-  },[keywordParam])
+  }, [keywordParam])
 
-  const addQuestion = (id,question) => {
+  const addQuestion = (id, question) => {
     let newQuestions = questions;
     newQuestions[id]['question'] = question;
     setQuestions(newQuestions);
@@ -34,12 +34,12 @@ export default function CreateSurvey({ location }) {
   const onSubmit = async (event) => {
     event.preventDefault();
     console.log(questions);
-   
+
     try {
       const result = await axios.post(
         `${API_URL}/surveys`,
-        { 
-          survey : {
+        {
+          survey: {
             title: title
           }
         },
@@ -47,65 +47,65 @@ export default function CreateSurvey({ location }) {
       );
 
       const id = result.data.data.id;
-       
+
       Object.entries(questions).forEach(async ([_, question]) => {
-          let x =   { 
-            question: question
-          };
-          x['question']['survey_id'] = parseInt(id);
-          await axios.post(
-            `${API_URL}/questions`,
-            x,
-            { headers: authHeader() }
-          );
+        let x = {
+          question: question
+        };
+        x['question']['survey_id'] = parseInt(id);
+        await axios.post(
+          `${API_URL}/questions`,
+          x,
+          { headers: authHeader() }
+        );
       })
-      
+
       window.alert("Submitted your questions successfully");
       history.push('');
     } catch (error) {
       console.log(error);
     }
-    
+
   };
 
 
- 
+
 
 
   return (
     <div className="formComponentContainer">
-        <div className="header">
-          <h1>
-            <b>Create Survey</b>
-          </h1>
-
-          <form onSubmit={onSubmit}>
-            <ul>
-              {[...Array.from(Array(parseInt(keywordParam)).keys())].map((num, i) => 
-                  <li  key={i}>
-                    <h5>Questions {i+1}</h5>
-                      <input
-                      type="text"
-                      className="survey"
-                      name="survey"
-                      placeholder="Your Survey's Question"
-                      required="true"  
-                      onInput={(e) =>
-                        addQuestion(i,e.target.value)
-                      }
-        
-                    />
-                  </li>
-              )}   
-
-            </ul>
-             
-            <button type="submit" className="btn btn-orange">
-              <span className="button">Create</span>
-            </button>
-          </form>
-           
-        </div>
+      <div className="header">
+        <h1>
+          <b>Create Survey</b>
+        </h1>
+
+      </div>
+
+      <form onSubmit={onSubmit}>
+        <ul>
+          {[...Array.from(Array(parseInt(keywordParam)).keys())].map((num, i) =>
+            <li key={i}>
+              <h5>Questions {i + 1}</h5>
+              <input
+                type="text"
+                className="survey"
+                name="survey"
+                placeholder="Your Survey's Question"
+                required="true"
+                onInput={(e) =>
+                  addQuestion(i, e.target.value)
+                }
+
+              />
+            </li>
+          )}
+
+        </ul>
+
+        <button type="submit" className="btn btn-orange">
+          <span className="button">Create</span>
+        </button>
+      </form>
     </div>
   );
 }
diff --git a/src/components/survey/ListSurveys.jsx b/src/components/survey/ListSurveys.jsx
index 96412d6..f9f5daf 100644
--- a/src/components/survey/ListSurveys.jsx
+++ b/src/components/survey/ListSurveys.jsx
@@ -12,7 +12,7 @@ export default function ListSurveys(props) {
           <b>Survey</b>
         </h1>
         {loggedIn && (
-          <Button text="Create Survey" color="orange" url="create/survey" />
+          <Button text="Create Survey" color="orange" url="create/number" />
         )}
       </div>
       <div className="listSurveysSection">
-- 
GitLab


From 2b1653d58599cbb93042c5856cbb7dff5e3c1320 Mon Sep 17 00:00:00 2001
From: Kezia <keziasulami.pooh@gmail.com>
Date: Wed, 29 Dec 2021 08:20:46 +0700
Subject: [PATCH 33/37] Check login when fill survey

---
 src/components/survey/ViewSurvey.jsx | 42 ++++++++++++++++------------
 1 file changed, 24 insertions(+), 18 deletions(-)

diff --git a/src/components/survey/ViewSurvey.jsx b/src/components/survey/ViewSurvey.jsx
index 0437456..327c3f9 100644
--- a/src/components/survey/ViewSurvey.jsx
+++ b/src/components/survey/ViewSurvey.jsx
@@ -3,6 +3,7 @@ import React, { useState, useEffect } from 'react';
 import { authHeader } from '../../helpers/services/auth.service';
 import { API_URL } from '../../config/keys';
 import '../../styles/thread/Form.css';
+import { loggedIn } from '../../helpers/services/auth.service';
 
 const likert = [...Array(5).keys()].map(i => i + 1);
 
@@ -15,26 +16,31 @@ export default function ViewSurvey(props) {
 
   useEffect(() => {
 
-    let questionList;
-    async function getSurveyData() {
-      const surveyData = (await axios.get(
-        `${API_URL}/surveys/show_questions/${survey}`,
-        { headers: authHeader() }
-      ))?.data;
-      const title = surveyData?.title;
-      setTitle(title);
-      questionList = surveyData?.questions;
-      setQuestions(questionList);
+    if (!loggedIn) {
+      window.alert("Anda belum login");
+      history.push('');
     }
+    else {
+      let questionList;
+      async function getSurveyData() {
+        const surveyData = (await axios.get(
+          `${API_URL}/surveys/show_questions/${survey}`,
+          { headers: authHeader() }
+        ))?.data;
+        const title = surveyData?.title;
+        setTitle(title);
+        questionList = surveyData?.questions;
+        setQuestions(questionList);
+      }
 
-    getSurveyData().then(() => {
-      let newAnswers = {}
-      questionList.forEach(({ id }) => {
-        newAnswers[id] = { question_id: id };
+      getSurveyData().then(() => {
+        let newAnswers = {}
+        questionList.forEach(({ id }) => {
+          newAnswers[id] = { question_id: id };
+        })
+        setAnswers(newAnswers);
       })
-      setAnswers(newAnswers);
-    })
-
+    }
   }, [survey]);
 
   const handleSubmit = async (event) => {
@@ -64,7 +70,7 @@ export default function ViewSurvey(props) {
           <Question id={id} question={question} idx={idx} key={idx} />
         )}
         <br />
-        <input type="submit" className="btn btn-orange" />
+        {loggedIn && <input type="submit" className="btn btn-orange" />}
       </form>
     </div>
   );
-- 
GitLab


From 0ce60751e6b5d599fc90bc3bce597b6e84db77e4 Mon Sep 17 00:00:00 2001
From: Qadzif Kamil Zahari <qadzifi@gmail.com>
Date: Wed, 29 Dec 2021 08:21:44 +0700
Subject: [PATCH 34/37] feat: scale explaination answer

---
 src/components/survey/ViewSurveyAnswer.jsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/components/survey/ViewSurveyAnswer.jsx b/src/components/survey/ViewSurveyAnswer.jsx
index 83380de..04bafee 100644
--- a/src/components/survey/ViewSurveyAnswer.jsx
+++ b/src/components/survey/ViewSurveyAnswer.jsx
@@ -38,6 +38,7 @@ export default function ViewSurveyAnswer (props) {
     return (
         <div className="answer-table-container">
             <div className='header'><h1><b>{title}</b></h1></div>
+            <div><h6>1 (Paling tidak setuju) - 5 (Paling setuju)</h6></div>
             { questions.map((val, idx) => <ViewAnswer key={idx} question={val} survey={survey}/>)}
         </div>
     );
-- 
GitLab


From c743e09f48122eeee240fc3ee676d7ec83a53215 Mon Sep 17 00:00:00 2001
From: Kezia <keziasulami.pooh@gmail.com>
Date: Wed, 29 Dec 2021 08:24:16 +0700
Subject: [PATCH 35/37] add history dependency

---
 src/components/survey/ViewSurvey.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/survey/ViewSurvey.jsx b/src/components/survey/ViewSurvey.jsx
index 327c3f9..6ee3475 100644
--- a/src/components/survey/ViewSurvey.jsx
+++ b/src/components/survey/ViewSurvey.jsx
@@ -41,7 +41,7 @@ export default function ViewSurvey(props) {
         setAnswers(newAnswers);
       })
     }
-  }, [survey]);
+  }, [survey, history]);
 
   const handleSubmit = async (event) => {
     event.preventDefault();
-- 
GitLab


From 6b94a842940b92acbb92c2849d4e165ffcd9d38b Mon Sep 17 00:00:00 2001
From: "ashila.ghassani" <ashila.ghassani@gmail.com>
Date: Wed, 29 Dec 2021 08:47:27 +0700
Subject: [PATCH 36/37] add text

---
 src/components/survey/CreateNumber.jsx | 9 +++++++++
 src/components/survey/ViewSurvey.jsx   | 3 +++
 2 files changed, 12 insertions(+)

diff --git a/src/components/survey/CreateNumber.jsx b/src/components/survey/CreateNumber.jsx
index cc96ced..e0d55f3 100644
--- a/src/components/survey/CreateNumber.jsx
+++ b/src/components/survey/CreateNumber.jsx
@@ -24,6 +24,7 @@ export default function CreateNumber(props) {
         <div class = "row">
           <form onSubmit={onSubmit}>
             <label htmlFor="Enter number of questions in your survey : "></label>
+
             <div class="row">
               <h5>Title Survey : </h5>
               <input
@@ -53,7 +54,15 @@ export default function CreateNumber(props) {
               </div>
 
             </form>
+            
+           
         </div>
+        <br/>
+        <div>
+                <p>*Survey ini menggunakan skala 1-5 dengan</p>
+                <p>1 = Sangat Tidak Setuju</p>
+                <p>5 = Sangat Setuju</p>
+              </div>
    
     </div>
   );
diff --git a/src/components/survey/ViewSurvey.jsx b/src/components/survey/ViewSurvey.jsx
index 6ee3475..fd54b29 100644
--- a/src/components/survey/ViewSurvey.jsx
+++ b/src/components/survey/ViewSurvey.jsx
@@ -65,6 +65,7 @@ export default function ViewSurvey(props) {
       <div className="header">
         <h1><b>{title}</b></h1>
       </div>
+      <div><p>1 = Sangat Tidak Setuju</p><p>5 = Sangat Setuju</p></div>
       <form onSubmit={handleSubmit}>
         {questions.map(({ id, question }, idx) =>
           <Question id={id} question={question} idx={idx} key={idx} />
@@ -93,7 +94,9 @@ export default function ViewSurvey(props) {
             <input type="radio" id={i} name={idx} value={i} required /> {i}
           </label>
         )}
+       
       </fieldset>
+    
     </>
   }
 }
-- 
GitLab


From c8e990aca2abd5ffdad2db7cf5004f69b5f9fee6 Mon Sep 17 00:00:00 2001
From: Kezia <keziasulami.pooh@gmail.com>
Date: Wed, 5 Jan 2022 15:47:14 +0700
Subject: [PATCH 37/37] Remove CI/CD

---
 .gitlab-ci.yml | 18 ------------------
 netlify.toml   |  2 --
 2 files changed, 20 deletions(-)
 delete mode 100644 .gitlab-ci.yml
 delete mode 100644 netlify.toml

diff --git a/.gitlab-ci.yml b/.gitlab-ci.yml
deleted file mode 100644
index 88a8557..0000000
--- a/.gitlab-ci.yml
+++ /dev/null
@@ -1,18 +0,0 @@
-image: node:14.18.1
-
-stages:
-  - deploy-to-staging
-
-deploy-to-staging:
-  stage: deploy-to-staging
-  environment:
-    name: staging
-    url: https://memepro-diskuy-frontend.netlify.app
-  only:
-    - staging
-  script:
-    - npm i
-    # your build command
-    - REACT_APP_ENV=staging npm run build
-    - npm install netlify-cli -g --unsafe-perm=true
-    - netlify deploy --prod
diff --git a/netlify.toml b/netlify.toml
deleted file mode 100644
index ca1043a..0000000
--- a/netlify.toml
+++ /dev/null
@@ -1,2 +0,0 @@
-[build]
-  publish = "build"
-- 
GitLab