From 1b1537289111f10a5e2bb45f9ed29ca18178de73 Mon Sep 17 00:00:00 2001 From: gempir Date: Sat, 8 Feb 2020 17:12:36 +0100 Subject: [PATCH] prepare past logs --- web/src/js/actions/loadLogs.js | 5 +++ web/src/js/actions/setCurrent.js | 4 +-- web/src/js/components/Filter.jsx | 43 +++++++------------------- web/src/js/components/LogSearch.jsx | 7 ----- web/src/js/components/LogView.jsx | 26 ++++++---------- web/src/js/store/createInitialState.js | 8 +++-- web/src/js/store/reducer.js | 2 +- web/src/scss/base/body.scss | 2 -- 8 files changed, 36 insertions(+), 61 deletions(-) diff --git a/web/src/js/actions/loadLogs.js b/web/src/js/actions/loadLogs.js index 7034c59..258da02 100644 --- a/web/src/js/actions/loadLogs.js +++ b/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)); diff --git a/web/src/js/actions/setCurrent.js b/web/src/js/actions/setCurrent.js index 8384cac..3aa929d 100644 --- a/web/src/js/actions/setCurrent.js +++ b/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 }); } \ No newline at end of file diff --git a/web/src/js/components/Filter.jsx b/web/src/js/components/Filter.jsx index d80f676..fe4d387 100644 --- a/web/src/js/components/Filter.jsx +++ b/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 (
- this.username.focus()} autocompletions={this.props.channels.map(channel => channel.name)} /> + this.username.focus()} autocompletions={this.props.channels.map(channel => channel.name)} /> this.username = el} type="text" placeholder="gempir" onChange={this.onUsernameChange} - value={this.props.currentUsername} + value={this.props.username} /> @@ -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); \ No newline at end of file diff --git a/web/src/js/components/LogSearch.jsx b/web/src/js/components/LogSearch.jsx index 38091be..3f25d28 100644 --- a/web/src/js/components/LogSearch.jsx +++ b/web/src/js/components/LogSearch.jsx @@ -20,18 +20,11 @@ class LogSearch extends Component { ); } - - 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) => { diff --git a/web/src/js/components/LogView.jsx b/web/src/js/components/LogView.jsx index 71ffc80..fce2104 100644 --- a/web/src/js/components/LogView.jsx +++ b/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 (
- {this.getLogs().map((value, key) => + {this.props.messages.reverse().map((value, key) =>
this.setState({})}> {this.formatDate(value.timestamp)}{this.renderMessage(value.text)}
)} - {this.getLogs().length > this.constructor.LOAD_LIMIT && this.state.limitLoad && } {this.props.loading &&
loading
}
); } - 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 }; diff --git a/web/src/js/store/createInitialState.js b/web/src/js/store/createInitialState.js index fe937cd..6ff8c25 100644 --- a/web/src/js/store/createInitialState.js +++ b/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") || "", } } \ No newline at end of file diff --git a/web/src/js/store/reducer.js b/web/src/js/store/reducer.js index 50ab011..9a8f429 100644 --- a/web/src/js/store/reducer.js +++ b/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: diff --git a/web/src/scss/base/body.scss b/web/src/scss/base/body.scss index defa75d..a7f104c 100644 --- a/web/src/scss/base/body.scss +++ b/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%; }