Feature/feedback (#66)

* Add information text due to backend issue

* feat: add mixpanel events (#64)

* remove debug

* feat: integrate ristek ads

* chore: bump version of ristek ads

* chore: revert config to use localhost

* chore: bump version of ristek ads to 1.2.6

* fix: disable mixpanel

* feat: create feedback modal

* feat: create feedback page

* feat: create google calendar popup

* feat: create admin login and feedback recap page

* fix: add todo comments for disabled analytics

* feat: integrate feedback feature with backend

---------

Co-authored-by: fajarriv <[email protected]>
Co-authored-by: fajarriv <[email protected]>
Co-authored-by: Valee <[email protected]>
Co-authored-by: Valerian Salim <[email protected]>
Co-authored-by: FreeJ1nG <[email protected]>
Co-authored-by: Andrew Jeremy <[email protected]>

package.json

@@ -10,11 +10,13 @@
     "@fontsource/poppins": "^4.4.5",
     "@heroicons/react": "^1.0.2",
     "@react-spring/web": "^9.7.3",
+    "@ristek-kit/ads": "^1.2.6",
     "axios": "^0.19.0",
     "copy-image-clipboard": "^2.1.2",
     "framer-motion": "^4",
     "html-to-image": "^1.9.0",
     "ics": "^2.31.0",
+    "mixpanel-browser": "^2.48.1",
     "query-string": "^6.8.1",
     "react": "^16.8.6",
     "react-burger-menu": "^2.6.10",
@@ -30,7 +32,7 @@
     "react-redux": "^7.1.0",
     "react-router": "^5.2.0",
     "react-router-dom": "^5.2.0",
-    "react-scripts": "3.0.1",
+    "react-scripts": "^4.0.1",
     "redux": "^4.0.4",
     "styled-components": "^4.3.2"
   },
@@ -60,8 +62,10 @@
   "devDependencies": {
     "@testing-library/jest-dom": "^5.14.1",
     "@testing-library/react": "^12.1.2",
+    "eslint": "^7.11.0",
     "eslint-config-prettier": "^8.3.0",
-    "eslint-config-react-app": "^6.0.0",
+    "eslint-config-react-app": "^7.0.1",
+    "eslint-plugin-import": "^2.29.1",
     "eslint-plugin-prettier": "^4.0.0",
     "eslint-plugin-react": "^7.25.3",
     "eslint-plugin-unused-imports": "^1.1.4",

src/App.js

@@ -3,6 +3,7 @@ import { Provider } from "react-redux";
 import { Router } from "react-router";
 import { createBrowserHistory } from "history";
 
+import { AdsProvider } from "@ristek-kit/ads";
 import MediaQuery from "containers/MediaQuery";
 import Loading from "containers/Loading";
 
@@ -11,6 +12,7 @@ import store from "./redux/store";
 
 import config from "config";
 import "./app.css";
+import "@ristek-kit/ads/dist/styles.css";
 import ScrollToTop from "utils/scroll";
 
 const history = createBrowserHistory({ basename: config.BASE_URL });
@@ -20,7 +22,9 @@ function App() {
     <Router history={history}>
       <ScrollToTop />
       <Provider store={store}>
-        <Routes />
+        <AdsProvider platform="SusunJadwal" theme="light">
+          <Routes />
+        </AdsProvider>
         <MediaQuery />
         <Loading />
       </Provider>

src/app.css

@@ -462,7 +462,6 @@ button {
   -moz-appearance: none;
   background: transparent;
   padding: 0;
-  border: 0;
   border-radius: 0;
   line-height: 1;
 }
@@ -603,7 +602,7 @@ button {
 }
 
 .small-offset-2 {
-  margin-left: 16.66667%
+  margin-left: 16.66667%;
 }
 
 .small-4 {
@@ -1974,7 +1973,7 @@ p + .stat {
 .entryJadwal {
   position: absolute;
   width: calc((100% / 6) - 0.5rem);
-  background: #F2994A;
+  background: #f2994a;
   color: #222222;
 }
 

src/components/Cards.js

@@ -7,7 +7,7 @@ import {
   Icon,
   useColorModeValue,
 } from "@chakra-ui/react";
-import { GoMarkGithub } from "react-icons/go";
+import { FaGithub } from "react-icons/fa6";
 
 export const ContributorCard = ({ name, avatar, github, contributions }) => {
   const theme = useColorModeValue("light", "dark");
@@ -61,7 +61,7 @@ export const ContributorCard = ({ name, avatar, github, contributions }) => {
           >
             <Icon
               boxSize={"1.2rem"}
-              as={GoMarkGithub}
+              as={FaGithub}
               color={theme === "light" ? "Black" : "dark.LightPurple"}
             />{" "}
             Github

src/config.js

@@ -4,19 +4,21 @@ const config = {
     SSO_UI_URL: "https://sso.ui.ac.id/cas2",
     AIRTABLE_BASE_ID: process.env.REACT_APP_BETA_AIRTABLE_BASE_ID,
     AIRTABLE_API_KEY: process.env.REACT_APP_BETA_AIRTABLE_API_KEY,
-    AIRTABLE_TABLE_NAME: process.env.REACT_APP_BETA_AIRTABLE_TABLE_NAME
+    AIRTABLE_TABLE_NAME: process.env.REACT_APP_BETA_AIRTABLE_TABLE_NAME,
+    MIXPANEL_PROJECT_TOKEN: process.env.REACT_APP_MIXPANEL_PROJECT_TOKEN,
   },
   production: {
     API_BASE_URL: process.env.REACT_APP_AWS_BACKEND_URL,
-    BASE_URL: "/"
+    BASE_URL: "/",
   },
   development: {
-    API_BASE_URL: "http://localhost:5000/susunjadwal/api",
-    BASE_URL: "/"
-  }
+    // API_BASE_URL: "http://localhost:5000/susunjadwal/api",
+    API_BASE_URL: "https://stg.api.susunjadwal.cs.ui.ac.id/susunjadwal/api",
+    BASE_URL: "/",
+  },
 };
 
 export default {
   ...config.base,
-  ...config[process.env.NODE_ENV || "development"]
+  ...config[process.env.NODE_ENV || "development"],
 };