├── .vscode └── settings.json ├── public ├── robots.txt ├── favicon.ico ├── logo192.png ├── logo512.png ├── manifest.json └── index.html ├── .graphqlconfig.yml ├── src ├── index.css ├── App.js ├── components │ ├── UsersWhoLikedPost.js │ ├── DeletePost.js │ ├── commentPost.js │ ├── CreateCommentPost │ ├── CreatePost.js │ ├── EditPost.js │ └── DisplayPosts.js ├── index.js ├── logo.svg ├── graphql │ ├── queries.js │ ├── subscriptions.js │ ├── mutations.js │ └── schema.json ├── App.css └── serviceWorker.js ├── .gitignore ├── schema.graphql ├── package.json └── README.md /.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "git.ignoreLimitWarning": true 3 | } -------------------------------------------------------------------------------- /public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pdichone/aws-appsync-amplify-react-course/HEAD/public/favicon.ico -------------------------------------------------------------------------------- /public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pdichone/aws-appsync-amplify-react-course/HEAD/public/logo192.png -------------------------------------------------------------------------------- /public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pdichone/aws-appsync-amplify-react-course/HEAD/public/logo512.png -------------------------------------------------------------------------------- /.graphqlconfig.yml: -------------------------------------------------------------------------------- 1 | projects: 2 | blogfinal: 3 | schemaPath: src/graphql/schema.json 4 | includes: 5 | - src/graphql/**/*.js 6 | excludes: 7 | - ./amplify/** 8 | extensions: 9 | amplify: 10 | codeGenTarget: javascript 11 | generatedFileName: '' 12 | docsFilePath: src/graphql 13 | -------------------------------------------------------------------------------- /src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", 4 | "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", 5 | sans-serif; 6 | -webkit-font-smoothing: antialiased; 7 | -moz-osx-font-smoothing: grayscale; 8 | } 9 | 10 | code { 11 | font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New", 12 | monospace; 13 | } 14 | -------------------------------------------------------------------------------- /src/App.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import './App.css'; 3 | import DisplayPosts from './components/DisplayPosts' 4 | import CreatePost from './components/CreatePost'; 5 | import { withAuthenticator } from 'aws-amplify-react' 6 | 7 | 8 | function App() { 9 | return ( 10 |
11 | 12 | 13 | 14 | 15 |
16 | ); 17 | } 18 | 19 | 20 | export default withAuthenticator(App, 21 | { includeGreetings: true}); 22 | -------------------------------------------------------------------------------- /public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | }, 10 | { 11 | "src": "logo192.png", 12 | "type": "image/png", 13 | "sizes": "192x192" 14 | }, 15 | { 16 | "src": "logo512.png", 17 | "type": "image/png", 18 | "sizes": "512x512" 19 | } 20 | ], 21 | "start_url": ".", 22 | "display": "standalone", 23 | "theme_color": "#000000", 24 | "background_color": "#ffffff" 25 | } 26 | -------------------------------------------------------------------------------- /src/components/UsersWhoLikedPost.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react' 2 | 3 | 4 | class UsersWhoLikedPost extends Component { 5 | 6 | 7 | render() { 8 | const allUsers = this.props.data 9 | return allUsers.map((user) => { 10 | return ( 11 | 12 |
13 | 14 | {user} 15 | 16 | 17 | 18 |
19 | 20 | ) 21 | }) 22 | 23 | } 24 | } 25 | export default UsersWhoLikedPost 26 | -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import './index.css'; 4 | import App from './App'; 5 | import * as serviceWorker from './serviceWorker'; 6 | 7 | import Amplify from 'aws-amplify' 8 | import aws_exports from './aws-exports' 9 | 10 | Amplify.configure(aws_exports) 11 | 12 | 13 | 14 | 15 | ReactDOM.render(, document.getElementById('root')); 16 | 17 | // If you want your app to work offline and load faster, you can change 18 | // unregister() to register() below. Note this comes with some pitfalls. 19 | // Learn more about service workers: https://bit.ly/CRA-PWA 20 | serviceWorker.unregister(); 21 | -------------------------------------------------------------------------------- /src/components/DeletePost.js: -------------------------------------------------------------------------------- 1 | import React, { Component} from 'react' 2 | import { API, graphqlOperation } from 'aws-amplify' 3 | import { deletePost } from '../graphql/mutations' 4 | 5 | class DeletePost extends Component { 6 | 7 | 8 | handleDeletePost = async postId => { 9 | const input = { 10 | id: postId 11 | } 12 | 13 | await API.graphql(graphqlOperation(deletePost, {input})) 14 | } 15 | render() { 16 | const post = this.props.data 17 | return ( 18 | 19 | ) 20 | } 21 | } 22 | export default DeletePost; 23 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | 25 | #amplify 26 | amplify/\#current-cloud-backend 27 | amplify/.config/local-* 28 | amplify/mock-data 29 | amplify/backend/amplify-meta.json 30 | amplify/backend/awscloudformation 31 | build/ 32 | dist/ 33 | node_modules/ 34 | aws-exports.js 35 | awsconfiguration.json -------------------------------------------------------------------------------- /schema.graphql: -------------------------------------------------------------------------------- 1 | type Post @model{ 2 | id: ID! 3 | postOwnerId: String! 4 | postOwnerUsername: String! 5 | postTitle: String! 6 | postBody: String! 7 | createdAt: String 8 | comments: [Comment] @connection(name: "PostComments") #relationship 9 | likes: [Like] @connection(name: "PostLikes") 10 | 11 | } 12 | 13 | 14 | type Comment @model { 15 | id: ID! 16 | commentOwnerId: String! 17 | commentOwnerUsername: String! 18 | post: Post @connection(name: "PostComments") 19 | content: String! 20 | createdAt: String! 21 | 22 | } 23 | 24 | type Like @model { 25 | id: ID! 26 | numberLikes: Int! 27 | likeOwnerId: String! 28 | likeOwnerUsername: String! 29 | post: Post @connection(name: "PostLikes") 30 | } 31 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "blogfinal", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "aws-amplify": "^1.1.40", 7 | "aws-amplify-react": "^2.4.4", 8 | "react": "^16.9.0", 9 | "react-dom": "^16.9.0", 10 | "react-icons": "^3.7.0", 11 | "react-scripts": "3.1.1" 12 | }, 13 | "scripts": { 14 | "start": "react-scripts start", 15 | "build": "react-scripts build", 16 | "test": "react-scripts test", 17 | "eject": "react-scripts eject" 18 | }, 19 | "eslintConfig": { 20 | "extends": "react-app" 21 | }, 22 | "browserslist": { 23 | "production": [ 24 | ">0.2%", 25 | "not dead", 26 | "not op_mini all" 27 | ], 28 | "development": [ 29 | "last 1 chrome version", 30 | "last 1 firefox version", 31 | "last 1 safari version" 32 | ] 33 | } 34 | } 35 | -------------------------------------------------------------------------------- /src/components/commentPost.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react' 2 | 3 | class CommentPost extends Component { 4 | 5 | 6 | 7 | render() { 8 | const { content, commentOwnerUsername, createdAt} = this.props.commentData 9 | return ( 10 |
11 | 12 | {"Commment by: " } { commentOwnerUsername} 13 | {" on "} 14 | 19 | 20 |

{ content }

21 | 22 |
23 | ) 24 | } 25 | } 26 | export default CommentPost 27 | -------------------------------------------------------------------------------- /public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 12 | 13 | 17 | 18 | 27 | React App 28 | 29 | 30 | 31 |
32 | 42 | 43 | 44 | -------------------------------------------------------------------------------- /src/components/CreateCommentPost: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react' 2 | import { Auth, API, graphqlOperation } from 'aws-amplify' 3 | import { createComment } from '../graphql/mutations' 4 | 5 | 6 | 7 | 8 | class CreateCommentPost extends Component { 9 | 10 | state = { 11 | commentOwnerId: "", 12 | commentOwnerUsername: "", 13 | content: "" 14 | } 15 | 16 | componentDidMount = async () => { 17 | await Auth.currentUserInfo() 18 | .then(user => { 19 | this.setState({ 20 | commentOwnerId: user.attributes.sub, 21 | commentOwnerUsername: user.username 22 | }) 23 | }) 24 | } 25 | 26 | handleChangeContent = event => this.setState({ content: event.target.value}) 27 | handleAddComment = async event => { 28 | event.preventDefault() 29 | 30 | const input = { 31 | commentPostId: this.props.postId, 32 | commentOwnerId: this.state.commentOwnerId, 33 | commentOwnerUsername: this.state.commentOwnerUsername, 34 | content: this.state.content, 35 | createdAt: new Date().toISOString() 36 | } 37 | await API.graphql(graphqlOperation(createComment, { input })) 38 | 39 | this.setState({ content: ""}) // clear field 40 | } 41 | 42 | render() { 43 | 44 | return ( 45 |
46 | 47 |
49 | 50 |