├── .gitignore ├── CONTRIBUTING.md ├── LICENSE ├── NOTICE ├── README.md ├── package-lock.json ├── package.json ├── public ├── favicon.ico ├── index.html └── manifest.json └── src ├── App.js ├── Attendees.js ├── AttendeesList.js ├── CheckIn.js ├── Firebase.js ├── FormError.js ├── Home.js ├── Login.js ├── Meetings.js ├── MeetingsList.js ├── Navigation.js ├── Register.js ├── Welcome.js ├── index.css ├── index.js └── registerServiceWorker.js /.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/ignore-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | 6 | # testing 7 | /coverage 8 | 9 | # production 10 | /build 11 | 12 | # misc 13 | .DS_Store 14 | .env.local 15 | .env.development.local 16 | .env.test.local 17 | .env.production.local 18 | 19 | npm-debug.log* 20 | yarn-debug.log* 21 | yarn-error.log* 22 | -------------------------------------------------------------------------------- /CONTRIBUTING.md: -------------------------------------------------------------------------------- 1 | 2 | Contribution Agreement 3 | ====================== 4 | 5 | This repository does not accept pull requests (PRs). All pull requests will be closed. 6 | 7 | However, if any contributions (through pull requests, issues, feedback or otherwise) are provided, as a contributor, you represent that the code you submit is your original work or that of your employer (in which case you represent you have the right to bind your employer). By submitting code (or otherwise providing feedback), you (and, if applicable, your employer) are licensing the submitted code (and/or feedback) to LinkedIn and the open source community subject to the BSD 2-Clause license. 8 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | LinkedIn Learning Exercise Files License Agreement 2 | ================================================== 3 | 4 | This License Agreement (the "Agreement") is a binding legal agreement 5 | between you (as an individual or entity, as applicable) and LinkedIn 6 | Corporation (“LinkedIn”). By downloading or using the LinkedIn Learning 7 | exercise files in this repository (“Licensed Materials”), you agree to 8 | be bound by the terms of this Agreement. If you do not agree to these 9 | terms, do not download or use the Licensed Materials. 10 | 11 | 1. License. 12 | - a. Subject to the terms of this Agreement, LinkedIn hereby grants LinkedIn 13 | members during their LinkedIn Learning subscription a non-exclusive, 14 | non-transferable copyright license, for internal use only, to 1) make a 15 | reasonable number of copies of the Licensed Materials, and 2) make 16 | derivative works of the Licensed Materials for the sole purpose of 17 | practicing skills taught in LinkedIn Learning courses. 18 | - b. Distribution. Unless otherwise noted in the Licensed Materials, subject 19 | to the terms of this Agreement, LinkedIn hereby grants LinkedIn members 20 | with a LinkedIn Learning subscription a non-exclusive, non-transferable 21 | copyright license to distribute the Licensed Materials, except the 22 | Licensed Materials may not be included in any product or service (or 23 | otherwise used) to instruct or educate others. 24 | 25 | 2. Restrictions and Intellectual Property. 26 | - a. You may not to use, modify, copy, make derivative works of, publish, 27 | distribute, rent, lease, sell, sublicense, assign or otherwise transfer the 28 | Licensed Materials, except as expressly set forth above in Section 1. 29 | - b. Linkedin (and its licensors) retains its intellectual property rights 30 | in the Licensed Materials. Except as expressly set forth in Section 1, 31 | LinkedIn grants no licenses. 32 | - c. You indemnify LinkedIn and its licensors and affiliates for i) any 33 | alleged infringement or misappropriation of any intellectual property rights 34 | of any third party based on modifications you make to the Licensed Materials, 35 | ii) any claims arising from your use or distribution of all or part of the 36 | Licensed Materials and iii) a breach of this Agreement. You will defend, hold 37 | harmless, and indemnify LinkedIn and its affiliates (and our and their 38 | respective employees, shareholders, and directors) from any claim or action 39 | brought by a third party, including all damages, liabilities, costs and 40 | expenses, including reasonable attorneys’ fees, to the extent resulting from, 41 | alleged to have resulted from, or in connection with: (a) your breach of your 42 | obligations herein; or (b) your use or distribution of any Licensed Materials. 43 | 44 | 3. Open source. This code may include open source software, which may be 45 | subject to other license terms as provided in the files. 46 | 47 | 4. Warranty Disclaimer. LINKEDIN PROVIDES THE LICENSED MATERIALS ON AN “AS IS” 48 | AND “AS AVAILABLE” BASIS. LINKEDIN MAKES NO REPRESENTATION OR WARRANTY, 49 | WHETHER EXPRESS OR IMPLIED, ABOUT THE LICENSED MATERIALS, INCLUDING ANY 50 | REPRESENTATION THAT THE LICENSED MATERIALS WILL BE FREE OF ERRORS, BUGS OR 51 | INTERRUPTIONS, OR THAT THE LICENSED MATERIALS ARE ACCURATE, COMPLETE OR 52 | OTHERWISE VALID. TO THE FULLEST EXTENT PERMITTED BY LAW, LINKEDIN AND ITS 53 | AFFILIATES DISCLAIM ANY IMPLIED OR STATUTORY WARRANTY OR CONDITION, INCLUDING 54 | ANY IMPLIED WARRANTY OR CONDITION OF MERCHANTABILITY OR FITNESS FOR A 55 | PARTICULAR PURPOSE, AVAILABILITY, SECURITY, TITLE AND/OR NON-INFRINGEMENT. 56 | YOUR USE OF THE LICENSED MATERIALS IS AT YOUR OWN DISCRETION AND RISK, AND 57 | YOU WILL BE SOLELY RESPONSIBLE FOR ANY DAMAGE THAT RESULTS FROM USE OF THE 58 | LICENSED MATERIALS TO YOUR COMPUTER SYSTEM OR LOSS OF DATA. NO ADVICE OR 59 | INFORMATION, WHETHER ORAL OR WRITTEN, OBTAINED BY YOU FROM US OR THROUGH OR 60 | FROM THE LICENSED MATERIALS WILL CREATE ANY WARRANTY OR CONDITION NOT 61 | EXPRESSLY STATED IN THESE TERMS. 62 | 63 | 5. Limitation of Liability. LINKEDIN SHALL NOT BE LIABLE FOR ANY INDIRECT, 64 | INCIDENTAL, SPECIAL, PUNITIVE, CONSEQUENTIAL OR EXEMPLARY DAMAGES, INCLUDING 65 | BUT NOT LIMITED TO, DAMAGES FOR LOSS OF PROFITS, GOODWILL, USE, DATA OR OTHER 66 | INTANGIBLE LOSSES . IN NO EVENT WILL LINKEDIN'S AGGREGATE LIABILITY TO YOU 67 | EXCEED $100. THIS LIMITATION OF LIABILITY SHALL: 68 | - i. APPLY REGARDLESS OF WHETHER (A) YOU BASE YOUR CLAIM ON CONTRACT, TORT, 69 | STATUTE, OR ANY OTHER LEGAL THEORY, (B) WE KNEW OR SHOULD HAVE KNOWN ABOUT 70 | THE POSSIBILITY OF SUCH DAMAGES, OR (C) THE LIMITED REMEDIES PROVIDED IN THIS 71 | SECTION FAIL OF THEIR ESSENTIAL PURPOSE; AND 72 | - ii. NOT APPLY TO ANY DAMAGE THAT LINKEDIN MAY CAUSE YOU INTENTIONALLY OR 73 | KNOWINGLY IN VIOLATION OF THESE TERMS OR APPLICABLE LAW, OR AS OTHERWISE 74 | MANDATED BY APPLICABLE LAW THAT CANNOT BE DISCLAIMED IN THESE TERMS. 75 | 76 | 6. Termination. This Agreement automatically terminates upon your breach of 77 | this Agreement or termination of your LinkedIn Learning subscription. On 78 | termination, all licenses granted under this Agreement will terminate 79 | immediately and you will delete the Licensed Materials. Sections 2-7 of this 80 | Agreement survive any termination of this Agreement. LinkedIn may discontinue 81 | the availability of some or all of the Licensed Materials at any time for any 82 | reason. 83 | 84 | 7. Miscellaneous. This Agreement will be governed by and construed in 85 | accordance with the laws of the State of California without regard to conflict 86 | of laws principles. The exclusive forum for any disputes arising out of or 87 | relating to this Agreement shall be an appropriate federal or state court 88 | sitting in the County of Santa Clara, State of California. If LinkedIn does 89 | not act to enforce a breach of this Agreement, that does not mean that 90 | LinkedIn has waived its right to enforce this Agreement. The Agreement does 91 | not create a partnership, agency relationship, or joint venture between the 92 | parties. Neither party has the power or authority to bind the other or to 93 | create any obligation or responsibility on behalf of the other. You may not, 94 | without LinkedIn’s prior written consent, assign or delegate any rights or 95 | obligations under these terms, including in connection with a change of 96 | control. Any purported assignment and delegation shall be ineffective. The 97 | Agreement shall bind and inure to the benefit of the parties, their respective 98 | successors and permitted assigns. If any provision of the Agreement is 99 | unenforceable, that provision will be modified to render it enforceable to the 100 | extent possible to give effect to the parties’ intentions and the remaining 101 | provisions will not be affected. This Agreement is the only agreement between 102 | you and LinkedIn regarding the Licensed Materials, and supersedes all prior 103 | agreements relating to the Licensed Materials. 104 | 105 | Last Updated: March 2019 106 | -------------------------------------------------------------------------------- /NOTICE: -------------------------------------------------------------------------------- 1 | Copyright 2020 LinkedIn Corporation 2 | All Rights Reserved. 3 | 4 | Licensed under the LinkedIn Learning Exercise File License (the "License"). 5 | See LICENSE in the project root for license information. 6 | 7 | ATTRIBUTIONS: 8 | 9 | Bootstrap 10 | https://getbootstrap.com 11 | Copyright (c) 2020 12 | License: MIT 13 | 14 | jQuery 15 | https://jquery.com/ 16 | Copyright (c) 2020 17 | License: MIT 18 | 19 | 20 | Popper 21 | https://popper.js.org/ 22 | Copyright (c) 2020 23 | License: MIT 24 | 25 | React 26 | https://reactjs.org/ 27 | Copyright (c) 2020 28 | License: MIT 29 | 30 | 31 | Please note, this project may automatically load third party code from external 32 | repositories (for example, NPM modules, Composer packages, or other dependencies). 33 | If so, such third party code may be subject to other license terms than as set 34 | forth above. In addition, such third party code may also depend on and load 35 | multiple tiers of dependencies. Please review the applicable licenses of the 36 | additional dependencies. 37 | 38 | =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-= 39 | 40 | MIT License 41 | 42 | Copyright (c) Facebook, Inc. and its affiliates. 43 | 44 | Permission is hereby granted, free of charge, to any person obtaining a copy 45 | of this software and associated documentation files (the "Software"), to deal 46 | in the Software without restriction, including without limitation the rights 47 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 48 | copies of the Software, and to permit persons to whom the Software is 49 | furnished to do so, subject to the following conditions: 50 | 51 | The above copyright notice and this permission notice shall be included in all 52 | copies or substantial portions of the Software. 53 | 54 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 55 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 56 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 57 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 58 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 59 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 60 | SOFTWARE. 61 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # React: SPAs 2 | This is the repository for the LinkedIn Learning course React: SPAs. The full course is available from [LinkedIn Learning][lil-course-url]. 3 | 4 | ## Course details 5 | You know the basics of React, but now you want to build a production-ready project. It's time to dig deeper than the UI. React: SPAs shows you how to build a polished single-page application (SPA), with tools for managing users and reading and writing data from a database. Instructor Ray Villalobos shows you how create React components, add user authentication and authorization, and integrate a Firebase database with custom routing. The project you complete in this course will allow you take your React projects to the next level, and create full-featured user experiences that are fluid and responsive, without constant page loads. 6 | 7 | ### Learning objectives 8 | - Routing 9 | - Integrating Firebase 10 | - Managing state in forms 11 | - Registering users 12 | - Logging users in and out 13 | - Creating, editing, and deleting records from Firebase 14 | - Filtering and searching data 15 | 16 | ## Instructions 17 | 18 | This repository has branches for each of the videos in the course. You can use the branch pop up menu in github to switch to a specific branch and take a look at the course at that stage. Or you can simply add `/tree/BRANCH_NAME` to the URL to go to the branch you want to peek at. 19 | 20 | ## Branches 21 | 22 | The branches are structured so that they correspond to the videos in the course. So, for example if I name a branch `02_03` then that branch corresponds to the second chapter and the third video in that chapter. The extra letter at the end of the name corresponds to the state of the branch. A `b` means that this is how the code looks at the beginning of the video, an `e` means that is how the code looked at the end of the video. The `master` branch usually has the final state of the code when I finish the course. 23 | 24 | ## Installing 25 | 26 | 1. Make sure you have these installed 27 | - [node.js](http://nodejs.org/) 28 | - [git](http://git-scm.com/) 29 | 2. Clone this repository into your local machine using the terminal (mac) or Gitbash (PC) `> git clone CLONEURL` 30 | 3. CD to the folder `cd FOLDERNAME` 31 | 4. Run `npm install` to install the project dependencies 32 | 5. Run `npm start` to start live preview server 33 | 34 | ## Downloading All Branches 35 | 36 | For more advanced users, you can also download all of the branches for this repository. 37 | 38 | 1. `mkdir NAME` 39 | 1. `cd NAME` 40 | 1. `git clone --bare CLONEURL .git` (make sure you add extra .git) 41 | 1. `git config --bool core.bare false` 42 | 1. `git reset --hard` 43 | 1. Run `npm install` to install the project dependencies 44 | 1. Run `npm start` to start live preview server 45 | 46 | For advanced instructions of how to work with this and other courses with github repos, check out the course: [Learning Git and Github](https://linkedin-learning.pxf.io/c/1252977/449670/8005?subId1=githubrepo&u=https%3A%2F%2Fwww.linkedin.com%2Flearning%2Flearning-git-and-github): 47 | 48 | ### Instructor 49 | 50 | **Ray Villalobos** 51 | 52 | _Senior Staff Instructor at LinkedIn Learning_ 53 | 54 | Check out some of my other courses on [LinkedIn Learning](https://linkedin-learning.pxf.io/c/1252977/449670/8005?subId1=githubrepo&u=https%3A%2F%2Fwww.linkedin.com%2Flearning%2Finstructors%2Fray-villalobos). You can follow me on [LinkedIn](https://www.linkedin.com/in/planetoftheweb/), read [my blog](http://raybo.org), [follow me on twitter](http://twitter.com/planetoftheweb), or check out my [youtube channel](http://youtube.com/planetoftheweb). 55 | 56 | [lil-course-url]: https://www.linkedin.com/learning/react-spas 57 | [lil-thumbnail-url]: https://cdn.lynda.com/course/774920/774920-636770101119345538-16x9.jpg 58 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "meetinglog", 3 | "version": "1.0.0", 4 | "private": true, 5 | "dependencies": { 6 | "@reach/router": "^1.1.1", 7 | "bootstrap": "^4.1.3", 8 | "firebase": "^5.4.2", 9 | "i": "^0.3.7", 10 | "npm": "^6.14.17", 11 | "react": "^16.4.2", 12 | "react-dom": "^16.4.2", 13 | "react-icons": "^3.0.5", 14 | "react-scripts": "5.0.1" 15 | }, 16 | "scripts": { 17 | "start": "react-scripts start", 18 | "build": "react-scripts build", 19 | "test": "react-scripts test --env=jsdom", 20 | "eject": "react-scripts eject" 21 | }, 22 | "license": "License in LICENSE" 23 | } 24 | -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LinkedInLearning/react-spas-774920/4c1d0c10b032e56dfd076ffbfbd55b4cff6953f7/public/favicon.ico -------------------------------------------------------------------------------- /public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | React: Single Page Applications 9 | 10 | 11 | 12 | 13 | 14 | 17 |
18 | 19 | 20 | -------------------------------------------------------------------------------- /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 | "start_url": "./index.html", 12 | "display": "standalone", 13 | "theme_color": "#000000", 14 | "background_color": "#ffffff" 15 | } 16 | -------------------------------------------------------------------------------- /src/App.js: -------------------------------------------------------------------------------- 1 | // Import React 2 | import React, { Component } from 'react'; 3 | import { Router, navigate } from '@reach/router'; 4 | import firebase from './Firebase'; 5 | 6 | import Home from './Home'; 7 | import Welcome from './Welcome'; 8 | import Navigation from './Navigation'; 9 | import Login from './Login'; 10 | import Register from './Register'; 11 | import Meetings from './Meetings'; 12 | import CheckIn from './CheckIn'; 13 | import Attendees from './Attendees'; 14 | 15 | class App extends Component { 16 | constructor() { 17 | super(); 18 | this.state = { 19 | user: null, 20 | displayName: null, 21 | userID: null 22 | }; 23 | } 24 | 25 | componentDidMount() { 26 | firebase.auth().onAuthStateChanged(FBUser => { 27 | if (FBUser) { 28 | this.setState({ 29 | user: FBUser, 30 | displayName: FBUser.displayName, 31 | userID: FBUser.uid 32 | }); 33 | 34 | const meetingsRef = firebase 35 | .database() 36 | .ref('meetings/' + FBUser.uid); 37 | 38 | meetingsRef.on('value', snapshot => { 39 | let meetings = snapshot.val(); 40 | let meetingsList = []; 41 | 42 | for (let item in meetings) { 43 | meetingsList.push({ 44 | meetingID: item, 45 | meetingName: meetings[item].meetingName 46 | }); 47 | } 48 | 49 | this.setState({ 50 | meetings: meetingsList, 51 | howManyMeetings: meetingsList.length 52 | }); 53 | }); 54 | } else { 55 | this.setState({ user: null }); 56 | } 57 | }); 58 | } 59 | 60 | registerUser = userName => { 61 | firebase.auth().onAuthStateChanged(FBUser => { 62 | FBUser.updateProfile({ 63 | displayName: userName 64 | }).then(() => { 65 | this.setState({ 66 | user: FBUser, 67 | displayName: FBUser.displayName, 68 | userID: FBUser.uid 69 | }); 70 | navigate('/meetings'); 71 | }); 72 | }); 73 | }; 74 | 75 | logOutUser = e => { 76 | e.preventDefault(); 77 | this.setState({ 78 | displayName: null, 79 | userID: null, 80 | user: null 81 | }); 82 | 83 | firebase 84 | .auth() 85 | .signOut() 86 | .then(() => { 87 | navigate('/login'); 88 | }); 89 | }; 90 | 91 | addMeeting = meetingName => { 92 | const ref = firebase 93 | .database() 94 | .ref(`meetings/${this.state.user.uid}`); 95 | ref.push({ meetingName: meetingName }); 96 | }; 97 | 98 | render() { 99 | return ( 100 |
101 | 105 | {this.state.user && ( 106 | 110 | )} 111 | 112 | 113 | 114 | 115 | 121 | 125 | 126 | 130 | 131 |
132 | ); 133 | } 134 | } 135 | 136 | export default App; 137 | -------------------------------------------------------------------------------- /src/Attendees.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import firebase from './Firebase'; 3 | import AttendeesList from './AttendeesList'; 4 | import { FaUndo, FaRandom } from 'react-icons/fa'; 5 | 6 | class Attendees extends Component { 7 | constructor(props) { 8 | super(props); 9 | this.state = { 10 | searchQuery: '', 11 | allAttendees: [], 12 | displayAttendees: [] 13 | }; 14 | 15 | this.handleChange = this.handleChange.bind(this); 16 | this.resetQuery = this.resetQuery.bind(this); 17 | this.chooseRandom = this.chooseRandom.bind(this); 18 | } 19 | 20 | componentDidMount() { 21 | const ref = firebase 22 | .database() 23 | .ref( 24 | `meetings/${this.props.userID}/${ 25 | this.props.meetingID 26 | }/attendees` 27 | ); 28 | 29 | ref.on('value', snapshot => { 30 | let attendees = snapshot.val(); 31 | let attendeesList = []; 32 | for (let item in attendees) { 33 | attendeesList.push({ 34 | attendeeID: item, 35 | attendeeName: attendees[item].attendeeName, 36 | attendeeEmail: attendees[item].attendeeEmail, 37 | star: attendees[item].star 38 | }); 39 | } 40 | this.setState({ 41 | allAttendees: attendeesList, 42 | displayAttendees: attendeesList 43 | }); 44 | }); 45 | } 46 | 47 | handleChange(e) { 48 | const itemName = e.target.name; 49 | const itemValue = e.target.value; 50 | 51 | this.setState({ [itemName]: itemValue }); 52 | } 53 | 54 | chooseRandom() { 55 | const randomAttendee = Math.floor( 56 | Math.random() * this.state.allAttendees.length 57 | ); 58 | this.resetQuery(); 59 | this.setState({ 60 | displayAttendees: [this.state.allAttendees[randomAttendee]] 61 | }); 62 | } 63 | 64 | resetQuery() { 65 | this.setState({ 66 | displayAttendees: this.state.allAttendees, 67 | searchQuery: '' 68 | }); 69 | } 70 | 71 | render() { 72 | const dataFilter = item => 73 | item.attendeeName 74 | .toLowerCase() 75 | .match(this.state.searchQuery.toLowerCase()) && true; 76 | const filteredAttendees = this.state.displayAttendees.filter( 77 | dataFilter 78 | ); 79 | 80 | return ( 81 |
82 |
83 |
84 |

85 | Attendees 86 |

87 | 88 |
89 |
90 |
91 | 99 |
100 | 107 | 114 |
115 |
116 |
117 |
118 |
119 |
120 | 126 |
127 | ); 128 | } 129 | } 130 | 131 | export default Attendees; 132 | -------------------------------------------------------------------------------- /src/AttendeesList.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import { GoTrashcan, GoMail, GoStar } from 'react-icons/go'; 3 | import firebase from './Firebase'; 4 | 5 | class AttendeesList extends Component { 6 | constructor(props) { 7 | super(props); 8 | 9 | this.deleteAttendee = this.deleteAttendee.bind(this); 10 | } 11 | 12 | deleteAttendee = (e, whichMeeting, whichAttendee) => { 13 | e.preventDefault(); 14 | const adminUser = this.props.adminUser; 15 | const ref = firebase 16 | .database() 17 | .ref( 18 | `meetings/${adminUser}/${whichMeeting}/attendees/${whichAttendee}` 19 | ); 20 | ref.remove(); 21 | }; 22 | 23 | toggleStar = (e, star, whichMeeting, whichAttendee) => { 24 | e.preventDefault(); 25 | const adminUser = this.props.adminUser; 26 | const ref = firebase 27 | .database() 28 | .ref( 29 | `meetings/${adminUser}/${whichMeeting}/attendees/${whichAttendee}/star` 30 | ); 31 | 32 | if (star === undefined) { 33 | ref.set(true); 34 | } else { 35 | ref.set(!star); 36 | } 37 | }; 38 | 39 | render() { 40 | const admin = 41 | this.props.adminUser === this.props.userID ? true : false; 42 | const attendees = this.props.attendees; 43 | const myAttendees = attendees.map(item => { 44 | return ( 45 |
49 |
50 |
56 | {admin && ( 57 |
58 | 77 | 82 | 83 | 84 | 97 |
98 | )} 99 | 100 |
{item.attendeeName}
101 |
102 |
103 |
104 | ); 105 | }); 106 | 107 | return ( 108 |
{myAttendees}
109 | ); 110 | } 111 | } 112 | 113 | export default AttendeesList; 114 | -------------------------------------------------------------------------------- /src/CheckIn.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import firebase from './Firebase'; 3 | import { navigate } from '@reach/router'; 4 | 5 | class CheckIn extends Component { 6 | constructor(props) { 7 | super(props); 8 | this.state = { 9 | displayName: '', 10 | email: '' 11 | }; 12 | 13 | this.handleChange = this.handleChange.bind(this); 14 | this.handleSubmit = this.handleSubmit.bind(this); 15 | } 16 | 17 | handleChange(e) { 18 | const itemName = e.target.name; 19 | const itemValue = e.target.value; 20 | 21 | this.setState({ [itemName]: itemValue }); 22 | } 23 | 24 | handleSubmit(e) { 25 | e.preventDefault(); 26 | 27 | const ref = firebase 28 | .database() 29 | .ref( 30 | `meetings/${this.props.userID}/${ 31 | this.props.meetingID 32 | }/attendees` 33 | ); 34 | ref.push({ 35 | attendeeName: this.state.displayName, 36 | attendeeEmail: this.state.email, 37 | star: false 38 | }); 39 | navigate( 40 | `/attendees/${this.props.userID}/${this.props.meetingID}` 41 | ); 42 | } 43 | 44 | render() { 45 | return ( 46 |
47 |
48 |
49 |
50 |
51 |
52 |

Check in

53 |
54 | 60 | 70 |
71 |
72 | 78 | 88 |
89 |
90 | 93 |
94 |
95 |
96 |
97 |
98 |
99 |
100 | ); 101 | } 102 | } 103 | 104 | export default CheckIn; 105 | -------------------------------------------------------------------------------- /src/Firebase.js: -------------------------------------------------------------------------------- 1 | import firebase from 'firebase/app'; 2 | import 'firebase/database'; 3 | import 'firebase/auth'; 4 | 5 | const config = { 6 | apiKey: 'AIzaSyCk9mIMo7jjWzJ2UYtA8435he3vl1mWdpc', 7 | authDomain: 'react-spas.firebaseapp.com', 8 | databaseURL: 'https://react-spas.firebaseio.com', 9 | projectId: 'react-spas', 10 | storageBucket: 'react-spas.appspot.com', 11 | messagingSenderId: '579151738498' 12 | }; 13 | 14 | firebase.initializeApp(config); 15 | 16 | export const provider = new firebase.auth.GoogleAuthProvider(); 17 | export const auth = firebase.auth(); 18 | 19 | export default firebase; 20 | -------------------------------------------------------------------------------- /src/FormError.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | 3 | class FormError extends Component { 4 | render() { 5 | const { theMessage } = this.props; 6 | 7 | return ( 8 |
9 | {theMessage} 10 |
11 | ); 12 | } 13 | } 14 | 15 | export default FormError; 16 | -------------------------------------------------------------------------------- /src/Home.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import { Link } from '@reach/router'; 3 | 4 | class Home extends Component { 5 | render() { 6 | const { user } = this.props; 7 | 8 | const biggerLead = { 9 | fontSize: 1.4 + 'em', 10 | fontWeight: 200 11 | }; 12 | 13 | return ( 14 |
15 |
16 |
17 |
23 | Meeting Log 24 |
25 |

26 | This simple app creates meetings, allows people to check 27 | in, and picks random users to award giveaways. It's a 28 | good example of a Single Page Application which includes 29 | connection to a database and routing. It's a practical 30 | way to learn React{' '} 31 | with Firebase. 32 |

33 | 34 | {user == null && ( 35 | 36 | 40 | Register 41 | 42 | 46 | Log In 47 | 48 | 49 | )} 50 | {user && ( 51 | 52 | Meetings 53 | 54 | )} 55 |
{' '} 56 | {/* columns */} 57 |
58 |
59 | ); 60 | } 61 | } 62 | 63 | export default Home; 64 | -------------------------------------------------------------------------------- /src/Login.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import firebase from './Firebase'; 3 | import FormError from './FormError'; 4 | import { navigate } from '@reach/router'; 5 | 6 | class Login extends Component { 7 | constructor(props) { 8 | super(props); 9 | this.state = { 10 | email: '', 11 | password: '', 12 | errorMessage: null 13 | }; 14 | 15 | this.handleChange = this.handleChange.bind(this); 16 | this.handleSubmit = this.handleSubmit.bind(this); 17 | } 18 | 19 | handleChange(e) { 20 | const itemName = e.target.name; 21 | const itemValue = e.target.value; 22 | 23 | this.setState({ [itemName]: itemValue }); 24 | } 25 | 26 | handleSubmit(e) { 27 | var registrationInfo = { 28 | email: this.state.email, 29 | password: this.state.password 30 | }; 31 | e.preventDefault(); 32 | 33 | firebase 34 | .auth() 35 | .signInWithEmailAndPassword( 36 | registrationInfo.email, 37 | registrationInfo.password 38 | ) 39 | .then(() => { 40 | navigate('/meetings'); 41 | }) 42 | .catch(error => { 43 | if (error.message !== null) { 44 | this.setState({ errorMessage: error.message }); 45 | } else { 46 | this.setState({ errorMessage: null }); 47 | } 48 | }); 49 | } 50 | 51 | render() { 52 | return ( 53 |
54 |
55 |
56 |
57 |
58 |
59 |

Log in

60 |
61 | {this.state.errorMessage !== null ? ( 62 | 65 | ) : null} 66 | 72 | 82 |
83 |
84 | 93 |
94 |
95 | 98 |
99 |
100 |
101 |
102 |
103 |
104 |
105 | ); 106 | } 107 | } 108 | 109 | export default Login; 110 | -------------------------------------------------------------------------------- /src/Meetings.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import MeetingsList from './MeetingsList'; 3 | 4 | class Meetings extends Component { 5 | constructor(props) { 6 | super(props); 7 | this.state = { 8 | meetingName: '' 9 | }; 10 | 11 | this.handleChange = this.handleChange.bind(this); 12 | this.handleSubmit = this.handleSubmit.bind(this); 13 | } 14 | 15 | handleChange(e) { 16 | const itemName = e.target.name; 17 | const itemValue = e.target.value; 18 | 19 | this.setState({ [itemName]: itemValue }); 20 | } 21 | 22 | handleSubmit(e) { 23 | e.preventDefault(); 24 | this.props.addMeeting(this.state.meetingName); 25 | this.setState({ meetingName: '' }); 26 | } 27 | 28 | render() { 29 | return ( 30 |
31 |
32 |
33 |

Add a Meeting

34 |
35 |
36 |
40 |
41 | 50 |
51 | 58 |
59 |
60 |
61 |
62 |
63 |
64 | 65 |
66 |
67 | {this.props.meetings && this.props.meetings.length ? ( 68 |
69 |

70 | Your Meetings 71 |

72 |
73 | ) : null} 74 | 75 | {this.props.meetings && ( 76 |
77 | 81 |
82 | )} 83 |
84 |
85 |
86 |
87 | ); 88 | } 89 | } 90 | 91 | export default Meetings; 92 | -------------------------------------------------------------------------------- /src/MeetingsList.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import firebase from './Firebase'; 3 | import { GoTrashcan, GoListUnordered } from 'react-icons/go'; 4 | import { FaLink } from 'react-icons/fa'; 5 | import { navigate } from '@reach/router'; 6 | 7 | class MeetingsList extends Component { 8 | constructor(props) { 9 | super(props); 10 | this.deleteMeeting = this.deleteMeeting.bind(this); 11 | } 12 | 13 | deleteMeeting = (e, whichMeeting) => { 14 | e.preventDefault(); 15 | const ref = firebase 16 | .database() 17 | .ref(`meetings/${this.props.userID}/${whichMeeting}`); 18 | ref.remove(); 19 | }; 20 | 21 | render() { 22 | const { meetings } = this.props; 23 | const myMeetings = meetings.map(item => { 24 | return ( 25 |
26 |
31 | 38 | 49 | 60 |
61 | 62 |
63 | {item.meetingName} 64 |
65 |
66 | ); 67 | }); 68 | 69 | return
{myMeetings}
; 70 | } 71 | } 72 | 73 | export default MeetingsList; 74 | -------------------------------------------------------------------------------- /src/Navigation.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import { FaUsers } from 'react-icons/fa'; 3 | import { Link } from '@reach/router'; 4 | 5 | class Navigation extends Component { 6 | render() { 7 | const { user, logOutUser } = this.props; 8 | 9 | return ( 10 | 43 | ); 44 | } 45 | } 46 | 47 | export default Navigation; 48 | -------------------------------------------------------------------------------- /src/Register.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import FormError from './FormError'; 3 | import firebase from './Firebase'; 4 | 5 | class Register extends Component { 6 | constructor(props) { 7 | super(props); 8 | this.state = { 9 | displayName: '', 10 | email: '', 11 | passOne: '', 12 | passTwo: '', 13 | errorMessage: null 14 | }; 15 | 16 | this.handleChange = this.handleChange.bind(this); 17 | this.handleSubmit = this.handleSubmit.bind(this); 18 | } 19 | 20 | handleChange(e) { 21 | const itemName = e.target.name; 22 | const itemValue = e.target.value; 23 | 24 | this.setState({ [itemName]: itemValue }, () => { 25 | if (this.state.passOne !== this.state.passTwo) { 26 | this.setState({ errorMessage: 'Passwords no not match' }); 27 | } else { 28 | this.setState({ errorMessage: null }); 29 | } 30 | }); 31 | } 32 | 33 | handleSubmit(e) { 34 | var registrationInfo = { 35 | displayName: this.state.displayName, 36 | email: this.state.email, 37 | password: this.state.passOne 38 | }; 39 | e.preventDefault(); 40 | 41 | firebase 42 | .auth() 43 | .createUserWithEmailAndPassword( 44 | registrationInfo.email, 45 | registrationInfo.password 46 | ) 47 | .then(() => { 48 | this.props.registerUser(registrationInfo.displayName); 49 | }) 50 | .catch(error => { 51 | if (error.message !== null) { 52 | this.setState({ errorMessage: error.message }); 53 | } else { 54 | this.setState({ errorMessage: null }); 55 | } 56 | }); 57 | } 58 | 59 | render() { 60 | return ( 61 |
62 |
63 |
64 |
65 |
66 |
67 |

Register

68 |
69 | {this.state.errorMessage !== null ? ( 70 | 73 | ) : null} 74 |
75 | 81 | 91 |
92 |
93 |
94 | 100 | 110 |
111 |
112 |
113 | 121 |
122 |
123 | 132 |
133 |
134 |
135 | 138 |
139 |
140 |
141 |
142 |
143 |
144 |
145 | ); 146 | } 147 | } 148 | 149 | export default Register; 150 | -------------------------------------------------------------------------------- /src/Welcome.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import { Link } from '@reach/router'; 3 | 4 | class Welcome extends Component { 5 | render() { 6 | const { userName, logOutUser } = this.props; 7 | 8 | return ( 9 |
10 | 11 | Welcome {userName} 12 | 13 | , 14 | logOutUser(e)} 18 | > 19 | log out 20 | 21 |
22 | ); 23 | } 24 | } 25 | 26 | export default Welcome; 27 | -------------------------------------------------------------------------------- /src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | font-weight: 200; 3 | } 4 | 5 | input, 6 | nav-item { 7 | font-weight: 200; 8 | line-height: 110%; 9 | } 10 | -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | 4 | import App from './App'; 5 | 6 | import 'bootstrap/dist/css/bootstrap.css'; 7 | import './index.css'; 8 | 9 | import registerServiceWorker from './registerServiceWorker'; 10 | 11 | ReactDOM.render( 12 | , 13 | 14 | document.getElementById('root') 15 | ); 16 | registerServiceWorker(); 17 | -------------------------------------------------------------------------------- /src/registerServiceWorker.js: -------------------------------------------------------------------------------- 1 | // In production, we register a service worker to serve assets from local cache. 2 | 3 | // This lets the app load faster on subsequent visits in production, and gives 4 | // it offline capabilities. However, it also means that developers (and users) 5 | // will only see deployed updates on the "N+1" visit to a page, since previously 6 | // cached resources are updated in the background. 7 | 8 | // To learn more about the benefits of this model, read https://goo.gl/KwvDNy. 9 | // This link also includes instructions on opting out of this behavior. 10 | 11 | const isLocalhost = Boolean( 12 | window.location.hostname === 'localhost' || 13 | // [::1] is the IPv6 localhost address. 14 | window.location.hostname === '[::1]' || 15 | // 127.0.0.1/8 is considered localhost for IPv4. 16 | window.location.hostname.match( 17 | /^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/ 18 | ) 19 | ); 20 | 21 | export default function register() { 22 | if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) { 23 | // The URL constructor is available in all browsers that support SW. 24 | const publicUrl = new URL(process.env.PUBLIC_URL, window.location); 25 | if (publicUrl.origin !== window.location.origin) { 26 | // Our service worker won't work if PUBLIC_URL is on a different origin 27 | // from what our page is served on. This might happen if a CDN is used to 28 | // serve assets; see https://github.com/facebookincubator/create-react-app/issues/2374 29 | return; 30 | } 31 | 32 | window.addEventListener('load', () => { 33 | const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`; 34 | 35 | if (isLocalhost) { 36 | // This is running on localhost. Lets check if a service worker still exists or not. 37 | checkValidServiceWorker(swUrl); 38 | 39 | // Add some additional logging to localhost, pointing developers to the 40 | // service worker/PWA documentation. 41 | navigator.serviceWorker.ready.then(() => { 42 | console.log( 43 | 'This web app is being served cache-first by a service ' + 44 | 'worker. To learn more, visit https://goo.gl/SC7cgQ' 45 | ); 46 | }); 47 | } else { 48 | // Is not local host. Just register service worker 49 | registerValidSW(swUrl); 50 | } 51 | }); 52 | } 53 | } 54 | 55 | function registerValidSW(swUrl) { 56 | navigator.serviceWorker 57 | .register(swUrl) 58 | .then(registration => { 59 | registration.onupdatefound = () => { 60 | const installingWorker = registration.installing; 61 | installingWorker.onstatechange = () => { 62 | if (installingWorker.state === 'installed') { 63 | if (navigator.serviceWorker.controller) { 64 | // At this point, the old content will have been purged and 65 | // the fresh content will have been added to the cache. 66 | // It's the perfect time to display a "New content is 67 | // available; please refresh." message in your web app. 68 | console.log('New content is available; please refresh.'); 69 | } else { 70 | // At this point, everything has been precached. 71 | // It's the perfect time to display a 72 | // "Content is cached for offline use." message. 73 | console.log('Content is cached for offline use.'); 74 | } 75 | } 76 | }; 77 | }; 78 | }) 79 | .catch(error => { 80 | console.error('Error during service worker registration:', error); 81 | }); 82 | } 83 | 84 | function checkValidServiceWorker(swUrl) { 85 | // Check if the service worker can be found. If it can't reload the page. 86 | fetch(swUrl) 87 | .then(response => { 88 | // Ensure service worker exists, and that we really are getting a JS file. 89 | if ( 90 | response.status === 404 || 91 | response.headers.get('content-type').indexOf('javascript') === -1 92 | ) { 93 | // No service worker found. Probably a different app. Reload the page. 94 | navigator.serviceWorker.ready.then(registration => { 95 | registration.unregister().then(() => { 96 | window.location.reload(); 97 | }); 98 | }); 99 | } else { 100 | // Service worker found. Proceed as normal. 101 | registerValidSW(swUrl); 102 | } 103 | }) 104 | .catch(() => { 105 | console.log( 106 | 'No internet connection found. App is running in offline mode.' 107 | ); 108 | }); 109 | } 110 | 111 | export function unregister() { 112 | if ('serviceWorker' in navigator) { 113 | navigator.serviceWorker.ready.then(registration => { 114 | registration.unregister(); 115 | }); 116 | } 117 | } 118 | --------------------------------------------------------------------------------