dts-kominfo-rea4a · bagasysf · Oct 20, 2022 · Oct 20, 2022 · Oct 20, 2022 · Oct 21, 2022
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -3,16 +3,27 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@emotion/react": "^11.10.4",
+    "@emotion/styled": "^11.10.4",
+    "@fontsource/poppins": "^4.5.10",
+    "@mui/icons-material": "^5.10.9",
+    "@mui/material": "^5.10.10",
     "@reduxjs/toolkit": "^1.8.3",
     "@testing-library/jest-dom": "^5.16.4",
     "@testing-library/react": "^13.3.0",
     "@testing-library/user-event": "^13.5.0",
+    "axios": "^1.1.3",
+    "firebase": "^9.12.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-firebase-hooks": "^5.0.3",
+    "react-icons": "^4.6.0",
+    "react-loading": "^2.0.3",
     "react-redux": "^8.0.2",
     "react-router-dom": "^6.3.0",
-    "react-scripts": "5.0.1",
-    "web-vitals": "^2.1.4"
+    "react-scripts": "^2.1.3",
+    "web-vitals": "^2.1.4",
+    "zustand": "^4.1.2"
   },
   "scripts": {
     "start": "react-scripts start",

diff --git a/public/favicon.ico b/public/favicon.ico
diff --git a/public/images/3d-render-cross-mark-isolated-icon-error-x-symbol.png b/public/images/3d-render-cross-mark-isolated-icon-error-x-symbol.png
diff --git a/public/images/asset-logout.svg b/public/images/asset-logout.svg
diff --git a/public/images/hero-image.png b/public/images/hero-image.png
diff --git a/public/images/hero-image.svg b/public/images/hero-image.svg
diff --git a/public/images/icon-figma.png b/public/images/icon-figma.png
diff --git a/public/images/m001t0200_a_megaphone_21jun22.jpg b/public/images/m001t0200_a_megaphone_21jun22.jpg
diff --git a/public/images/m001t0200_a_megaphone_21jun22.png b/public/images/m001t0200_a_megaphone_21jun22.png
diff --git a/public/index.html b/public/index.html
@@ -2,7 +2,7 @@
 <html lang="en">
   <head>
     <meta charset="utf-8" />
-    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
+    <link rel="icon" href="%PUBLIC_URL%/sj-icon.png" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="theme-color" content="#000000" />
     <meta
@@ -24,7 +24,7 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
-    <title>React App</title>
+    <title>SJ News - Digitalent x TechReady</title>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>

diff --git a/public/logo.png b/public/logo.png
diff --git a/public/sj-icon.png b/public/sj-icon.png
diff --git a/public/sjn-icon.png b/public/sjn-icon.png
diff --git a/public/sjnews.ico b/public/sjnews.ico
diff --git a/src/App.css b/src/App.css
@@ -1,38 +1,8 @@
-.App {
-  text-align: center;
+* {
+  /* border: 1px solid dimgray; */
+  margin: 0;
 }
 
-.App-logo {
-  height: 40vmin;
-  pointer-events: none;
-}
-
-@media (prefers-reduced-motion: no-preference) {
-  .App-logo {
-    animation: App-logo-spin infinite 20s linear;
-  }
-}
-
-.App-header {
-  background-color: #282c34;
-  min-height: 100vh;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  font-size: calc(10px + 2vmin);
-  color: white;
-}
-
-.App-link {
-  color: #61dafb;
-}
-
-@keyframes App-logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
+body {
+  font-family: "Poppins", "Roboto";
 }
diff --git a/src/App.js b/src/App.js
@@ -1,24 +1,25 @@
-import logo from './logo.svg';
-import './App.css';
+import "./App.css";
+import "@fontsource/poppins";
+import { ThemeProvider } from "@mui/material";
+import theme from "./themes/theme";
+import LandingContainer from "./containers/LandingContainer";
+import { Routes, Route } from "react-router-dom";
+import SignInContainer from "./containers/SignInContainer";
+import RegisterContainer from "./containers/RegisterContainer";
+import LogoutContainer from "./containers/Logout Container";
 
 function App() {
   return (
-    <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit <code>src/App.js</code> and save to reload.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
-      </header>
-    </div>
+    <>
+      <ThemeProvider theme={theme}>
+        <Routes>
+          <Route path="/" element={<LandingContainer />} />
+          <Route path="/signin" element={<SignInContainer />} />
+          <Route path="/register" element={<RegisterContainer />} />
+          <Route path="/logout" element={<LogoutContainer />} />
+        </Routes>
+      </ThemeProvider>
+    </>
   );
 }
 

diff --git a/src/authentication/firebase.js b/src/authentication/firebase.js
@@ -0,0 +1,51 @@
+// Import the functions you need from the SDKs you need
+import { async } from "@firebase/util";
+import { initializeApp } from "firebase/app";
+// TODO: Add SDKs for Firebase products that you want to use
+// https://firebase.google.com/docs/web/setup#available-libraries
+
+import { getAuth, createUserWithEmailAndPassword, signInWithEmailAndPassword, sendPasswordResetEmail, signOut } from 'firebase/auth';
+
+// Your web app's Firebase configuration
+const firebaseConfig = {
+  apiKey: "AIzaSyACe4_0LHH_phKj-cY9Xd-3P2vW1Qt9IaM",
+  authDomain: "sj-news.firebaseapp.com",
+  projectId: "sj-news",
+  storageBucket: "sj-news.appspot.com",
+  messagingSenderId: "597975223627",
+  appId: "1:597975223627:web:d660a2ea5a0b27e83becce"
+};
+
+// Initialize Firebase
+const app = initializeApp(firebaseConfig);
+const auth = getAuth(app);
+const registrationWithEmailAndPassword = async (email, password) => {
+    try {
+        const userCredential = await createUserWithEmailAndPassword(auth, email, password);
+        console.log('User yang sudah regis adalah', userCredential.user);
+    } catch(err) {
+        console.log(err);
+        console.log('Code: ', err.code); 
+        console.log('Message: ', err.message); 
+    }
+} 
+const signInWithEmailAndPassword = async (email, password) => {
+    try {
+        const userCredential = await signInWithEmailAndPassword(auth, email, password);
+        console.log('User yang sudah login adalah', userCredential.user);
+    } catch(err) {
+        console.log(err);
+        console.log('Code: ', err.code); 
+        console.log('Message: ', err.message); 
+    }
+}
+
+const signOut = async () => {
+    try {
+        await signOut(auth);
+    } catch(err) {
+        console.log(err);
+    }
+}
+
+export { auth, registrationWithEmailAndPassword, signInWithEmailAndPassword, signOut }; 
diff --git a/src/components/Footer.jsx b/src/components/Footer.jsx
@@ -0,0 +1,25 @@
+import React from "react";
+import { Box } from "@mui/system";
+
+const Footer = () => {
+  return (
+    <Box
+      display="flex"
+      justifyContent="center"
+      alignItems="center"
+      sx={{
+        width: "100%",
+        height: "60px",
+        background: "#F3CD0F",
+        mt: "50px",
+        color: "#BF8300",
+      }}
+    >
+      <Box>
+        Copyright <h5 style={{ display: "inline-block" }}>SJ News</h5>
+      </Box>
+    </Box>
+  );
+};
+
+export default Footer;
diff --git a/src/components/GridNews.jsx b/src/components/GridNews.jsx
@@ -0,0 +1,69 @@
+import React from "react";
+import Grid from "@mui/material/Unstable_Grid2";
+import Typography from "@mui/material/Typography";
+import { Box } from "@mui/system";
+import { styled } from "@mui/material/styles";
+import { Link } from "react-router-dom";
+import countTime from "../utils/countTime";
+
+const Img = styled("img")(({ theme }) => ({
+  height: "auto",
+  width: "100%",
+  borderRadius: "8px",
+}));
+
+const GridNews = ({ news }) => {
+  return (
+    <Grid
+      container
+      spacing={{ xs: 2, md: 3 }}
+      columns={{ xs: 4, sm: 8, md: 12 }}
+    >
+      {news.map((data) => (
+        <Grid item xs={2} sm={4} md={3} key={data.id}>
+          <Link
+            to={"/content/" + data.id}
+            style={{
+              textDecoration: "none",
+              display: "inline-block",
+              marginTop: "10px",
+              color: "black",
+            }}
+          >
+            <Box sx={{ cursor: "pointer" }}>
+              <Img src={data.fields.thumbnail} alt={data.webTitle} />
+              <Typography
+                gutterBottom
+                variant="h6"
+                component="div"
+                sx={{
+                  mb: "10px",
+                  mt: "10px",
+                  fontFamily: "Playfair Display",
+                }}
+              >
+                {data.webTitle}
+              </Typography>
+              <Box>
+                <Typography
+                  variant="caption"
+                  color="text.secondary"
+                  sx={{ mr: "15px" }}
+                >
+                  {data.webPublicationDate != null
+                    ? countTime(data.webPublicationDate)
+                    : ""}
+                </Typography>
+                <Typography variant="caption" color="text.secondary">
+                  {data.fields.publication}
+                </Typography>
+              </Box>
+            </Box>
+          </Link>
+        </Grid>
+      ))}
+    </Grid>
+  );
+};
+
+export default GridNews;