Update

1bb6bcf3 · Seung Hun Han · 2e0dd521 · 1bb6bcf3 · 1bb6bcf3 · 1bb6bcf3
Commit 1bb6bcf3 authored 2 years ago by Seung Hun Han
--- 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
@@ -9,3 +9,5 @@ pages:
    - public
  only:
  - master
+  tags:
+  - pages
--- a/README.md
+++ b/README.md
-![Build Status](https://gitlab.com/pages/plain-html/badges/master/build.svg)
+# muiStarterKit
---
-Example plain HTML site using GitLab Pages.
-Learn more about GitLab Pages at https://pages.gitlab.io and the official
-documentation https://docs.gitlab.com/ce/user/project/pages/.
---
-<!-- START doctoc generated TOC please keep comment here to allow auto update -->
-<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->
-**Table of Contents**  *generated with [DocToc](https://github.com/thlorenz/doctoc)*
- [GitLab CI](#gitlab-ci)
- [GitLab User or Group Pages](#gitlab-user-or-group-pages)
- [Did you fork this project?](#did-you-fork-this-project)
- [Troubleshooting](#troubleshooting)
-<!-- END doctoc generated TOC please keep comment here to allow auto update -->
-## GitLab CI
-This project's static Pages are built by [GitLab CI][ci], following the steps
-defined in [`.gitlab-ci.yml`](.gitlab-ci.yml):
-```
-image: alpine:latest
-pages:
-  stage: deploy
-  script:
-  - echo 'Nothing to do...'
-  artifacts:
-    paths:
-    - public
-  only:
-  - master
-```
-The above example expects to put all your HTML files in the `public/` directory.
-## GitLab User or Group Pages
-To use this project as your user/group website, you will need one additional
-step: just rename your project to `namespace.gitlab.io`, where `namespace` is
-your `username` or `groupname`. This can be done by navigating to your
-project's **Settings**.
-Read more about [user/group Pages][userpages] and [project Pages][projpages].
-## Did you fork this project?
-If you forked this project for your own use, please go to your project's
-**Settings** and remove the forking relationship, which won't be necessary
-unless you want to contribute back to the upstream project.
-## Troubleshooting
-1. CSS is missing! That means that you have wrongly set up the CSS URL in your
-   HTML files. Have a look at the [index.html] for an example.
-[ci]: https://about.gitlab.com/gitlab-ci/
-[index.html]: https://gitlab.com/pages/plain-html/blob/master/public/index.html
-[userpages]: https://docs.gitlab.com/ce/user/project/pages/introduction.html#user-or-group-pages
-[projpages]: https://docs.gitlab.com/ce/user/project/pages/introduction.html#project-pages
--- 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": "SeungHun Han",
+  "license": "MIT"
+}
--- a/public/app.bundle.js
+++ b/public/app.bundle.js
--- a/public/index.html
+++ b/public/index.html
-<!DOCTYPE html>
+<!doctype html>
 <html>
 	<head>
-    <meta charset="utf-8">
+		<title> muiBasic </title>
-    <meta name="generator" content="GitLab Pages">
+		<meta charset="UTF-8"/>
-    <title>Plain HTML site using GitLab Pages</title>
+		<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
-    <link rel="stylesheet" href="style.css">
 	</head>
 	<body>
-    <div class="navbar">
+		<div id="app"></div>
-      <a href="https://pages.gitlab.io/plain-html/">Plain HTML Example</a>
+		<script src="./app.bundle.js" type="text/javascript"></script>
-      <a href="https://gitlab.com/pages/plain-html/">Repository</a>
-      <a href="https://gitlab.com/pages/">Other Examples</a>
-    </div>
-    <h1>Hello World!</h1>
-    <p>
-      This is a simple plain-HTML website on GitLab Pages, without any fancy static site generator.
-    </p>
 	</body>
 </html>
--- a/public/style.css
+++ b/public/style.css
-body {
-  font-family: sans-serif;
-  margin: auto;
-  max-width: 1280px;
-}
-.navbar {
-  background-color: #313236;
-  border-radius: 2px;
-  max-width: 800px;
-}
-.navbar a {
-  color: #aaa;
-  display: inline-block;
-  font-size: 15px;
-  padding: 10px;
-  text-decoration: none;
-}
-.navbar a:hover {
-  color: #ffffff;
-}
--- a/src/App.js
+++ b/src/App.js
+import React from 'react';
+import {Box, Tabs, Tab, Typography, AppBar, CssBaseline} from '@mui/material';
+import SearchPage from './addSearch'
+import MyFavorites from './Favorites'
+export default function App () {
+    const [activeTab, setActiveTab] = React.useState(0);
+    const [searchResults, setSearchResults] = React.useState([]);
+    const [likedItems, setLikedItems] = React.useState({});
+    const [favoriteItems, setFavoriteItems] = React.useState([]);
+    const toggleLike = (id, item) => {
+        setLikedItems({...likedItems, [id] : !likedItems[id]});
+        if (likedItems[id]) {
+            setFavoriteItems(prevFavorites => prevFavorites.filter(fav => fav.collectionId !== id));
+        } else {
+            setFavoriteItems(prevFavorites => [...prevFavorites, item]);
+        }
+    };     
+    const handleTabSwitch = (event, newValue) => {
+        setActiveTab(newValue);
+    }
+    return (
+        <React.Fragment>
+            <AppBar position="fixed">
+                <Typography align="center" variant="h3" color="inherit">
+                    SeungHun's Favorite Music
+                </Typography>
+            </AppBar>
+            <div style={{height: 60, width: '100%'}}></div>
+            <Box sx={{ borderBottom: 1, borderColor: 'divider'}}>
+                <Tabs value={activeTab} onChange={handleTabSwitch} aria-label="basic tabs" centered >
+                    <Tab label ="Search Music" value={0} />
+                    <Tab label ="My Favorites" value={1} />
+                    <Tab label ="More Contents" value={2} />
+                </Tabs>
+            </Box>
+            { activeTab === 0 && <SearchPage list={searchResults} onSearch={setSearchResults} onLike={toggleLike} likes={likedItems}/> }
+            { activeTab === 1 && <MyFavorites list={favoriteItems} onLike={toggleLike} likes={likedItems}/> }
+            { activeTab == 2 && <Typography align="center" variant="h2"> Item Three</Typography>}
+        </React.Fragment>
+    )
+}
--- a/src/Favorites.js
+++ b/src/Favorites.js
+import React from 'react';
+import {Button, TextField} from '@mui/material'
+import MusicList from './MusicList';
+export default function MyFavorites({list, likes, onLike}) {
+    return (
+        <React.Fragment>
+            <MusicList list={list} likes={likes} onLike={onLike} />
+        </React.Fragment>
+    )
+}
--- 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, onLike, likes}) {
+    let [snackState, setSnackState] = React.useState({open : false, msg : ''})
+    const handleSnackbarClose = (event, reason) => {
+        if (reason === 'clickaway') {
+            return;
+        }      
+        setSnackState({open : false, msg : ''});
+    }
+    const toggleFavoriteStatus = (id, name, item) => () => {
+        onLike(id, item)
+        setSnackState({...snackState, open : true, msg : `${id} 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={toggleFavoriteStatus(item.collectionId, item.collectionCensoredName, item)}>
+                            {(likes[item.collectionId] === true) ?
+                            <Favorite /> : <FavoriteBorder /> }
+                        </IconButton>
+                        <SnackMsg open = {snackState.open} message={snackState.msg} onClose={handleSnackbarClose}/>
+                    </CardActions>
+                </Card>)
+            })}
+        </div>
+    );
+}
\ No newline at end of file
--- a/src/addSearch.js
+++ b/src/addSearch.js
+import React from 'react';
+import {Button, TextField} from '@mui/material'
+import MusicList from './MusicList';
+export default function SearchPage({list, onSearch, likes, onLike}) {
+    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 } likes = { likes } onLike = { onLike }>
+            </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 {Snackbar, Alert} from '@mui/material';
+const SnackMsg = (props) => {
+    return (
+        <Snackbar
+            open = {props.open}
+            anchorOrigin = {{ vertical : 'bottom', horizontal : 'right'}}
+            autoHideDuration = {3000}
+            onClose = {props.onClose}
+            message = {props.message}>
+            <Alert onClose={props.onClose} severity="success" sx={{ width: '100%'}}>
+                {props.message}
+            </Alert>
+        </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