Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings

Commit385271c

Browse files
added react router and routed detailed note
1 parent806a587 commit385271c

File tree

6 files changed

+92
-7
lines changed

6 files changed

+92
-7
lines changed

‎package-lock.json‎

Lines changed: 59 additions & 0 deletions
Some generated files are not rendered by default. Learn more aboutcustomizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
"name":"notes-app",
33
"version":"0.1.0",
44
"private":true,
5-
"proxy":"http://localhost:3001/",
5+
"proxy":"http://localhost:3001/",
66
"dependencies": {
77
"@testing-library/jest-dom":"^5.16.5",
88
"@testing-library/react":"^13.4.0",
@@ -15,6 +15,7 @@
1515
"react":"^18.2.0",
1616
"react-dom":"^18.2.0",
1717
"react-icons":"^4.4.0",
18+
"react-router-dom":"^6.4.0",
1819
"react-scripts":"5.0.1",
1920
"react-switch":"^7.0.0",
2021
"typescript":"^4.8.3",

‎src/App.tsx‎

Lines changed: 18 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,23 @@ import {
1515
}from'./actions';
1616
import{getNotes}from'./services/notes-service';
1717
importDetailedNotefrom'./pages/detailed-note/detailed-note';
18+
import{
19+
createBrowserRouter,
20+
RouterProvider,
21+
Route,
22+
Link,
23+
}from"react-router-dom";
1824

25+
constrouter=createBrowserRouter([
26+
{
27+
path:"/",
28+
element:<Home></Home>,
29+
},
30+
{
31+
path:"/:id",
32+
element:<DetailedNote></DetailedNote>,
33+
},
34+
]);
1935
functionApp(){
2036
const[theme,setTheme]=useState('light');
2137
const[checked,setChecked]=useState(false);
@@ -95,8 +111,8 @@ function App() {
95111
offColor="#333"
96112
onHandleColor="#000"
97113
></Switch>
98-
<Home></Home>
99-
<DetailedNote></DetailedNote>
114+
{/* here we want router */}
115+
<RouterProviderrouter={router}/>
100116
</ThemeContext.Provider>
101117
</StateContext.Provider>
102118
);

‎src/components/note/note.css‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,9 @@
1616
}
1717
.text{
1818
white-space: pre-wrap;
19-
overflow: hidden;
19+
}
20+
.text-hide{
21+
overflow: hidden;
2022
text-overflow: ellipsis;
2123
display: -webkit-box;
2224
-webkit-line-clamp:2;/* number of lines to show */

‎src/components/note/note.tsx‎

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ import { ThemeContext } from '../../context/theme/theme';
88
import{StateContext}from'../../context/state/state';
99
import{DELETE_NOTE,SET_EDIT_MODE,SET_NOTE_FOR_EDIT}from'../../actions';
1010
import{deleteNote}from'../../services/notes-service';
11+
import{Link}from"react-router-dom";
1112

1213
typeNoteProps={
1314
id:string;
@@ -45,8 +46,12 @@ function Note(props: NoteProps) {
4546
padding="1"
4647
{...optionalProps}
4748
>
48-
<>
49-
<divclassName={props.isDetailed?'':'text'}>{props.text}</div>
49+
<>
50+
<Linkto={props.id}style={{textDecoration:'none',
51+
color:`${theme==='dark'?'white':'black'}`}}>
52+
<divclassName={props.isDetailed?'text':'text text-hide'}>{props.text}</div>
53+
</Link>
54+
5055
<divclassName='left-corner date'>{props.updatedAt.toLocaleString()}</div>
5156
<divclassName="right-corner">
5257
<FaEditonClick={()=>editNote(props.note)}></FaEdit>

‎src/pages/detailed-note/detailed-note.tsx‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,11 +3,13 @@ import Note from '../../components/note/note';
33
import{useContext}from'react';
44
import{ThemeContext}from'../../context/theme/theme';
55
import{StateContext}from'../../context/state/state';
6+
import{useParams}from'react-router-dom';
67

78
functionDetailedNote(){
89
consttheme=useContext(ThemeContext);
910
const{ state}=useContext(StateContext);
10-
constnote=state.notes[0];
11+
const{id}=useParams()
12+
constnote=state.notes.find(n=>n.id===id);
1113
return(
1214
<divclassName={`detailed-note${theme}`}>
1315
<div>

0 commit comments

Comments
 (0)
[8]ページ先頭
©2009-2025 Movatter.jp