dts-kominfo-rea2b · thenevermore · Aug 10, 2022 · Aug 10, 2022
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -3,12 +3,22 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@emotion/react": "^11.9.3",
+    "@emotion/styled": "^11.9.3",
+    "@fontsource/roboto": "^4.5.7",
+    "@mui/icons-material": "^5.8.4",
+    "@mui/material": "^5.9.2",
     "@testing-library/jest-dom": "^5.16.4",
     "@testing-library/react": "^13.3.0",
     "@testing-library/user-event": "^13.5.0",
+    "axios": "^0.27.2",
+    "firebase": "^9.9.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-firebase-hooks": "^5.0.3",
+    "react-router-dom": "^6.3.0",
     "react-scripts": "5.0.1",
+    "use-sound": "^4.0.1",
     "web-vitals": "^2.1.4"
   },
   "scripts": {

diff --git a/public/data.json b/public/data.json
@@ -0,0 +1,116 @@
+{
+  "status": true,
+  "data": {
+    "title": "Latest Devices",
+    "phones": [
+      {
+        "phone_name": "Motorola Moto Tab G62",
+        "slug": "motorola_moto_tab_g62-11746",
+        "image": "https://fdn2.gsmarena.com/vv/bigpic/motorola-moto-tab-g70.jpg",
+        "detail": "http://api-mobilespecs.azharimm.site/v2/motorola_moto_tab_g62-11746"
+      },
+      {
+        "phone_name": "OnePlus Ace Pro",
+        "slug": "oneplus_ace_pro-11745",
+        "image": "https://fdn2.gsmarena.com/vv/bigpic/oneplus-10t-5g.jpg",
+        "detail": "http://api-mobilespecs.azharimm.site/v2/oneplus_ace_pro-11745"
+      },
+      {
+        "phone_name": "vivo Y02s",
+        "slug": "vivo_y02s-11697",
+        "image": "https://fdn2.gsmarena.com/vv/bigpic/vivo-y02s.jpg",
+        "detail": "http://api-mobilespecs.azharimm.site/v2/vivo_y02s-11697"
+      },
+      {
+        "phone_name": "Oppo Reno8 4G",
+        "slug": "oppo_reno8_4g-11743",
+        "image": "https://fdn2.gsmarena.com/vv/bigpic/oppo-reno8-4g-r.jpg",
+        "detail": "http://api-mobilespecs.azharimm.site/v2/oppo_reno8_4g-11743"
+      },
+      {
+        "phone_name": "vivo Y55",
+        "slug": "vivo_y55-11744",
+        "image": "https://fdn2.gsmarena.com/vv/bigpic/vivo-y55-pk.jpg",
+        "detail": "http://api-mobilespecs.azharimm.site/v2/vivo_y55-11744"
+      },
+      {
+        "phone_name": "Samsung Galaxy Z Fold4",
+        "slug": "samsung_galaxy_z_fold4-11737",
+        "image": "https://fdn2.gsmarena.com/vv/bigpic/samsung-galaxy-z-fold4-5g-0.jpg",
+        "detail": "http://api-mobilespecs.azharimm.site/v2/samsung_galaxy_z_fold4-11737"
+      },
+      {
+        "phone_name": "Samsung Galaxy Z Flip4",
+        "slug": "samsung_galaxy_z_flip4-11538",
+        "image": "https://fdn2.gsmarena.com/vv/bigpic/samsung-galaxy-z-flip4-5g-0.jpg",
+        "detail": "http://api-mobilespecs.azharimm.site/v2/samsung_galaxy_z_flip4-11538"
+      },
+      {
+        "phone_name": "OnePlus Nord N20 SE",
+        "slug": "oneplus_nord_n20_se-11738",
+        "image": "https://fdn2.gsmarena.com/vv/bigpic/oneplus-nord-n20-se.jpg",
+        "detail": "http://api-mobilespecs.azharimm.site/v2/oneplus_nord_n20_se-11738"
+      },
+      {
+        "phone_name": "Nokia 110 (2022)",
+        "slug": "nokia_110_(2022)-11741",
+        "image": "https://fdn2.gsmarena.com/vv/bigpic/nokia-110-2022.jpg",
+        "detail": "http://api-mobilespecs.azharimm.site/v2/nokia_110_(2022)-11741"
+      },
+      {
+        "phone_name": "OnePlus Nord N20 SE",
+        "slug": "oneplus_nord_n20_se-11738",
+        "image": "https://fdn2.gsmarena.com/vv/bigpic/oneplus-nord-n20-se.jpg",
+        "detail": "http://api-mobilespecs.azharimm.site/v2/oneplus_nord_n20_se-11738"
+      },
+      {
+        "phone_name": "Infinix Smart 6 Plus (India)",
+        "slug": "infinix_smart_6_plus_(india)-11742",
+        "image": "https://fdn2.gsmarena.com/vv/bigpic/infinix-smart-6-plus.jpg",
+        "detail": "http://api-mobilespecs.azharimm.site/v2/infinix_smart_6_plus_(india)-11742"
+      },
+      {
+        "phone_name": "Nokia 8210 4G",
+        "slug": "nokia_8210_4g-11666",
+        "image": "https://fdn2.gsmarena.com/vv/bigpic/nokia-8210-4g.jpg",
+        "detail": "http://api-mobilespecs.azharimm.site/v2/nokia_8210_4g-11666"
+      },
+      {
+        "phone_name": "Nokia 5710 XpressAudio",
+        "slug": "nokia_5710_xpressaudio-11667",
+        "image": "https://fdn2.gsmarena.com/vv/bigpic/nokia-5710-xpressaudio.jpg",
+        "detail": "http://api-mobilespecs.azharimm.site/v2/nokia_5710_xpressaudio-11667"
+      },
+      {
+        "phone_name": "Nokia 2660 Flip",
+        "slug": "nokia_2660_flip-11668",
+        "image": "https://fdn2.gsmarena.com/vv/bigpic/nokia-2660-flip.jpg",
+        "detail": "http://api-mobilespecs.azharimm.site/v2/nokia_2660_flip-11668"
+      },
+      {
+        "phone_name": "vivo T1x (India)",
+        "slug": "vivo_t1x_(india)-11704",
+        "image": "https://fdn2.gsmarena.com/vv/bigpic/vivo-t1x-india.jpg",
+        "detail": "http://api-mobilespecs.azharimm.site/v2/vivo_t1x_(india)-11704"
+      },
+      {
+        "phone_name": "Oppo Reno8",
+        "slug": "oppo_reno8-11684",
+        "image": "https://fdn2.gsmarena.com/vv/bigpic/oppo-reno8.jpg",
+        "detail": "http://api-mobilespecs.azharimm.site/v2/oppo_reno8-11684"
+      },
+      {
+        "phone_name": "vivo iQOO 10 Pro",
+        "slug": "vivo_iqoo_10_pro-11701",
+        "image": "https://fdn2.gsmarena.com/vv/bigpic/vivo-iqoo10-pro.jpg",
+        "detail": "http://api-mobilespecs.azharimm.site/v2/vivo_iqoo_10_pro-11701"
+      },
+      {
+        "phone_name": "vivo iQOO 10",
+        "slug": "vivo_iqoo_10-11703",
+        "image": "https://fdn2.gsmarena.com/vv/bigpic/vivo-iqoo10.jpg",
+        "detail": "http://api-mobilespecs.azharimm.site/v2/vivo_iqoo_10-11703"
+      }
+    ]
+  }
+}
diff --git a/src/App.css b/src/App.css
@@ -36,3 +36,17 @@
     transform: rotate(360deg);
   }
 }
+
+.nav-inactive {
+  color: white;
+  padding: 10px;
+  letter-spacing: 1px;
+  text-decoration: none;
+}
+
+.nav-active {
+  color: white;
+  padding: 10px;
+  letter-spacing: 1px;
+  text-underline-offset: 5px;
+}
diff --git a/src/App.js b/src/App.js
@@ -1,25 +1,10 @@
-import logo from './logo.svg';
-import './App.css';
+import HomePage from './containers/HomePage';
+
 
 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>
+    <HomePage></HomePage>
   );
 }
 
-export default App;
+export default App;
diff --git a/src/api/gsmarena.js b/src/api/gsmarena.js
@@ -0,0 +1,15 @@
+import axios from 'axios';
+
+//const baseURL = 'https://api-mobilespecs.azharimm.site/v2/latest';
+const baseURL = 'http://localhost:3000/data.json';
+const baseDetail = 'http://api-mobilespecs.azharimm.site/v2/';
+
+const gsmdb = axios.create({
+    baseURL: baseURL,
+})
+
+const detailgsmdb = axios.create({
+    baseURL: baseDetail
+})
+
+export { gsmdb,detailgsmdb };
diff --git a/src/components/Buttons.js b/src/components/Buttons.js
@@ -0,0 +1,20 @@
+import React from "react";
+import { Button, Box } from "@mui/material";
+
+const Buttons = ({ filterItem, setItem, menuItems, dataGSM }) => {
+    return (
+        <Box sx={{mt: 4, display: 'flex', flexDirection: 'row', justifyContent: 'flex-end', alignItems: 'center', mb: 7}}>
+            <p>Filter By Category:</p>
+            {
+                menuItems.map((Val, slug) => {
+                    return (
+                        <Button variant="contained" sx={{ ml: 2, mr: 2 }} onClick={() => filterItem(Val)} key={slug} >{Val}</Button>
+                    );
+                })
+            }
+            <Button variant="contained" sx={{ ml: 2, mr: 2 }} onClick={() => setItem(dataGSM)}>All</Button>
+        </Box>
+    );
+};
+
+export default Buttons;
diff --git a/src/components/Content.js b/src/components/Content.js
@@ -0,0 +1,47 @@
+import React from 'react';
+import { Box, CardMedia, Card, Typography, CardContent, Button } from '@mui/material';
+import VisibilityIcon from '@mui/icons-material/Visibility';
+import { useNavigate } from 'react-router-dom';
+// import useSound from 'use-sound';
+// import PlayCircleOutlineIcon from '@mui/icons-material/PlayCircleOutline';
+
+
+const Content = ({items})=> {
+
+    let navigate = useNavigate();
+
+    const viewGSM = (items) => {
+        const idGSM = items.slug;
+        navigate(`/detail/${idGSM}`);
+    }
+
+    return (
+    <Card id={items.slug} sx={{ display: 'flex', width: 280, marginTop:3, marginLeft:1, marginRight:1, marginBottom:3}}>
+      <Box sx={{ display: 'flex', flexDirection: 'column' }}>
+        <CardContent sx={{ flex: '1 0 auto' }}>
+          <Typography component="div" variant="h5">
+            { items.phone_name}
+          </Typography>
+          <Typography variant="subtitle1" color="text.secondary" component="div">
+            PakPOS Digital Studio
+          </Typography>
+        </CardContent>
+        <Box sx={{ display: 'flex', alignItems: 'center', pl: 1, pb: 1 }}>
+          <Button variant="contained" endIcon={<VisibilityIcon />} onClick={() => viewGSM(items)} xs={{paddingButton: 5}}>
+        VIEW
+        </Button>
+        </Box>
+      </Box>
+      <CardMedia
+        component="img"
+        sx={{ width: 151 }}
+        image={ items.image }
+        alt="Ponsel"
+      />
+    </Card>
+
+
+    )
+}
+
+export default Content;
diff --git a/src/components/Footer.js b/src/components/Footer.js
@@ -0,0 +1,21 @@
+import * as React from 'react';
+import {ThemeProvider, AppBar, Box, Toolbar, Typography} from '@mui/material';
+import AssignmentIndIcon from '@mui/icons-material/AssignmentInd';
+import theme from '../themes/theme';
+
+export default function Footer() {
+  return (
+    <ThemeProvider theme={theme}>
+    <Box sx={{ flexGrow: 1 , marginTop:"10"}}>
+      <AppBar position="fixed" color="secondary" sx={{ top: 'auto', bottom: 0 }}>
+        <Toolbar>
+          <AssignmentIndIcon sx={{ display: 'flex', mr: 1 }} />
+          <Typography variant="caption" display="block" gutterBottom>
+            Ariansyah Nurhadi - REA2B
+          </Typography>
+        </Toolbar>
+      </AppBar>
+    </Box>
+    </ThemeProvider>
+  );
+}
diff --git a/src/components/Navbar.js b/src/components/Navbar.js
@@ -0,0 +1,67 @@
+import * as React from 'react';
+import PublicIcon from '@mui/icons-material/Public';
+import { ThemeProvider, AppBar, Box, Toolbar, Typography, IconButton } from '@mui/material';
+import { useNavigate, NavLink } from 'react-router-dom';
+import { signOut } from "firebase/auth";
+import { auth } from '../config/firebase';
+import { Logout } from '@mui/icons-material';
+import theme from '../themes/theme';
+import { useAuthState } from 'react-firebase-hooks/auth';
+
+const navItems = [
+  { text: 'Sign In', link: '/login' },
+  { text: 'Sign Up', link: '/register' },
+];
+
+export default function Navbar() {
+    const [user] = useAuthState(auth);
+
+    const navigate = useNavigate();
+
+    const onLogOut = () => {
+        signOut(auth).then(() => {
+            navigate("/login");
+        }).catch((error) => {
+            console.log(error)
+        });
+    }
+    return (
+      <ThemeProvider theme={theme}>
+        <Box sx={{ flexGrow: 1, }}>
+              <AppBar position="fixed" sx={{p:1}}>
+                  <Toolbar>
+                      <Typography variant="h6" sx={{flexGrow: 1, display: 'flex', fontFamily: 'monospace', fontWeight: 700,letterSpacing: '.3rem'}}>
+                          <IconButton style={{ color: 'inherit', textDecoration: 'inherit' }} href="/"><PublicIcon/>StarWars Library App</IconButton>
+                      </Typography>
+
+                      {user !== null ? (
+                      <Box>
+                          <Box sx={{ display: 'flex' }}>
+                              <Box sx={{ padding: 2 }}>Welcome, {user.email}</Box>
+                              <Box sx={{ padding: 1 }}>
+                                  <IconButton style={{color: 'white', fontSize: 15}} onClick={onLogOut} >
+                                      <Logout/>Log Out
+                                  </IconButton>
+                              </Box>
+                          </Box>
+                      </Box>
+                      ) : 
+                      (
+                      <Box sx={{ display: 'flex', justifyContent: 'center'}}>
+                      {navItems.map((item) => (
+                          <NavLink
+                          to={item.link}
+                          key={item.text}
+                          className={({ isActive }) => isActive ? 'nav-active' : 'nav-inactive'}
+                          >
+                          {item.text}
+                          </NavLink>
+                      ))}
+                      </Box>
+                      )}
+                  </Toolbar>
+              </AppBar>
+          </Box>
+      </ThemeProvider>
+    )
+}
diff --git a/src/config/firebase.js b/src/config/firebase.js
@@ -0,0 +1,22 @@
+// Import the functions you need from the SDKs you need
+import { initializeApp } from "firebase/app";
+import { getAuth } from "firebase/auth";
+// TODO: Add SDKs for Firebase products that you want to use
+// https://firebase.google.com/docs/web/setup#available-libraries
+
+// Your web app's Firebase configuration
+const firebaseConfig = {
+  apiKey: "AIzaSyC7-AdVz6Osds37bFursTipqHBImALZecs",
+  authDomain: "react-dev-7fcf4.firebaseapp.com",
+  projectId: "react-dev-7fcf4",
+  storageBucket: "react-dev-7fcf4.appspot.com",
+  messagingSenderId: "219638507589",
+  appId: "1:219638507589:web:e87a7580ce50cdf1091b2c",
+  measurementId: "G-HVZLFVPJXL"
+};
+
+// Initialize Firebase
+const app = initializeApp(firebaseConfig);
+const auth = getAuth(app);
+
+export {auth};