Is this good URL design practice in React? - reactjs

I start out in a listview where each item in the listview is an item each with a unique _id displaying only partial information, clicking on them will route to another page and display all the info. Now, I click on an item, route to the unique id and a brand new component, then, in the new component, I take that unique ID, search up that unique ID in my MongoDB database, then display the item that was found.
If not, what is a better way? I was trying to model youtube's URL design (at least what it appears to me), in the home page, they display many videos, and then on click, they route to /watch + specific id, and then display the video.

Related

Is there a way to add other columns to the list display in the page admin?

Currently, in the wagtail admin for a page, it lists the Order, Title, Updated, Page Type, and Status. I would like to add an extra column for a property from my custom page model.
I would have thought that if there isn't a built-in method, I could at least overextend a template, or simply append something to the page title?
My situation is that I have created a blog page that has a date field. It is only that I wish to show.
My google-fu has failed me entirely on finding an answer as I'm sure this must have been discussed before.
There isn't currently an 'official' way for customising the columns in the listing. However, for displaying the date alongside the page title, you could make use of the get_admin_display_title method added in Wagtail 1.8: http://docs.wagtail.io/en/latest/reference/pages/model_reference.html#wagtail.wagtailcore.models.Page.get_admin_display_title

Cachephp 3, options list from table in each page

I'm using Cakephp 3.0. I want to show a checkboxes filter for categories in a menu present in each page with an icon as label.
I have a table (model) "category" with id, name, icon, etc. I want to take these fields in a form in the menu, but I do not want to repeat the query in each method of each controller to pass the variable.
I thought to make the query in the view or in a helper, but I did not find the way.
How would you proceed?
Thank you

Angular active menu item but not related to routing

My Angular app teaches kids how to cook. The main screen of the app is a kitchen.
On the left, the user can select a food category of the ingredient they want to add. Then, in the next column, they can select the specific food.
So for example, if they want to see all the spices, they click "Spices" and then drag the exact spice into the pot.
My question is, how can I get the "Spices" button to be highlighted while it is in use?
I've seen some similar questions but they are all related to routing. This is not related to routing (i.e. the page is not changing)
Use ng-class to toggle some sort of 'selected' class based on what is unique about your data when you click on that particular menu item. It could look something like this:
<a ng-click="items = spices" ng-class="{selected: (items === spices)}">Spices</a>
Then you just need to create a style for your .selected items.

How can I go back to a search result table that is in a partial view?

I'm working in a ASP.NET MVC project that accesses an SQL database and allows the user to search and view the data. Let me describe it:
I have a view with a search filter. When I click in a search button in this view, the controller returns a partial view with a table with some data, which appears below the filter. Then, I can click in an actionLink of a row to go to another view with the details. In the Details view I have a "back to list" button.
When I click in "back to list", I want the view, that has the filter and the partial view, to appear exactly as it was before. How can I do this?
My "back to list" is an actionlink that goes to the view. The problem is that, when I click in "back to list", the partial view with the table doesn't appear because it is necessary to click in the submit button first. How could I force the submit button through the controller?
This isn't really a problem that is solved inherently with MVC. It's really just a state concern, where you need to persist the state of a page, and resume that state when coming back to it.
This can be solved through typical means of persisting state between pages:
1) Save your search criteria in the session, and retrieve them when returning to the page.
2) Pass your search criteria through the link to the details page, and then again on the "back to list" link.
And (as the comment below points out), you'll of course need to then use the values from the session/querystring to run the search again and render the search results to the view, just as you did when you originally performed the search.
The easiest way is open the link content in another tab... using Clic here
Client side option:
You could load the content of the link in another container <div>... hiding the one that holds the search results and filters. Then, when user clics "Back to search...", you just show the container with the search results and filters, and hide and clean the other container.
This code is not so hard, and you don't need to go to the server again.
If you are OK with reloading the page, #Jerard Rose, in his answer, explains 2 other approachs that involves re-loading the search results, querying again the database.
Values can be transferred between pages in many ways such as: Session, QueryString, Public property, Cookie, HTTPContext.
Perhaps you are calling a 'details' action to travel to the details page. What can you do is that,
1. When you go to the details page, store your search filter value and pass it to the details page. so that when you return to the previous page you can get back/pass the values again if needed.
2. Now if you click 'back to list' button pass the values that you already have for filtering to your desired action which is responsible for the partial view.
3. Do the same thing that you did while clicking on the 'Search' button in the action.
Hope this will help
Thanks

How can I feed two Marionette modules a piece of info from an appRoute?

I have an app with a Sidebar, which is its own module with its own region, and a primaryRegion that can show views from two other modules (a Dashboard view or a Detail view of an item selected from the sidebar).
When an item gets clicked in the Sidebar, it changes its display to show that it's been selected and gets displayed in the primaryRegion.
The problem I'm running into is that I've recently added routes to the app to directly display item details in the primaryRegion and I can't maintain this behavior when going directly to the Detail view for a given item.
Given that only one module can respond to a route, how can I get the Sidebar to select the item designated in the URL and also display that item's Detail view in the primaryRegion without using a global object or introducing race conditions?
Apologies for the lack of code, I'm having a hard time reducing it down to the essential parts while keeping it clear. Hopefully my description is good enough but if not please let me know and I'll provide more detail.
I can think of two options you could try:
Have Detail fire a global event when it renders, and have the Sidebar be listening for that event and highlight the correct item based on the data it gets from that event.
Or have your Sidebar handle the routing and use a variable route to determine what Detail to render. For example, have a route in the Sidebar of 'details/:id': showDetails' and then a function like:
-
showDetails: function(id) {
// highlight item with id === id here
this.primaryRegion.show(new Details(id));
}

Resources