From 805ebef01c0a6acc7c594cd5130ae3e70a0e5fa5 Mon Sep 17 00:00:00 2001 From: Robbie Antenesse Date: Sat, 21 Dec 2019 20:16:52 -0700 Subject: [PATCH] Create shelves view without adding to routes --- app/views/shelves/controller.js | 37 +++++++++++++++ app/views/shelves/index.js | 19 ++++++++ app/views/shelves/shelf.js | 11 +++++ app/views/shelves/shelves/editModal.js | 12 +++++ app/views/shelves/shelves/index.js | 66 ++++++++++++++++++++++++++ server/routes/shelf.js | 13 +++++ 6 files changed, 158 insertions(+) create mode 100644 app/views/shelves/controller.js create mode 100644 app/views/shelves/index.js create mode 100644 app/views/shelves/shelf.js create mode 100644 app/views/shelves/shelves/editModal.js create mode 100644 app/views/shelves/shelves/index.js diff --git a/app/views/shelves/controller.js b/app/views/shelves/controller.js new file mode 100644 index 0000000..134e0c8 --- /dev/null +++ b/app/views/shelves/controller.js @@ -0,0 +1,37 @@ +import { ViewController } from '../controller'; + +export class ShelvesController extends ViewController { + constructor(state, i18n) { + // Super passes state, view name, and default state to ViewController, + // which stores state in this.appState and the view controller's state to this.state + super(state, i18n, 'shelves', { + openModal: null, // state value for edit modals + myShelves: [], // array of objects in sort order with name, id, and deletability. + loadedShelves: {}, // object key is shelf id with name and shelfItems + }); + + // If using controller methods in an input's onchange or onclick instance, + // either bind the class's 'this' instance to the method first... + // or use `onclick=${() => controller.submit()}` to maintain the 'this' of the class instead. + } + + get openModal () { + return this.state.openModal; + } + set openModal (modalId) { + this.state.openModal = modalId; + } + + get targetShelf () { + return typeof this.appState.query.shelf !== 'undefined' ? parseInt(this.appState.query.shelf) : null; + } + + getUserShelves () { + return [ + {id:1,name:'Test Shelf',isDeletable:false,isPublilc:false}, + {id:1,name:'Deletable Shelf',isDeletable:true,isPublilc:false}, + {id:1,name:'Public Shelf',isDeletable:true,isPublilc:true}, + ]; + // return fetch('/api/shelves/get').then(response => response.json); + } +} \ No newline at end of file diff --git a/app/views/shelves/index.js b/app/views/shelves/index.js new file mode 100644 index 0000000..8416af3 --- /dev/null +++ b/app/views/shelves/index.js @@ -0,0 +1,19 @@ +import html from 'choo/html'; + +import { ShelvesController } from './controller'; // The controller for this view, where processing should happen. +import { shelfView } from './shelf'; +import { shelvesView } from './shelves'; + +// This is the view function that is exported and used in the view manager. +export const shelvesView = (state, emit, i18n) => { + const controller = new ShelvesController(state, i18n); + + // Returning an array in a view allows non-shared parent HTML elements. + // This one doesn't have the problem right now, but it's good to remember. + return [ + (controller.targetShelf !== null + ? shelfView(controller, emit) + : shelvesView(controller, emit) + ), + ]; +} \ No newline at end of file diff --git a/app/views/shelves/shelf.js b/app/views/shelves/shelf.js new file mode 100644 index 0000000..579ba3e --- /dev/null +++ b/app/views/shelves/shelf.js @@ -0,0 +1,11 @@ +import html from 'choo/html'; + +export const shelfView = (homeController, emit) => { + const { __ } = homeController.i18n; + + return [ + html`
+

To Do

+
`, + ]; +} \ No newline at end of file diff --git a/app/views/shelves/shelves/editModal.js b/app/views/shelves/shelves/editModal.js new file mode 100644 index 0000000..bdf6d68 --- /dev/null +++ b/app/views/shelves/shelves/editModal.js @@ -0,0 +1,12 @@ +import html from 'choo/html'; + +export const editModal = (shelf, shelvesController) => { + const { __ } = shelvesController.i18n; + + // Should add a scale of publicity: private, friends only, friends & followers, public + return [ + html`
+

To Do

+
`, + ]; +} \ No newline at end of file diff --git a/app/views/shelves/shelves/index.js b/app/views/shelves/shelves/index.js new file mode 100644 index 0000000..4d7e2bd --- /dev/null +++ b/app/views/shelves/shelves/index.js @@ -0,0 +1,66 @@ +import html from 'choo/html'; +import modal from '../partials/modal'; + +export const shelvesView = (shelvesController, emit) => { + const { __ } = shelvesController.i18n; + + if (!shelvesController.isLoggedIn) { + return [ + html`
+

${__('shelves.no_shelf_selected')}

+
+
+

${__('shelves.not_logged_in')}

+
+
+ +
+
+
`, + ]; + } + + if (shelvesController.state.myShelves.length <= 0) { + shelvesController.getUserShelves().then(result => { + emit('render'); + }); + } + + // Should add a scale of publicity: private, friends only, friends & followers, public + return [ + html`
+

${__('shelves.title')}

+ ${controller.state.myShelves.map(shelf => { + return html`
+
+

+ ${shelf.name} +

+ ${shelf.isDeletable === true + ? [ + modal(`editShelf${shelf.id}`, shelvesController, editModal(shelf, shelvesController), { + buttonHTML: html``, + headerText: `${__('shelves.edit.editing')}: ${shelf.name}`, + footerHTML: html`
+ + +
`, + }), + + html``, + ] + : null} +
+
`; + })} +
`, + ]; +} \ No newline at end of file diff --git a/server/routes/shelf.js b/server/routes/shelf.js index a8c9bcb..6bce576 100644 --- a/server/routes/shelf.js +++ b/server/routes/shelf.js @@ -7,6 +7,19 @@ async function routes(fastify, options) { return false; }); + fastify.post('/api/shelves/get', async (request, reply) => { + if (!request.isLoggedInUser) { + return reply.code(400).send({ + error: true, + message: 'api.not_logged_in', + }); + } + + return request.user.getShelves({ + attributes: ['id', 'name', 'isDeletable', 'isPublic'], + }); + }); + fastify.post('/api/shelf/create', async (request, reply) => { if (!request.isLoggedInUser) { return reply.code(400).send({