10 | history.push(e.currentTarget.getAttribute("href"))}
12 | {...props}
13 | active={match ? true : false}
14 | >
15 | {props.children}
16 | }
17 | />;
18 |
--------------------------------------------------------------------------------
/src/components/UnauthenticatedRoute.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import { Route, Redirect } from "react-router-dom";
3 | import { useAppContext } from "../libs/contextLib";
4 |
5 | function querystring(name, url = window.location.href) {
6 | name = name.replace(/[[]]/g, "\\$&");
7 |
8 | const regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)", "i");
9 | const results = regex.exec(url);
10 |
11 | if (!results) {
12 | return null;
13 | }
14 | if (!results[2]) {
15 | return "";
16 | }
17 |
18 | return decodeURIComponent(results[2].replace(/\+/g, " "));
19 | }
20 |
21 | export default function UnauthenticatedRoute({ children, ...rest }) {
22 | const { isAuthenticated } = useAppContext();
23 | const redirect = querystring("redirect");
24 | return (
25 |
26 | {!isAuthenticated ? (
27 | children
28 | ) : (
29 |
30 | )}
31 |
32 | );
33 | }
34 |
--------------------------------------------------------------------------------
/src/config.js:
--------------------------------------------------------------------------------
1 | const dev = {
2 | STRIPE_KEY: "pk_test_v1amvR35uoCNduJfkqGB8RLD",
3 | s3: {
4 | REGION: "us-east-1",
5 | BUCKET: "notes-app-2-api-dev-attachmentsbucket-1xboyuq7t4m3b",
6 | },
7 | apiGateway: {
8 | REGION: "us-east-1",
9 | URL: "https://api.serverless-stack.seed-demo.club/dev",
10 | },
11 | cognito: {
12 | REGION: "us-east-1",
13 | USER_POOL_ID: "us-east-1_inr9YMAGu",
14 | APP_CLIENT_ID: "1j8rsat63d6bgrf4a1urfa5fl",
15 | IDENTITY_POOL_ID: "us-east-1:9fbc1763-a1b0-4e44-958d-8d8c155252d5",
16 | },
17 | };
18 |
19 | const prod = {
20 | STRIPE_KEY: "pk_test_v1amvR35uoCNduJfkqGB8RLD",
21 | s3: {
22 | REGION: "us-east-1",
23 | BUCKET: "notes-app-2-api-prod-attachmentsbucket-1i904t99uyi9u",
24 | },
25 | apiGateway: {
26 | REGION: "us-east-1",
27 | URL: "https://api.serverless-stack.seed-demo.club/prod",
28 | },
29 | cognito: {
30 | REGION: "us-east-1",
31 | USER_POOL_ID: "us-east-1_m3dpB46HZ",
32 | APP_CLIENT_ID: "fuindvj7f1ljpa35tp2d7kjrn",
33 | IDENTITY_POOL_ID: "us-east-1:67cb4bb1-d2b2-49ec-b412-5b7ef2404bcc",
34 | },
35 | };
36 |
37 | const config = {
38 | // Add common config values here
39 | MAX_ATTACHMENT_SIZE: 5000000,
40 | // Default to dev if not set
41 | ...(process.env.REACT_APP_STAGE === "prod" ? prod : dev),
42 | };
43 |
44 | export default config;
45 |
--------------------------------------------------------------------------------
/src/containers/Home.css:
--------------------------------------------------------------------------------
1 | .Home .lander {
2 | padding: 80px 0;
3 | text-align: center;
4 | }
5 |
6 | .Home .lander h1 {
7 | font-family: "Open Sans", sans-serif;
8 | font-weight: 600;
9 | }
10 |
--------------------------------------------------------------------------------
/src/containers/Home.js:
--------------------------------------------------------------------------------
1 | import React, { useState, useEffect } from "react";
2 | import { API } from "aws-amplify";
3 | import { Link } from "react-router-dom";
4 | import { BsPencilSquare } from "react-icons/bs";
5 | import ListGroup from "react-bootstrap/ListGroup";
6 | import { LinkContainer } from "react-router-bootstrap";
7 | import { useAppContext } from "../libs/contextLib";
8 | import { onError } from "../libs/errorLib";
9 | import "./Home.css";
10 |
11 | export default function Home() {
12 | const [notes, setNotes] = useState([]);
13 | const { isAuthenticated } = useAppContext();
14 | const [isLoading, setIsLoading] = useState(true);
15 |
16 | useEffect(() => {
17 | async function onLoad() {
18 | if (!isAuthenticated) {
19 | return;
20 | }
21 |
22 | try {
23 | const notes = await loadNotes();
24 | setNotes(notes);
25 | } catch (e) {
26 | onError(e);
27 | }
28 |
29 | setIsLoading(false);
30 | }
31 |
32 | onLoad();
33 | }, [isAuthenticated]);
34 |
35 | function loadNotes() {
36 | return API.get("notes", "/notes");
37 | }
38 |
39 | function renderNotesList(notes) {
40 | return (
41 | <>
42 |
43 |
44 |
45 | Create a new note
46 |
47 |
48 | {notes.map(({ noteId, content, createdAt }) => (
49 |
50 |
51 |
52 | {content.trim().split("\n")[0]}
53 |
54 |
55 |
56 | Created: {new Date(createdAt).toLocaleString()}
57 |
58 |
59 |
60 | ))}
61 |
62 | );
63 | }
64 |
65 | function renderLander() {
66 | return (
67 |
68 |
Scratch
69 |
A simple note taking app
70 |
71 |
72 | Login
73 |
74 |
75 | Signup
76 |
77 |
78 |
85 |
Your Notes
86 | {!isLoading && renderNotesList(notes)}
87 |
88 | );
89 | }
90 |
91 | return (
92 |
93 | {isAuthenticated ? renderNotes() : renderLander()}
94 |
95 | );
96 | }
97 |
--------------------------------------------------------------------------------
/src/containers/Login.css:
--------------------------------------------------------------------------------
1 | @media all and (min-width: 480px) {
2 | .Login {
3 | padding: 60px 0;
4 | }
5 |
6 | .Login form {
7 | margin: 0 auto;
8 | max-width: 320px;
9 | }
10 | }
11 |
--------------------------------------------------------------------------------
/src/containers/Login.js:
--------------------------------------------------------------------------------
1 | import React, { useState } from "react";
2 | import { Auth } from "aws-amplify";
3 | import Form from "react-bootstrap/Form";
4 | import LoaderButton from "../components/LoaderButton";
5 | import { useAppContext } from "../libs/contextLib";
6 | import { useFormFields } from "../libs/hooksLib";
7 | import { onError } from "../libs/errorLib";
8 | import "./Login.css";
9 |
10 | export default function Login() {
11 | const { userHasAuthenticated } = useAppContext();
12 | const [isLoading, setIsLoading] = useState(false);
13 | const [fields, handleFieldChange] = useFormFields({
14 | email: "",
15 | password: ""
16 | });
17 |
18 | function validateForm() {
19 | return fields.email.length > 0 && fields.password.length > 0;
20 | }
21 |
22 | async function handleSubmit(event) {
23 | event.preventDefault();
24 |
25 | setIsLoading(true);
26 |
27 | try {
28 | await Auth.signIn(fields.email, fields.password);
29 | userHasAuthenticated(true);
30 | } catch (e) {
31 | onError(e);
32 | setIsLoading(false);
33 | }
34 | }
35 |
36 | return (
37 |
38 |
66 |
67 | );
68 | }
69 |
--------------------------------------------------------------------------------
/src/containers/NewNote.css:
--------------------------------------------------------------------------------
1 | .NewNote form textarea {
2 | height: 300px;
3 | font-size: 1.5rem;
4 | }
5 |
--------------------------------------------------------------------------------
/src/containers/NewNote.js:
--------------------------------------------------------------------------------
1 | import React, { useRef, useState } from "react";
2 | import { API } from "aws-amplify";
3 | import Form from "react-bootstrap/Form";
4 | import { useHistory } from "react-router-dom";
5 | import LoaderButton from "../components/LoaderButton";
6 | import { onError } from "../libs/errorLib";
7 | import { s3Upload } from "../libs/awsLib";
8 | import config from "../config";
9 | import "./NewNote.css";
10 |
11 | export default function NewNote() {
12 | const file = useRef(null);
13 | const history = useHistory();
14 | const [content, setContent] = useState("");
15 | const [isLoading, setIsLoading] = useState(false);
16 |
17 | function validateForm() {
18 | return content.length > 0;
19 | }
20 |
21 | function handleFileChange(event) {
22 | file.current = event.target.files[0];
23 | }
24 |
25 | async function handleSubmit(event) {
26 | event.preventDefault();
27 |
28 | if (file.current && file.current.size > config.MAX_ATTACHMENT_SIZE) {
29 | alert(
30 | `Please pick a file smaller than ${
31 | config.MAX_ATTACHMENT_SIZE / 1000000
32 | } MB.`
33 | );
34 | return;
35 | }
36 |
37 | setIsLoading(true);
38 |
39 | try {
40 | const attachment = file.current ? await s3Upload(file.current) : null;
41 |
42 | await createNote({ content, attachment });
43 | history.push("/");
44 | } catch (e) {
45 | onError(e);
46 | setIsLoading(false);
47 | }
48 | }
49 |
50 | function createNote(note) {
51 | return API.post("notes", "/notes", {
52 | body: note
53 | });
54 | }
55 |
56 | return (
57 |
58 |
81 |
82 | );
83 | }
84 |
--------------------------------------------------------------------------------
/src/containers/NotFound.css:
--------------------------------------------------------------------------------
1 | .NotFound {
2 | padding-top: 100px;
3 | }
4 |
--------------------------------------------------------------------------------
/src/containers/NotFound.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import "./NotFound.css";
3 |
4 | export default function NotFound() {
5 | return (
6 |
7 |
Sorry, page not found!
8 |
9 | );
10 | }
11 |
--------------------------------------------------------------------------------
/src/containers/Notes.css:
--------------------------------------------------------------------------------
1 | .Notes form textarea {
2 | height: 300px;
3 | font-size: 1.5rem;
4 | }
5 |
--------------------------------------------------------------------------------
/src/containers/Notes.js:
--------------------------------------------------------------------------------
1 | import React, { useRef, useState, useEffect } from "react";
2 | import Form from "react-bootstrap/Form";
3 | import { API, Storage } from "aws-amplify";
4 | import { useParams, useHistory } from "react-router-dom";
5 | import LoaderButton from "../components/LoaderButton";
6 | import { onError } from "../libs/errorLib";
7 | import { s3Upload } from "../libs/awsLib";
8 | import config from "../config";
9 | import "./Notes.css";
10 |
11 | export default function Notes() {
12 | const file = useRef(null);
13 | const { id } = useParams();
14 | const history = useHistory();
15 | const [note, setNote] = useState(null);
16 | const [content, setContent] = useState("");
17 | const [isLoading, setIsLoading] = useState(false);
18 | const [isDeleting, setIsDeleting] = useState(false);
19 |
20 | useEffect(() => {
21 | function loadNote() {
22 | return API.get("notes", `/notes/${id}`);
23 | }
24 |
25 | async function onLoad() {
26 | try {
27 | const note = await loadNote();
28 | const { content, attachment } = note;
29 |
30 | if (attachment) {
31 | note.attachmentURL = await Storage.vault.get(attachment);
32 | }
33 |
34 | setContent(content);
35 | setNote(note);
36 | } catch (e) {
37 | onError(e);
38 | }
39 | }
40 |
41 | onLoad();
42 | }, [id]);
43 |
44 | function validateForm() {
45 | return content.length > 0;
46 | }
47 |
48 | function formatFilename(str) {
49 | return str.replace(/^\w+-/, "");
50 | }
51 |
52 | function handleFileChange(event) {
53 | file.current = event.target.files[0];
54 | }
55 |
56 | function saveNote(note) {
57 | return API.put("notes", `/notes/${id}`, {
58 | body: note
59 | });
60 | }
61 |
62 | async function handleSubmit(event) {
63 | let attachment;
64 |
65 | event.preventDefault();
66 |
67 | if (file.current && file.current.size > config.MAX_ATTACHMENT_SIZE) {
68 | alert(
69 | `Please pick a file smaller than ${
70 | config.MAX_ATTACHMENT_SIZE / 1000000
71 | } MB.`
72 | );
73 | return;
74 | }
75 |
76 | setIsLoading(true);
77 |
78 | try {
79 | if (file.current) {
80 | attachment = await s3Upload(file.current);
81 | }
82 |
83 | await saveNote({
84 | content,
85 | attachment: attachment || note.attachment
86 | });
87 | history.push("/");
88 | } catch (e) {
89 | onError(e);
90 | setIsLoading(false);
91 | }
92 | }
93 |
94 | function deleteNote() {
95 | return API.del("notes", `/notes/${id}`);
96 | }
97 |
98 | async function handleDelete(event) {
99 | event.preventDefault();
100 |
101 | const confirmed = window.confirm(
102 | "Are you sure you want to delete this note?"
103 | );
104 |
105 | if (!confirmed) {
106 | return;
107 | }
108 |
109 | setIsDeleting(true);
110 |
111 | try {
112 | await deleteNote();
113 | history.push("/");
114 | } catch (e) {
115 | onError(e);
116 | setIsDeleting(false);
117 | }
118 | }
119 |
120 | return (
121 |
122 | {note && (
123 |
165 | )}
166 |
46 |
55 |
56 |
57 |
58 | );
59 | }
60 |
--------------------------------------------------------------------------------
/src/containers/Signup.css:
--------------------------------------------------------------------------------
1 | @media all and (min-width: 480px) {
2 | .Signup {
3 | padding: 60px 0;
4 | }
5 |
6 | .Signup form {
7 | margin: 0 auto;
8 | max-width: 320px;
9 | }
10 | }
11 |
--------------------------------------------------------------------------------
/src/containers/Signup.js:
--------------------------------------------------------------------------------
1 | import React, { useState } from "react";
2 | import { Auth } from "aws-amplify";
3 | import Form from "react-bootstrap/Form";
4 | import { useHistory } from "react-router-dom";
5 | import LoaderButton from "../components/LoaderButton";
6 | import { useAppContext } from "../libs/contextLib";
7 | import { useFormFields } from "../libs/hooksLib";
8 | import { onError } from "../libs/errorLib";
9 | import "./Signup.css";
10 |
11 | export default function Signup() {
12 | const [fields, handleFieldChange] = useFormFields({
13 | email: "",
14 | password: "",
15 | confirmPassword: "",
16 | confirmationCode: "",
17 | });
18 | const history = useHistory();
19 | const [newUser, setNewUser] = useState(null);
20 | const { userHasAuthenticated } = useAppContext();
21 | const [isLoading, setIsLoading] = useState(false);
22 |
23 | function validateForm() {
24 | return (
25 | fields.email.length > 0 &&
26 | fields.password.length > 0 &&
27 | fields.password === fields.confirmPassword
28 | );
29 | }
30 |
31 | function validateConfirmationForm() {
32 | return fields.confirmationCode.length > 0;
33 | }
34 |
35 | async function handleSubmit(event) {
36 | event.preventDefault();
37 |
38 | setIsLoading(true);
39 |
40 | try {
41 | const newUser = await Auth.signUp({
42 | username: fields.email,
43 | password: fields.password,
44 | });
45 | setIsLoading(false);
46 | setNewUser(newUser);
47 | } catch (e) {
48 | onError(e);
49 | setIsLoading(false);
50 | }
51 | }
52 |
53 | async function handleConfirmationSubmit(event) {
54 | event.preventDefault();
55 |
56 | setIsLoading(true);
57 |
58 | try {
59 | await Auth.confirmSignUp(fields.email, fields.confirmationCode);
60 | await Auth.signIn(fields.email, fields.password);
61 |
62 | userHasAuthenticated(true);
63 | history.push("/");
64 | } catch (e) {
65 | onError(e);
66 | setIsLoading(false);
67 | }
68 | }
69 |
70 | function renderConfirmationForm() {
71 | return (
72 |
94 | );
95 | }
96 |
97 | function renderForm() {
98 | return (
99 |
136 | );
137 | }
138 |
139 | return (
140 |
141 | {newUser === null ? renderForm() : renderConfirmationForm()}
142 |
143 | );
144 | }
145 |
--------------------------------------------------------------------------------
/src/index.css:
--------------------------------------------------------------------------------
1 | body {
2 | margin: 0;
3 | padding: 0;
4 | color: #333;
5 | font-size: 16px;
6 | -moz-osx-font-smoothing: grayscale;
7 | -webkit-font-smoothing: antialiased;
8 | font-family: "Open Sans", sans-serif;
9 | }
10 | h1, h2, h3, h4, h5, h6 {
11 | font-family: "PT Serif", serif;
12 | }
13 |
14 | h1, h2, h3, h4, h5, h6 {
15 | font-family: "PT Serif", serif;
16 | }
17 |
18 | h1, h2, h3, h4, h5, h6 {
19 | font-family: "PT Serif", serif;
20 | }
21 |
22 | select.form-control,
23 | textarea.form-control,
24 | input.form-control {
25 | font-size: 1rem;
26 | }
27 | input[type=file] {
28 | width: 100%;
29 | }
30 |
--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import ReactDOM from 'react-dom';
3 | import { Amplify } from 'aws-amplify';
4 | import { BrowserRouter as Router } from 'react-router-dom';
5 | import './index.css';
6 | import App from './App';
7 | import config from './config';
8 | import { initSentry } from './libs/errorLib';
9 | import reportWebVitals from './reportWebVitals';
10 |
11 | initSentry();
12 |
13 | Amplify.configure({
14 | Auth: {
15 | mandatorySignIn: true,
16 | region: config.cognito.REGION,
17 | userPoolId: config.cognito.USER_POOL_ID,
18 | identityPoolId: config.cognito.IDENTITY_POOL_ID,
19 | userPoolWebClientId: config.cognito.APP_CLIENT_ID
20 | },
21 | Storage: {
22 | region: config.s3.REGION,
23 | bucket: config.s3.BUCKET,
24 | identityPoolId: config.cognito.IDENTITY_POOL_ID
25 | },
26 | API: {
27 | endpoints: [
28 | {
29 | name: "notes",
30 | endpoint: config.apiGateway.URL,
31 | region: config.apiGateway.REGION
32 | },
33 | ]
34 | }
35 | });
36 |
37 | ReactDOM.render(
38 |
39 |
40 |
41 |
42 | ,
43 | document.getElementById('root')
44 | );
45 |
46 | // If you want to start measuring performance in your app, pass a function
47 | // to log results (for example: reportWebVitals(console.log))
48 | // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
49 | reportWebVitals();
50 |
--------------------------------------------------------------------------------
/src/libs/awsLib.js:
--------------------------------------------------------------------------------
1 | import { Storage } from "aws-amplify";
2 |
3 | export async function s3Upload(file) {
4 | const filename = `${Date.now()}-${file.name}`;
5 |
6 | const stored = await Storage.vault.put(filename, file, {
7 | contentType: file.type,
8 | });
9 |
10 | return stored.key;
11 | }
12 |
--------------------------------------------------------------------------------
/src/libs/contextLib.js:
--------------------------------------------------------------------------------
1 | import { useContext, createContext } from "react";
2 |
3 | export const AppContext = createContext(null);
4 |
5 | export function useAppContext() {
6 | return useContext(AppContext);
7 | }
8 |
--------------------------------------------------------------------------------
/src/libs/errorLib.js:
--------------------------------------------------------------------------------
1 | import * as Sentry from "@sentry/browser";
2 |
3 | const isLocal = process.env.NODE_ENV === "development";
4 |
5 | export function initSentry() {
6 | if (isLocal) {
7 | return;
8 | }
9 |
10 | Sentry.init({ dsn: "https://5f83aa2e21064e47bab8a1f308f940eb@sentry.io/5185720" });
11 | }
12 |
13 | export function logError(error, errorInfo = null) {
14 | if (isLocal) {
15 | return;
16 | }
17 |
18 | Sentry.withScope((scope) => {
19 | errorInfo && scope.setExtras(errorInfo);
20 | Sentry.captureException(error);
21 | });
22 | }
23 |
24 | export function onError(error) {
25 | let errorInfo = {};
26 | let message = error.toString();
27 |
28 | // Auth errors
29 | if (!(error instanceof Error) && error.message) {
30 | errorInfo = error;
31 | message = error.message;
32 | error = new Error(message);
33 | // API errors
34 | } else if (error.config && error.config.url) {
35 | errorInfo.url = error.config.url;
36 | }
37 |
38 | logError(error, errorInfo);
39 |
40 | alert(message);
41 | }
42 |
--------------------------------------------------------------------------------
/src/libs/hooksLib.js:
--------------------------------------------------------------------------------
1 | import { useState } from "react";
2 |
3 | export function useFormFields(initialState) {
4 | const [fields, setValues] = useState(initialState);
5 |
6 | return [
7 | fields,
8 | function(event) {
9 | setValues({
10 | ...fields,
11 | [event.target.id]: event.target.value
12 | });
13 | }
14 | ];
15 | }
16 |
--------------------------------------------------------------------------------
/src/reportWebVitals.js:
--------------------------------------------------------------------------------
1 | const reportWebVitals = onPerfEntry => {
2 | if (onPerfEntry && onPerfEntry instanceof Function) {
3 | import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
4 | getCLS(onPerfEntry);
5 | getFID(onPerfEntry);
6 | getFCP(onPerfEntry);
7 | getLCP(onPerfEntry);
8 | getTTFB(onPerfEntry);
9 | });
10 | }
11 | };
12 |
13 | export default reportWebVitals;
14 |
--------------------------------------------------------------------------------
/src/setupTests.js:
--------------------------------------------------------------------------------
1 | // jest-dom adds custom jest matchers for asserting on DOM nodes.
2 | // allows you to do things like:
3 | // expect(element).toHaveTextContent(/react/i)
4 | // learn more: https://github.com/testing-library/jest-dom
5 | import '@testing-library/jest-dom';
6 |
--------------------------------------------------------------------------------