Skip to content
GitLab
Explore
Sign in
Register
Primary navigation
Search or go to…
Project
react-material
Manage
Activity
Members
Labels
Plan
Issues
Issue boards
Milestones
Code
Merge requests
Repository
Branches
Commits
Tags
Repository graph
Compare revisions
Build
Pipelines
Jobs
Pipeline schedules
Artifacts
Deploy
Releases
Package registry
Model registry
Operate
Environments
Terraform modules
Monitor
Incidents
Analyze
Value stream analytics
Contributor analytics
CI/CD analytics
Repository analytics
Model experiments
Help
Help
Support
GitLab documentation
Compare GitLab plans
GitLab community forum
Contribute to GitLab
Provide feedback
Terms and privacy
Keyboard shortcuts
?
Snippets
Groups
Projects
Show more breadcrumbs
nahyun
react-material
Commits
a42cc79b
Commit
a42cc79b
authored
2 years ago
by
nahyun
Browse files
Options
Downloads
Patches
Plain Diff
드디어 끝냈다git add .
parent
697d040a
Branches
Branches containing commit
No related tags found
No related merge requests found
Changes
5
Show whitespace changes
Inline
Side-by-side
Showing
5 changed files
public/index.html
+3
-0
3 additions, 0 deletions
public/index.html
src/App.js
+55
-24
55 additions, 24 deletions
src/App.js
src/MusicList.js
+35
-34
35 additions, 34 deletions
src/MusicList.js
src/SearchPage.js
+32
-32
32 additions, 32 deletions
src/SearchPage.js
src/favorites.js
+5
-4
5 additions, 4 deletions
src/favorites.js
with
130 additions
and
94 deletions
public/index.html
+
3
−
0
View file @
a42cc79b
...
...
@@ -4,6 +4,9 @@
<title>
muiBasic
</title>
<meta
charset=
"UTF-8"
/>
<meta
name=
"viewport"
content=
"width=device-width, initial-scale=1, shrink-to-fit=no"
/>
<link
rel=
"shortcut icon"
href=
"/favicon.ico"
type=
"image/x-icon"
>
<link
rel=
"icon"
href=
"/favicon.ico"
type=
"image/x-icon"
>
</head>
<body>
<div
id=
"app"
></div>
...
...
This diff is collapsed.
Click to expand it.
src/App.js
+
55
−
24
View file @
a42cc79b
...
...
@@ -9,27 +9,58 @@ export default function App () {
const
[
currentTab
,
setCurrentTab
]
=
React
.
useState
(
0
);
const
[
searchResult
,
setSearchResult
]
=
React
.
useState
([]);
const
[
favorites
,
setFavorites
]
=
React
.
useState
([]);
//const [like, setLike] = React.useState([]);
const
handleTabChange
=
(
event
,
newValue
)
=>
{
setCurrentTab
(
newValue
);
}
//수정
//수정 - 버전1
// const handleOnLike = (item) => {
// let value = favorites.find(it => it.collectionId == item.collectionId)
// if (value) {
// let i = searchResult.find(it => it.collectionId == item.collectionId)
// if (i) {
// item.like = false;
// }
// let remains = favorites.filter((it) => it.collectionId !== item.collectionId);
// setFavorites(remains);
// } else {
// let i = searchResult.find(it => it.collectionId == item.collectionId)
// if (i) {
// item.like = true;
// }
// setFavorites([...favorites, item]);
// }
// };
//버전2
const
handleOnLike
=
(
item
)
=>
{
let
value
=
favorites
.
find
(
it
=>
it
.
collectionId
==
item
.
collectionId
)
if
(
value
)
{
let
i
=
searchResult
.
find
(
it
=>
it
.
collectionId
==
item
.
collectionId
)
if
(
i
)
{
let
favoriteItem
=
favorites
.
find
((
it
)
=>
it
.
collectionId
===
item
.
collectionId
);
if
(
favoriteItem
)
{
// item.like = false;
//favorite & search 둘다 삭제
let
a
=
searchResult
.
find
((
it
)
=>
it
.
collectionId
===
item
.
collectionId
);
if
(
a
)
{
item
.
like
=
false
;
}
let
remains
=
favorites
.
filter
((
it
)
=>
it
.
collectionId
!==
item
.
collectionId
);
setFavorites
(
remains
);
}
else
{
let
i
=
searchResult
.
find
(
it
=>
it
.
collectionId
==
item
.
collectionId
)
if
(
i
)
{
let
b
=
favorites
.
filter
((
it
)
=>
it
.
collectionId
!==
item
.
collectionId
);
setFavorites
(
b
);
}
else
{
let
a
=
searchResult
.
find
((
it
)
=>
it
.
collectionId
===
item
.
collectionId
);
if
(
a
)
{
item
.
like
=
true
;
}
setFavorites
([...
favorites
,
item
]);
//setFavorites([...favorites, { ...item, like: true }]);
}
// const updatedSearchResult = searchResult.map((it) =>
// it.collectionId === item.collectionId ? { ...it, like: !favoriteItem } : it
// );
// setSearchResult(updatedSearchResult);
};
return
(
...
...
@@ -50,7 +81,7 @@ export default function App () {
</Tabs>
</Box>
{currentTab == 0 && <SearchPage list={searchResult} onSearch={setSearchResult}/>}
{currentTab == 0 && <SearchPage list={searchResult} onSearch={setSearchResult}
onLike={handleOnLike}
/>}
{currentTab == 1 && <Favorites list={favorites} onLike={handleOnLike} />}
{currentTab == 2 &&
<Typography align="center" variant="h2">Item Three</Typography>}
...
...
This diff is collapsed.
Click to expand it.
src/MusicList.js
+
35
−
34
View file @
a42cc79b
...
...
@@ -19,9 +19,9 @@ const styles = {
export
default
function
MusicList
({
list
,
onLike
})
{
let
[
snackState
,
setSnackState
]
=
React
.
useState
({
open
:
false
,
msg
:
''
})
const
[
likes
,
setLikes
]
=
React
.
useState
({});
//
const [likes, setLikes] = React.useState({});
const
toggleFavorite
=
(
i
d
)
=>
()
=>
{
const
toggleFavorite
=
(
i
tem
)
=>
()
=>
{
//React Hooks useState() with Object
//https://stackoverflow.com/questions/54150783/react-hooks-usestate-with-object
//setLikes({...likes, [id] : !likes[id]});
...
...
@@ -29,7 +29,7 @@ export default function MusicList ({list, onLike}) {
//temp[id] = !temp[id]
//setlikes(temp) => 좋아요 이미 눌려져 있는거 다시 누르면 좋아요 취소
//setSnackState({...snackState, open : true, msg : `${id} is clicked` })
onLike
(
i
d
);
onLike
(
i
tem
);
}
const
handleSnackbarClose
=
(
event
,
reason
)
=>
{
...
...
@@ -47,7 +47,7 @@ export default function MusicList ({list, onLike}) {
<
div
>
{
list
.
map
(
item
=>
{
return
(
<
Card
sx
=
{
styles
.
card
}
key
=
{
item
.
collection
Name
}
>
<
Card
sx
=
{
styles
.
card
}
key
=
{
item
.
collection
Id
}
>
<
CardContent
>
<
Typography
variant
=
"
subtitle1
"
>
{
item
.
artistName
}
<
/Typography
>
<
Typography
variant
=
"
subtitle2
"
>
{
item
.
collectionCensoredName
}
<
/Typography
>
...
...
@@ -57,7 +57,8 @@ export default function MusicList ({list, onLike}) {
{
item
.
like
?
<
Favorite
/>
:
<
FavoriteBorder
/>
}
<
/IconButton
>
<
/CardActions
>
<
/Card>
)
<
/Card
>
);
})}
<
/div
>
);
...
...
This diff is collapsed.
Click to expand it.
src/SearchPage.js
+
32
−
32
View file @
a42cc79b
...
...
@@ -2,7 +2,7 @@ import React from 'react';
import
{
Button
,
TextField
}
from
'
@mui/material
'
;
import
MusicList
from
'
./MusicList
'
;
export
default
function
SearchPage
({
list
,
onSearch
}){
export
default
function
SearchPage
({
list
,
onSearch
,
onLike
})
{
const
[
searchWord
,
setSearchWord
]
=
React
.
useState
(
''
);
const
handleSearch
=
(
event
)
=>
{
...
...
@@ -12,12 +12,12 @@ export default function SearchPage({list, onSearch}){
fetch
(
`http://itunes.apple.com/search?term=
${
searchWord
}
&entity=album`
)
.
then
(
r
=>
r
.
json
()).
then
(
r
=>
{
console
.
log
(
r
);
const
updatedList
=
r
.
results
.
map
(
item
=>
({
...
item
,
show
:
true
,
liked
:
false
}));
onSearch
(
updatedList
);
//
const updatedList = r.results.map(item => ({
//
...item,
//
show: true,
//
liked: false
//
}));
onSearch
(
r
.
results
);
setSearchWord
(
''
);
}).
catch
(
e
=>
console
.
log
(
'
error when search musician
'
))
}
...
...
@@ -26,18 +26,18 @@ export default function SearchPage({list, onSearch}){
setSearchWord
(
event
.
target
.
value
);
}
const
handleLike
=
(
collectionName
,
liked
)
=>
{
const
updatedList
=
list
.
map
(
item
=>
{
if
(
item
.
collectionName
===
collectionName
)
{
return
{
...
item
,
liked
};
}
return
item
;
});
onSearch
(
updatedList
);
};
//
const handleLike = (collectionName, liked) => {
//
const updatedList = list.map(item => {
//
if (item.collectionName === collectionName) {
//
return {
//
...item,
//
liked
//
};
//
}
//
return item;
//
});
//
onSearch(updatedList);
//
};
return
(
<
React
.
Fragment
>
...
...
@@ -55,7 +55,7 @@ export default function SearchPage({list, onSearch}){
<
/div
>
<
/form
>
<
MusicList
list
=
{
list
}
onLike
=
{
handle
Like
}
/
>
<
MusicList
list
=
{
list
}
onLike
=
{
on
Like
}
/
>
<
/React.Fragment
>
)
}
\ No newline at end of file
This diff is collapsed.
Click to expand it.
src/favorites.js
+
5
−
4
View file @
a42cc79b
...
...
@@ -4,9 +4,10 @@ import MusicList from './MusicList';
const
Favorites
=
({
list
,
onLike
})
=>
{
return
(
<
div
>
<
React
.
Fragment
>
<
MusicList
list
=
{
list
}
onLike
=
{
onLike
}
/
>
<
/div
>
<
/React.Fragment
>
);
};
...
...
This diff is collapsed.
Click to expand it.
Preview
0%
Loading
Try again
or
attach a new file
.
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Save comment
Cancel
Please
register
or
sign in
to comment