more structure for components

web/config-overrides.js

@@ -1,8 +1,14 @@
 const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
+const DirectoryNamedWebpackPlugin = require("directory-named-webpack-plugin");
+const path = require('path');
 
 module.exports = function override(config, env) {
     config.plugins.push(
       new BundleAnalyzerPlugin()
     );
+    config.resolve.plugins.push(
+      new DirectoryNamedWebpackPlugin()
+    );
+    config.resolve.alias.src = path.resolve(__dirname, 'src/');
     return config;
 }

web/package-lock.json

@@ -5118,6 +5118,16 @@
         "path-type": "^4.0.0"
       }
     },
+    "directory-named-webpack-plugin": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/directory-named-webpack-plugin/-/directory-named-webpack-plugin-4.0.1.tgz",
+      "integrity": "sha512-cULe7U64O9NM+O+L9gfcVKPo/A0pNEntsXTpuRHoCFMYE5pV9XQrJI9mJ8bgo0WKPmKPw/kozXfRolNNFJICCA==",
+      "dev": true,
+      "requires": {
+        "enhanced-resolve": "^4.0.0",
+        "object-assign": "^4.1.0"
+      }
+    },
     "dns-equal": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/dns-equal/-/dns-equal-1.0.0.tgz",

web/package.json

@@ -47,6 +47,7 @@
     ]
   },
   "devDependencies": {
+    "directory-named-webpack-plugin": "^4.0.1",
     "react-app-rewired": "^2.1.8",
     "webpack-bundle-analyzer": "^4.4.0"
   }

web/src/Album.js → web/src/components/Album/Album.js

@@ -1,7 +1,7 @@
-import logo from './logo.svg';
+import logo from 'src/logo.svg';
 import { Link } from 'react-router5'
-import {formatDuration, slugify} from './utils';
-import {getTracks, request} from './Api';
+import {formatDuration, slugify} from 'src/utils';
+import {getTracks, request} from 'src/Api';
 
 export function fetchTracks(album_id, type, dispatch) {
   const {url, options} = getTracks(album_id);

web/src/AlbumList.js → web/src/components/AlbumList/AlbumList.js

@@ -1,9 +1,9 @@
 import './AlbumList.css';
 import InfiniteScroll from 'react-infinite-scroller';
 import {useEffect} from 'react';
-import {getAlbums, request} from './Api';
-import Album from './Album';
-import {CATEGORIES} from './Filters';
+import {getAlbums, request} from 'src/Api';
+import Album from '../Album';
+import {CATEGORIES} from '../Filters';
 
 function _albumProps(albums, index, props) {
   if (index === 0) {
@@ -54,7 +54,7 @@ export default function AlbumList(props) {
     <div className="AlbumList">
       {title && <h2>{title}</h2>}
       { error ? (
-        <div className="error">{error}></div>
+        <div className="error">{error}&gt;</div>
       ) : (
         <InfiniteScroll
           loadMore={(p) => {dispatch({type: 'SET_PAGE', payload: p})}}

web/src/AlbumPage.js → web/src/components/AlbumPage/AlbumPage.js

@@ -1,10 +1,10 @@
 import './AlbumPage.css';
 import { Link } from 'react-router5'
 import {useRouteNode} from 'react-router5'
-import {unslugify, formatDuration} from './utils.js';
+import {unslugify, formatDuration} from '../../utils.js';
 import {useReducer, useEffect} from 'react';
-import {fetchAlbums} from './AlbumList';
-import {fetchTracks} from './Album';
+import {fetchAlbums} from '../AlbumList';
+import {fetchTracks} from '../Album';
 
 function pageReducer(state, action) {
   switch (action.type) {

web/src/App.js → web/src/components/App/App.js

@@ -1,9 +1,9 @@
 import {useReducer} from 'react';
 import './App.css';
-import {storeToken, loadToken} from './Api';
-import Login from './Login';
-import Header from './Header';
-import Player from './Player';
+import {storeToken, loadToken} from 'src/Api';
+import Login from '../Login';
+import Header from '../Header';
+import Player from '../Player';
 
 function storeSettings(settings) {
   localStorage.setItem('settings', JSON.stringify(settings));

web/src/ArtistPage.js → web/src/components/ArtistPage.js

@@ -1,6 +1,6 @@
 import { Link } from 'react-router5'
 import {useRouteNode} from 'react-router5'
-import {unslugify} from './utils'
+import {unslugify} from '../utils'
 import {useReducer} from 'react';
 import AlbumList from './AlbumList';
 import {browserReducer, ALBUMS_EMPTY} from './Browser';

web/src/Controls.js → web/src/components/Controls/Controls.js

@@ -1,7 +1,7 @@
 import './Controls.css';
-import logo from './logo.svg';
+import logo from 'src/logo.svg';
 import Sound from 'react-sound';
-import {slugify,formatDuration} from './utils.js';
+import {slugify,formatDuration} from 'src/utils';
 
 export default function Controls({queue, error, sound, dispatch}) {
   const track = queue.items[queue.pos] || {};

web/src/Filters.js → web/src/components/Filters/Filters.js

@@ -1,7 +1,7 @@
 import { useRoute } from 'react-router5'
 import { useRef } from 'react';
 import AsyncSelect from 'react-select/async';
-import {getCategory, request} from './Api';
+import {getCategory, request} from 'src/Api';
 import './Filters.css';
 
 export const CATEGORIES = [{cat: 'artist', title: 'Artists'},

web/src/Header.js → web/src/components/Header/Header.js

@@ -1,8 +1,8 @@
 import './Header.css';
-import logo from './chad-logo-256.png';
+import logo from 'src/chad-logo-256.png';
 import { BaseLink, useRoute } from 'react-router5'
-import Settings from './Settings';
-import UserInfo from './UserInfo';
+import Settings from '../Settings';
+import UserInfo from '../UserInfo';
 
 function handleSearch(e, router) {
   if (e.charCode === 13) router.navigate('browser', {filter: e.target.value});

web/src/Login.js → web/src/components/Login/Login.js

@@ -1,6 +1,6 @@
 import './Login.css';
-import TelegramLoginButton from './TelegramLoginButton';
-import {login, useFetch} from './Api';
+import TelegramLoginButton from '../TelegramLoginButton';
+import {login, useFetch} from 'src/Api';
 
 export default function Login({state, dispatch}) {
   const setUrl = useFetch(null, dispatch, 'LOGIN');

web/src/Queue.js → web/src/components/Queue/Queue.js

@@ -1,6 +1,6 @@
 import { Link } from 'react-router5'
 import './Queue.css';
-import {slugify, formatDuration} from './utils.js';
+import {slugify, formatDuration} from 'src/utils';
 
 export default function Queue({queue, dispatch}) {
   return (

web/src/UserInfo.js → web/src/components/UserInfo/UserInfo.js

@@ -1,7 +1,7 @@
 import {useReducer} from 'react';
 import './UserInfo.css';
-import logo from './chad-logo-256.png';
-import {useFetch, initialState, fetchReducer, getUser} from './Api';
+import logo from 'src/chad-logo-256.png';
+import {useFetch, initialState, fetchReducer, getUser} from 'src/Api';
 
 function UserInfo() {
   const [{loading, error, data}, dispatch] = useReducer(fetchReducer, initialState());

web/src/index.js

@@ -2,7 +2,7 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 import { RouterProvider } from 'react-router5'
 import './index.css';
-import App from './App';
+import App from './components/App/App';
 import createRouter from './create-router'
 import reportWebVitals from './reportWebVitals';