feature/integrate-ristek-ads

package.json

@@ -10,6 +10,7 @@
     "@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",
@@ -31,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"
   },
@@ -61,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/containers/SelectedCourses/index.js

@@ -27,6 +27,7 @@ import { makeAtLeastMs } from "utils/promise";
 import { isScheduleConflict, listScheduleConflicts } from "./utils";
 
 import TrashIcon from "assets/Trash.svg";
+import { RistekAds } from "@ristek-kit/ads";
 
 function transformSchedules(schedules) {
   return schedules
@@ -184,6 +185,10 @@ function SelectedCourses({ history, scheduleId, isEditing }) {
         </ModalContent>
       </Modal>
 
+      <div style={{ marginBottom: 24 }}>
+        <RistekAds />
+      </div>
+
       <Container mode={theme}>
         <h3>Kelas Pilihan</h3>