├── .github ├── CODEOWNERS ├── ISSUE_TEMPLATE.md └── PULL_REQUEST_TEMPLATE.md ├── .gitignore ├── CONTRIBUTING.md ├── LICENSE ├── NOTICE ├── README.md ├── craco.config.js ├── package-lock.json ├── package.json ├── public ├── data.json ├── favicon.ico └── index.html ├── src ├── App.js ├── components │ ├── AddAppointment.js │ ├── AppointmentInfo.js │ └── Search.js ├── index.css └── index.js ├── tailwind.config.js └── yarn.lock /.github/CODEOWNERS: -------------------------------------------------------------------------------- 1 | # Codeowners for these exercise files: 2 | # * (asterisk) deotes "all files and folders" 3 | # Example: * @producer @instructor 4 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE.md: -------------------------------------------------------------------------------- 1 | 7 | 8 | ## Issue Overview 9 | 10 | 11 | ## Describe your environment 12 | 13 | 14 | ## Steps to Reproduce 15 | 16 | 1. 17 | 2. 18 | 3. 19 | 4. 20 | 21 | ## Expected Behavior 22 | 23 | 24 | ## Current Behavior 25 | 26 | 27 | ## Possible Solution 28 | 29 | 30 | ## Screenshots / Video 31 | 32 | 33 | ## Related Issues 34 | 35 | -------------------------------------------------------------------------------- /.github/PULL_REQUEST_TEMPLATE.md: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules 3 | .tmp 4 | npm-debug.log 5 | -------------------------------------------------------------------------------- /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 2021 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 | React 10 | https://github.com/facebook/react 11 | Copyright (c) Facebook, Inc. and its affiliates. 12 | License: MIT 13 | https://opensource.org/licenses/MIT 14 | 15 | Tailwind CSS 16 | https://github.com/tailwindlabs/tailwindcss 17 | Copyright (c) Adam Wathan 18 | Copyright (c) Jonathan Reinink 19 | License: MIT 20 | https://opensource.org/licenses/MIT 21 | 22 | Post CSS 23 | https://github.com/postcss/postcss 24 | Copyright 2013 Andrey Sitnik 25 | License: MIT 26 | https://opensource.org/licenses/MIT 27 | 28 | 29 | Please note, this project may automatically load third party code from external 30 | repositories (for example, NPM modules, Composer packages, or other dependencies). 31 | If so, such third party code may be subject to other license terms than as set 32 | forth above. In addition, such third party code may also depend on and load 33 | multiple tiers of dependencies. Please review the applicable licenses of the 34 | additional dependencies. 35 | 36 | =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-= 37 | 38 | MIT License 39 | 40 | Permission is hereby granted, free of charge, to any person obtaining a copy 41 | of this software and associated documentation files (the "Software"), to deal 42 | in the Software without restriction, including without limitation the rights 43 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 44 | copies of the Software, and to permit persons to whom the Software is 45 | furnished to do so, subject to the following conditions: 46 | 47 | The above copyright notice and this permission notice shall be included in all 48 | copies or substantial portions of the Software. 49 | 50 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 51 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 52 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 53 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 54 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 55 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 56 | SOFTWARE. 57 | 58 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # React.js: Building an Interface 2 | This is the repository for the LinkedIn Learning course React.js: Building an Interface. The full course is available from [LinkedIn Learning][lil-course-url]. 3 | 4 | ![React.js: Building an Interface][lil-thumbnail-url] 5 | React is a JavaScript library with reusable components and a unique data rendering approach. Web interfaces that you create with React are flexible, fast, and lightweight. In this course, instructor Ray Villalobos reviews component architecture in React and covers key skills that you need to be able to build interfaces. Ray steps through how to install React and get started with components, debugging, and variables. He explains how you can pass data to a component, use the useState hook and conditional classes, and toggle items by passing the state to a sub-component and using values to hide or show sub-components. Ray describes how you can delete records, search with a filtered array, set up a sort, and more. He shows how you can finish up your application by creating the code for adding appointments. 6 | 7 | This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app). 8 | 9 | ## Available Scripts 10 | 11 | In the project directory, you can run: 12 | 13 | ### `yarn start` 14 | 15 | Runs the app in the development mode.\ 16 | Open [http://localhost:3000](http://localhost:3000) to view it in the browser. 17 | 18 | The page will reload if you make edits.\ 19 | You will also see any lint errors in the console. 20 | 21 | ### `yarn test` 22 | 23 | Launches the test runner in the interactive watch mode.\ 24 | See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information. 25 | 26 | ### `yarn build` 27 | 28 | Builds the app for production to the `build` folder.\ 29 | It correctly bundles React in production mode and optimizes the build for the best performance. 30 | 31 | The build is minified and the filenames include the hashes.\ 32 | Your app is ready to be deployed! 33 | 34 | See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information. 35 | 36 | ### `yarn eject` 37 | 38 | **Note: this is a one-way operation. Once you `eject`, you can’t go back!** 39 | 40 | If you aren’t satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project. 41 | 42 | Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you’re on your own. 43 | 44 | You don’t have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn’t feel obligated to use this feature. However we understand that this tool wouldn’t be useful if you couldn’t customize it when you are ready for it. 45 | 46 | ## Learn More 47 | 48 | You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started). 49 | 50 | To learn React, check out the [React documentation](https://reactjs.org/). 51 | 52 | ### Code Splitting 53 | 54 | This section has moved here: [https://facebook.github.io/create-react-app/docs/code-splitting](https://facebook.github.io/create-react-app/docs/code-splitting) 55 | 56 | ### Analyzing the Bundle Size 57 | 58 | This section has moved here: [https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size](https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size) 59 | 60 | ### Making a Progressive Web App 61 | 62 | This section has moved here: [https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app](https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app) 63 | 64 | ### Advanced Configuration 65 | 66 | This section has moved here: [https://facebook.github.io/create-react-app/docs/advanced-configuration](https://facebook.github.io/create-react-app/docs/advanced-configuration) 67 | 68 | ### Deployment 69 | 70 | This section has moved here: [https://facebook.github.io/create-react-app/docs/deployment](https://facebook.github.io/create-react-app/docs/deployment) 71 | 72 | ### `yarn build` fails to minify 73 | 74 | This section has moved here: [https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify](https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify) 75 | 76 | ### Instructor 77 | 78 | **Ray Villalobos** 79 | 80 | _Senior Staff Instructor at LinkedIn Learning_ 81 | 82 | Check out my other courses on [LinkedIn Learning](https://www.linkedin.com/learning/instructors/ray-villalobos?u=104). 83 | 84 | [lil-course-url]: https://www.linkedin.com/learning/react-js-building-an-interface-8551484 85 | [lil-thumbnail-url]: https://cdn.lynda.com/course/2880067/2880067-1619021943737-16x9.jpg 86 | -------------------------------------------------------------------------------- /craco.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | style: { 3 | postcss: { 4 | plugins: [ 5 | require('tailwindcss'), 6 | require('autoprefixer'), 7 | ], 8 | }, 9 | }, 10 | } -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "reactinterface", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@craco/craco": "^6.1.1", 7 | "@testing-library/jest-dom": "^5.11.4", 8 | "@testing-library/react": "^11.1.0", 9 | "@testing-library/user-event": "^12.1.10", 10 | "react": "^17.0.1", 11 | "react-dom": "^17.0.1", 12 | "react-icons": "^4.2.0", 13 | "react-scripts": "4.0.3", 14 | "web-vitals": "^1.0.1" 15 | }, 16 | "scripts": { 17 | "start": "craco start", 18 | "build": "craco build", 19 | "test": "craco test", 20 | "eject": "react-scripts eject" 21 | }, 22 | "eslintConfig": { 23 | "extends": [ 24 | "react-app", 25 | "react-app/jest" 26 | ] 27 | }, 28 | "browserslist": { 29 | "production": [ 30 | ">0.2%", 31 | "not dead", 32 | "not op_mini all" 33 | ], 34 | "development": [ 35 | "last 1 chrome version", 36 | "last 1 firefox version", 37 | "last 1 safari version" 38 | ] 39 | }, 40 | "devDependencies": { 41 | "@tailwindcss/forms": "^0.2.1", 42 | "@tailwindcss/postcss7-compat": "^2.0.3", 43 | "autoprefixer": "^9.8.6", 44 | "postcss": "^7.0.35", 45 | "tailwindcss": "npm:@tailwindcss/postcss7-compat@^2.0.3" 46 | } 47 | } 48 | -------------------------------------------------------------------------------- /public/data.json: -------------------------------------------------------------------------------- 1 | [ 2 | { 3 | "id": "0", 4 | "petName": "Pepe", 5 | "ownerName": "Reggie Tupp", 6 | "aptNotes": "It's time for this rabbit's post spaying surgery checkup", 7 | "aptDate": "2018-11-28 13:30" 8 | }, 9 | { 10 | "id": "1", 11 | "petName": "Rio", 12 | "ownerName": "Philip Ransu", 13 | "aptNotes": "Rio is up for his next round of vaccinations", 14 | "aptDate": "2018-11-28 10:15" 15 | }, 16 | { 17 | "id": "2", 18 | "petName": "Scooter", 19 | "ownerName": "Zachary Heilyn", 20 | "aptNotes": "Scooter has been pawing at his ear and may have an ear infection", 21 | "aptDate": "2018-11-28 14:45" 22 | }, 23 | { 24 | "id": "3", 25 | "petName": "Nadalee", 26 | "ownerName": "Krystle Valerija", 27 | "aptNotes": "This dog is coming in for his monthly nail trim and grooming", 28 | "aptDate": "2018-11-28 16:00" 29 | }, 30 | { 31 | "id": "4", 32 | "petName": "Scout", 33 | "ownerName": "Nicolette Bardeau", 34 | "aptNotes": "This dog is coming in for his annual checkup and vaccinations", 35 | "aptDate": "2018-11-28 9:00" 36 | }, 37 | { 38 | "id": "5", 39 | "petName": "Zera", 40 | "ownerName": "Austin Finnagan", 41 | "aptNotes": "This iguana's is showing signs of dementia associated with his old age", 42 | "aptDate": "2018-11-29 13:15" 43 | }, 44 | { 45 | "id": "6", 46 | "petName": "Oddball", 47 | "ownerName": "Howie Cadell", 48 | "aptNotes": "Oddball has a hard lump on right front foot", 49 | "aptDate": "2018-11-29 10:00" 50 | }, 51 | { 52 | "id": "7", 53 | "petName": "Millie", 54 | "ownerName": "Freya Terray", 55 | "aptNotes": "MIllie has exhibited signs of an upset stomach and is not eating regularly", 56 | "aptDate": "2018-11-29 11:45" 57 | }, 58 | { 59 | "id": "8", 60 | "petName": "Fluffy", 61 | "ownerName": "Tracy Westbay", 62 | "aptNotes": "Fluffy has some matted hair that needs to be groomed", 63 | "aptDate": "2018-11-29 14:30" 64 | }, 65 | { 66 | "id": "9", 67 | "petName": "Chyna", 68 | "ownerName": "Sandie Gobnet", 69 | "aptNotes": "This turtle is coming in for a checkup and to be tested for Salmonella", 70 | "aptDate": "2018-11-29 16:00" 71 | }, 72 | { 73 | "id": "10", 74 | "petName": "Wesley", 75 | "ownerName": "Nathan Cayden", 76 | "aptNotes": "This dog is returning for his next heartworm treatment visit", 77 | "aptDate": "2018-11-29 8:30" 78 | }, 79 | { 80 | "id": "11", 81 | "petName": "Pax", 82 | "ownerName": "Sarah Greer", 83 | "aptNotes": "This senior dog has been sluggish and showing lethargic behavior", 84 | "aptDate": "2018-11-30 10:15" 85 | }, 86 | { 87 | "id": "12", 88 | "petName": "Squiggles", 89 | "ownerName": "Madisyn Roope", 90 | "aptNotes": "Squiggles is due for her annual checkup and vaccinations", 91 | "aptDate": "2018-11-30 11:30" 92 | }, 93 | { 94 | "id": "13", 95 | "petName": "Lucky", 96 | "ownerName": "Lisa Choy-Wu", 97 | "aptNotes": "This cat has tartar buildup and her owner would like his teeth cleaned", 98 | "aptDate": "2018-11-30 14:30" 99 | }, 100 | { 101 | "id": "14", 102 | "petName": "Bailey", 103 | "ownerName": "Leslie Richardson", 104 | "aptNotes": "This cat is suffering from hotspots and dermatitis", 105 | "aptDate": "2018-11-30 15:45" 106 | }, 107 | { 108 | "id": "15", 109 | "petName": "Kiko", 110 | "ownerName": "Kathlyn Zlata", 111 | "aptNotes": "Kiko has been exhibiting excessive thirst and weight loss for the past few weeks", 112 | "aptDate": "2018-11-30 9:00" 113 | }, 114 | { 115 | "id": "16", 116 | "petName": "Felix", 117 | "ownerName": "Francine Benet", 118 | "aptNotes": "Felix's mom is coming in to follow up on lab work results", 119 | "aptDate": "2018-12-1 13:00" 120 | }, 121 | { 122 | "id": "17", 123 | "petName": "Sami", 124 | "ownerName": "Maggie Rickland", 125 | "aptNotes": "Sami has had some changes in his bathroom in habits", 126 | "aptDate": "2018-12-1 10:00" 127 | }, 128 | { 129 | "id": "18", 130 | "petName": "Cosmo", 131 | "ownerName": "Jennifer Dawson", 132 | "aptNotes": "Cosmo's mom would like us to check for arthritic conditions and do a routine checkup", 133 | "aptDate": "2018-12-1 11:30" 134 | }, 135 | { 136 | "id": "19", 137 | "petName": "Casper", 138 | "ownerName": "Dalania Devitto", 139 | "aptNotes": "This dog is coming in for a nail trim and grooming", 140 | "aptDate": "2018-12-1 15:15" 141 | }, 142 | { 143 | "id": "20", 144 | "petName": "Chip", 145 | "ownerName": "Jason Hemlock", 146 | "aptNotes": "This fish has a spotty white patch developing on his back ", 147 | "aptDate": "2018-12-1 8:45" 148 | }, 149 | { 150 | "id": "21", 151 | "petName": "Tibbs", 152 | "ownerName": "Shad Cayden", 153 | "aptNotes": "Tibbs has had an ongoing rash and cold symptoms and we are going to run allergy tests", 154 | "aptDate": "2018-12-2 13:30" 155 | }, 156 | { 157 | "id": "22", 158 | "petName": "Stich", 159 | "ownerName": "Dennis Nicholback", 160 | "aptNotes": "Stich has been having some stomach issues and is due for his vaccinations", 161 | "aptDate": "2018-12-2 10:15" 162 | }, 163 | { 164 | "id": "23", 165 | "petName": "Shadow", 166 | "ownerName": "Audry Topsy", 167 | "aptNotes": "This cat has a red swollen eye with a discharge", 168 | "aptDate": "2018-12-2 15:00" 169 | }, 170 | { 171 | "id": "24", 172 | "petName": "Nugget", 173 | "ownerName": "Darla Branson", 174 | "aptNotes": "This little fish Nugget, has a rash on his stomach area", 175 | "aptDate": "2018-12-2 9:00" 176 | } 177 | ] -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LinkedInLearning/react-interface-2880067/cdc7ad7eb4aba92e1bbad584ece3f039a0dc69e9/public/favicon.ico -------------------------------------------------------------------------------- /public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | React App 7 | 8 | 9 | 10 | 11 |
12 | 13 | 14 | -------------------------------------------------------------------------------- /src/App.js: -------------------------------------------------------------------------------- 1 | import { useState, useEffect, useCallback } from 'react' 2 | import { BiCalendar } from "react-icons/bi" 3 | import Search from "./components/Search" 4 | import AddAppointment from "./components/AddAppointment" 5 | import AppointmentInfo from "./components/AppointmentInfo" 6 | 7 | function App() { 8 | 9 | let [appointmentList, setAppointmentList] = useState([]); 10 | let [query, setQuery] = useState(""); 11 | let [sortBy, setSortBy] = useState("petName"); 12 | let [orderBy, setOrderBy] = useState("asc"); 13 | 14 | const filteredAppointments = appointmentList.filter( 15 | item => { 16 | return ( 17 | item.petName.toLowerCase().includes(query.toLowerCase()) || 18 | item.ownerName.toLowerCase().includes(query.toLowerCase()) || 19 | item.aptNotes.toLowerCase().includes(query.toLowerCase()) 20 | ) 21 | } 22 | ).sort((a, b) => { 23 | let order = (orderBy === 'asc') ? 1 : -1; 24 | return ( 25 | a[sortBy].toLowerCase() < b[sortBy].toLowerCase() 26 | ? -1 * order : 1 * order 27 | ) 28 | }) 29 | 30 | const fetchData = useCallback(() => { 31 | fetch('./data.json') 32 | .then(response => response.json()) 33 | .then(data => { 34 | setAppointmentList(data) 35 | }); 36 | }, []) 37 | 38 | useEffect(() => { 39 | fetchData() 40 | }, [fetchData]); 41 | 42 | return ( 43 |
44 |

45 | Your Appointments

46 | setAppointmentList([...appointmentList, myAppointment])} 48 | lastId={appointmentList.reduce((max, item) => Number(item.id) > max ? Number(item.id) : max, 0)} 49 | /> 50 | setQuery(myQuery)} 52 | orderBy={orderBy} 53 | onOrderByChange={mySort => setOrderBy(mySort)} 54 | sortBy={sortBy} 55 | onSortByChange={mySort => setSortBy(mySort)} 56 | /> 57 | 58 |
    59 | {filteredAppointments 60 | .map(appointment => ( 61 | 65 | setAppointmentList(appointmentList.filter(appointment => 66 | appointment.id !== appointmentId)) 67 | } 68 | /> 69 | )) 70 | } 71 |
72 |
73 | ); 74 | } 75 | 76 | export default App; 77 | -------------------------------------------------------------------------------- /src/components/AddAppointment.js: -------------------------------------------------------------------------------- 1 | import { BiCalendarPlus } from "react-icons/bi"; 2 | import { useState } from 'react'; 3 | 4 | const AddAppointment = ({ onSendAppointment, lastId }) => { 5 | const clearData = { 6 | ownerName: '', 7 | petName: '', 8 | aptDate: '', 9 | aptTime: '', 10 | aptNotes: '' 11 | } 12 | let [toggleForm, setToggleForm] = useState(false) 13 | let [formData, setFormData] = useState(clearData) 14 | 15 | function formDataPublish() { 16 | const appointmentInfo = { 17 | id: lastId + 1, 18 | ownerName: formData.ownerName, 19 | petName: formData.petName, 20 | aptDate: formData.aptDate + ' ' + formData.aptTime, 21 | aptNotes: formData.aptNotes 22 | } 23 | onSendAppointment(appointmentInfo); 24 | setFormData(clearData); 25 | setToggleForm(!toggleForm) 26 | } 27 | 28 | return ( 29 |
30 | 35 | { 36 | toggleForm && 37 |
38 |
39 | 42 |
43 | { setFormData({ ...formData, ownerName: event.target.value }) }} 45 | value={formData.ownerName} 46 | className="max-w-lg block w-full shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:max-w-xs sm:text-sm border-gray-300 rounded-md" /> 47 |
48 |
49 | 50 |
51 | 54 |
55 | { setFormData({ ...formData, petName: event.target.value }) }} 57 | value={formData.petName} 58 | className="max-w-lg block w-full shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:max-w-xs sm:text-sm border-gray-300 rounded-md" /> 59 |
60 |
61 | 62 |
63 | 66 |
67 | { setFormData({ ...formData, aptDate: event.target.value }) }} 69 | value={formData.aptDate} 70 | className="max-w-lg block w-full shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:max-w-xs sm:text-sm border-gray-300 rounded-md" /> 71 |
72 |
73 | 74 |
75 | 78 |
79 | { setFormData({ ...formData, aptTime: event.target.value }) }} 81 | value={formData.aptTime} 82 | className="max-w-lg block w-full shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:max-w-xs sm:text-sm border-gray-300 rounded-md" /> 83 |
84 |
85 | 86 |
87 | 90 |
91 | 95 |
96 |
97 | 98 |
99 |
100 | 103 |
104 |
105 |
106 | } 107 |
108 | ) 109 | } 110 | 111 | export default AddAppointment -------------------------------------------------------------------------------- /src/components/AppointmentInfo.js: -------------------------------------------------------------------------------- 1 | import { BiTrash } from "react-icons/bi" 2 | 3 | const AppointmentInfo = ({ appointment, onDeleteAppointment }) => { 4 | return ( 5 |
  • 6 | 9 |
    10 |
    11 | {appointment.petName} 12 | {appointment.aptDate} 13 |
    14 |
    Owner: {appointment.ownerName}
    15 |
    {appointment.aptNotes}
    16 |
    17 |
    • 18 | ) 19 | } 20 | 21 | export default AppointmentInfo -------------------------------------------------------------------------------- /src/components/Search.js: -------------------------------------------------------------------------------- 1 | import { BiSearch, BiCaretDown, BiCheck } from "react-icons/bi" 2 | import { useState } from 'react'; 3 | 4 | const DropDown = ({ toggle, sortBy, onSortByChange, orderBy, onOrderByChange }) => { 5 | if (!toggle) { 6 | return null; 7 | } 8 | return ( 9 |
    11 |
    12 |
    onSortByChange('petName')} 13 | className="px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-900 flex justify-between cursor-pointer" 14 | role="menuitem">Pet Name {(sortBy === 'petName') && }
    15 |
    onSortByChange('ownerName')} 16 | className="px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-900 flex justify-between cursor-pointer" 17 | role="menuitem">Owner Name {(sortBy === 'ownerName') && }
    18 |
    onSortByChange('aptDate')} 19 | className="px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-900 flex justify-between cursor-pointer" 20 | role="menuitem">Date {(sortBy === 'aptDate') && }
    21 |
    onOrderByChange('asc')} 22 | className="px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-900 flex justify-between cursor-pointer border-gray-1 border-t-2" 23 | role="menuitem">Asc {(orderBy === 'asc') && }
    24 |
    onOrderByChange('desc')} 25 | className="px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-900 flex justify-between cursor-pointer" 26 | role="menuitem">Desc {(orderBy === 'desc') && }
    27 |
    28 |
    29 | ) 30 | } 31 | 32 | const Search = ({ query, onQueryChange, sortBy, onSortByChange, orderBy, onOrderByChange }) => { 33 | let [toggleSort, setToggleSort] = useState(false); 34 | return ( 35 |
    36 |
    37 |
    38 | 39 |
    41 | { onQueryChange(event.target.value) }} 43 | className="pl-8 rounded-md focus:ring-indigo-500 focus:border-indigo-500 block w-full sm:text-sm border-gray-300" placeholder="Search" /> 44 |
    45 |
    46 | 50 | onSortByChange(mySort)} 53 | orderBy={orderBy} 54 | onOrderByChange={myOrder => onOrderByChange(myOrder)} 55 | /> 56 |
    57 |
    58 |
    59 |
    60 | ) 61 | } 62 | 63 | export default Search -------------------------------------------------------------------------------- /src/index.css: -------------------------------------------------------------------------------- 1 | @tailwind base; 2 | @tailwind components; 3 | @tailwind utilities; 4 | -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import './index.css'; 4 | import App from './App'; 5 | 6 | ReactDOM.render( 7 | 8 | 9 | , 10 | document.getElementById('root') 11 | ); 12 | -------------------------------------------------------------------------------- /tailwind.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | purge: ['./src/**/*.{js,jsx,ts,tsx}', './public/index.html'], 3 | darkMode: false, // or 'media' or 'class' 4 | theme: { 5 | extend: {}, 6 | }, 7 | variants: { 8 | extend: {}, 9 | }, 10 | plugins: [require('@tailwindcss/forms')] 11 | } 12 | --------------------------------------------------------------------------------