added react router and routed detailed note

Author: abhishekrathore

package-lock.json

@@ -2,7 +2,7 @@
   "name": "notes-app",
   "version": "0.1.0",
   "private": true,
-  "proxy":"http://localhost:3001/",
+  "proxy": "http://localhost:3001/",
   "dependencies": {
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^13.4.0",
@@ -15,6 +15,7 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-icons": "^4.4.0",
+    "react-router-dom": "^6.4.0",
     "react-scripts": "5.0.1",
     "react-switch": "^7.0.0",
     "typescript": "^4.8.3",

package.json

@@ -15,7 +15,23 @@ import {
 } from './actions';
 import { getNotes } from './services/notes-service';
 import DetailedNote from './pages/detailed-note/detailed-note';
+import {
+  createBrowserRouter,
+  RouterProvider,
+  Route,
+  Link,
+} from "react-router-dom";
 
+const router = createBrowserRouter([
+  {
+    path: "/",
+    element: <Home></Home>,
+  },
+  {
+    path: "/:id",
+    element: <DetailedNote></DetailedNote>,
+  },
+]);
 function App() {
   const [theme, setTheme] = useState('light');
   const [checked, setChecked] = useState(false);
@@ -95,8 +111,8 @@ function App() {
           offColor="#333"
           onHandleColor="#000"
         ></Switch>
-        <Home></Home>
-        <DetailedNote></DetailedNote>
+        {/* here we want router */}
+        <RouterProvider router={router} />
       </ThemeContext.Provider>
     </StateContext.Provider>
   );

src/App.tsx

@@ -16,7 +16,9 @@
 }
 .text{
     white-space: pre-wrap;
-    overflow: hidden;
+}
+.text-hide{
+   overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2; /* number of lines to show */

src/components/note/note.css

@@ -8,6 +8,7 @@ import { ThemeContext } from '../../context/theme/theme';
 import { StateContext } from '../../context/state/state';
 import { DELETE_NOTE, SET_EDIT_MODE, SET_NOTE_FOR_EDIT } from '../../actions';
 import { deleteNote } from '../../services/notes-service';
+import { Link } from "react-router-dom";
 
 type NoteProps = {
   id: string;
@@ -45,8 +46,12 @@ function Note(props: NoteProps) {
       padding="1"
       {...optionalProps}
     >
-      <>
-        <div className={props.isDetailed?'':'text'}>{props.text}</div>
+      <> 
+      <Link to={props.id} style={{textDecoration:'none',
+     color:`${theme === 'dark'? 'white':'black'}`}}>
+           <div className={props.isDetailed?'text':'text text-hide'}>{props.text}</div>
+      </Link>
+
         <div className='left-corner date'>{props.updatedAt.toLocaleString()}</div>
         <div className="right-corner">
           <FaEdit onClick={() => editNote(props.note)}></FaEdit>

src/components/note/note.tsx

@@ -3,11 +3,13 @@ import Note from '../../components/note/note';
 import { useContext } from 'react';
 import { ThemeContext } from '../../context/theme/theme';
 import { StateContext } from '../../context/state/state';
+import { useParams } from 'react-router-dom';
 
 function DetailedNote() {
   const theme = useContext(ThemeContext);
   const { state } = useContext(StateContext);
-  const note = state.notes[0];
+  const {id}  = useParams()
+  const note = state.notes.find(n=>n.id===id);
   return (
     <div className={`detailed-note ${theme}`}>
       <div>