77 |
78 | AWS Full-Stack Template
79 |
81 |
84 |
85 |
86 |
88 | );
89 | }
90 | }
91 |
92 | export default withRouter(App as any);
--------------------------------------------------------------------------------
/assets/src/Routes.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import { Route, Switch } from "react-router-dom";
3 | import PropsRoute from "./common/PropsRoute";
4 | import Home from "./modules/signup/Home";
5 | import Login from "./modules/signup/Login";
6 | import Signup from "./modules/signup/Signup";
7 | import AddEditGoal from "./modules/goal/AddEditGoal";
8 | import NotFound from "./modules/notFound/NotFound";
9 |
10 | interface RouteProps {
11 | isAuthenticated: boolean;
12 | userHasAuthenticated: (authenticated: boolean) => void;
13 | }
14 |
15 | export const Routes: React.SFC
191 | {this.state.isLoading ?
192 |
250 | );
251 | }
252 | }
--------------------------------------------------------------------------------
/assets/src/modules/notFound/NotFound.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import "./notFound.css";
3 |
4 | export default () =>
5 |
6 |
;
--------------------------------------------------------------------------------
/assets/src/modules/notFound/notFound.css:
--------------------------------------------------------------------------------
1 | .NotFound {
2 | padding-top: 100px;
3 | text-align: center;
4 | }
--------------------------------------------------------------------------------
/assets/src/modules/signup/Home.tsx:
--------------------------------------------------------------------------------
1 | import React, { Component } from "react";
2 | import { Button, Table, Spinner } from "react-bootstrap";
3 | import API from "@aws-amplify/api";
4 | import { Redirect } from "react-router-dom";
5 |
6 | import fullStack from "../../images/full-stack.png";
7 | import "./home.css";
8 |
9 | interface HomeProps {
10 | isAuthenticated: boolean;
11 | }
12 |
13 | interface HomeState {
14 | isLoading: boolean;
15 | goals: Goal[];
16 | redirect: boolean;
17 | }
18 |
19 | interface Goal {
20 | content: string;
21 | goalId: string;
22 | title: string;
23 | createdAt: Date;
24 | }
25 |
26 | export default class Home extends ComponentSorry, page not found!
7 |{goal.content.trim().split("\n")[0]}
76 |
78 |
83 |
);
84 | }
85 |
86 | renderHome() {
87 | return (
88 | AWS Goals App
77 |78 |
This is a sample application that creates a simple CRUD (create, read, update, delete) app, and provides the foundational services, components, and plumbing needed to get a basic web application up and running. In this "goals" app, users can create goals, add descriptions, and update or remove their goals. You can get this sample application up and running in your own environment and learn more about the architecture of the app by looking at the github repository.
79 |
80 | Sign up to explore the demo
81 |
82 |
89 |
94 |
95 |
113 |
114 | );
115 | }
116 |
117 | render() {
118 | let { redirect } = this.state;
119 | if (redirect) {
120 | return Goals
90 |
91 |
92 |
93 | | Goal name | 97 |Description | 98 |Date created | 99 |
|---|---|---|
|
106 | |
125 | {this.props.isAuthenticated ? this.renderHome() : this.renderLanding()}
126 |
127 | );
128 | }
129 | }
130 |
--------------------------------------------------------------------------------
/assets/src/modules/signup/Login.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import { Redirect } from 'react-router';
3 | import { Form, FormGroup, FormControl, FormLabel, Button, Spinner, FormControlProps } from "react-bootstrap";
4 | import Auth from "@aws-amplify/auth";
5 | import "./login.css";
6 |
7 | const emailRegex = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
8 |
9 | interface LoginProps {
10 | isAuthenticated: boolean;
11 | userHasAuthenticated: (authenticated: boolean) => void;
12 | }
13 |
14 | interface LoginState {
15 | loading: boolean;
16 | redirect: boolean;
17 | email: string;
18 | password: string;
19 | isValid: boolean;
20 | }
21 |
22 | export default class Login extends React.Component
67 |
100 |
101 | );
102 | }
103 | }
--------------------------------------------------------------------------------
/assets/src/modules/signup/Signup.tsx:
--------------------------------------------------------------------------------
1 | import Auth from "@aws-amplify/auth";
2 | import React from "react";
3 | import { Redirect } from 'react-router';
4 | import { Form, FormGroup, FormControl, FormLabel, Button, Spinner, FormControlProps } from "react-bootstrap";
5 | import "./signup.css";
6 | import "./home.css";
7 | import { ISignUpResult } from "amazon-cognito-identity-js";
8 |
9 | const emailRegex = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
10 |
11 | interface SignupProps {
12 | isAuthenticated: boolean;
13 | userHasAuthenticated: (authenticated: boolean) => void;
14 | }
15 |
16 | interface SignupState {
17 | loading: boolean;
18 | email: string;
19 | password: string;
20 | confirmPassword: string;
21 | confirmationCode: string;
22 | user: any;
23 | redirect: boolean;
24 | validated: boolean;
25 | }
26 |
27 | export default class Signup extends React.Component
179 | {this.state.user === undefined ? this.showSignupForm() : this.showConfirmationForm()}
180 |
181 | );
182 | }
183 | }
--------------------------------------------------------------------------------
/assets/src/modules/signup/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 |
11 | .Home .lander p {
12 | color: white;
13 | }
14 |
15 | .Home .goals h4 {
16 | font-family: "Open Sans", sans-serif;
17 | font-weight: 600;
18 | overflow: hidden;
19 | line-height: 1.5;
20 | white-space: nowrap;
21 | text-overflow: ellipsis;
22 | }
23 |
24 | .Home .goals table {
25 | margin-top: 30px;
26 | color: white;
27 | table-layout: fixed;
28 | }
29 |
30 | .Home .goals table a {
31 | color: #4eacf9;
32 | }
33 |
34 | .list-group {
35 | background: transparent !important;
36 | box-shadow: none !important;
37 | }
38 |
39 | .list-group-item h4 {
40 | font-size: 24px;
41 | font-weight: 100 !important;
42 | }
43 |
44 | .list-group-item-text {
45 | font-weight: 100 !important;
46 | font-size: 18px !important;
47 | padding-left: 30px;
48 | }
49 |
50 | .list-group-item-heading {
51 | font-weight: 200 !important;
52 | font-size: 24px !important;
53 | padding-left:30px;
54 | }
55 |
56 | .container-fluid {
57 | padding-right: 0 !important;
58 | }
59 |
60 | .description {
61 | overflow: hidden;
62 | text-overflow: ellipsis;
63 | white-space: nowrap;
64 | }
65 |
66 | .orange-link {
67 | color: #ff9900 !important;
68 | }
69 |
70 | .center-spinner {
71 | position: absolute;
72 | margin-top: 20px;
73 | left: 50%;
74 | }
--------------------------------------------------------------------------------
/assets/src/modules/signup/login.css:
--------------------------------------------------------------------------------
1 | @media all and (min-width: 480px) {
2 | .Login {
3 | max-width: 350px;
4 | height: 100%;
5 | padding: 30px;
6 | display: block;
7 | margin-left: auto;
8 | margin-right: auto;
9 | }
10 |
11 | .Login form {
12 | margin: 0 auto;
13 | max-width: 320px;
14 | }
15 | }
16 |
17 | .control-label{
18 | color: #fff !important;
19 | text-shadow: none !important;
20 | font-size: 20px !important;
21 | font-weight: 200;
22 | }
--------------------------------------------------------------------------------
/assets/src/modules/signup/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 |
12 | .Signup form span.help-block {
13 | font-size: 14px;
14 | padding-bottom: 10px;
15 | color: #999;
16 | }
--------------------------------------------------------------------------------
/assets/src/react-app-env.d.ts:
--------------------------------------------------------------------------------
1 | ///
139 |
155 |
156 | Save your function. Since the function hasn't been used yet, there won't be any "lastUpdated" record created until the function is called, so go modify one of your goals in the app. You can change the title or description (up to you), and choose "Update goal."
157 |
158 | Next, let's go to DynamoDB to verify the new "lastUpdated" information is passed through. Open the DynamoDB console and find the table that corresponds to this goals project (the table name will match the "ProjectName" you used when creating the stack in CloudFormation). Open the item corresponding to the goal you updated, and you should now see the "lastUpdated" information in the item.
159 |
160 | #### Step 2: Add a "Last updated" column to the goals list page
161 |
162 | Now that you have a snazzy new parameter to track when your goal was last updated, the next step is to add this information to the goals list page. Here's a big hint: you only need to change one file. To get started, open the CodeCommit console, choose "Repositories" and then "Code" from the left navigation. Navigate to /src/modules/signup/Home.tsx. Choose "Edit" in the upper-right and make your modifications. For extra credit, try to make the changes without looking at the answers provided in the expandable section below!
163 |
164 | Expand to see code (answers!)
140 | 141 | 142 | Add a parameter at the end of the "UpdateExpression" line and a new line under "ExpressionAttributeValues" so it looks like this: 143 | ```js 144 | UpdateExpression: "SET title = :title, content = :content, lastUpdated = :lastUpdated", 145 | ExpressionAttributeValues: { 146 | ":title": data.title ? data.title : null, 147 | ":content": data.content ? data.content : null, 148 | ":lastUpdated": Date.now() 149 | }, 150 | ``` 151 | 152 | Note we have added the "lastUpdated" parameter in **two** places. Also, don't forget the comma after the "null". 153 | 154 |
165 |
182 | {goal.title}
183 | {new Date(goal.createdAt).toLocaleString()}
185 | {new Date(goal.lastUpdated).toLocaleString()} //<--This line!
186 |
187 | );
188 | ```
189 | ```js
190 |
191 |
192 |
Expand to see code (answers!)
166 | 167 | 168 | Add new lines under "interface Goal," "return goalsList," and "Table" so it looks like this: 169 | ```js 170 | interface Goal { 171 | content: string; 172 | goalId: string; 173 | title: string; 174 | createdAt: Date; 175 | lastUpdated: Date; //<--This line! 176 | } 177 | ``` 178 | ```js 179 | return goalsList.concat(goals).map( 180 | (goal, i) => 181 |{goal.content.trim().split("\n")[0]}
| Goal name | 194 |Description | 195 |Date created | 196 |Date modified | //<--This line! 197 |
|---|