Fix bug caused by user clicking back button

mark.george / vue-demo

Browse code Fix bug caused by user clicking back button master
1 parent 0570b56 commit babd154542715a62f677fb94ad2f0424e91e7868 Mark George authored on 1 Sep 2021

Patch

Showing 2 changed files

Ignore Space Show notes View vue-client/static/js/data-store.js
export const Modes = { VIEW: "VIEW", ADD: "ADD", EDIT: "EDIT" } export const dataStore = Vuex.createStore({ state () { mode : Modes.VIEW; oldStudent : new Object(); selectedStudent : new Object(); }, mutations: { add(state) { state.selectedStudent = new Object(); state.mode = Modes.ADD; }, edit(state, student) { state.selectedStudent = student; state.oldStudent = student; state.mode = Modes.EDIT; }, view(state, student) { state.selectedStudent = student; state.mode = Modes.VIEW; }, oldStudent(state) { state.selectedStudent = state.oldStudent; state.mode = Modes.VIEW; } }, plugins: [window.createPersistedState({storage: window.sessionStorage})] }) export const dataStore = Vuex.createStore({ state () { editMode : false; selectedStudent : new Object(); }, mutations: { add(state) { state.selectedStudent = new Object(); state.editMode = false; }, edit(state, student) { state.selectedStudent = student; state.editMode = true; }, view(state, student) { state.selectedStudent = student; } }, plugins: [window.createPersistedState({storage: window.sessionStorage})] })

Ignore Space Show notes View

vue-client/static/js/data-store.js

Ignore Space Show notes View vue-client/static/js/student.js
/* global Vue, axios / var studentListApi = '//localhost:8080/api/students'; var studentApi = ({id}) => `//localhost:8080/api/students/${id}`; const app = Vue.createApp({ // bind dataStore variables to models computed: Vuex.mapState({ student: 'selectedStudent', mode: 'mode', editing: state => state.mode == Modes.EDIT }), mounted() { // If user hits the back button at the wrong time then the view page can end up displaying an empty student. // If this is the case then restore the old student. if(location.pathname.split('/').pop() == 'view.html' && !this.student.id) { dataStore.commit('view', dataStore.state.oldStudent) } }, methods: { save() { if (this.mode == Modes.EDIT) { // send PUT request to service to update student axios.put(studentApi({id: this.student.id}), this.student) .then(() => { window.location = 'list.html'; }) .catch(error => { console.error(error); alert("An error occurred - check the console for details."); }); } else { // send POST request to service to create student axios.post(studentListApi, this.student) .then(() => { window.location = 'list.html'; }) .catch(error => { console.error(error); alert("An error occurred - check the console for details."); }); } }, edit() { dataStore.commit('edit', this.student); window.location = 'add.html'; }, remove() { // send DELETE request to service to delete student axios.delete(studentApi({id: this.student.id})) .then(() => { window.location = 'list.html'; }) .catch(error => { console.error(error); alert("An error occurred - check the console for details."); }); } } }); // import data store import { dataStore, Modes } from './data-store.js' app.use(dataStore); // import page header component import { PageHeader } from './page-header.js'; app.component('pageheader', PageHeader); app.mount('#content'); / global Vue, axios */ var studentListApi = '//localhost:8080/api/students'; var studentApi = ({id}) => `//localhost:8080/api/students/${id}`; const app = Vue.createApp({ // bind dataStore variables to models computed: Vuex.mapState({ student: 'selectedStudent', editing: 'editMode', }), methods: { save() { if (this.editing) { // send PUT request to service to update student axios.put(studentApi({id: this.student.id}), this.student) .then(() => { window.location = 'list.html'; }) .catch(error => { console.error(error); alert("An error occurred - check the console for details."); }); } else { // send POST request to service to create student axios.post(studentListApi, this.student) .then(() => { window.location = 'list.html'; }) .catch(error => { console.error(error); alert("An error occurred - check the console for details."); }); } }, edit() { dataStore.commit('edit', this.student); window.location = 'add.html'; }, remove() { // send DELETE request to service to delete student axios.delete(studentApi({id: this.student.id})) .then(() => { window.location = 'list.html'; }) .catch(error => { console.error(error); alert("An error occurred - check the console for details."); }); } } }); // import data store import { dataStore } from './data-store.js' app.use(dataStore); // import page header component import { PageHeader } from './page-header.js'; app.component('pageheader', PageHeader); app.mount('#content');

Ignore Space Show notes View

vue-client/static/js/student.js

/* global Vue, axios */

var studentListApi = '//localhost:8080/api/students';
var studentApi = ({id}) => `//localhost:8080/api/students/${id}`;

const app = Vue.createApp({

// bind dataStore variables to models
	computed: Vuex.mapState({
		student: 'selectedStudent',
		mode: 'mode',
		editing: state => state.mode == Modes.EDIT
	}),

mounted() {
		// If user hits the back button at the wrong time then the view page can end up displaying an empty student.
		// If this is the case then restore the old student.
		if(location.pathname.split('/').pop() == 'view.html' && !this.student.id) {
			dataStore.commit('view', dataStore.state.oldStudent)
		}
	},

methods: {

save() {

if (this.mode == Modes.EDIT) {

// send PUT request to service to update student
				axios.put(studentApi({id: this.student.id}), this.student)
					.then(() => {
						window.location = 'list.html';
					})
					.catch(error => {
						console.error(error);
						alert("An error occurred - check the console for details.");
					});

} else {

// send POST request to service to create student
				axios.post(studentListApi, this.student)
					.then(() => {
						window.location = 'list.html';
					})
					.catch(error => {
						console.error(error);
						alert("An error occurred - check the console for details.");
					});
			}

edit() {
			dataStore.commit('edit', this.student);
			window.location = 'add.html';
		},

remove() {
			// send DELETE request to service to delete student
			axios.delete(studentApi({id: this.student.id}))
				.then(() => {
					window.location = 'list.html';
				})
				.catch(error => {
					console.error(error);
					alert("An error occurred - check the console for details.");
				});
		}
	}
});

// import data store
import { dataStore, Modes } from './data-store.js'
app.use(dataStore);

// import page header component
import { PageHeader } from './page-header.js';
app.component('pageheader', PageHeader);

app.mount('#content');

/* global Vue, axios */

var studentListApi = '//localhost:8080/api/students';
var studentApi = ({id}) => `//localhost:8080/api/students/${id}`;

const app = Vue.createApp({

// bind dataStore variables to models
	computed: Vuex.mapState({
		student: 'selectedStudent',
		editing: 'editMode',
	}),

methods: {

save() {

if (this.editing) {

} else {

edit() {
			dataStore.commit('edit', this.student);
			window.location = 'add.html';
		},

// import data store
import { dataStore } from './data-store.js'
app.use(dataStore);

// import page header component
import { PageHeader } from './page-header.js';
app.component('pageheader', PageHeader);

app.mount('#content');

Show line notes below