Remove webpack-dev-server

Severe security problems, and it is not needed since it only is used locally. Here, it is replaced by a watch script, and relative paths to assets and resources so that index.html can be viewed directly in the browser instead of via a dev server. Also, some minor production preparing stuffs (hiding elements not yet ready) and some ugly white space inconsistecy fixes.
Upgrade dependencies
2019-02-10 11:52:51 +01:00 · 2018-11-27 13:47:28 +01:00 · 2018-11-26 11:31:53 +01:00 · 2018-11-26 09:46:05 +01:00
16 changed files with 2153 additions and 1047 deletions
--- a/assets/style.css
+++ b/assets/style.css
@ -87,12 +87,20 @@ article:hover,
 article:focus {
    background: #333;
    color: #fff;
+    transform: scale(1.05, 1.05);
+    transition: transform .4s linear;
+}
+
+article:hover img {
+    transform: scale(1.5, 1.5) translateX(-1.5rem);
+    transition: transform .2s linear;
 }

 figure img {
-    width: 100px;
-    height: 100px;
+    width: 10vw;
+    height: 10vw;
    padding: 5px;
    display: block;
    border: 1px solid #a83;
+    background-color: #000;
 }
--- a/index.html
+++ b/index.html
@ -2,12 +2,12 @@
 <html>
  <head>
    <meta name="viewport" content="width=device-width">
-    <link rel="stylesheet" href="/assets/style.css">
-    <title>Brütal Legend</title>
+    <link rel="stylesheet" href="assets/style.css">
+    <title>🤘 Brütal Legend 🤘</title>
  </head>
  <body>
    <div id="brutal"></div>
    <footer>av <a href="http://madr.se" rel="author">madr</a> 2018</footer>
  </body>
-  <script src="/bundle.js"></script>
+  <script src="bundle.js"></script>
 </html>
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@ -1,12 +1,12 @@
 {
-  "name": "redux-simple-starter",
+  "name": "brutal-legend",
  "version": "1.0.0",
-  "description": "Simple starter package for Redux with React and Babel support",
+  "description": "React+Redux app",
  "main": "index.js",
  "repository": "git@github.com:StephenGrider/ReduxSimpleStarter.git",
  "scripts": {
-    "start": "node ./node_modules/webpack-dev-server/bin/webpack-dev-server.js",
-    "build": "webpack -p --define process.env.NODE_ENV='\"production\"' --progress --colors"
+    "build": "webpack -p --define process.env.NODE_ENV='\"production\"' --progress --colors",
+    "watch": "webpack -p --define process.env.NODE_ENV='\"production\"' --watch --progress --colors"
  },
  "author": "",
  "license": "ISC",
@ -16,13 +16,12 @@
    "babel-preset-es2015": "^6.1.18",
    "babel-preset-react": "^6.1.18",
    "webpack": "^1.12.9",
-    "webpack-dev-server": "^1.14.0"
+    "webpack-cli": "^3.2.3"
  },
  "dependencies": {
    "babel-preset-stage-1": "^6.1.18",
-    "lodash": "^3.10.1",
    "react": "16.3.2",
-    "react-dom": "16.3.2",
+    "react-dom": ">=16.3.3",
    "react-redux": "5.0.7",
    "redux": "4.0.0"
  }
--- a/src/actions/index.js
+++ b/src/actions/index.js
@ -1,16 +1,10 @@
-export const INIT_ALBUM_LIST = 'INIT_ALBUM_LIST';
 export const SET_VISIBILITY_FILTER = 'SET_VISIBILITY_FILTER';
 export const SET_SORT_KEY = 'SET_SORT_KEY';

-export const initAlbumList = payload => ({
-    type: INIT_ALBUM_LIST,
-    payload
-});
-
 export const setVisibilityFilter = filter => ({
    type: SET_VISIBILITY_FILTER,
    payload: {
-        filter,
+        filter
    }
 });

--- a/src/components/album-list.jsx
+++ b/src/components/album-list.jsx
@ -1,10 +1,7 @@
 import React, { Component } from 'react';
-import Album from "./album";
+import Album from './album';

 export default class AlbumList extends Component {
-    componentWillMount() {
-        this.props.loadAlbumData();
-    }
    render() {
        const {
            albums,
--- a/src/components/album.jsx
+++ b/src/components/album.jsx
@ -11,7 +11,7 @@ export default class Album extends Component {
            img,
            purchased_on,
        } = this.props;
-        const imagePath = `/assets/covers/${img}`;
+        const imagePath = `assets/covers/${img}`;
        const song = songs.join(', ');
        return (
            <article>
--- a/src/components/app.jsx
+++ b/src/components/app.jsx
--- a/src/components/filter-input.jsx
+++ b/src/components/filter-input.jsx
@ -2,14 +2,17 @@ import React, { Component } from 'react';

 export default class FilterInput extends Component {
    render() {
-        const { value, handleOnChange } = this.props;
+        const {
+            value,
+            handleOnChange
+        } = this.props;
        return (
            <div>
                <input
-                    type="text"
+                    type='text'
                    value={value}
                    onChange={evt => handleOnChange(evt.target.value)}
-                    placeholder="Filtrera på år, artist, låt, skivtitel ..."
+                    placeholder='Filtrera på år, artist, låt, skivtitel ...'
                />
            </div>
        );
--- a/src/components/sort-select.jsx
+++ b/src/components/sort-select.jsx
@ -4,7 +4,7 @@ export default class SortSelect extends Component {
    render() {
        const { value, handleOnChange } = this.props;
        return (
-            <div>
+            <div hidden>
                <label htmlFor="sortBy">Sortera efter</label>
                <select
                    id="sortBy"
--- a/src/containers/album-list.js
+++ b/src/containers/album-list.js
@ -1,7 +1,6 @@
 import React from 'react';
 import { connect } from 'react-redux';
 import AlbumList from '../components/album-list';
-import { initAlbumList } from "../actions";

 const getAlbums = (albums, filter) => {
    const atos = o => [o.artist, o.title, o.songs.join(' '), o.year].join(' ').toLowerCase();
@ -14,11 +13,6 @@ const getAlbums = (albums, filter) => {

 const mapStateToProps = state => ({
    albums: getAlbums(state.albums, state.visibilityFilter),
-    sortKey: state.sortKey,
 });

-const mapDispatchToProps = (dispatch) => ({
-  loadAlbumData: () => dispatch(initAlbumList())
-});
-
-export default connect(mapStateToProps, mapDispatchToProps)(AlbumList);
+export default connect(mapStateToProps)(AlbumList);
--- a/src/containers/filter-input.js
+++ b/src/containers/filter-input.js
@ -1,14 +1,14 @@
 import React from 'react';
 import { connect } from 'react-redux';
 import FilterInput from '../components/filter-input';
-import {setVisibilityFilter} from "../actions";
+import { setVisibilityFilter } from '../actions';

 const mapStateToProps = state => ({
-    value: state.visibilityFilter
+    value: state.visibilityFilter,
 });

-const mapDispatchToProps = (dispatch) => ({
-  handleOnChange: (filter) => dispatch(setVisibilityFilter(filter))
+const mapDispatchToProps = dispatch => ({
+    handleOnChange: filter => dispatch(setVisibilityFilter(filter)),
 });

 export default connect(mapStateToProps, mapDispatchToProps)(FilterInput);
--- a/src/reducers/albums.js
+++ b/src/reducers/albums.js
@ -1,8 +1,4 @@
-import {INIT_ALBUM_LIST} from '../actions';
-
-export default (state = [], action) => {
-    switch (action.type) {
-        case INIT_ALBUM_LIST:
+export default () => {
    return [{
        "id": 0,
        "purchased_on": "2016-01-24",
@ -182,7 +178,4 @@ export default (state = [], action) => {
        "description": "Motörhead bildades 1975 och var aktivt fram tills att dess frontman Lemmy Kilmister, en sann kultklenod inom hårdrocken, gick bort 2015. Det är ingen tillfällighet att så många låtar av Motörhead är med i ett spel som Brütal Legend.\n\n\"Ace of Spades\" är den fjärde skivan och inledde Motörheads 1980-tal. Jag förknippade den tidigare med dess titelspår, men (We Are) The Roadcrew, en låt som skrevs för att särskilt hylla bandets roadies, är mycket passande till spelets berättelse.\n\nDet tidlösa omslaget är någon sorts variant av spaghetti-western med skinnställ.",
        "img": "15.jpg"
    }];
-        default:
-            return state;
-    }
 };
--- a/src/reducers/index.js
+++ b/src/reducers/index.js
@ -1,7 +1,7 @@
 import { combineReducers } from 'redux';
 import albums from './albums';
-import visibilityFilter from './visibilityFilter';
-import sortKey from "./sortKey";
+import visibilityFilter from './visibility-filter';
+import sortKey from "./sort-key";

 export default combineReducers({
    albums,
--- a/src/reducers/sort-key.js
+++ b/src/reducers/sort-key.js
--- a/src/reducers/visibility-filter.js
+++ b/src/reducers/visibility-filter.js
Author	SHA1	Message	Date
Anders Ytterström	7677570ad2	Remove webpack-dev-server Severe security problems, and it is not needed since it only is used locally. Here, it is replaced by a watch script, and relative paths to assets and resources so that index.html can be viewed directly in the browser instead of via a dev server. Also, some minor production preparing stuffs (hiding elements not yet ready) and some ugly white space inconsistecy fixes.	2019-02-10 11:52:51 +01:00
Anders Ytterström	79bbf9188c	Upgrade dependencies	2018-11-27 13:47:28 +01:00
Anders Ytterström	38f4244caf	🎨 Rename files for consistency and clarification	2018-11-26 11:31:53 +01:00
Anders Ytterström	74732c1683	🎨 Improve code readability	2018-11-26 09:46:05 +01:00