organized components into folders for clarity

Author: kesslerpillar

README.md

@@ -1887,4 +1887,32 @@ it('should delete note by id', () => {
 
 [Code for this section](https://github.com/pairing4good/tdd-amplify-react/commit/00f9b6c36f94cbf19fe79a6107eccad3b3faa462)
 
-</details>
+</details>
+
+<details>
+  <summary>Refactor Project Structure</summary>
+
+## Refactor Project Structure
+It's best to organize your code into a logical [folder structure](https://reactjs.org/docs/faq-structure.html) so that it's easier to understand and navigate.
+
+- Move all of the components into a `note` folder in `src`
+
+- note/
+  - App.js
+  - Footer.js
+  - Header.js
+  - NoteForm.js
+  - NoteList.js
+
+  - Move the `NoteRepository` component to a `common` folder in `src`
+
+- common/
+  - NoteRepository.js
+
+- Run all the tests
+- Green
+- Commit
+
+[Code for this section]()
+
+<details/>

src/NoteRepository.js renamed to src/common/NoteRepository.js

@@ -1,6 +1,6 @@
 import { API } from 'aws-amplify';
-import { listNotes } from './graphql/queries';
-import { createNote as createNoteMutation, deleteNote as deleteNoteMutation} from './graphql/mutations';
+import { listNotes } from '../graphql/queries';
+import { createNote as createNoteMutation, deleteNote as deleteNoteMutation} from '../graphql/mutations';
 
 export async function findAll(){
     const apiData = await API.graphql({ query: listNotes });

src/index.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 import './index.css';
-import App from './App';
+import App from './note/App';
 import reportWebVitals from './reportWebVitals';
 import Amplify from 'aws-amplify';
 import config from './aws-exports';

src/App.js renamed to src/note/App.js

@@ -1,9 +1,9 @@
-import './App.css';
+import '../App.css';
 import NoteForm from './NoteForm';
 import React, { useState, useEffect } from 'react';
 import NoteList from './NoteList';
 import Header from './Header';
-import { findAll, save, deleteById } from './NoteRepository';
+import { findAll, save, deleteById } from '../common/NoteRepository';
 import { withAuthenticator } from '@aws-amplify/ui-react'
 import Footer from './Footer';
 

src/Footer.js renamed to src/note/Footer.js

@@ -1,5 +1,5 @@
 import { render, screen } from '@testing-library/react';
-import Header from '../Header';
+import Header from '../note/Header';
 
 test('should display header', () => {
   render(<Header />);

src/Header.js renamed to src/note/Header.js

@@ -1,5 +1,5 @@
 import { render, screen, fireEvent } from '@testing-library/react';
-import NoteForm from "../NoteForm";
+import NoteForm from "../note/NoteForm";
 
 const createNoteCallback = jest.fn();
 const setFormDataCallback = jest.fn();