routing tansition

Author: sarveshhome

README.md

@@ -1,3 +1,10 @@
+# react quotes app
+
+
+`npm install react-router-dom`
+
+
+
 # Getting Started with Create React App
 
 This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).

src/components/quotes/QuoteForm.js

@@ -1,10 +1,13 @@
-import { useRef } from 'react';
+import { Fragment, useRef, useState } from 'react';
+import { Prompt } from 'react-router-dom';
 
 import Card from '../UI/Card';
 import LoadingSpinner from '../UI/LoadingSpinner';
 import classes from './QuoteForm.module.css';
 
 const QuoteForm = (props) => {
+  const [isEntering, setIsEntering] = useState(false);
+
   const authorInputRef = useRef();
   const textInputRef = useRef();
 
@@ -19,28 +22,48 @@ const QuoteForm = (props) => {
     props.onAddQuote({ author: enteredAuthor, text: enteredText });
   }
 
+  const finishEnteringHandler = () => {
+    setIsEntering(false);
+  };
+
+  const formFocusedHandler = () => {
+    setIsEntering(true);
+  };
+
   return (
-    <Card>
-      <form className={classes.form} onSubmit={submitFormHandler}>
-        {props.isLoading && (
-          <div className={classes.loading}>
-            <LoadingSpinner />
+    <Fragment>
+      <Prompt
+        when={isEntering}
+        message={(location) =>
+          'Are you sure you want to leave? All your entered data will be lost!'
+        }
+      />
+      <Card>
+        <form
+          onFocus={formFocusedHandler}
+          className={classes.form}
+          onSubmit={submitFormHandler}
+        >
+          {props.isLoading && (
+            <div className={classes.loading}>
+              <LoadingSpinner />
+            </div>
+          )}
+
+          <div className={classes.control}>
+            <label htmlFor='author'>Author</label>
+            <input type='text' id='author' ref={authorInputRef} />
+          </div>
+          <div className={classes.control}>
+            <label htmlFor='text'>Text</label>
+            <textarea id='text' rows='5' ref={textInputRef}></textarea>
+          </div>
+          <div className={classes.actions}>
+            <button onClick={finishEnteringHandler} className='btn'>Add Quote</button>
           </div>
-        )}
-
-        <div className={classes.control}>
-          <label htmlFor='author'>Author</label>
-          <input type='text' id='author' ref={authorInputRef} />
-        </div>
-        <div className={classes.control}>
-          <label htmlFor='text'>Text</label>
-          <textarea id='text' rows='5' ref={textInputRef}></textarea>
-        </div>
-        <div className={classes.actions}>
-          <button className='btn'>Add Quote</button>
-        </div>
-      </form>
-    </Card>
+        </form>
+      </Card>
+    </Fragment>
   );
 };
 

src/pages/AllQuotes.js

@@ -1,8 +1,8 @@
 import QuoteList from '../components/quotes/QuoteList';
 
 const DUMMY_QUOTES = [
-  { id: 'q1', author: 'sarvesh', text: 'Learning React is fun!' },
-  { id: 'q2', author: 'sarvesh singh', text: 'Learning React is great!' },
+  { id: 'q1', author: 'Sarvesh', text: 'Learning React is fun!' },
+  { id: 'q2', author: 'Sarvesh Singh', text: 'Learning React is great!' },
 ];
 
 const AllQuotes = () => {

src/pages/NewQuote.js

@@ -1,8 +1,14 @@
+import { useHistory } from 'react-router-dom';
+
 import QuoteForm from '../components/quotes/QuoteForm';
 
 const NewQuote = () => {
+  const history = useHistory();
+
   const addQuoteHandler = (quoteData) => {
     console.log(quoteData);
+    
+    history.push('/quotes');
   };
 
   return <QuoteForm onAddQuote={addQuoteHandler} />;