Changed structure to work better with webpack 4s default config

.gitignore

@@ -5,7 +5,7 @@
 node_modules/
 
 # Generated JS/CSS files
-static/main.*
+dist/main.*
 
 # Log files
 *.log

package.json

@@ -23,7 +23,7 @@
     "start": "webpack-dev-server --mode development",
     "build-dev": "webpack --mode development",
     "build-prod": "webpack --mode production",
-    "build-sass": "node-sass --style compressed src/sass/index.sass static/main.css"
+    "build-sass": "node-sass --style compressed src/sass/index.sass dist/main.css"
   },
   "dependencies": {
     "babel-polyfill": "^6.26.0",

src/App.js

@@ -2,7 +2,7 @@ import React from 'react'
 import {
   BrowserRouter,
   Switch,
-  Route,
+  Route
 } from 'react-router-dom'
 
 import Header from 'components/Header'
@@ -19,10 +19,8 @@ export default () => (
           <Route path='/r/:subreddit/comments/:threadID/:junk/:commentID' component={Thread} />
           <Route path='/r/:subreddit/comments/:threadID' component={Thread} />
           <Route path='/r/:subreddit' component={Subreddit} />
-
         </Switch>
       </div>
     </React.Fragment>
   </BrowserRouter>
 )
-

src/api/pushshift/index.js

@@ -8,13 +8,13 @@ export const getPost = threadID => {
   const elasticQuery = {
     query: {
       term: {
-        id: toBase10(threadID),
-      },
-    },
+        id: toBase10(threadID)
+      }
+    }
   }
 
   return (
-    fetch(postURL + JSON.stringify(elasticQuery))
+    window.fetch(postURL + JSON.stringify(elasticQuery))
       .then(json)
       .then(jsonData => jsonData.hits.hits[0]._source)
       .then(post => {
@@ -41,17 +41,17 @@ export const getComments = threadID => {
   const elasticQuery = {
     query: {
       match: {
-        link_id: toBase10(threadID),
-      },
+        link_id: toBase10(threadID)
+      }
     },
     size: 10000,
     _source: [
-      'author', 'body', 'created_utc', 'parent_id', 'score', 'subreddit', 'link_id',
-    ],
+      'author', 'body', 'created_utc', 'parent_id', 'score', 'subreddit', 'link_id'
+    ]
   }
 
   return (
-    fetch(commentURL + JSON.stringify(elasticQuery))
+    window.fetch(commentURL + JSON.stringify(elasticQuery))
       .then(json)
       .then(jsonData => jsonData.hits.hits)
       .then(comments => comments.map(comment => {

src/api/reddit/auth.js

@@ -5,7 +5,7 @@ export const getAuth = () => (
   getToken()
     .then(token => ({
       headers: {
-        Authorization: `bearer ${token}`,
-      },
+        Authorization: `bearer ${token}`
+      }
     }))
 )

src/api/reddit/comment.js

@@ -9,7 +9,7 @@ export const getComments = commentIDs => (
 )
 
 export const fetchComments = (commentIDs, auth) => (
-  fetch(`https://oauth.reddit.com/api/info?id=${commentIDs.map(id => `t1_${id}`).join()}`, auth)
+  window.fetch(`https://oauth.reddit.com/api/info?id=${commentIDs.map(id => `t1_${id}`).join()}`, auth)
     .then(json)
     .then(results => results.data.children)
     .then(commentsData => commentsData.map(commentData => commentData.data))

src/api/reddit/thread.js

@@ -22,7 +22,7 @@ export const getThread = (subreddit, threadID, commentID = '') => {
   // Fetch thread from reddit
   return (
     getAuth()
-      .then(auth => fetch(url, auth))
+      .then(auth => window.fetch(url, auth))
       .then(json)
       .then(thread => {
         // Create cache object for thread  if it doesn't exists
@@ -39,13 +39,12 @@ export const getThread = (subreddit, threadID, commentID = '') => {
   )
 }
 
-
 export const getThreads = threadIDs => {
   const threadString = threadIDs.map(id => `t3_${id}`).join()
 
   return (
     getAuth()
-      .then(auth => fetch(`https://oauth.reddit.com/api/info?id=${threadString}`, auth))
+      .then(auth => window.fetch(`https://oauth.reddit.com/api/info?id=${threadString}`, auth))
       .then(json)
       .then(response => {
         const threads = response.data.children

src/api/reddit/token.js

@@ -7,11 +7,11 @@ let token = null
 // Headers for getting reddit api token
 const tokenInit = {
   headers: {
-    Authorization: `Basic ${btoa(`${clientID}:`)}`,
-    'Content-Type': 'application/x-www-form-urlencoded; charset=utf-8',
+    Authorization: `Basic ${window.btoa(`${clientID}:`)}`,
+    'Content-Type': 'application/x-www-form-urlencoded; charset=utf-8'
   },
   method: 'POST',
-  body: `grant_type=${encodeURIComponent('https://oauth.reddit.com/grants/installed_client')}&device_id=DO_NOT_TRACK_THIS_DEVICE`,
+  body: `grant_type=${encodeURIComponent('https://oauth.reddit.com/grants/installed_client')}&device_id=DO_NOT_TRACK_THIS_DEVICE`
 }
 
 export const getToken = () => {
@@ -20,7 +20,7 @@ export const getToken = () => {
   }
 
   return (
-    fetch('https://www.reddit.com/api/v1/access_token', tokenInit)
+    window.fetch('https://www.reddit.com/api/v1/access_token', tokenInit)
       .then(json)
       .then(response => {
         token = response.access_token

src/api/removeddit/index.js

@@ -3,6 +3,6 @@ import { json } from 'utils'
 const baseURL = 'https://removeddit.com/api'
 
 export const getRemovedThreadIDs = (subreddit = '', page = 1) => (
-  fetch(`${baseURL}/threads?subreddit=${subreddit}&page=${page - 1}`)
+  window.fetch(`${baseURL}/threads?subreddit=${subreddit}&page=${page - 1}`)
     .then(json)
 )

src/components/CommentSection.js

@@ -5,11 +5,11 @@ import SortBy from 'components/SortBy'
 import { connect } from 'react-redux'
 import {
   SORT_TOP, SORT_BOTTOM, SORT_NEW, SORT_OLD,
-  SHOW_ALL, SHOW_REMOVED_DELETED, SHOW_REMOVED, SHOW_DELETED,
+  SHOW_ALL, SHOW_REMOVED_DELETED, SHOW_REMOVED, SHOW_DELETED
 } from 'state'
 import {
   topSort, bottomSort, newSort, oldSort,
-  showRemovedAndDeleted, showRemoved, showDeleted,
+  showRemovedAndDeleted, showRemoved, showDeleted
 } from 'utils'
 
 const arrayToLookup = (commentList, removed, deleted) => {
@@ -134,8 +134,7 @@ const commentSection = (props) => {
 
 const mapStateToProps = state => ({
   sort: state.commentSection.sort,
-  show: state.commentSection.show,
+  show: state.commentSection.show
 })
 
-
 export default connect(mapStateToProps)(commentSection)

src/components/SortBy.js

@@ -3,11 +3,10 @@ import {
   setCommentSort,
   setCommentShow,
   SORT_TOP, SORT_BOTTOM, SORT_NEW, SORT_OLD,
-  SHOW_ALL, SHOW_REMOVED_DELETED, SHOW_REMOVED, SHOW_DELETED,
+  SHOW_ALL, SHOW_REMOVED_DELETED, SHOW_REMOVED, SHOW_DELETED
 } from 'state'
 import { connect } from 'react-redux'
 
-
 const sortBy = props => (
   <div id='comment-sort'>
   sorted by:
@@ -32,16 +31,15 @@ const sortBy = props => (
 
 const mapStateToProps = state => ({
   sort: state.commentSection.sort,
-  show: state.commentSection.show,
+  show: state.commentSection.show
 })
 
 const mapDispatchToProps = dispatch => ({
   setSort: sortString => dispatch(setCommentSort(sortString)),
-  setShow: showString => dispatch(setCommentShow(showString)),
+  setShow: showString => dispatch(setCommentShow(showString))
 })
 
 export default connect(
   mapStateToProps,
-  mapDispatchToProps,
+  mapDispatchToProps
 )(sortBy)
-

src/components/SubredditPagination.js

@@ -18,7 +18,7 @@ export default (props) => {
         <a href={`${props.url + 1}`}>1</a>
         <span> ...</span>
       </React.Fragment>
-    }
+      }
       {pageination}
     </div>
   )

src/containers/StatusBox.js

@@ -12,7 +12,7 @@ const StatusBox = props => (
 
 const mapStateToProps = state => ({
   text: state.status.text,
-  image: state.status.image,
+  image: state.status.image
 })
 
 export default connect(mapStateToProps)(StatusBox)

src/pages/Search.js

@@ -1,7 +1,7 @@
 
 //   var radioInput = function(name, displayNames, values) {
 //     var inputs = "";
-    
+
 //     for(var i = 0, len = displayNames.length; i < len; i++){
 //       inputs += '<span class="radioButton"'+ (Vars.lookup[name] === values[i] ? ' style="background: #239f2b; color:#fff"':'')+'>';
 //       inputs += '<input type="radio" id="'+name+i+'" name="'+name+'" onchange="CSS.radio(this)"';
@@ -12,7 +12,7 @@
 //   };
 
 //   var textInput = function(name){
-//     return '<input type="text" name="'+name+'" id="'+name+'" value="'+Vars.get(name)+'">'; 
+//     return '<input type="text" name="'+name+'" id="'+name+'" value="'+Vars.get(name)+'">';
 //   };
 
 //   var label = function(name, display) {
@@ -37,7 +37,7 @@
 
 //   var select = function(name, display, values){
 //     var html = '<select name="'+name+'" id="'+name+'">';
-    
+
 //     for(var i = 0, len = values.length; i < len; i++) {
 //       html += '<option value="'+values[i]+'"' + ((Vars.get(name) === values[i]) ? " selected" : '')+'>'+display[i]+'</option>';
 //     }
@@ -61,7 +61,7 @@
 //     between    (after/before)  "date"
 //     sort     (sort)    asc,desc
 //   */
-//     var html = inputRow('Im looking for: ', radioInput("thread", ["Thread","Comment"], ["true", "false"]));    
+//     var html = inputRow('Im looking for: ', radioInput("thread", ["Thread","Comment"], ["true", "false"]));
 //     html += inputRow(label("text", "Text"), textInput("text"));
 //     html += inputRow(label("title","Title"), textInput("title"));
 //     html += inputRow(label("subreddit", "Subreddit"), textInput("subreddit"));
@@ -74,5 +74,5 @@
 //     html += '<input type="button" value="'+(showAdvanced?'Hide':'Show')+' advanced">';
 //     html += '<input type="submit" value="Search">';
 //     searchBox.innerHTML = html;
-  
-//     mainDiv.appendChild(searchBox);
+
+//     mainDiv.appendChild(searchBox);

src/pages/Subreddit.js

@@ -12,21 +12,20 @@ const getSubredditForAPI = props => {
   return subreddit.toLowerCase()
 }
 
-
 export default class Subreddit extends React.Component {
-  constructor(props) {
+  constructor (props) {
     super(props)
 
     this.state = {
       threads: [],
-      subreddit: '',
+      subreddit: ''
     }
   }
-  componentDidMount() {
+  componentDidMount () {
     this.updateThreads(this.props)
   }
 
-  componentWillReceiveProps(nextProps) {
+  componentWillReceiveProps (nextProps) {
     const newSubreddit = getSubredditForAPI(nextProps)
 
     if (this.state.subreddit !== newSubreddit) {
@@ -34,7 +33,7 @@ export default class Subreddit extends React.Component {
     }
   }
 
-  updateThreads(props) {
+  updateThreads (props) {
     const subreddit = getSubredditForAPI(props)
     getRemovedThreadIDs(subreddit)
       .then(threadIDs => getThreads(threadIDs))
@@ -47,7 +46,7 @@ export default class Subreddit extends React.Component {
       })
   }
 
-  render() {
+  render () {
     const { subreddit = 'all' } = this.props.match.params
     const subredditLink = `/r/${subreddit}`
 
@@ -61,9 +60,9 @@ export default class Subreddit extends React.Component {
           <a href={`https://snew.github.io${subredditLink}`} className='subreddit-title-link'>ceddit</a>
         </div>
         {
-        this.state.threads.map(thread => (
-          <Post key={thread.id} {...thread} />
-        ))
+          this.state.threads.map(thread => (
+            <Post key={thread.id} {...thread} />
+          ))
         }
       </React.Fragment>
     )

src/pages/Thread.js

@@ -3,16 +3,16 @@ import Post from 'components/Post'
 import CommentSection from 'components/CommentSection'
 import {
   getPost,
-  getComments as getRedditComments,
+  getComments as getRedditComments
 } from 'api/reddit'
 import {
   getPost as getRemovedPost,
-  getComments as getPushshiftComments,
+  getComments as getPushshiftComments
 } from 'api/pushshift'
 import { isDeleted, isRemoved } from 'utils'
 
 export default class Thread extends React.Component {
-  constructor(props) {
+  constructor (props) {
     super(props)
 
     this.state = {
@@ -20,11 +20,11 @@ export default class Thread extends React.Component {
       pushshiftComments: [],
       removed: [],
       deleted: [],
-      loadingComments: true,
+      loadingComments: true
     }
   }
 
-  componentDidMount() {
+  componentDidMount () {
     const { subreddit, threadID } = this.props.match.params
 
     Promise.all([
@@ -42,7 +42,7 @@ export default class Thread extends React.Component {
           }
         }),
       // Get comment ids from pushshift
-      getPushshiftComments(threadID),
+      getPushshiftComments(threadID)
     ])
       .then(results => {
         const pushshiftComments = results[1]
@@ -90,12 +90,12 @@ export default class Thread extends React.Component {
         this.setState({
           removed,
           deleted,
-          loadingComments: false,
+          loadingComments: false
         })
       })
   }
 
-  render() {
+  render () {
     let root = this.state.post.id
 
     if (this.props.match.params.commentID !== undefined) {

src/state/commentSection.js

@@ -26,7 +26,7 @@ const filterKey = 'commentFilter'
 // Init state
 const initialStatusState = {
   sort: get(sortKey, SORT_TOP),
-  show: get(filterKey, SHOW_REMOVED_DELETED),
+  show: get(filterKey, SHOW_REMOVED_DELETED)
 }
 
 export const commentSectionReducer = (state = initialStatusState, action) => {
@@ -35,13 +35,13 @@ export const commentSectionReducer = (state = initialStatusState, action) => {
       put(sortKey, action.payload)
       return {
         ...state,
-        sort: action.payload,
+        sort: action.payload
       }
     case COMMENT_SHOW:
       put(filterKey, action.payload)
       return {
         ...state,
-        show: action.payload,
+        show: action.payload
       }
     default:
       return state

src/state/index.js

@@ -8,7 +8,7 @@ export * from './commentSection'
 
 const reducer = combineReducers({
   status: statusReducer,
-  commentSection: commentSectionReducer,
+  commentSection: commentSectionReducer
 })
 
 export const store = createStore(reducer, applyMiddleware(logger))

src/state/status.js

@@ -1,7 +1,7 @@
 const images = {
   loading: '/images/loading.gif',
   error: '/images/error.png',
-  success: '/images/done.png',
+  success: '/images/done.png'
 }
 
 // Action types
@@ -17,7 +17,7 @@ export const setStatusError = (payload = '') => ({ type: STATUS_SET_ERROR, paylo
 // Init state
 const initialStatusState = {
   text: null,
-  image: null,
+  image: null
 }
 
 export const statusReducer = (state = initialStatusState, action) => {
@@ -26,19 +26,19 @@ export const statusReducer = (state = initialStatusState, action) => {
       return {
         ...state,
         text: action.payload,
-        image: images.success,
+        image: images.success
       }
     case STATUS_SET_LOADING:
       return {
         ...state,
         text: action.payload,
-        image: images.loading,
+        image: images.loading
       }
     case STATUS_SET_ERROR:
       return {
         ...state,
         text: action.payload,
-        image: images.error,
+        image: images.error
       }
     default:
       return state

src/utils/index.js

@@ -31,7 +31,7 @@ export const json = x => x.json()
 export const fetchMultiple = (url, arr, header, size = 100) => {
   const subArrays = chunk(arr, size)
 
-  return Promise.all(subArrays.map(subArr => fetch(url + subArr.join(), header)))
+  return Promise.all(subArrays.map(subArr => window.fetch(url + subArr.join(), header)))
 }
 
 export const jsonMultiple = responses => Promise.all(responses.map(json))
@@ -86,11 +86,10 @@ export const prettyScore = score => {
 
 // Retrieve, store and delete stuff in the local storage
 export const get = (key, defaultValue) => (
-  localStorage.getItem(key) !== null ? JSON.parse(localStorage.getItem(key)) : defaultValue
+  window.localStorage.getItem(key) !== null ? JSON.parse(window.localStorage.getItem(key)) : defaultValue
 )
 
-export const put = (key, value) => localStorage.setItem(key, JSON.stringify(value))
-
+export const put = (key, value) => window.localStorage.setItem(key, JSON.stringify(value))
 
 // Sorting for comments
 export const topSort = (commentA, commentB) => {

webpack.config.js

@@ -4,34 +4,25 @@ module.exports = {
   entry: [
     'babel-polyfill',
     'whatwg-fetch',
-    './src/js/index.js',
+    './src/index.js'
   ],
-  output: {
-    path: path.resolve(__dirname, 'static'),
-    publicPath: '/',
-  },
   devServer: {
-    contentBase: path.resolve(__dirname, 'static'),
-    historyApiFallback: true,
+    contentBase: path.resolve(__dirname, 'dist'),
+    historyApiFallback: true
   },
   devtool: 'cheap-module-eval-source-map',
   resolve: {
     modules: [
-      path.resolve('./src/js'),
-      path.resolve('./node_modules'),
-    ],
+      path.resolve(__dirname, 'src'),
+      path.resolve(__dirname, 'node_modules')
+    ]
   },
   module: {
     rules: [
       {
         test: /\.js$/,
         exclude: /node_modules/,
-        use: {
-          loader: 'babel-loader',
-          options: {
-            cacheDirectory: true,
-          },
-        },
+        use: 'babel-loader'
       }
     ]
   }