Develop Reference

Browser-like tabs in Vue - how?

I'm planning on an academics organizer application where you can add tabs much like you can add tabs in a browser, but it's in the context of the application. Each tab has its own history, route, navigation, etc.
I thought this would be trivial to implement with vue-router but thinking about it a little more I have no idea how to map router links to tabs that can change as routes are usually just set in stone.
I also thought about creating a separate router for each tab, but that also seems a bit funny. Can someone help me out?
EDIT: It's important to note that the application is not actually a web browser. I would just like browser-like tabs, but in the context of an academics-organizer-application-thing.

You probably don't need a router to do that you can simply use v-if and v-else on a specific property that sets the active tab

First idea.
It may be better to use some existed layout framework for tabs logic. For example Golden Layout
And when tab opens you can bootstrap into this tab vue.js app with vue-router in "abstract" mode.
For state managment you can use event bus or vuex. But it has to be the only one across the whole app.
Second idea.
If bootstrapping of several vue.js apps looks like overengineering, then you could create component which implements basic functions for history / navigation. This component have to wrap the content of each your tab.

Where do I place side effects in a React app?

I am building a React app and wanted to determine the cleanest way to achieve the following behavior.
I have a List component that renders N Details components. Each Details component has a Connect button component that will trigger some behavior. There are 3 different behaviors:
immediately make API call, which requires no state change
open a modal and make an API call based on values in the input modal, which involves changing app State to render a modal, and then making an API call when they confirm the modal
open a pop-up window and make an API call based on returned values from that pop-up window.
To achieve this, I can pass down 3 separate callbacks to the Connect button component, and switch based on the value of the Detail component so it knows which callback to pass. However, this means the Detail component has some "switch-on-type" behavior. For example,
if (this.props.name === `immediate-connection`) {
callbackToPass = this.props.callApi;
} else if (this.props.name === `trigger-modal`) {
callbackToPass = this.props.changeStateToRenderModal;
}... // etc.
I could also build 3 separate components that encapsulate the behavior and have them render from Details but this doesn't avoid the switch-on-type behavior.
Another way to phrase this question is how to get identical behavior from the Connect buttons when their implementation is different? Do I encapsulate this behavior in a sub-component rendered by the Connect button or do I lift it it up to when State would be changed?

vuejs accesing events and data between multiple components

I have an application that displays a google map with places autocomplete controller added to it just like this example from google
when an address is searched and selected, or the map bounds are changed I call algolia search, which has an event of onResult, that is fired when it received a response.
I am trying to turn this all into VUE js components. I have managed to get a google maps component and an autocomplete component.
I load the autocomplete first and then have the mounted section of the google maps attach it as a controller.
Where I start to fall down is the interoperability between the components.
I.E on place change which is an autocomplete event. I need to recentre the map and make the search.
But if they are two different components I can't get a reference to the google map.
when I bring the agolia search in to play, that also needs reference to the map when the event fires to pass the marker to it.
I started trying to use a simple view store, but this seems like I am tightly coupling the components.
Have I missed something or are simple stores and global event buses the way to go?

TL;DR;
Vuex may solve your problem, but need to see more code to know what's going on
There are multiple ways of achieving this, but I'll only list two.
Global State Management (Vuex), and props/listeners
Global State Management (Vuex)
If you know you'll only have one instance of each of the components (one map, one autocomplete) this is easy, fast, and reliable solution. The two components do not need to know about each other, they both deal with the global store. The autocomplete will update the data in the store, and the map will be notified whenever the variables it subscribes to change, and update accordingly.
The downside is...
Using vuex makes it harder to reuse and components.. Once you have more than one instance (ie. two autocompletes and two maps) then you may run into some issues, so you'll need to add additional complexity.
Props/Emit
If the two components have a direct connection, either siblings or parent-child relation, using this interaction (IMHO) is preferred.
The autocomplete component can have an #change or even a v-model set up, that parent component would link to the map component using a prop.
It seems like you may be doing it this way, which is not wrong, but without seeing any code, it's hard to make an assessment.

Maximize a component as a modal angular 5

I am working on an Angular 5 application with a sidepanel containing a master/detail view. I want to be able to maximize the detail component in a modal dialog, by pressing a button in this detail component - basically the behaviour one could expect from a regular desktop application's maximize functionality.
I have no problem displaying a modal with a component using eg. ng bootstrap, however i have many different components serving the role of the detail component, why i need do something a long the lines of injecting the component into the modal.
Basically aiming for a template file of the modal looking like so:
<whatever-app-is-injected></whatever-app-is-injected>
Well aware that a lot of material is available on modals, however haven't come around anything addressing dynamically setting the content component of a modal dialog.
Cheers!

I assume you are using ngBootstrap? If so, You can use their "component as content" feature.
http://plnkr.co/edit/BODdwmHFEOyHTcNF1PZf?p=preview
Basically, You have to hold a reference to your angular component as a variable, and pass it into their method.
inject their modal service
constructor(private modalService: NgbModal) {}
on open, pass in the reference to the component. In the example, the dynamic component they want to pass in as content of the modal is called NgbdModalcontent.
open() {
const modalRef = this.modalService.open(NgbdModalContent);
modalRef.componentInstance.name = 'World';
}
Hope this helps :)

Using react router without loosing "setState" state?

I have a React app that takes the user through various steps. I want to have the ability to use the browser's "back" button to go back to a previous step. Now I'm thinking of using react-router to do this.
Currently, I am simply reacting to events and calling setState on my top-level component.
My question: Does all state have to be reflected in the URL, or saved into local storage? Or can I keep the component's state and just have react-router change some props on the top-level component? When I do that, do I risk loosing the component's state (e.g. because React doesn't identify the old and the new components)?
I want to have simple URLs like /step1, /step2... . These do not reflect everything that is going on in the app. Specifically, I don't need or want the ability to directly enter such an URL. There are also privacy concerns. I am happy with having the application's state in the main component's ephemeral state. In other words, my application's state is not a pure function of the route.
I want to mainly use react-router to make the back button act as a glorified undo / go to last step button, and only secondly to navigate to other components. Any idea or small snippet showing how to do that? Or is react-router not suited for this?

When React navigates from one component hierarchy to another (such as react-router links / history navigation) it only unmounts the components that do not exist in the new component hierarchy. State is only lost in unmounted components. If your state is properly stored at the top level which only goes through rerendering and not remounting, you should retain it.