major update

arbizen · Apr 29, 2021 · f2ed3b7 · f2ed3b7
1 parent 1222cfc
commit f2ed3b7
Show file tree

Hide file tree

Showing 18 changed files with 441 additions and 120 deletions.
diff --git a/public/index.html b/public/index.html
@@ -24,9 +24,10 @@
       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>Note Saver</title>
     <link href="https://fonts.googleapis.com/icon?family=Material+Icons"
       rel="stylesheet">
+    <script src="https://unpkg.com/[email protected]/dist/ionicons.js"></script>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>
@@ -41,5 +42,14 @@
       To begin the development, run `npm start` or `yarn start`.
       To create a production bundle, use `npm run build` or `yarn build`.
     -->
+    <script>
+      if ('serviceWorker' in navigator) {
+        window.addEventListener('load', () => {
+            navigator.serviceWorker.register('%PUBLIC_URL%/worker.js')
+              .then(reg => console.log(`Registered successfully with scope: ${reg.scope}`))
+              .catch(err => console.log(`Service worker error: ${err}`));
+        });
+      }
+    </script>
   </body>
 </html>
diff --git a/public/manifest.json b/public/manifest.json
@@ -1,6 +1,6 @@
 {
-  "short_name": "React App",
-  "name": "Create React App Sample",
+  "short_name": "Note Keeper",
+  "name": "Note Keeper",
   "icons": [
     {
       "src": "favicon.ico",

diff --git a/public/offline.html b/public/offline.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Oops!</title>
+</head>
+<body>
+    <p>Please go online to see, save or delete your note.</p>
+</body>
+</html>
diff --git a/public/worker.js b/public/worker.js
@@ -0,0 +1,62 @@
+/* eslint-disable no-restricted-globals */
+const OFFLINE_VERSION = 1;
+const CACHE_NAME = 'offline';
+// Customize this with a different URL if needed.
+const OFFLINE_URL = 'offline.html';
+
+self.addEventListener('install', (event) => {
+  event.waitUntil((async () => {
+    const cache = await caches.open(CACHE_NAME);
+    // Setting {cache: 'reload'} in the new request will ensure that the response
+    // isn't fulfilled from the HTTP cache; i.e., it will be from the network.
+    await cache.add(new Request(OFFLINE_URL, {cache: 'reload'}));
+  })());
+});
+
+self.addEventListener('activate', (event) => {
+  event.waitUntil((async () => {
+    // Enable navigation preload if it's supported.
+    // See https://developers.google.com/web/updates/2017/02/navigation-preload
+    if ('navigationPreload' in self.registration) {
+      await self.registration.navigationPreload.enable();
+    }   
+  })());
+
+  // Tell the active service worker to take control of the page immediately.
+  self.clients.claim();
+});
+
+self.addEventListener('fetch', (event) => {
+  // We only want to call event.respondWith() if this is a navigation request
+  // for an HTML page.
+  if (event.request.mode === 'navigate') {
+    event.respondWith((async () => {
+      try {
+        // First, try to use the navigation preload response if it's supported.
+        const preloadResponse = await event.preloadResponse;
+        if (preloadResponse) {
+          return preloadResponse;
+        }
+
+        const networkResponse = await fetch(event.request);
+        return networkResponse;
+      } catch (error) {
+        // catch is only triggered if an exception is thrown, which is likely
+        // due to a network error.
+        // If fetch() returns a valid HTTP response with a response code in
+        // the 4xx or 5xx range, the catch() will NOT be called.
+        console.log('Fetch failed; returning offline page instead.', error);
+
+        const cache = await caches.open(CACHE_NAME);
+        const cachedResponse = await cache.match(OFFLINE_URL);
+        return cachedResponse;
+      }
+    })());
+  }
+
+  // If our if() condition is false, then this fetch handler won't intercept the
+  // request. If there are any other fetch handlers registered, they will get a
+  // chance to call event.respondWith(). If no fetch handlers call
+  // event.respondWith(), the request will be handled by the browser as if there
+  // were no service worker involvement.
+});
diff --git a/src/assets/colors/index.js b/src/assets/colors/index.js
@@ -0,0 +1,3 @@
+export const MAIN_COLOR = `#111c33`;
+export const TEXT_COLOR = `#1ecbe1`;
+export const MAIN_COLOR_LIGHT = `#223861`;
diff --git a/src/assets/login-bg.jpg b/src/assets/login-bg.jpg
diff --git a/src/components/Camera.js b/src/components/Camera.js
@@ -1,4 +1,4 @@
-import React, { useState, useRef, useEffect, useContext } from "react";
+import React, { useRef, useEffect, useContext } from "react";
 import PropTypes from "prop-types";
 import styled from "styled-components";
 import LoginContext from "../context";

diff --git a/src/components/CameraView.js b/src/components/CameraView.js
@@ -1,5 +1,5 @@
 import Camera from "../components/Camera";
-import Editor from "../components/Editor";
+import EditorView from "./EditorView";
 import styled from "styled-components";
 import { useContext, useEffect, useRef, useState } from "react";
 import { v4 as uuiv4 } from "uuid";
@@ -103,7 +103,7 @@ const CameraView = ({ onCameraHide, stream }) => {
         />
       )}
       {showEditor && (
-        <Editor
+        <EditorView
           image={image}
           onProceed={handleOnProceed}
           onCancel={handleEditorCancel}

diff --git a/src/components/Editor.js → src/components/EditorView.js b/src/components/Editor.js → src/components/EditorView.js
@@ -33,7 +33,7 @@ const EditorControl = styled.div`
   padding: 20px;
   user-select: none;
 `;
-const Editor = ({ image, onProceed, onCancel }) => {
+const EditorView = ({ image, onProceed, onCancel }) => {
   const imgRef = useRef(null);
   const [crop, setCrop] = useState({
     x: 35,
@@ -100,9 +100,9 @@ const Editor = ({ image, onProceed, onCancel }) => {
     </EditorWrapper>
   );
 };
-Editor.propTypes = {
+EditorView.propTypes = {
   image: PropTypes.string,
   onProceed: PropTypes.func,
   onCancel: PropTypes.func
 };
-export default Editor;
+export default EditorView;
diff --git a/src/components/LoginView.js b/src/components/LoginView.js
@@ -2,41 +2,57 @@ import React from "react";
 import styled from "styled-components";
 import firebase from "../firebase";
 import "firebase/auth";
+import LoginBg from "../assets/login-bg.jpg";
 const LoginViewWrapper = styled.div`
   height: 100vh;
   width: 100vw;
-  background: #eee;
+  background: url(${LoginBg});
+  background-size: cover;
+  background-repeat: no-repeat;
+  background-position: center;
+  user-select: none;
+`;
+const Backdrop = styled.div`
+  height: 100%;
+  width: 100%;
   display: flex;
-  flex-direction: column;
   justify-content: center;
   align-items: center;
+  flex-direction: column;
+  background: rgba(0, 0, 0, 0.65);
 `;
-const LoginButton = styled.button`
-  height: 35px;
-  width: 200px;
-  background: #1ecbe1;
+const Title = styled.div`
+  font-family: "Montserrat", sans-serif;
   color: #fff;
-  cursor: pointer;
-  border: none;
-  margin-bottom: 5px;
-  border-radius: 20px;
-  &:hover {
-    box-shadow: 0 5px 10px rgba(154, 160, 185, 0.05),
-      0 15px 40px rgba(166, 173, 201, 0.2);
+  display: flex;
+  width: 100%;
+  justify-content: center;
+  align-items: center;
+  margin-bottom: 25px;
+`;
+const TitleName = styled.h3`
+  flex: 0 0 auto;
+  margin: 0 10px;
+  font-weight: 500;
+  font-size: 1.8rem;
+  @media screen and (max-width: 720px) {
+    font-size: 1rem;
   }
 `;
-const Input = styled.input`
-  height: 35px;
-  width: 30vw;
-  min-width: 200px;
+const IconHolder = styled.div`
+  justify-content: center;
+  align-items: center;
+  display: flex;
+`;
+const Icon = styled.div`
+  height: auto;
+  width: auto;
+`;
+const Line = styled.div`
+  height: 3px;
+  width: 20%;
   background: #fff;
-  border-radius: 20px;
-  border: none;
-  padding: 15px;
-  margin: 0 0 10px 0;
-  &:focus {
-    outline: none;
-  }
+  border-radius: 5px;
 `;
 const LoginView = () => {
   const handleLoginWithGoogle = async () => {
@@ -47,20 +63,31 @@ const LoginView = () => {
       alert(error.message);
     }
   };
-  const handleAnnonymousLogin = async () => {
-    await firebase.auth().signInAnonymously();
+  const handleLoginWithGithub = async () => {
+    try {
+      const provider = new firebase.auth.GithubAuthProvider();
+      await firebase.auth().signInWithPopup(provider);
+    } catch (error) {
+      alert(error.message);
+    }
   };
   return (
     <LoginViewWrapper>
-      {/* <Input placeholder="Enter your username" />
-      <Input placeholder="Enter your password" />
-      <LoginButton>Login</LoginButton> */}
-      <LoginButton onClick={handleLoginWithGoogle}>
-        Login With Google
-      </LoginButton>
-      {/* <LoginButton onClick={handleAnnonymousLogin}>
-        Login Annonymously
-      </LoginButton> */}
+      <Backdrop>
+        <Title>
+          <Line />
+          <TitleName>Login with</TitleName>
+          <Line />
+        </Title>
+        <IconHolder>
+          <Icon onClick={handleLoginWithGoogle}>
+            <ion-icon name="logo-google"></ion-icon>
+          </Icon>
+          <Icon onClick={handleLoginWithGithub}>
+            <ion-icon name="logo-github"></ion-icon>
+          </Icon>
+        </IconHolder>
+      </Backdrop>
     </LoginViewWrapper>
   );
 };

diff --git a/src/components/NotesView.js b/src/components/NotesView.js
@@ -3,12 +3,26 @@ import styled from "styled-components";
 import { Lightbox } from "react-modal-image";
 import firebase from "../firebase";
 import LoginContext from "../context";
+import { Delete } from "@material-ui/icons";
 const NotesContainer = styled.div`
   display: flex;
   flex-wrap: wrap;
   height: auto;
   user-select: none;
-  padding-top: 70px;
+  padding-top: 66px;
+`;
+const NoteControlContainer = styled.div`
+  height: auto;
+  width: 100%;
+  position: absolute;
+  top: 0;
+  opacity: 0;
+`;
+const IconWrapper = styled.div`
+  height: auto;
+  width: auto;
+  padding: 5px;
+  color: #1ecbe1;
 `;
 const NoteName = styled.p`
   color: #fff;
@@ -33,6 +47,9 @@ const Note = styled.div`
   &:hover ${NoteName} {
     opacity: 1;
   }
+  &:hover ${NoteControlContainer} {
+    opacity: 1;
+  }
 `;
 const NoteImage = styled.img`
   height: 200px;
@@ -86,12 +103,13 @@ const Info = styled.p`
 ////////////////// Firebase Refs /////////////////////
 const db = firebase.database();
 
-const NotesView = () => {
+const NotesView = ({ onCount }) => {
   const [showLightbox, setShowLighbox] = useState(false);
   const [lightboxData, setLightboxData] = useState(null);
   const [imageData, setImageData] = useState([]);
   const [isLoading, setIsLoading] = useState(true);
   const [noImageFound, setNoImageFound] = useState(false);
+  const [noteCount, setNoteCount] = useState(0);
   const { uid } = useContext(LoginContext);
   const handleShowLightbox = (data) => {
     setShowLighbox(!showLightbox);
@@ -100,13 +118,19 @@ const NotesView = () => {
   const hideLightBox = () => {
     setShowLighbox(!showLightbox);
   };
+  const handleDelete = ({ uid: imgId }) => {
+    const imageRef = db.ref(`images/${uid}/${imgId}`);
+    setImageData(data => data.filter(v => v.uid !== imgId));
+    imageRef.set(null);
+  };
   useEffect(() => {
     const imagesRef = db.ref(`images/${uid}`);
     setImageData([]);
     imagesRef.on("child_added", (snap) => {
       const val = snap.val();
       console.log(val);
       setImageData((data) => [...data, val]);
+      setNoteCount((count) => count + 1);
       setIsLoading(false);
     });
   }, [uid]);
@@ -121,6 +145,10 @@ const NotesView = () => {
       }
     });
   }, [uid, imageData]);
+  useEffect(() => {
+    onCount(noteCount);
+  }, [noteCount, onCount]);
+
   return (
     <NotesContainer>
       {noImageFound && <Info>No image found, please take one.</Info>}
@@ -139,9 +167,19 @@ const NotesView = () => {
       {imageData &&
         !isLoading &&
         imageData.map((d) => (
-          <Note onClick={() => handleShowLightbox(d)}>
-            <NoteImage src={d && d.image} />
-            <NoteName>{d && d.name}</NoteName>
+          <Note>
+            <NoteImage
+              src={d && d.image}
+              onClick={() => handleShowLightbox(d)}
+            />
+            <NoteName onClick={() => handleShowLightbox(d)}>
+              {d && d.name}
+            </NoteName>
+            <NoteControlContainer>
+              <IconWrapper onClick={() => handleDelete(d)}>
+                <Delete />
+              </IconWrapper>
+            </NoteControlContainer>
           </Note>
         ))}
       {showLightbox && lightboxData && (