Add vuex and move isConnected to vuex state.

This commit is contained in:
Richard Lewis 2019-02-26 22:23:41 +02:00 committed by Pavel Djundik
parent e71360ad39
commit 69cb891b1a
10 changed files with 34 additions and 14 deletions

View File

@ -30,7 +30,7 @@
id="upload"
type="button"
aria-label="Upload file"
:disabled="!this.$root.isConnected"
:disabled="!$store.state.isConnected"
/>
</span>
<span
@ -42,7 +42,7 @@
id="submit"
type="submit"
aria-label="Send message"
:disabled="!this.$root.isConnected"
:disabled="!$store.state.isConnected"
/>
</span>
</form>
@ -187,7 +187,7 @@ export default {
this.$refs.input.click();
this.$refs.input.focus();
if (!this.$root.isConnected) {
if (!$store.state.isConnected) {
return false;
}

View File

@ -3,7 +3,7 @@
<div :class="['show-more', {show: channel.moreHistoryAvailable}]">
<button
ref="loadMoreButton"
:disabled="channel.historyLoading || !$root.isConnected"
:disabled="channel.historyLoading || !$store.state.isConnected"
class="btn"
@click="onShowMoreClick"
>
@ -228,7 +228,7 @@ export default {
});
},
onShowMoreClick() {
if (!this.$root.isConnected) {
if (!this.$store.state.isConnected) {
return;
}

View File

@ -11,7 +11,7 @@ socket.on("auth", function(data) {
// And we will reload the page to grab the latest version
if (utils.serverHash > -1 && data.serverHash > -1 && data.serverHash !== utils.serverHash) {
socket.disconnect();
vueApp.isConnected = false;
vueApp.$store.commit("isConnected", false);
vueApp.currentUserVisibleError = "Server restarted, reloading…";
location.reload(true);
return;
@ -31,7 +31,7 @@ socket.on("auth", function(data) {
if (!data.success) {
if (vueApp.activeWindow !== "SignIn") {
socket.disconnect();
vueApp.isConnected = false;
vueApp.$store.commit("isConnected", false);
vueApp.currentUserVisibleError = "Authentication failed, reloading…";
location.reload();
return;

View File

@ -17,7 +17,7 @@ socket.on("init", function(data) {
const previousActive = vueApp.activeChannel && vueApp.activeChannel.channel.id;
vueApp.networks = mergeNetworkData(data.networks);
vueApp.isConnected = true;
vueApp.$store.commit("isConnected", true);
vueApp.currentUserVisibleError = null;
if (!vueApp.initialized) {

View File

@ -47,7 +47,7 @@ socket.on("authorized", function() {
function handleDisconnect(data) {
const message = data.message || data;
vueApp.isConnected = false;
vueApp.$store.commit("isConnected", false);
vueApp.currentUserVisibleError = `Waiting to reconnect… (${message})`;
$("#loading-page-message").text(vueApp.currentUserVisibleError);

15
client/js/store.js Normal file
View File

@ -0,0 +1,15 @@
import Vue from "vue";
import Vuex from "vuex";
Vue.use(Vuex);
export default new Vuex.Store({
state: {
isConnected: false
},
mutations: {
isConnected(state, payload) {
state.isConnected = payload;
},
}
});

View File

@ -89,7 +89,7 @@ class Uploader {
return;
}
if (!this.vueApp.isConnected) {
if (!this.vueApp.$store.state.isConnected) {
this.handleResponse({
error: `You are currently disconnected, unable to initiate upload process.`,
});
@ -177,9 +177,7 @@ class Uploader {
this.setProgress(0);
if (response.error) {
// require here due to circular dependency
const {vueApp} = require("./vue");
vueApp.currentUserVisibleError = response.error;
this.vueApp.currentUserVisibleError = response.error;
return;
}

View File

@ -1,6 +1,7 @@
"use strict";
const Vue = require("vue").default;
const store = require("./store").default;
const App = require("../components/App.vue").default;
const roundBadgeNumber = require("./libs/handlebars/roundBadgeNumber");
const localetime = require("./libs/handlebars/localetime");
@ -21,7 +22,6 @@ const vueApp = new Vue({
currentUserVisibleError: null,
initialized: false,
isAutoCompleting: false,
isConnected: false,
isFileUploadEnabled: false,
isNotified: false,
networks: [],
@ -56,6 +56,7 @@ const vueApp = new Vue({
props: this,
});
},
store,
});
Vue.config.errorHandler = function(e) {

View File

@ -121,6 +121,7 @@
"vue-server-renderer": "2.6.10",
"vue-template-compiler": "2.6.10",
"vuedraggable": "2.23.2",
"vuex": "3.1.2",
"webpack": "4.41.2",
"webpack-cli": "3.3.10",
"webpack-dev-middleware": "3.7.2",

View File

@ -9234,6 +9234,11 @@ vuedraggable@2.23.2:
dependencies:
sortablejs "^1.10.1"
vuex@3.1.2:
version "3.1.2"
resolved "https://registry.yarnpkg.com/vuex/-/vuex-3.1.2.tgz#a2863f4005aa73f2587e55c3fadf3f01f69c7d4d"
integrity sha512-ha3jNLJqNhhrAemDXcmMJMKf1Zu4sybMPr9KxJIuOpVcsDQlTBYLLladav2U+g1AvdYDG5Gs0xBTb0M5pXXYFQ==
watchpack@^1.6.0:
version "1.6.0"
resolved "https://registry.yarnpkg.com/watchpack/-/watchpack-1.6.0.tgz#4bc12c2ebe8aa277a71f1d3f14d685c7b446cd00"