├── LICENSE.md
├── README.md
├── disco-db-demo
├── .eslintrc.json
├── .gitignore
├── README.md
├── __mocks__
│ ├── fileMock.js
│ └── styleMock.js
├── __tests__
│ ├── __snapshots__
│ │ └── snapshot.js.snap
│ ├── e2e
│ │ └── example.spec.ts
│ ├── index.test.jsx
│ ├── server
│ │ └── authController.js
│ ├── snapshot.js
│ ├── supertest.js
│ └── sw-test.js
├── babel.config.js
├── components
│ ├── Navbar.js
│ ├── Notes.js
│ ├── Sidebar.js
│ ├── Weather.js
│ ├── WeatherDisplay.js
│ ├── layout.js
│ └── weatherAPI.js
├── jest-setup.js
├── jest-teardown.js
├── jest.config.js
├── next.config.js
├── package-lock.json
├── package.json
├── pages
│ ├── _app.js
│ ├── about.js
│ ├── api
│ │ └── hello.js
│ ├── auth
│ │ ├── login.js
│ │ └── signup.js
│ ├── index.js
│ └── user
│ │ ├── index.js
│ │ └── notes.js
├── public
│ ├── backgroundSync.js
│ ├── configMap.js
│ ├── discoGlobals.js
│ ├── discoSync.js
│ ├── discodb.config.js
│ ├── favicon.ico
│ ├── idbOperations.js
│ ├── swCacheSite-indexedDB.js
│ └── vercel.svg
├── server
│ ├── controllers
│ │ ├── authController.js
│ │ ├── userController.js
│ │ └── weatherController.js
│ ├── models
│ │ ├── dbConnection.js
│ │ ├── model.js
│ │ └── responseModel.js
│ ├── routers
│ │ ├── apiRouter.js
│ │ ├── authRouter.js
│ │ └── userRouter.js
│ └── server.js
└── styles
│ ├── Home.module.css
│ └── globals.css
├── discodb
├── LICENSE.md
├── README.md
├── discoFunctions
│ ├── backgroundSync.js
│ ├── discoGlobals.js
│ ├── discoSync.js
│ └── idbOperations.js
├── index.js
├── package-lock.json
└── package.json
├── package-lock.json
└── package.json
/LICENSE.md:
--------------------------------------------------------------------------------
1 | MIT License
2 |
3 | Copyright (c) 2022 OSLabs Beta
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 |
2 |
4 |
5 | # DiscoDB:
6 |
7 | ## Table of Contents
8 |
9 | - [Features](#features)
10 |
11 | - [Installation](#installation)
12 |
13 | - [How It works](#how-it-works)
14 |
15 | - [Demo Apps](#demo-app)
16 |
17 | - [Contributing](#contributing)
18 |
19 | - [Authors](#authors)
20 |
21 | - [License](#license)
22 |
23 | ## Features
24 |
25 | - A minimalist IndexedDB (IDB) wrapper and syncing solution for when your application disco(nnects) from the network.
26 | - Lightweight with zero dependencies.
27 | - Functionalities can be implemented via Service Workers with minimal modification to client side code
28 | - Supports syncing IDB with NoSQL databases (MongoDB) with a unique keypath
29 | - Promise based wrapper for IDB to perform local CRUD operations while offline to provide seamless UX
30 | - Sync to main database via action queue with automatic network availability detection.
31 |
32 |
34 | Offline Capabilities
38 |
39 |
40 | Dynamic Offline Data
44 |
45 |
46 | Custom Action Queue
50 |
5 |
8 |
11 |
21 |
24 | Get started by editing
25 |
26 |
29 | pages/index.js
30 |
31 |
32 |
80 |
81 |
119 |
120 |
49 | theme.zIndex.drawer + 1}}>
50 |
51 |
58 |
60 |
61 | Notes
62 |
63 |
64 |
76 | Logout
77 |
78 |
79 |
80 | );
81 | }
--------------------------------------------------------------------------------
/disco-db-demo/components/Notes.js:
--------------------------------------------------------------------------------
1 | import React, { useEffect, useState } from 'react';
2 | import Button from '@mui/material/Button';
3 | import TextField from '@mui/material/TextField';
4 | import Box from '@mui/material/Box';
5 | import Container from '@mui/material/Container';
6 | import CssBaseline from '@mui/material/CssBaseline';
7 |
8 | export default function NotesContainer(props) {
9 |
10 | const handleTitle = (event) => {
11 | props.setNewTitle(event.target.value);
12 | };
13 |
14 | const handleContent = (event) => {
15 | props.setNewContent(event.target.value);
16 | }
17 |
18 | const formField = [
19 |
20 |
37 | ]
38 |
39 | const handleSave = (event) => {
40 | event.preventDefault();
41 |
42 | const noteTitle = document.querySelector('[name="noteTitle"]');
43 | const noteContent = document.querySelector('[name="noteContent"]');
44 | const saveBody = {
45 | //grab id from query params
46 | _id: props.noteID,
47 | title: noteTitle.value,
48 | content: noteContent.value,
49 | updatedAt: Date.now(),
50 | }
51 |
52 | const testURL = '/api/hello';
53 | const devURL = '/user/notes';
54 | fetch(devURL, {
55 | method: 'PATCH',
56 | headers: {
57 | 'Content-Type': 'application/json',
58 | },
59 | body: JSON.stringify(saveBody),
60 | })
61 | .then(res => res.json())
62 | .then(data => {
63 | props.setRefresh(true);
64 | })
65 | .catch((err) => {
66 | console.log('Error in patching notes:', err)
67 | }
68 | )};
69 |
70 | const handleDelete = (event) => {
71 | event.preventDefault();
72 |
73 | const deleteBody = {
74 | //grab id from query params
75 | _id: props.noteID,
76 | username: localStorage.user,
77 | }
78 |
79 | const testURL = '/api/hello';
80 | const devURL = '/user/notes';
81 | fetch(devURL, {
82 | method: 'DELETE',
83 | headers: {
84 | 'Content-Type': 'application/json',
85 | },
86 | body: JSON.stringify(deleteBody),
87 | })
88 | .then(res => res.json())
89 | .then(data => {
90 | console.log('Success', data);
91 | //should remove entry from array
92 |
93 | props.setRefresh(true);
94 | })
95 | .catch((err) => {
96 | console.log('Error in deleting notes:', err)
97 | props.setRefresh(true);
98 | })
99 | };
100 |
101 | return (
102 |
103 |
105 |
106 | {formField}
107 |
108 |
109 | {/* Delete click should open modal for verification - implement after MVP */}
110 | Delete
111 |
112 |
113 | Save
114 |
115 |
116 |
117 |
118 |
119 | )
120 | }
121 |
--------------------------------------------------------------------------------
/disco-db-demo/components/Sidebar.js:
--------------------------------------------------------------------------------
1 | import React, { useState, useEffect } from 'react';
2 | import { useRouter } from 'next/router';
3 | import Box from '@mui/material/Box';
4 | import Drawer from '@mui/material/Drawer';
5 | import Toolbar from '@mui/material/Toolbar';
6 | import List from '@mui/material/List';
7 | import Divider from '@mui/material/Divider';
8 | import ListItem from '@mui/material/ListItem';
9 | import ListItemText from '@mui/material/ListItemText';
10 | import NotesIcon from '@mui/icons-material/Notes';
11 | import { Button } from '@mui/material';
12 |
13 | const drawerWidth = 240;
14 |
15 | export default function SideBar(props) {
16 | const router = useRouter();
17 | const [setSidebar, setNewSidebar] = useState([]);
18 | //Saves all notes as buttons for user on front-end for later access.
19 | const sidebarArray = [];
20 | //On initial render, invoke useEffect to grab all notes on props pertaining to user.
21 | //Populate the notes in an array and update state to reflect.
22 |
23 | useEffect(() => {
24 | props.noteArray.forEach((ele) => {
25 | //usernote has entire object per note for user
26 | const userNoteButton =
27 |
30 | //Convert each usernote into a button and push in array for useState.
31 | sidebarArray.push(userNoteButton);
32 | })
33 | setNewSidebar([sidebarArray])
34 | }, [props.noteArray])
35 |
36 | function newNoteHandler(){
37 | //POST request to user/notes with object of {username: username, createdAt: unix time}
38 | //Expect response of res.locals.data = {_id:id}
39 | //Poplate note array with a new icon with unique ID
40 | const newNoteInfo = {
41 | //Placeholder username, need to replace
42 | username: localStorage.getItem('user'),
43 | createdAt: Date.now()
44 | }
45 | const testURL = '/api/hello';
46 | const devURL = '/user/notes';
47 | fetch(devURL, {
48 | method: 'POST',
49 | headers: {
50 | 'Content-Type': 'application/json',
51 | },
52 | body: JSON.stringify(newNoteInfo),
53 | })
54 | .then(res => res.json())
55 | .then((data) => {
56 | const uniqId = data.data._id;
57 | const newNote =
58 |
59 |
62 | setNewSidebar([...setSidebar, newNote])
63 | props.setRefresh(true);
64 | })
65 | .catch((err) => {
66 | console.log('Error in creating new note:', err)
67 | });
68 | };
69 | //Click handler to obtain ID attribute and shallow route to the note.
70 | function currNoteHandler (e){
71 | const targetId = e.currentTarget.id
72 | router.push(`/user/notes?${targetId}`, undefined, {shallow: true});
73 | }
74 |
75 | return (
76 |
77 |
89 | New Note
92 |
94 | {setSidebar}
95 |
96 |
97 |
98 | );
99 | }
100 |
--------------------------------------------------------------------------------
/disco-db-demo/components/Weather.js:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 | import Grid from '@mui/material/Grid';
3 | import Card from '@mui/material/Card';
4 | import CardContent from '@mui/material/CardContent';
5 | import TextField from '@mui/material/TextField';
6 | import WeatherAPI from './weatherAPI';
7 | import Typography from '@mui/material/Typography';
8 |
9 |
10 | export default function Weather() {
11 | const [city, setCity] = React.useState(null);
12 |
13 | return (
14 |
15 |
16 |
17 |
18 | Weather Report
19 |
20 | setCity(event.target.value)}
24 | />
25 |
27 |
28 |
29 | )
30 | }
31 |
--------------------------------------------------------------------------------
/disco-db-demo/components/WeatherDisplay.js:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 | import Typography from '@mui/material/Typography';
3 | import CardContent from '@mui/material/CardContent';
4 | import Box from '@mui/material/Box';
5 |
6 | export default function WeatherDisplay(props) {
7 | const weatherReport = props.weatherReport;
8 | const weatherMain = weatherReport.weather[0].main;
9 | const weatherDescription = weatherReport.weather[0].description;
10 | const temp = weatherReport.main.temp;
11 | const humidity = weatherReport.main.humidity;
12 | const wind = weatherReport.wind.speed;
13 | const country = weatherReport.sys.country;
14 | const city = weatherReport.name;
15 |
16 | return (
17 |
18 |
19 |
20 |
21 |
22 | {city}, {country}
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 | Temp: {temp}
32 | °
33 | {"F"}
34 |
35 |
36 |
37 |
38 |
39 |
40 |
41 |
42 | {weatherDescription}
43 |
44 |
45 |
46 |
47 |
48 |
49 |
50 |
51 | Humidity: {humidity} %
52 |
53 |
54 |
55 |
56 | Wind: {wind} mph
57 |
58 |
59 |
60 |
61 |
62 | )
63 | }
--------------------------------------------------------------------------------
/disco-db-demo/components/layout.js:
--------------------------------------------------------------------------------
1 | import Navbar from './Navbar';
2 | import Sidebar from './Sidebar';
3 | import Box from '@mui/material/Box';
4 | import CssBaseline from '@mui/material/CssBaseline';
5 | import Toolbar from '@mui/material/Toolbar';
6 | import React, { useEffect, useState } from 'react';
7 |
8 | export default function Layout({ children }) {
9 | const [isLoading, setLoading] = useState(true);
10 | const userNoteArr = [];
11 | const [online, setOnline] = React.useState(true);
12 | const [noteArray, setNewNote] = useState([]);
13 | const [refresh, setRefresh] = useState(false);
14 | //passing online prop to all children
15 | const childrenWithProps = React.Children.map(children, child => {
16 | // Checking isValidElement is the safe way and avoids a typescript error too.
17 | if (React.isValidElement(child)) {
18 | return React.cloneElement(child, { online: online, data: noteArray, setNewNote: setNewNote, setRefresh: setRefresh });
19 | }
20 | return child;
21 | });
22 |
23 |
24 |
25 | useEffect(() => {
26 |
27 | const testURL = '/api/hello';
28 | const devURL = '/user/load';
29 | fetch(devURL)
30 | .then((res) => res.json())
31 | .then( (data) => {
32 | //Iterate thru retrived data and create a copy of each object into state array.
33 | data.data.forEach((ele) => {
34 | userNoteArr.push(ele);
35 | });
36 | setNewNote(userNoteArr);
37 |
38 | setLoading(false);
39 | setRefresh(false);
40 |
41 | })
42 | .catch((err) => console.log('Error in fetching data', err))
43 | }, [refresh, online]);
44 |
45 | if (isLoading) return null;
46 | else {
47 | return (
48 | <>
49 |
50 |
52 |
53 |
54 |
57 |
58 |
59 | )
60 | }
61 | }
62 |
--------------------------------------------------------------------------------
/disco-db-demo/components/weatherAPI.js:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 | import { useState, useEffect } from 'react';
3 | import LinearProgress from '@mui/material/LinearProgress';
4 | import WeatherDisplay from './WeatherDisplay';
5 |
6 | export default function WeatherAPI(props) {
7 | const [weatherReport, setWeatherReport] = useState(null);
8 | const [isLoading, setLoading] = useState(true);
9 | const [isError, setError] = useState(null);
10 |
11 | useEffect(() => {
12 | const devURL = '/api/weather';
13 |
14 | //sends POST request to api/weather in backend with body as city:
15 | fetch(devURL, {
16 | method: 'POST',
17 | headers: {
18 | 'Content-Type': 'application/json',
19 | },
20 | body: JSON.stringify( {city: props.city}),
21 | })
22 | .then( response => response.json())
23 | .then( data => {
24 | //check for statuscode - this is the object that we will get back from the backend
25 | if (data.statusCode !== 200) {
26 | setLoading(true);
27 | } else {
28 | setWeatherReport(data.data);
29 | setLoading(false);
30 | }
31 | })
32 | .catch( error => {
33 | console.log('Error: ', error);
34 | setError(error);
35 | setLoading(true);
36 | })
37 |
38 | }, [props.city])
39 |
40 | if(isLoading) {
41 | if(props.city) {
42 | return (
43 |
44 |
46 | )
47 | }
48 | else return null;
49 | } else {
50 | return(
51 | /__mocks__/styleMock.js',
14 |
15 | // Handle image imports
16 | // https://jestjs.io/docs/webpack#handling-static-assets
17 | '^.+\\.(jpg|jpeg|png|gif|webp|avif|svg)$': `/__mocks__/fileMock.js`,
18 |
19 | // Handle module aliases
20 | '^@/components/(.*)$': '/components/$1',
21 | },
22 | // Add more setup options before each test is run
23 | // setupFilesAfterEnv: ['/jest.setup.js'],
24 | testPathIgnorePatterns: ['/node_modules/', '/.next/'],
25 | testEnvironment: 'jsdom',
26 | transform: {
27 | // Use babel-jest to transpile tests with the next/babel preset
28 | // https://jestjs.io/docs/configuration#transform-objectstring-pathtotransformer--pathtotransformer-object
29 | '^.+\\.(js|jsx|ts|tsx)$': ['babel-jest', { presets: ['next/babel'] }],
30 | },
31 | transformIgnorePatterns: [
32 | '/node_modules/',
33 | '^.+\\.module\\.(css|sass|scss)$',
34 | ],
35 | }
--------------------------------------------------------------------------------
/disco-db-demo/next.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | reactStrictMode: true,
3 | }
4 |
--------------------------------------------------------------------------------
/disco-db-demo/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "disco-db-demo",
3 | "private": true,
4 | "scripts": {
5 | "dev": "nodemon server/server.js",
6 | "next-dev": "next dev",
7 | "build": "next build",
8 | "start": "next start",
9 | "lint": "next lint",
10 | "test": "jest --watch",
11 | "test:e2e": "playwright test"
12 | },
13 | "dependencies": {
14 | "@emotion/react": "^11.8.1",
15 | "@emotion/styled": "^11.8.1",
16 | "@fontsource/roboto": "^4.5.3",
17 | "@mui/icons-material": "^5.4.2",
18 | "@mui/material": "^5.4.2",
19 | "axios": "^0.26.0",
20 | "bcrypt": "^5.0.1",
21 | "cookie-parser": "^1.4.6",
22 | "dotenv": "^16.0.0",
23 | "express": "^4.17.2",
24 | "mongoose": "^6.2.2",
25 | "next": "12.0.10",
26 | "react": "17.0.2",
27 | "react-dom": "17.0.2",
28 | "regenerator-runtime": "^0.13.9"
29 | },
30 | "devDependencies": {
31 | "@babel/core": "^7.17.4",
32 | "@babel/preset-env": "^7.16.11",
33 | "@playwright/test": "^1.19.1",
34 | "@testing-library/jest-dom": "^5.16.2",
35 | "@testing-library/react": "^12.1.3",
36 | "babel-jest": "^27.5.1",
37 | "cross-fetch": "^3.1.5",
38 | "eslint": "8.9.0",
39 | "eslint-config-next": "12.0.10",
40 | "identity-obj-proxy": "^3.0.0",
41 | "jest": "^27.5.1",
42 | "nodemon": "^2.0.15",
43 | "service-worker-mock": "^2.0.5",
44 | "supertest": "^6.2.2"
45 | }
46 | }
47 |
--------------------------------------------------------------------------------
/disco-db-demo/pages/_app.js:
--------------------------------------------------------------------------------
1 | import '../styles/globals.css'
2 | import '@fontsource/roboto/300.css';
3 | import '@fontsource/roboto/400.css';
4 | import '@fontsource/roboto/500.css';
5 | import '@fontsource/roboto/700.css';
6 | import { useEffect } from 'react';
7 |
8 | function MyApp({ Component, pageProps }) {
9 | // // // service worker
10 | useEffect(() => {
11 | if("serviceWorker" in navigator && 'SyncManager' in window) {
12 | window.addEventListener("load", function () {
13 | navigator.serviceWorker.register("../swCacheSite-indexedDB.js", {type: 'module', scope: '/'}).then(
14 | function (registration) {
15 | console.log("Service Worker registration successful with scope: ", registration.scope);
16 | },
17 | function (err) {
18 | console.log("Service Worker registration failed: ", err);
19 | }
20 | );
21 | // navigator.serviceWorker.ready.then(function(swRegistration) {
22 | // console.log('successfully requested a one time sync')
23 | // return swRegistration.sync.register('myFirstSync');
24 | // });
25 | });
26 | }
27 | }, [])
28 |
29 |
30 |
31 | const getLayout = Component.getLayout || ((page) => page)
32 | return getLayout(
4 |
About Page
5 | Hello
6 |
7 | )
8 | }
--------------------------------------------------------------------------------
/disco-db-demo/pages/api/hello.js:
--------------------------------------------------------------------------------
1 | // Next.js API route support: https://nextjs.org/docs/api-routes/introduction
2 |
3 | export default function handler(req, res) {
4 | //const body = req.body;
5 | //const body = {actionSuccess: true};
6 | const body = [{_id: 'foobar', title: 'foo', content: 'bar'}, {_id: '123', title: 'foobar', content: 'I love pizza'}];
7 | res.status(200).json({ body })
8 | }
9 |
--------------------------------------------------------------------------------
/disco-db-demo/pages/auth/login.js:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 | import Avatar from '@mui/material/Avatar';
3 | import Button from '@mui/material/Button';
4 | import CssBaseline from '@mui/material/CssBaseline';
5 | import TextField from '@mui/material/TextField';
6 | import FormControlLabel from '@mui/material/FormControlLabel';
7 | import Checkbox from '@mui/material/Checkbox';
8 | import { default as MUILink } from '@mui/material/Link';
9 | import Link from 'next/link';
10 | import Grid from '@mui/material/Grid';
11 | import Box from '@mui/material/Box';
12 | import LockOutlinedIcon from '@mui/icons-material/LockOutlined';
13 | import Typography from '@mui/material/Typography';
14 | import Container from '@mui/material/Container';
15 | import { createTheme, ThemeProvider } from '@mui/material/styles';
16 | import { useRouter } from 'next/router';
17 | import Alert from '@mui/material/Alert';
18 |
19 | function Copyright(props) {
20 | return (
21 |
22 | {'Copyright © '}
23 |
24 | DiscoDB
25 | {' '}
26 | {new Date().getFullYear()}
27 | {'.'}
28 |
29 | );
30 | }
31 |
32 | const theme = createTheme();
33 |
34 | export default function SignIn() {
35 | const router = useRouter();
36 | const [auth, setAuth] = React.useState(null);
37 |
38 | const handleSubmit = (event) => {
39 | event.preventDefault();
40 | const data = new FormData(event.currentTarget);
41 | // eslint-disable-next-line no-console
42 |
43 | const loginBody = {
44 | username: data.get('username'),
45 | password: data.get('password'),
46 | }
47 |
48 | const testURL = '/api/hello';
49 | const devURL = '/auth/login';
50 | fetch(devURL, {
51 | method: 'POST',
52 | headers: {
53 | 'Content-Type': 'application/json',
54 | },
55 | body: JSON.stringify(loginBody),
56 | })
57 | .then(res => res.json())
58 | .then(data => {
59 | console.log('Success', data);
60 | //get back response from backend to verify user authentication
61 | //if success, redirect user to user endpoint
62 | if (!data.actionSuccess) {
63 | setAuth(false);
64 | } else {
65 | setAuth(true);
66 | //temp username to add to localStorage
67 | localStorage.setItem('user', loginBody.username);
68 | router.push('/user');
69 | }
70 |
71 | })
72 | .catch(err => console.log('Error', err))
73 | };
74 |
75 | return (
76 |
77 |
78 |
87 |
88 |
90 |
91 | Sign in
92 |
93 |
94 |
116 | Please enter a valid username and password
117 |
118 | }
119 |
129 | Sign In
130 |
131 |
132 |
133 |
135 | Forgot password?
136 |
137 |
138 |
139 |
140 |
142 | {"Don't have an account? Sign Up"}
143 |
144 |
145 |
146 |
147 |
148 |
149 |
151 |
152 | );
153 | }
154 |
--------------------------------------------------------------------------------
/disco-db-demo/pages/auth/signup.js:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 | import Avatar from '@mui/material/Avatar';
3 | import Button from '@mui/material/Button';
4 | import CssBaseline from '@mui/material/CssBaseline';
5 | import TextField from '@mui/material/TextField';
6 | import FormControlLabel from '@mui/material/FormControlLabel';
7 | import Checkbox from '@mui/material/Checkbox';
8 | import {default as MUILink} from '@mui/material/Link';
9 | import Link from 'next/link';
10 | import Grid from '@mui/material/Grid';
11 | import Box from '@mui/material/Box';
12 | import LockOutlinedIcon from '@mui/icons-material/LockOutlined';
13 | import Typography from '@mui/material/Typography';
14 | import Container from '@mui/material/Container';
15 | import { createTheme, ThemeProvider } from '@mui/material/styles';
16 | import { useRouter } from 'next/router';
17 | import Alert from '@mui/material/Alert';
18 |
19 | function Copyright(props) {
20 | return (
21 |
22 | {'Copyright © '}
23 |
24 | DiscoDB
25 | {' '}
26 | {new Date().getFullYear()}
27 | {'.'}
28 |
29 | );
30 | }
31 |
32 | const theme = createTheme();
33 |
34 | export default function SignUp() {
35 | const [auth, setAuth] = React.useState(null);
36 | const router = useRouter();
37 |
38 | const handleSubmit = (event) => {
39 | event.preventDefault();
40 | const data = new FormData(event.currentTarget);
41 |
42 | const signupBody = {
43 | username: data.get('username'),
44 | password: data.get('password'),
45 | firstName: data.get('firstName'),
46 | email: data.get('email')
47 | }
48 |
49 | const testURL = '/api/hello';
50 | const devURL = '/auth/signup';
51 | fetch(devURL, {
52 | method: 'POST',
53 | headers: {
54 | 'Content-Type': 'application/json',
55 | },
56 | body: JSON.stringify(signupBody),
57 | })
58 | .then(res => res.json())
59 | .then(data => {
60 | console.log('Success', data);
61 | //have backend send back response that user successfully created account
62 | //if success, redirect user to login page, else have them try again
63 | if (!data.actionSuccess) {
64 | setAuth(false);
65 | } else {
66 | setAuth(true);
67 | //temp username to add to localStorage
68 | localStorage.setItem('user', signupBody.username);
69 | router.push('/user');
70 | }
71 | })
72 | .catch(err => console.log('Error', err))
73 | };
74 |
75 | return (
76 |
77 |
78 |
87 |
88 |
90 |
91 | Sign up
92 |
93 |
94 |
95 |
96 |
105 |
106 |
114 |
115 |
124 |
125 |
135 |
136 | {auth === false &&
137 |
138 | Username already exists. Please try again
139 |
140 | }
141 |
147 | Sign Up
148 |
149 |
150 |
151 |
153 | Already have an account? Sign in
154 |
155 |
156 |
157 |
158 |
159 |
160 |
162 |
163 | );
164 | }
165 |
--------------------------------------------------------------------------------
/disco-db-demo/pages/index.js:
--------------------------------------------------------------------------------
1 | import Head from 'next/head'
2 | import Image from 'next/image'
3 | import styles from '../styles/Home.module.css'
4 | import Link from 'next/link'
5 |
6 | export default function Home() {
7 | return (
8 |
9 |
10 |
Create Next App
11 |
12 |
13 |
14 |
15 | About Page
17 |
18 |
19 |
20 |
21 | Welcome to Next.js!
22 |
23 |
24 |
25 | Get started by editing{' '}
26 | pages/index.js
27 |
28 |
29 |
58 |
59 |
60 |
72 |
12 |
13 | Hello User
14 |
15 |
17 | )
18 | }
19 |
20 | User.getLayout = function getLayout(user) {
21 | return (
22 |
23 | {user}
24 |
25 | )
26 | }
27 |
--------------------------------------------------------------------------------
/disco-db-demo/pages/user/notes.js:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 | import Box from '@mui/material/Box';
3 | import Typography from '@mui/material/Typography';
4 | import Layout from '../../components/layout';
5 | import NotesContainer from '../../components/Notes';
6 | import { useRouter } from 'next/router';
7 |
8 | export default function Notes(props) {
9 | //grab query paramaters from note
10 | const [setContent, setNewContent] = React.useState('');
11 | const [setTitle, setNewTitle] = React.useState('');
12 |
13 | const router = useRouter();
14 | let noteID = Object.keys(router.query)[0];
15 |
16 | React.useEffect(() => {
17 | for (let i = 0; i < props.data.length; i++) {
18 | if (props.data[i]._id === noteID) {
19 | setNewTitle(props.data[i].title);
20 | setNewContent(props.data[i].content);
21 | }
22 | }
23 | // setNewContent(noteContent)
24 | // setNewTitle(noteTitle)
25 | }, [props.data, noteID]);
26 |
27 | return (
28 |
29 |
30 | User Notes
31 |
32 |
33 |
34 | )
35 | }
36 |
37 |
38 | Notes.getLayout = function getLayout(notes) {
39 | return (
40 |
41 | {notes}
42 |
43 | )
44 | }
--------------------------------------------------------------------------------
/disco-db-demo/public/backgroundSync.js:
--------------------------------------------------------------------------------
1 | import { idbPromise, dbGlobals } from './discoGlobals.js';
2 |
3 | /**
4 | * @property {Function} accessObjectStore Access object store in IDB database and start a transaction
5 | * @param {String} storeName Object store to be accessed for transaction
6 | * @param {String} method Method for transaction, "readwrite, readonly"
7 | * @return {Object} Accessed Object store Object
8 | */
9 | function accessObjectStore (storeName, method) {
10 | return idbPromise.DB.transaction([storeName], method).objectStore(storeName)
11 | };
12 | /**
13 | * @property {Function} discoAddToQueue Adds Object into Object store
14 | * @param {Object} dataObject Objected to be added to Object store
15 | *
16 | */
17 | function discoAddToQueue (dataObject) {
18 | //Open a transaction to object store 'Queue'
19 | const store = accessObjectStore(dbGlobals.syncQueue, 'readwrite')
20 | //Add data to object store
21 | store.add(dataObject)
22 | };
23 | /**
24 | * @property {Function} discoRegisterSync Request a "Sync" event to reattempt request when network is online.
25 | *
26 | */
27 | async function discoRegisterSync() {
28 | try {
29 | const register = await registration.sync.register('failed_requests');
30 | return register;
31 | } catch(error) {
32 | console.log('Error:' , error);
33 | return error;
34 | }
35 | };
36 |
37 | /**
38 | * @property {Function} discoSyncToServer Accesses the Queue Object Store and re-sends all requests saved in application/json.
39 | *
40 | */
41 | function discoSyncToServer() {
42 | const store = accessObjectStore(dbGlobals.syncQueue, 'readwrite');
43 | const request = store.getAll();
44 |
45 | request.onsuccess = function (event) {
46 | const httpQueue = event.target.result;
47 | //Comes back as an array of objects
48 | //Iterate Queue store and initialize Fetch request
49 | httpQueue.forEach((data) => {
50 | const { url, method, body } = data
51 | const headers = {'Content-Type': 'application/json'};
52 | fetch(url, {
53 | method: method,
54 | headers: headers,
55 | body: JSON.stringify(body)
56 | })
57 | .then((res) => res.json())
58 | .then((res) => {
59 | //Previous transaction was closed due to getAll()
60 | //Reopen object store and delete the corresponding object on successful HTTP request
61 | const newStore = accessObjectStore(dbGlobals.syncQueue, 'readwrite');
62 | newStore.delete(data.id);
63 | })
64 | .catch((error) => {
65 | console.error('Failed to sync data to server:', error);
66 | throw error
67 | })
68 | });
69 | }
70 | request.onerror = (err) => {
71 | console.log('Attempt to sync queue failed:', err);
72 | }
73 | };
74 |
75 | export { discoAddToQueue, discoRegisterSync, discoSyncToServer };
--------------------------------------------------------------------------------
/disco-db-demo/public/configMap.js:
--------------------------------------------------------------------------------
1 | // const fs = require('fs');
2 | // const path = require('path');
3 | // import * as fs from 'fs';
4 | // import path from 'path';
5 |
6 | import { dbGlobals } from './discodb.config.js'
7 |
8 | // function find(targetPath) {
9 | // return findStartingWith(path.dirname(require.main.filename), targetPath);
10 | // }
11 |
12 | // function findStartingWith(start, target) {
13 | // const file = path.join(start, target);
14 | // try {
15 | // data = fs.readFileSync(file, 'utf-8');
16 | // return JSON.parse(data);
17 | // } catch (err) {
18 |
19 | // if (path.dirname(start) !== start) {
20 | // return findStartingWith(path.dirname(start), target);
21 | // }
22 | // }
23 | // }
24 |
25 | // const dbGlobals = JSON.parse(userConfig);
26 | console.log(dbGlobals)
27 |
28 | // const dbGlobals = find('discodb.config.json');
29 | // module.exports = dbGlobals;
30 | export default dbGlobals;
--------------------------------------------------------------------------------
/disco-db-demo/public/discoGlobals.js:
--------------------------------------------------------------------------------
1 | // const configVariables = require('./configMap.js');
2 | // import dbGlobals from './configMap.js';
3 | import { dbGlobals } from './discodb.config.js'
4 | const idbPromise = {
5 | DB: null
6 | }
7 |
8 | const onlineUrlArr = [];
9 | dbGlobals.onlineRoutes.forEach(el => {
10 | onlineUrlArr.push(el.url)
11 | });
12 |
13 | const offlineUrlArr = [];
14 | dbGlobals.offlineRoutes.forEach(el => {
15 | offlineUrlArr.push(el.url);
16 | });
17 |
18 | // module.exports = { idbPromise, onlineUrlStoreMap, offlineUrlStoreMap };
19 |
20 | // module.exports = {
21 | // DB: null,
22 |
23 | // }
24 |
25 | export { dbGlobals, idbPromise, onlineUrlArr, offlineUrlArr }
--------------------------------------------------------------------------------
/disco-db-demo/public/discoSync.js:
--------------------------------------------------------------------------------
1 | import { discoConnect, discoGetAll, discoDeleteOne, discoUpdateOne, discoAdd, discoDeleteAll } from './idbOperations.js';
2 | import { discoAddToQueue, discoRegisterSync } from './backgroundSync.js';
3 | import { idbPromise , dbGlobals } from './discoGlobals.js';
4 |
5 | /**
6 | * @property {Function} discoSyncOffline Executes different IndexedDB logic based on the value of passed in method
7 | * @param {String} method This is the method property of the intercepted fetch request
8 | * @param {String} url This is the url property of the intercepted fetch request
9 | * @param {String} store This is the store property associated with the url provided in the config file
10 | * @param {Request} eventRequest This is the cloned version of the intercepted fetch request
11 | *
12 | */
13 | function discoSyncOffline(method, url, clonedRequest) {
14 | // assuming store can be managed by config file and imported into indexedDB.js
15 | // config.store = store
16 | switch(method) {
17 | case 'GET':
18 | if (idbPromise.DB) {
19 | // if store
20 | return discoGetAll().then((data) => {
21 | //REVISIT THIS, make sure to change data back to data!!
22 | const responseBody = { data };
23 | const IDBData = new Response(JSON.stringify(responseBody));
24 | return IDBData;
25 | })
26 | } else {
27 | return discoConnect( () => {
28 | discoGetAll().then((data) => {
29 | const responseBody = {data: data};
30 | const IDBData = new Response(JSON.stringify(responseBody));
31 | return IDBData;
32 | });
33 | })
34 | }
35 | case 'DELETE':
36 | return clonedRequest.json()
37 | .then((data) => {
38 | const reqBody = {
39 | url: url,
40 | method: method,
41 | body: data
42 | };
43 | discoRegisterSync();
44 | discoAddToQueue(reqBody);
45 | const keypath = dbGlobals.keypath;
46 | const id = data[keypath];
47 | //call function to DELETE note
48 | discoDeleteOne(id);
49 | const deleteResponse = new Response(JSON.stringify({}));
50 | return deleteResponse;
51 | })
52 | .catch( err => {
53 | console.log('this is in the dbDeleteOne catch block: ', err);
54 | })
55 | case 'PATCH':
56 | return clonedRequest.json()
57 | .then((data) => {
58 | const reqBody = {
59 | url: url,
60 | method: method,
61 | body: data
62 | };
63 | discoRegisterSync();
64 | discoAddToQueue(reqBody);
65 | //call function to UPDATE note
66 | const keypath = dbGlobals.keypath;
67 | const id = data[keypath];
68 | discoUpdateOne(data);
69 |
70 | // returns empty object to trigger rerender in our app
71 | // assumes developer does not want to do anything with the response
72 | const patchResponse = new Response(JSON.stringify({}));
73 | return patchResponse;
74 | })
75 | default:
76 | console.log('this url is not configured');
77 | return caches.match(clonedRequest)
78 | .then(response => {
79 | return response
80 | })
81 | }
82 | }
83 |
84 | /**
85 | * @property {Function} discoSyncOnline Establishes connection to indexedDB & create Object Stores as specified in Configuration.
86 | * @param {String} method This is the method property of the intercepted fetch request
87 | * @param {String} url This is the url property of the intercepted fetch request
88 | * @param {String} store This is the store property associated with the url provided in the config file
89 | * @param {Request} clonedResponse This is the cloned version of the intercepted fetch response
90 | *
91 | */
92 | function discoSyncOnline(method, url, clonedResponse) {
93 | switch(method) {
94 | case 'GET':
95 | const resCloneDB = clonedResponse;
96 | resCloneDB.json().then(data => {
97 | //delete existing indexedDB data
98 | if (idbPromise.DB) {
99 | discoDeleteAll();
100 | } else {
101 | discoConnect( () => {
102 | discoDeleteAll();
103 | })
104 | }
105 | //populate indexedDB here
106 | data.data.forEach( note => {
107 | if (idbPromise.DB) {
108 | discoAdd(note);
109 | } else {
110 | discoConnect( () => {
111 | discoAdd(note);
112 | })
113 | }
114 | })
115 | });
116 | break;
117 | default:
118 | console.log('this method is not configured');
119 | break;
120 | }
121 | }
122 |
123 |
124 | export { discoSyncOffline, discoSyncOnline };
--------------------------------------------------------------------------------
/disco-db-demo/public/discodb.config.js:
--------------------------------------------------------------------------------
1 | const dbGlobals =
2 | {
3 | "version": 9,
4 | "databaseName": "notesDB",
5 | "storeName": "notesStore",
6 | "syncQueue": "Queue",
7 | "keypath": "_id",
8 | "onlineRoutes": [
9 | {
10 | "url": "http://localhost:3000/user/load",
11 | }
12 | ],
13 | "offlineRoutes": [
14 | {
15 | "url": "http://localhost:3000/user/load",
16 | },
17 | {
18 | "url": "http://localhost:3000/user/notes",
19 | }
20 | ]
21 | }
22 |
23 |
24 | export { dbGlobals };
--------------------------------------------------------------------------------
/disco-db-demo/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/oslabs-beta/DiscoDB/b8553c013c84aaf13f2aa7226446770921386d3c/disco-db-demo/public/favicon.ico
--------------------------------------------------------------------------------
/disco-db-demo/public/idbOperations.js:
--------------------------------------------------------------------------------
1 | import { idbPromise, dbGlobals } from './discoGlobals.js';
2 |
3 | /**
4 | * @property {Function} discoConnect Establishes connection to indexedDB & create Object Stores as specified in Configuration.
5 | * @param {Function} callback
6 | *
7 | */
8 | function discoConnect(callback) {
9 | return new Promise((resolve, reject) => {
10 | let req = indexedDB.open(dbGlobals.databaseName, dbGlobals.version)
11 | req.onerror = (err) => {
12 | //could not open db
13 | console.log('Error: ', err);
14 | idbPromise.DB = null;
15 | reject(err);
16 | };
17 | req.onupgradeneeded = (event) => {
18 | let db = event.target.result;
19 | // Database Version Upgraded
20 | if (!db.objectStoreNames.contains(dbGlobals.storeName)) {
21 | db.createObjectStore(dbGlobals.storeName, {
22 | keyPath: dbGlobals.keypath,
23 | });
24 | }
25 | if (!db.objectStoreNames.contains(dbGlobals.syncQueue)) {
26 | //Creating Object Store for Sync Queue
27 | db.createObjectStore(dbGlobals.syncQueue, {
28 | keyPath: 'id', autoIncrement: true,
29 | })
30 | }
31 | };
32 | req.onsuccess = (event) => {
33 | idbPromise.DB = event.target.result;
34 | //Database connected
35 | if (callback) {
36 | callback();
37 | }
38 | resolve(idbPromise.DB);
39 | };
40 | })
41 | };
42 |
43 | /**
44 | * @property {Function} discoAdd Adds an object in to the configured Object Store.
45 | * @param {Object} dataObject Object data to be stored.
46 | *
47 | */
48 | function discoAdd(dataObject) {
49 | // return new Promise ( (resolve, reject) => {
50 | if (dataObject && idbPromise.DB) {
51 | let tx = idbPromise.DB.transaction(dbGlobals.storeName, 'readwrite');
52 |
53 | tx.onerror = (err) => {
54 | console.log('Error:', err);
55 | // reject(err);
56 | };
57 | tx.oncomplete = (event) => {
58 | //Data added successfully
59 | };
60 |
61 | let store = tx.objectStore(dbGlobals.storeName);
62 | let req = store.put(dataObject);
63 |
64 | req.onsuccess = (event) => {
65 | // const result = event.target.result;
66 | // resolve(result);
67 | };
68 | } else {
69 | console.log('No data provided.');
70 | }
71 | // })
72 | };
73 |
74 | /**
75 | * @property {Function} discoDeleteAll Deletes all properties of the configured Object Store.
76 | *
77 | */
78 | function discoDeleteAll() {
79 | return new Promise( (resolve, reject) => {
80 | if (idbPromise.DB) {
81 | let tx = idbPromise.DB.transaction(dbGlobals.storeName, 'readwrite');
82 | tx.onerror = (err) => {
83 | console.log('Error:', err);
84 | reject(err);
85 | };
86 | tx.oncomplete = (event) => {
87 | // data deleted successfully
88 | };
89 | let store = tx.objectStore(dbGlobals.storeName);
90 | const req = store.clear();
91 | req.onsuccess = (event) => {
92 | const result = event.target.result;
93 | resolve(result);
94 | };
95 | } else {
96 | console.log('DB is not connected');
97 | }
98 | })
99 | };
100 |
101 | /**
102 | * @property {Function} discoGetAll Gets all properties saved on the configured Object Store.
103 | * @return {Array} array of objects containing all properties in the Object Store.
104 | */
105 | function discoGetAll() {
106 | return new Promise((resolve, reject) => {
107 | if (idbPromise.DB) {
108 | let tx = idbPromise.DB.transaction(dbGlobals.storeName, 'readonly');
109 | tx.onerror = (err) => {
110 | console.log('Error: ', err);
111 | reject(err);
112 | };
113 | tx.oncomplete = (event) => {
114 | //Transaction successful, all objects retrieved.
115 | };
116 | let store = tx.objectStore(dbGlobals.storeName);
117 | const req = store.getAll();
118 | req.onsuccess = (event) => {
119 | const result = event.target.result;
120 | resolve(result);
121 | };
122 | } else {
123 | console.log('DB is not connected');
124 | }
125 | })
126 | }
127 |
128 | /**
129 | * @property {Function} discoDeleteOne Deletes one property on the configured Object Store.
130 | * @param {String} id The id of the object on the configured Object Store *
131 | */
132 | function discoDeleteOne(id) {
133 | return new Promise( (resolve, reject) => {
134 | if (idbPromise.DB) {
135 | let tx = idbPromise.DB.transaction(dbGlobals.storeName, 'readwrite');
136 | tx.onerror = (err) => {
137 | console.log('Error: ', err);
138 | reject(err);
139 | };
140 | tx.oncomplete = (event) => {
141 | //Transaction successful
142 | };
143 | let store = tx.objectStore(dbGlobals.storeName);
144 | const req = store.delete(id);
145 | req.onsuccess = (event) => {
146 | const result = event.target.result;
147 | resolve(result);
148 | };
149 | } else {
150 | console.log('DB is not connected');
151 | }
152 | })
153 | }
154 |
155 | /**
156 | * @property {Function} discoUpdateOne Updates one property on the configured Object Store.
157 | * @param {Object} dataObject The req body object on the configured Object Store
158 | *
159 | */
160 | function discoUpdateOne(dataObject) {
161 | return new Promise ( (resolve, reject) => {
162 | if (idbPromise.DB) {
163 | let tx = idbPromise.DB.transaction(dbGlobals.storeName, 'readwrite');
164 | tx.onerror = (err) => {
165 | console.log('Error: ', err);
166 | reject(err);
167 | };
168 | tx.oncomplete = (event) => {
169 | //Transaction successful
170 | };
171 | let store = tx.objectStore(dbGlobals.storeName);
172 | const req = store.put(dataObject);
173 | req.onsuccess = (event) => {
174 | const result = event.target.result;
175 | resolve(result);
176 | };
177 | } else {
178 | console.log('DB is not connected');
179 | }
180 | })
181 | };
182 |
183 | export { discoConnect, discoAdd, discoDeleteAll, discoGetAll, discoDeleteOne, discoUpdateOne };
--------------------------------------------------------------------------------
/disco-db-demo/public/swCacheSite-indexedDB.js:
--------------------------------------------------------------------------------
1 | import { discoConnect } from './idbOperations.js';
2 | import { discoSyncToServer } from './backgroundSync.js';
3 | import { discoSyncOffline, discoSyncOnline } from './discoSync.js';
4 | import { onlineUrlArr, offlineUrlArr, dbGlobals, idbPromise } from './discoGlobals.js';
5 |
6 |
7 | const cacheName = 'my-site-cache-v3';
8 |
9 | self.addEventListener('install', event => {
10 | console.log('Attempting to install service worker and cache static assets');
11 | self.skipWaiting();
12 | console.log('opening DB since sw is activated')
13 | discoConnect();
14 | });
15 |
16 | self.addEventListener('activate', event => {
17 | console.log('Activating new service worker...');
18 | const cacheAllowlist = [cacheName];
19 | //Remove unwanted caches
20 | event.waitUntil(
21 | caches.keys().then(cacheNames => {
22 | return Promise.all(
23 | cacheNames.map(cacheName => {
24 | if (cacheAllowlist.indexOf(cacheName) === -1) {
25 | return caches.delete(cacheName);
26 | }
27 | })
28 | )
29 | })
30 | );
31 | //Force SW to become available to all pages
32 | event.waitUntil(self.clients.claim());
33 | });
34 |
35 | self.addEventListener('fetch', event => {
36 | //clone the request so that the body of the request will still be available
37 | const reqClone = event.request.clone();
38 | const { url, method } = event.request;
39 | event.respondWith(
40 | fetch(event.request)
41 | .then( (response) => {
42 | // Make clone of response
43 | const resCloneCache = response.clone();
44 | const resCloneDB = response.clone()
45 | //Open cache
46 | caches
47 | .open(cacheName)
48 | .then(cache => {
49 | //Add response to cache
50 | cache.put(event.request, resCloneCache);
51 | })
52 | //invoke online reducer to populate indexedDB
53 | if (onlineUrlArr.includes(url)){
54 | discoSyncOnline(method, url, resCloneDB);
55 | }
56 | return response;
57 | })
58 | // if network is unavailable
59 | .catch((err) => {
60 | //invoke offline reducer to perform RUD functions to indexedDB
61 | if (offlineUrlArr.includes(url)){
62 | return discoSyncOffline(method, url, reqClone);
63 | }
64 | return caches.match(reqClone)
65 | .then(response => {
66 | return response
67 | })
68 | })
69 | )
70 | });
71 |
72 | //When back online, listener will be invoked.
73 | //WaitUntil: waits for service workers until promise resolves
74 | //Then invoke syncData
75 | self.addEventListener('sync', (event) => {
76 | if(event.tag === 'failed_requests'){
77 | event.waitUntil(discoSyncToServer())
78 | };
79 | });
80 |
--------------------------------------------------------------------------------
/disco-db-demo/public/vercel.svg:
--------------------------------------------------------------------------------
1 |
3 |
--------------------------------------------------------------------------------
/disco-db-demo/server/controllers/authController.js:
--------------------------------------------------------------------------------
1 | // const mongoose = require('mongoose');
2 | const bcrypt = require('bcrypt');
3 | //const responseModel = require('../models/responseModel');
4 | const { createResponse } = require('../models/responseModel');
5 | // require User object from db schema
6 | const { Users } = require('../models/model');
7 |
8 | // function to encrypt account password
9 | function encrypt(password) {
10 | const workFactor = 10;
11 | return bcrypt.hash(password, workFactor);
12 | }
13 |
14 | // auth middleware functions
15 | const authController = {
16 |
17 | signup(req, res, next) {
18 | console.log('this is in the authcontroller/signup: ', req.body)
19 | // encrypt password
20 | encrypt(req.body.password)
21 | .then(hash => {
22 | Users.create({
23 | username: req.body.username,
24 | password: hash,
25 | first_name: req.body.firstName, // double check firstName on req.body
26 | email: req.body.email
27 | },
28 | (err, result) => {
29 | if (err) {
30 | return next(err);
31 | }
32 | return next();
33 | })
34 | })
35 | },
36 |
37 |
38 | login(req, res, next) {
39 | console.log('this is in the authcontroller/login', req.body);
40 | const { username, password } = req.body;
41 |
42 | Users.findOne({ username: username },
43 | (err, result) => {
44 |
45 | //if user not found, there is no error but result is set to null
46 | //causing error when you try to destructure password from result
47 | if (result === null) {
48 | return res.status(406).json(createResponse(false, 406, 'Wrong username and/or password'));
49 | }
50 | if(err) {
51 | return next(err);
52 | }
53 | // destructure hashedPassword and compare to user's inputed password
54 | const { password: hashedPassword } = result;
55 | bcrypt.compare(password, hashedPassword, (err, bcryptRes) => {
56 | if (bcryptRes) {
57 | console.log('passwords match!');
58 | return next();
59 | } else {
60 | console.log('passwords do not match');
61 | return res.status(406).json(createResponse(false, 406, 'Wrong username and/or password'));
62 | }
63 | })
64 | });
65 | },
66 |
67 | generateCookie(req, res, next) {
68 |
69 | const { username } = req.body;
70 | res.cookie('username', username, { httpOnly: true });
71 | return next();
72 | },
73 |
74 | logout(req, res, next) {
75 | res.clearCookie('username');
76 | return next();
77 | }
78 | };
79 |
80 |
81 |
82 |
83 | // logout
84 |
85 | module.exports = authController;
--------------------------------------------------------------------------------
/disco-db-demo/server/controllers/userController.js:
--------------------------------------------------------------------------------
1 | const { Notes } = require('../models/model');
2 | const userController = {};
3 |
4 | // get all user notes from Notes collection
5 | userController.getUserNotes = (req, res, next) => {
6 | const {username} = req.cookies;
7 | // const {username} = req.body;
8 | console.log('Retrieving all notes from username: ', username)
9 | Notes.find({username: username})
10 | .then(data => {
11 | console.log(data);
12 | res.locals.data = data;
13 | return next();
14 | })
15 | .catch(err => {
16 | return next(err);
17 | })
18 | }
19 |
20 | // create a new notes entry in Notes collection
21 | userController.createAndGetNewNote = (req, res, next) => {
22 | const {username, createdAt} = req.body;
23 | console.log('Creating a new note for username: ', username)
24 | Notes.create({username: [username], title: '', content: '', updatedAt: createdAt, createdAt: createdAt})
25 | .then(data => {
26 | console.log(data);
27 | res.locals.data = data;
28 | return next();
29 | })
30 | .catch(err => {
31 | return next(err);
32 | })
33 | }
34 |
35 | // modifies an entry in Notes collection
36 | userController.modifyAndGetNote = (req, res, next) => {
37 | const {_id, title, content, updatedAt} = req.body;
38 | console.log('Modifying note _id: ', _id)
39 | Notes.findByIdAndUpdate(_id, {title: title, content: content, updatedAt: updatedAt}, {new: true})
40 | .then(data => {
41 | console.log(data);
42 | res.locals.data = data;
43 | return next();
44 | })
45 | .catch(err => {
46 | return next(err);
47 | })
48 | }
49 |
50 | // deletes an entry in Notes collection
51 | userController.deleteNote = (req, res, next) => {
52 | const {_id, username} = req.body;
53 | console.log('Deleting note _id: ', _id)
54 | Notes.deleteOne({_id: _id})
55 | .then(data => {
56 | console.log('Note successfully deleted')
57 | return next();
58 | })
59 | .catch(err => {
60 | return next(err);
61 | })
62 | }
63 |
64 | module.exports = userController;
--------------------------------------------------------------------------------
/disco-db-demo/server/controllers/weatherController.js:
--------------------------------------------------------------------------------
1 | const weatherController = {};
2 | const axios = require('axios');
3 | const { createResponse } = require('../models/responseModel');
4 |
5 | const API_KEY = '90c77ec3042549f5cc0b7aa750034457'
6 | const UNITS = 'imperial';
7 | const LANG = 'en';
8 |
9 | // make request to openweathermap API
10 | weatherController.getWeather = (req, res, next) => {
11 | let CITY = req.body.city;
12 | const weatherURL = `http://api.openweathermap.org/data/2.5/weather?q=${CITY}&lang=${LANG}&appid=${API_KEY}&units=${UNITS}`;
13 | axios({
14 | method: 'get',
15 | url: weatherURL,
16 | }).then(data => {
17 | console.log(data.data);
18 | res.locals = data.data;
19 | return next();
20 | })
21 | .catch(err => {
22 | return res.status(404).json(createResponse(false, 404, 'city not found'));
23 | // return next(err);
24 | })
25 | }
26 |
27 | module.exports = weatherController;
28 |
--------------------------------------------------------------------------------
/disco-db-demo/server/models/dbConnection.js:
--------------------------------------------------------------------------------
1 | const path = require('path');
2 | require('dotenv').config({path: path.resolve(__dirname, '../../.env')});
3 | const mongoose = require('mongoose');
4 | const URI = process.env.DB_CONNECTION_STRING;
5 |
6 |
7 | // unsure if the query method is what we call to query the DB
8 | // eric - changed to connection
9 | // connection method invoked in server.js to establish connection, possibly not needed
10 | module.exports = {
11 | connection: function (){
12 | mongoose.connect(URI, { useNewUrlParser: true, useUnifiedTopology: true, dbName: 'demo' });
13 | mongoose.connection.once('open', ()=>{
14 | console.log('Connected to MongoDB');
15 | });
16 | }
17 | }
18 |
--------------------------------------------------------------------------------
/disco-db-demo/server/models/model.js:
--------------------------------------------------------------------------------
1 | const mongoose = require('mongoose');
2 |
3 | const Schema = mongoose.Schema;
4 |
5 | const userSchema = new Schema({
6 | username: {type: String, required: true, unique: true},
7 | password: {type: String, required: true},
8 | first_name: {type: String},
9 | email: {type: String}
10 | });
11 |
12 | const noteSchema = new Schema({
13 | username: {type: [String], required: true},
14 | title: {type: String},
15 | content: {type: String},
16 |
17 | // unsure if this date field is correctly written
18 | createdAt: {type: Date},
19 | updatedAt: {type: Date}
20 | })
21 |
22 | // creating model objects
23 | const Users = mongoose.model('user', userSchema);
24 | const Notes = mongoose.model('note', noteSchema);
25 |
26 | // exporting model object
27 | module.exports = { Users, Notes }
--------------------------------------------------------------------------------
/disco-db-demo/server/models/responseModel.js:
--------------------------------------------------------------------------------
1 | function createResponse(actionSuccess, statusCode = 200, message = '', data = {}) {
2 | return {
3 | actionSuccess, // boolean
4 | statusCode, // HTTP code
5 | message, // string
6 | data // object
7 | };
8 | }
9 |
10 |
11 | module.exports = { createResponse };
--------------------------------------------------------------------------------
/disco-db-demo/server/routers/apiRouter.js:
--------------------------------------------------------------------------------
1 | const express = require('express');
2 | const router = express.Router();
3 | const weatherController = require('../controllers/weatherController')
4 | const { createResponse } = require('../models/responseModel');
5 |
6 | router.post('/weather',
7 | weatherController.getWeather,
8 | (req, res) => {
9 | return res.status(200).json(createResponse(true, 200, 'API call successful', res.locals));
10 | });
11 |
12 | module.exports = router;
13 |
--------------------------------------------------------------------------------
/disco-db-demo/server/routers/authRouter.js:
--------------------------------------------------------------------------------
1 | const express = require('express');
2 | const router = express.Router();
3 | const authController = require('../controllers/authController')
4 | const { createResponse } = require('../models/responseModel');
5 |
6 | // Do we need this? Or will it be handled by nextJS?
7 | // router.get('/login',
8 | // (req, res) => {
9 | // res.sendStatus(200);
10 | // });
11 |
12 | // Authenticate user using bcrypt. Send error if not valid. Send session cookie once validated.
13 | router.post('/login',
14 | authController.login,
15 | authController.generateCookie,
16 | (req, res) => {
17 | return res.status(200).json(createResponse(true, 200, 'Login successful'));
18 | });
19 |
20 | // Do we need this? Or will it be handled by nextJS?
21 | // router.get('/signup',
22 | // (req, res) => {
23 | // return res.sendStatus(200);
24 | // });
25 |
26 | // Checks if username is valid. Send error if not valid. Once successfully signed up, automatically logs in user and sends session cookie
27 | router.post('/signup',
28 | authController.signup,
29 | authController.generateCookie,
30 | (req, res) => {
31 | return res.status(200).json(createResponse(true, 200, 'Signup successful'));
32 | });
33 |
34 | // end session and clear cookies middleware
35 | router.get('/logout', authController.logout,
36 | (req, res) => {
37 | return res.status(200).json(createResponse(true, 200, 'Logout successful'));
38 | });
39 |
40 | module.exports = router;
--------------------------------------------------------------------------------
/disco-db-demo/server/routers/userRouter.js:
--------------------------------------------------------------------------------
1 | const express = require('express');
2 | const router = express.Router();
3 | const userController = require('../controllers/userController')
4 |
5 | //commenting this out so nextjs routes to page without having to login/signup each time
6 | // router.get('/',
7 | // userController.getUserNotes,
8 | // (req, res) => {
9 | // return res.status(200).json(res.locals);
10 | // });
11 |
12 | router.get('/load',
13 | userController.getUserNotes,
14 | (req, res) => {
15 | return res.status(200).json(res.locals);
16 | });
17 |
18 | // Create a new entry in notes database. Send back unique id for the new entry
19 | router.post('/notes',
20 | userController.createAndGetNewNote,
21 | (req, res) => {
22 | return res.status(200).json(res.locals);
23 | });
24 |
25 | // Modify an entry in notes database. Send back all data related to the updated entry
26 | router.patch('/notes',
27 | userController.modifyAndGetNote,
28 | (req, res) => {
29 | res.status(200).json(res.locals);
30 | });
31 |
32 | // Delete an entry in notes database.
33 | router.delete('/notes',
34 | userController.deleteNote,
35 | (req, res) => {
36 | res.status(200).json({});
37 | });
38 |
39 | module.exports = router
--------------------------------------------------------------------------------
/disco-db-demo/server/server.js:
--------------------------------------------------------------------------------
1 | const express = require('express');
2 | const cookieParser = require('cookie-parser');
3 | const next = require('next');
4 |
5 | const port = parseInt(process.env.PORT, 10) || 3000;
6 | const dev = process.env.NODE_ENV !== 'production';
7 | const app = next({ dev });
8 | const handle = app.getRequestHandler();
9 | const db = require('./models/dbConnection.js');
10 |
11 | const authRouter = require('./routers/authRouter');
12 | const userRouter = require('./routers/userRouter');
13 | const apiRouter = require('./routers/apiRouter');
14 | const { sendData } = require('next/dist/server/api-utils');
15 |
16 |
17 | app.prepare().then(() => {
18 | const server = express();
19 |
20 | // Allows server to process incoming JSON, form data into the req.body, cookies
21 | server.use(express.json());
22 | server.use(express.urlencoded({extended: true}));
23 | server.use(cookieParser()); // add cookieParser in when cookies implemented
24 |
25 | // establish connection to our MongoDB cluster
26 | // validate this is necessary while testing authRouter
27 | db.connection();
28 |
29 | server.use(cookieParser());
30 | server.use(express.json());
31 | server.use('/auth', authRouter);
32 | server.use('/user', userRouter);
33 | server.use('/api', apiRouter);
34 |
35 | server.get('/', (req, res) => {
36 | // console.log('this is to the root endpoint');
37 | return handle(req, res);
38 | });
39 |
40 | server.all('*', (req, res) => {
41 | // console.log('this is a request to the server');
42 | return handle(req, res);
43 | });
44 |
45 | // local error handler
46 | server.use((req, res) => {
47 | res.status(404).send('Not Found')
48 | });
49 |
50 | // global error handler
51 | server.use((err, req, res, next) => {
52 | const defaultErr = {
53 | log: 'Express error handler caught unknown middleware error',
54 | status: 500,
55 | message: { err: 'An error occurred' },
56 | };
57 | const errorObj = Object.assign({}, defaultErr, err);
58 | console.log(errorObj.log);
59 | return res.status(errorObj.status).json(errorObj.message);
60 | });
61 |
62 | server.listen(port, (err) => {
63 | if (err) throw err;
64 | console.log(`> Ready on http://localhost:${port}`);
65 | });
66 | });
67 |
68 | module.exports = app;
69 |
--------------------------------------------------------------------------------
/disco-db-demo/styles/Home.module.css:
--------------------------------------------------------------------------------
1 | .container {
2 | padding: 0 2rem;
3 | }
4 |
5 | .main {
6 | min-height: 100vh;
7 | padding: 4rem 0;
8 | flex: 1;
9 | display: flex;
10 | flex-direction: column;
11 | justify-content: center;
12 | align-items: center;
13 | }
14 |
15 | .footer {
16 | display: flex;
17 | flex: 1;
18 | padding: 2rem 0;
19 | border-top: 1px solid #eaeaea;
20 | justify-content: center;
21 | align-items: center;
22 | }
23 |
24 | .footer a {
25 | display: flex;
26 | justify-content: center;
27 | align-items: center;
28 | flex-grow: 1;
29 | }
30 |
31 | .title a {
32 | color: #0070f3;
33 | text-decoration: none;
34 | }
35 |
36 | .title a:hover,
37 | .title a:focus,
38 | .title a:active {
39 | text-decoration: underline;
40 | }
41 |
42 | .title {
43 | margin: 0;
44 | line-height: 1.15;
45 | font-size: 4rem;
46 | }
47 |
48 | .title,
49 | .description {
50 | text-align: center;
51 | }
52 |
53 | .description {
54 | margin: 4rem 0;
55 | line-height: 1.5;
56 | font-size: 1.5rem;
57 | }
58 |
59 | .code {
60 | background: #fafafa;
61 | border-radius: 5px;
62 | padding: 0.75rem;
63 | font-size: 1.1rem;
64 | font-family: Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono,
65 | Bitstream Vera Sans Mono, Courier New, monospace;
66 | }
67 |
68 | .grid {
69 | display: flex;
70 | align-items: center;
71 | justify-content: center;
72 | flex-wrap: wrap;
73 | max-width: 800px;
74 | }
75 |
76 | .card {
77 | margin: 1rem;
78 | padding: 1.5rem;
79 | text-align: left;
80 | color: inherit;
81 | text-decoration: none;
82 | border: 1px solid #eaeaea;
83 | border-radius: 10px;
84 | transition: color 0.15s ease, border-color 0.15s ease;
85 | max-width: 300px;
86 | }
87 |
88 | .card:hover,
89 | .card:focus,
90 | .card:active {
91 | color: #0070f3;
92 | border-color: #0070f3;
93 | }
94 |
95 | .card h2 {
96 | margin: 0 0 1rem 0;
97 | font-size: 1.5rem;
98 | }
99 |
100 | .card p {
101 | margin: 0;
102 | font-size: 1.25rem;
103 | line-height: 1.5;
104 | }
105 |
106 | .logo {
107 | height: 1em;
108 | margin-left: 0.5rem;
109 | }
110 |
111 | @media (max-width: 600px) {
112 | .grid {
113 | width: 100%;
114 | flex-direction: column;
115 | }
116 | }
117 |
--------------------------------------------------------------------------------
/disco-db-demo/styles/globals.css:
--------------------------------------------------------------------------------
1 | html,
2 | body {
3 | padding: 0;
4 | margin: 0;
5 | font-family: Roboto, -apple-system, BlinkMacSystemFont, Segoe UI, Oxygen,
6 | Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
7 | }
8 |
9 | a {
10 | color: inherit;
11 | text-decoration: none;
12 | }
13 |
14 | * {
15 | box-sizing: border-box;
16 | }
17 |
--------------------------------------------------------------------------------
/discodb/LICENSE.md:
--------------------------------------------------------------------------------
1 | MIT License
2 |
3 | Copyright (c) 2022 OSLabs Beta
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
--------------------------------------------------------------------------------
/discodb/README.md:
--------------------------------------------------------------------------------
1 |
2 |
4 |
5 | # DiscoDB:
6 |
7 | ## Table of Contents
8 |
9 | - [Features](#features)
10 |
11 | - [Installation](#installation)
12 |
13 | - [How It works](#how-it-works)
14 |
15 | - [Demo Apps](#demo-app)
16 |
17 | - [Contributing](#contributing)
18 |
19 | - [Authors](#authors)
20 |
21 | - [License](#license)
22 |
23 | ## Features
24 |
25 | - A minimalist IndexedDB (IDB) wrapper and syncing solution for when your application disco(nnects) from the network.
26 | - Lightweight with zero dependencies.
27 | - Functionalities can be implemented via Service Workers with minimal modification to client side code
28 | - Supports syncing IDB with NoSQL databases (MongoDB) with a unique keypath
29 | - Promise based wrapper for IDB to perform local CRUD operations while offline to provide seamless UX
30 | - Sync to main database via action queue with automatic network availability detection.
31 |
32 |
34 | Offline Capabilities
38 |
39 |
40 | Dynamic Offline Data
44 |
45 |
46 | Custom Action Queue
50 | 
3 |