prepare past logs

web/src/js/actions/loadLogs.js

@@ -4,6 +4,11 @@ import setLoading from "./setLoading";
 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;
+
 
             dispatch(setLoading(true));
                         

web/src/js/actions/setCurrent.js

@@ -1,7 +1,7 @@
 export default (channel, username) => (dispatch) => {
     dispatch({
         type: 'SET_CURRENT',
-        currentChannel: channel,
-        currentUsername: username
+        channel: channel,
+        username: username
     });
 }

web/src/js/components/Filter.jsx

@@ -2,38 +2,27 @@ import React, { Component } from "react";
 import { connect } from "react-redux";
 import setCurrent from "./../actions/setCurrent";
 import AutocompleteInput from "./AutocompleteInput";
+import loadLogs from "../actions/loadLogs";
 
 class Filter extends Component {
-
-    constructor(props) {
-        super(props);
-
-        const date = new Date();
-
-        this.state = {
-            year: date.getFullYear(),
-            month: date.getMonth() + 1,
-        }
-    }
-
     username;
 
     componentDidMount() {
-        if (this.props.currentChannel && this.props.currentUsername) {
-            this.props.searchLogs(this.props.currentChannel, this.props.currentUsername, this.state.year, this.state.month);
+        if (this.props.channel && this.props.username) {
+            this.props.dispatch(loadLogs());
         }
     }
 
     render() {
         return (
             <form className="filter" autoComplete="off" onSubmit={this.onSubmit}>
-                <AutocompleteInput placeholder="pajlada" onChange={this.onChannelChange} value={this.props.currentChannel} onAutocompletionClick={() => this.username.focus()} autocompletions={this.props.channels.map(channel => channel.name)} />
+                <AutocompleteInput placeholder="pajlada" onChange={this.onChannelChange} value={this.props.channel} onAutocompletionClick={() => this.username.focus()} autocompletions={this.props.channels.map(channel => channel.name)} />
                 <input
                     ref={el => this.username = el}
                     type="text"
                     placeholder="gempir"
                     onChange={this.onUsernameChange}
-                    value={this.props.currentUsername}
+                    value={this.props.username}
                 />
                 <button type="submit" className="show-logs">Show logs</button>
             </form>
@@ -41,19 +30,11 @@ class Filter extends Component {
     }
 
     onChannelChange = (channel) => {
-        this.props.dispatch(setCurrent(channel, this.props.currentUsername));
+        this.props.dispatch(setCurrent(channel, this.props.username));
     }
 
     onUsernameChange = (e) => {
-        this.props.dispatch(setCurrent(this.props.currentChannel, e.target.value));
-    }
-
-    onYearChange = (e) => {
-        this.setState({ year: e.target.value });
-    }
-
-    onMonthChange = (e) => {
-        this.setState({ month: e.target.value });
+        this.props.dispatch(setCurrent(this.props.channel, e.target.value));
     }
 
     onSubmit = (e) => {
@@ -61,18 +42,18 @@ class Filter extends Component {
 
         const url = new URL(window.location.href);
         const params = new URLSearchParams(url.search);
-        params.set('channel', this.props.currentChannel);
-        params.set('username', this.props.currentUsername);
+        params.set('channel', this.props.channel);
+        params.set('username', this.props.username);
         window.location.search = params.toString();
 
-        this.props.searchLogs(this.props.currentChannel, this.props.currentUsername, this.state.year, this.state.month);
+        this.props.dispatch(loadLogs());
     }
 }
 
 const mapStateToProps = (state) => ({
     channels: state.channels,
-    currentChannel: state.currentChannel,
-    currentUsername: state.currentUsername
+    channel: state.channel,
+    username: state.username
 });
 
 export default connect(mapStateToProps)(Filter);

web/src/js/components/LogSearch.jsx

@@ -20,18 +20,11 @@ class LogSearch extends Component {
                 <ToastContainer />
                 <Filter
                     channels={this.props.channels}
-                    searchLogs={this.searchLogs}
                 />
                 <LogView />
             </div>
         );
     }
-
-    searchLogs = (channel, username, year, month) => {
-        this.props.dispatch(loadLogs(channel, username, year, month)).catch((error) => {
-            toast.error("Failed to load logs: " + error);
-        });
-    }
 }
 
 const mapStateToProps = (state) => {

web/src/js/components/LogView.jsx

@@ -5,34 +5,27 @@ import reactStringReplace from "react-string-replace";
 
 class LogView extends Component {
 
-	static LOAD_LIMIT = 100;
-
-	state = {
-		limitLoad: true,
-	};
-
 	render() {
+		const oldLogs = [];
+		
+		for (let month = this.props.month - 1; month >= 1; month--) {
+			oldLogs.push(month)
+		}
+
+		console.log(oldLogs);
+
 		return (
 			<div className={"log-view"}>
-				{this.getLogs().map((value, key) =>
+				{this.props.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.getLogs().length > this.constructor.LOAD_LIMIT && this.state.limitLoad && <button className={"load-all"} onClick={() => this.setState({limitLoad: false })}>Load all</button>}
 				{this.props.loading && <div>loading</div>}
 			</div>
 		);
 	}
 
-	getLogs = () => {
-		if (this.state.limitLoad) {
-			return this.props.messages.slice(this.props.messages.length - LogView.LOAD_LIMIT, this.props.messages.length).reverse();
-		} else {
-			return this.props.messages.reverse();
-		}
-	};
-
 	renderMessage = (message) => {
 		for (let emoteCode in twitchEmotes) {
 			const regex = new RegExp(`(?:^|\ )(${emoteCode})(?:$|\ )`);
@@ -60,6 +53,7 @@ class LogView extends Component {
 
 const mapStateToProps = (state) => {
 	return {
+		month: state.month,
 		messages: state.logs.messages,
 		loading: state.loading
 	};

web/src/js/store/createInitialState.js

@@ -1,6 +1,8 @@
 export default () => {
     const urlParams = new URLSearchParams(window.location.search);
 
+    const date = new Date();
+
     return {
         apiBaseUrl: process.env.apiBaseUrl,
         channels: [],
@@ -9,7 +11,9 @@ export default () => {
         },
         loading: false,
         twitchEmotes: {},
-        currentChannel: urlParams.get("channel") || "",
-        currentUsername: urlParams.get("username") || "",
+        month: date.getMonth() + 1,
+        year: date.getFullYear(),
+        channel: urlParams.get("channel") || "",
+        username: urlParams.get("username") || "",
     }
 }

web/src/js/store/reducer.js

@@ -7,7 +7,7 @@ export default (state, action) => {
         case "SET_LOGS":
             return { ...state, logs: action.logs };
         case "SET_CURRENT":
-            return { ...state, currentChannel: action.currentChannel, currentUsername: action.currentUsername };
+            return { ...state, channel: action.channel, username: action.username };
         case "SET_TWITCH_EMOTES":
             return { ...state, twitchEmotes: action.twitchEmotes };
         default:

web/src/scss/base/body.scss

@@ -4,8 +4,6 @@ body {
     background: $grey-dark;
     font-family: Helvetica, Arial, sans-serif;
     height: 100%;
-    overflow: hidden;
-    position: absolute;
     width: 100%;
 }