ability to load old logs

web/src/js/actions/loadLogs.js

@@ -1,14 +1,15 @@
 import setLogs from "./setLogs";
 import setLoading from "./setLoading";
+import Log from "../model/Log";
 
 export default function (channel, username, year, month) {
     return function (dispatch, getState) {
         return new Promise((resolve, reject) => {
             channel = channel || getState().channel;
             username = username || getState().username;
-            year = year || getState().year;
-            month = month || getState().month;
-
+            const date = new Date();
+            year = year || date.getFullYear();
+            month = month ||  date.getMonth() + 1;
 
             dispatch(setLoading(true));
                         
@@ -28,13 +29,15 @@ export default function (channel, username, year, month) {
                 }
             }).then((response) => {
                 return response.json()
-            }).then((json) => {
-    
+            }).then((json) => {    
                 for (let value of json.messages) {
                     value.timestamp = Date.parse(value.timestamp)
                 }
 
-                dispatch(setLogs(json));
+                const newLogs = {...getState().logs};
+                newLogs[`${year}-${month}`] = new Log(year, month, json.messages, true);
+
+                dispatch(setLogs(newLogs));
                 dispatch(setLoading(false));
                 resolve();
             }).catch((error) => {

web/src/js/components/Filter.jsx

@@ -7,12 +7,6 @@ import loadLogs from "../actions/loadLogs";
 class Filter extends Component {
     username;
 
-    componentDidMount() {
-        if (this.props.channel && this.props.username) {
-            this.props.dispatch(loadLogs());
-        }
-    }
-
     render() {
         return (
             <form className="filter" autoComplete="off" onSubmit={this.onSubmit}>

web/src/js/components/LogSearch.jsx

@@ -14,6 +14,12 @@ class LogSearch extends Component {
         props.dispatch(loadChannels());
     }
 
+    componentDidMount() {
+        if (this.props.channel && this.props.username) {
+            this.props.dispatch(loadLogs());
+        }
+    }
+
     render() {
         return (
             <div className="log-search">
@@ -21,7 +27,9 @@ class LogSearch extends Component {
                 <Filter
                     channels={this.props.channels}
                 />
-                <LogView />
+                {Object.values(this.props.logs).map(log =>
+                    <LogView key={log.getTitle()} log={log} />
+                )}
             </div>
         );
     }
@@ -30,6 +38,9 @@ class LogSearch extends Component {
 const mapStateToProps = (state) => {
     return {
         channels: state.channels,
+        channel: state.channel,
+        username: state.username,
+        logs: state.logs,
     };
 };
 

web/src/js/components/LogView.jsx

@@ -2,26 +2,22 @@ import React, { Component } from 'react';
 import { connect } from "react-redux";
 import twitchEmotes from "../emotes/twitch";
 import reactStringReplace from "react-string-replace";
+import loadLogs from '../actions/loadLogs';
 
 class LogView extends Component {
 
 	render() {
-		const oldLogs = [];
-		
-		for (let month = this.props.month - 1; month >= 1; month--) {
-			oldLogs.push(month)
+		if (this.props.log.loaded === false) {
+			return <div className="log-view not-loaded" onClick={this.loadLog}>{this.props.log.getTitle()}</div>;
 		}
 
-		console.log(oldLogs);
-
 		return (
 			<div className={"log-view"}>
-				{this.props.messages.reverse().map((value, key) =>
+				{this.props.log.messages.reverse().map((value, key) =>
 					<div key={key} className="line" onClick={() => this.setState({})}>
 						<span id={value.timestamp} className="timestamp">{this.formatDate(value.timestamp)}</span>{this.renderMessage(value.text)}
 					</div>
 				)}
-				{this.props.loading && <div>loading</div>}
 			</div>
 		);
 	}
@@ -42,6 +38,10 @@ class LogView extends Component {
 		);
 	}
 
+	loadLog = () => {
+		this.props.dispatch(loadLogs(null, null, this.props.log.year, this.props.log.month));
+	}
+
 	formatDate = (timestamp) => {
 		return new Date(timestamp).toUTCString();
 	}
@@ -50,13 +50,10 @@ class LogView extends Component {
 		return `https://static-cdn.jtvnw.net/emoticons/v1/${id}/1.0`;
 	}
 }
-
 const mapStateToProps = (state) => {
-	return {
-		month: state.month,
-		messages: state.logs.messages,
-		loading: state.loading
-	};
+    return {
+
+    };
 };
 
 export default connect(mapStateToProps)(LogView);

web/src/js/model/Log.js

@@ -0,0 +1,23 @@
+export default class Log {
+
+    constructor(year, month, messages = [], loaded = false) {
+        const monthList = [ "January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December" ];
+        this.title = `${year} ${monthList[month - 1]}`;
+        this.year = year;
+        this.month = month;
+        this.messages = messages;
+        this.loaded = loaded;
+    }
+
+    getTitle() {
+        return this.title;
+    }
+
+    getMessages() {
+        return this.messages;
+    }
+
+    getLoaded() {
+        return this.loaded;
+    }
+}

web/src/js/store/createInitialState.js

@@ -1,18 +1,24 @@
+import Log from "../model/Log";
+
 export default () => {
     const urlParams = new URLSearchParams(window.location.search);
 
     const date = new Date();
+    const month =  date.getMonth() + 1;
+    const year = date.getFullYear();
+
+    const logs = {};
+
+    for (let prevMonth = month; prevMonth >= 1; prevMonth--) {
+        logs[`${year}-${prevMonth}`] = new Log(year, prevMonth, [], false);
+    }
 
     return {
         apiBaseUrl: process.env.apiBaseUrl,
         channels: [],
-        logs: {
-            messages: [],
-        },
+        logs: logs,
         loading: false,
         twitchEmotes: {},
-        month: date.getMonth() + 1,
-        year: date.getFullYear(),
         channel: urlParams.get("channel") || "",
         username: urlParams.get("username") || "",
     }

web/src/scss/modules/filter.scss

@@ -4,7 +4,7 @@
     width: 600px;
     background: $grey-medium;
     padding: 0.5rem;
-    margin: 0 auto 1rem;
+    margin: 0 auto;
     border-radius: 3px;
     font-size: 1rem;
     @include box-shadow(1);

web/src/scss/modules/log-view.scss

@@ -8,6 +8,12 @@
     border-radius: 3px;
     position: relative;
     padding: 2px;
+    margin-top: 1rem;
+    color: white;
+
+    &:first-child {
+        margin-top: 0;
+    }
 
     &::-webkit-scrollbar {
         width: 10px;
@@ -22,6 +28,10 @@
         display: none;
     }
 
+    &.not-loaded {
+        cursor: pointer;
+    }
+
     .line {
         padding: 0.25rem;
         color: white;