Initial commit

d57186df · DongHwi Kim · d57186df · d57186df · d57186df · d57186df
Commit d57186df authored 2 years ago by DongHwi Kim
--- a/.babelrc
+++ b/.babelrc
+{
+    "presets": [
+        "@babel/preset-env",
+        "@babel/preset-react"
+    ]
+}
\ No newline at end of file
--- a/.gitignore
+++ b/.gitignore
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# production
+/build
+
+package-lock.json
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
--- a/.gitlab-ci.yml
+++ b/.gitlab-ci.yml
+pages:
+  stage: deploy
+  script:
+  - echo 'Nothing to do...'
+  artifacts:
+    paths:
+    - public
+  only:
+  - master
+  tags:
+  - pages
--- a/README.md
+++ b/README.md
+# muiStarterKit
+
--- a/package.json
+++ b/package.json
+{
+  "name": "muibasic_starterkit",
+  "version": "1.0.0",
+  "description": "Boiler plate for MaterialUI Development",
+  "main": "webpack.config.js",
+  "dependencies": {
+    "@emotion/react": "^11.9.3",
+    "@emotion/styled": "^11.9.3",
+    "@mui/icons-material": "^5.13.7",
+    "@mui/material": "^5.8.6"
+  },
+  "devDependencies": {
+    "@babel/cli": "^7.18.6",
+    "@babel/core": "^7.18.6",
+    "@babel/plugin-proposal-class-properties": "^7.18.6",
+    "@babel/preset-env": "^7.18.6",
+    "@babel/preset-react": "^7.18.6",
+    "babel-loader": "^8.2.5",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "webpack": "^5.73.0",
+    "webpack-cli": "^4.10.0",
+    "webpack-dev-server": "^4.13.2"
+  },
+  "scripts": {
+    "start": "webpack-dev-server --open --mode development --port 3000",
+    "build": "webpack --mode development",
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "keywords": [
+    "Material",
+    "UI",
+    "ReactJS"
+  ],
+  "author": "Jae Young Choi",
+  "license": "MIT"
+}
--- a/public/app.bundle.js
+++ b/public/app.bundle.js
--- a/public/index.html
+++ b/public/index.html
+<!doctype html>
+<html>
+	<head>
+		<title> muiBasic </title>
+		<meta charset="UTF-8"/>
+		<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
+	</head>
+	<body>
+		<div id="app"></div>
+		<script src="./app.bundle.js" type="text/javascript"></script>
+	</body>
+</html>
--- a/src/App.js
+++ b/src/App.js
+import React from 'react';
+import {Box,Tabs,Tab,Typography, AppBar,CssBaseline} from '@mui/material';
+import MusicList from './MusicList';
+import music_list from './data';
+import SearchPage from './Search';
+import FavoriteList from './Favorite';
+
+export default function App () {
+    const [currentTab, setCurrentTab] = React.useState(0);
+    const [searchResult, setSearchResult] = React.useState([]);
+    const [likes, setLikes] = React.useState([]);
+    const handleTabChange = (event, newValue) => {
+        setCurrentTab(newValue);
+    }
+    const handleLike = (item) => {
+        if(likes.includes(item.collectionId)){
+            setLikes(likes.filter(it => it != item.collectionId))
+        }else{
+            setLikes([...likes, item]);
+        }
+    }
+    return (
+        <React.Fragment>
+            <AppBar position = "fixed">
+                <Typography align = "center" variant="h3" color="inherit">Dong's Favorite Music</Typography>
+            </AppBar>
+
+            <div style={{height:60, width:'100%'}}></div>
+
+            
+            <Box sx={{borderButtom:1, borderColor:'divider'}}>
+                <Tabs value={currentTab} onChange={handleTabChange} aria-label="basic tabs" centered>
+                    <Tab label="Search Music" value={0} />
+                    <Tab label="Favorites" value={1} />
+                    <Tab label="More Contents" value={2} />
+
+                </Tabs>
+
+            </Box>
+            { currentTab == 0 && <SearchPage list={searchResult} onSearch={setSearchResult} onsetLikes={handleLike}/>}
+            { currentTab == 1 && <FavoriteList list={likes} onsetLikes={handleLike} />}
+            { currentTab == 2 && <Typography align="center" variant="h2">Item Three</Typography>}
+        </React.Fragment>
+    )
+}
+
--- a/src/Favorite.js
+++ b/src/Favorite.js
+import React from 'react';
+import {Card, CardContent,CardActions, Typography, IconButton} from '@mui/material';
+import {Favorite, FavoriteBorder} from '@mui/icons-material';
+import SnackMsg from './snackbar';
+
+const styles = {
+    content :{},
+    layout : {
+        display : 'flex',
+        justifyContent : 'center'
+    },
+    card : {
+        minWidth : 275,
+        maxWidth : 600,
+        marginBottom : "20pt",
+        marginLeft : 'auto',
+        marginRight : 'auto',
+    },
+};
+
+export default function Favoritee({list,onsetLikes}){
+
+
+    let [snackState, setSnakState] = React.useState({open:false, msg:''})
+    const toggleFavorite = (item) => () => {
+        onsetLikes(item);
+        setSnakState({...snackState, open:true, msg:`${item.collectionName} is clicked`})
+    }
+    return (
+        <div>
+            {list.map(item => {
+                return (
+                    <Card sx={styles.card} key={item.collectionId}>
+                        <CardContent>
+                            <Typography variant="subtitle1"> {item.artistName}</Typography>
+                            <Typography variant="subtitle2">{item.collectionCensoredName}</Typography>
+                        </CardContent>
+                        <CardActions>
+                            <IconButton onClick={toggleFavorite(item)}>
+                                {list.includes(item.collectionId) ?
+                                 <Favorite /> : <FavoriteBorder />}
+                            </IconButton>
+                        </CardActions>
+                    </Card>
+                )
+            })}
+        </div>
+
+    )
+}
\ No newline at end of file
--- a/src/MusicList.js
+++ b/src/MusicList.js
+import React from 'react';
+import {Card, CardContent,CardActions, Typography, IconButton} from '@mui/material';
+import {Favorite, FavoriteBorder} from '@mui/icons-material';
+import SnackMsg from './snackbar';
+
+const styles = {
+    content :{},
+    layout : {
+        display : 'flex',
+        justifyContent : 'center'
+    },
+    card : {
+        minWidth : 275,
+        maxWidth : 600,
+        marginBottom : "20pt",
+        marginLeft : 'auto',
+        marginRight : 'auto',
+    },
+};
+
+export default function MusicList({list,onsetLikes}){
+    let [snackState, setSnakState] = React.useState({open:false, msg:''})
+    const toggleFavorite = (item) => () => {
+        onsetLikes(item);
+        setSnakState({...snackState, open:true, msg:`${item.collectionName} is clicked`})
+    }
+    const handleSnackbarClose = (event,reason) => {
+        if(reason == 'clickaway'){
+            return;
+        }
+        setSnakState({open:false, msg:''});
+    }
+    return (
+        <div>
+            {list.map(item => {
+                return (
+                    <Card sx={styles.card} key={item.collectionId}>
+                        <CardContent>
+                            <Typography variant="subtitle1"> {item.artistName}</Typography>
+                            <Typography variant="subtitle2">{item.collectionCensoredName}</Typography>
+                        </CardContent>
+                        <CardActions>
+                            <IconButton onClick={toggleFavorite(item)}>
+                                {list.includes(item.collectionId) ?
+                                 <Favorite /> : <FavoriteBorder />}
+                            </IconButton>
+                        </CardActions>
+                    </Card>
+                )
+            })}
+            <SnackMsg open = {snackState.open} message = {snackState.msg} onClose={handleSnackbarClose} />
+        </div>
+
+    )
+}
\ No newline at end of file
--- a/src/Search.js
+++ b/src/Search.js
+import React from 'react';
+import {Button, TextField} from '@mui/material';
+import MusicList from './MusicList';
+
+export default function SearchPage({list, onSearch, onsetLikes}){
+    const [searchWord, setSearchWord] = React.useState('');
+
+    const handleSearch = (event) =>{
+        event.preventDefault();
+        console.log(searchWord);
+        setSearchWord('');
+        fetch(`http://itunes.apple.com/search?term=${searchWord}&entity=album`)
+        .then(r => r.json()).then(r => {
+            console.log(r);
+            onSearch(r.results);
+            setSearchWord('');
+        }).catch(e => console.log('error when search musician'));
+    }
+
+    const handleSearchTextChange = (event) => {
+        setSearchWord(event.target.value);
+    }
+
+    return(
+        <React.Fragment>
+            <form style={{display: 'flex',marginTop:20, marginBottom:15}}>
+                <div style={{display: 'flex', marginLeft:'auto',marginRight:'auto',}}>
+                    <TextField variant='outlined' label="Music Album Search" type="search" style={{width:450}} onChange = {handleSearchTextChange} value={searchWord}>
+                        
+                    </TextField>
+                    <Button variant='contained' color="primary" type="submit" onClick={handleSearch} style={{marginLeft:20}}>
+                        Search
+                    </Button>
+
+                </div>
+
+            </form>
+            <MusicList list={list} onsetLikes={onsetLikes}>
+
+            </MusicList>
+        </React.Fragment>
+    )
+}
\ No newline at end of file
--- a/src/data.js
+++ b/src/data.js
--- a/src/index.js
+++ b/src/index.js
+import React from 'react';
+import ReactDOM from 'react-dom';
+import App from './App';
+
+ReactDOM.render(<App/>, document.getElementById('app'));
--- a/src/snackbar.js
+++ b/src/snackbar.js
+import React from 'react';
+
+
+import {Alert, Snackbar, snackbar} from '@mui/material';
+
+const SnackMsg = (props) => {
+    return (
+        <Snackbar 
+        open={props.open}
+        anchorOrigin={{vertical: 'bottom', horizontal:'right'}}
+        autoHideDuration={3000}
+        onClose={props.onClose}
+        message={props.message}>
+        </Snackbar>
+    )
+}
+export default SnackMsg;
\ No newline at end of file
--- a/webpack.config.js
+++ b/webpack.config.js
+const path = require('path');
+const webpack = require('webpack');
+
+module.exports = {
+    entry: {
+        app: './src/index.js'
+    },
+    output: {
+        filename: '[name].bundle.js',
+        path: path.resolve(__dirname, 'public')
+    },
+    module: {
+        rules: [{
+            test: /\.(js|jsx)$/,
+            exclude: /node_modules/,
+            use: {
+                loader: 'babel-loader'
+            }
+        }]
+    },
+    devServer: {
+        hot: true,
+        allowedHosts: 'all',
+    },
+    plugins: [
+        new webpack.HotModuleReplacementPlugin()
+    ]
+};
\ No newline at end of file