How to decide function in which component? (React) - react-hooks

I start to learn React. I try to create a little blog. The blog's part of structure likes this.
--blog
--Artiecle
--button
Now, I want to post an article. I get textarea's value from article component. But, onClick action is in button component.
I have two thoughts.
put in button component. Because, that is the actual trigger position.
put in blog component. Because, blog is common parent component.
I find some information about Hook Rule, layers or decomposition and try to read some side project.
Maybe I should not isolate button component. Or it's just personal style,

Related

Laravel - open popup/modal for each post from list

I have a page with a list of blog posts.
What would be the best way to open the post content on the same page in a modal, without redirecting to the single post page?
What I thought it's to make it in vanilla JS, to have an event on each post, have the data for all the posts in some array or each inside an attribute and when the event is triggered, fill the data for that post in the modal and show it. Maybe I can use AlpineJS for this.
Seems rudimentary to have it in vanilla, is there a better way to do it?
I also thought about Livewire, but I'm afraid it will be slow, have looked on some videos on YT, and when the button was clicked, it was visible when the data was filling in, looked slow.
Have thought also to make API calls, but I'd have to make the authentication work on that specific route, which would complicate it too much I guess, since it's going to be used just for this page.
What are your thoughts, how would you do it?
All your suggestions would work. Just depends on what you prefer and are able to implement. Also, think around opening the Post content in a modal, how much data do you want to load in the modal? Such questions will assist in you deciding the best way to design the post page.

Vuetify helper classes and props

Hi I come from bootstrap and Im trying to learn some vuetify. I had some questions about the framework that I couldnt find the answer to in the vuetify docs.
What is a prop? (1)
What is the difference between adding a prop and adding it as a class attr? (2)
Is there a list where I can find all the props and helper classes for the components? (3)
For example: I was trying to make a container take the full width of the screen and couldnt find any property that the vuetify docs indicated that would make my container act like, this so I had to look online. I finally read on a stack overflow post that there was a prop called full-height that did exactly what I wanted. The problem was the conatiner docs said nothing about this prop in relation to the container itself. I also looked around the customization and the styles and animations tabs on the docs and could find anything about it. Where are all these props and helper classes defined?
Vuetify uses Vue.js components, so you should be familiar with them.
However, I'll try to answer your 3 questions:
Props are a way to pass data to components. Say, for example, you are building a header component which needs to get the title from the page in which you put it in. Then, you can just declare a title property and then use that inside the component. You can then pass it like your standard HTML attributes, e.g. <the-title title="Main Page" /> If the component is called TheTitle. For more thorough information, There is a whole page about props inside the official Vue.js docs.
In your use case, a class is useful when you have the appropriate CSS styling for it, otherwise it wouldn't do anything. My suggestion would be to use props for styling individual components where you don't have the same style anywhere else and classes for cases where a style repeats itself. If the style is local to the component, make sure you add scoped to the style tag to avoid applying it anywhere else.
Vuetify has a nice API explorer which you can use to browse the entire collection of components. Each one has an API section where you can see all the details, including information about the props and other stuff.

Spring Views - Combining elements into views

Currently, in our deployment we have a abstract type Component which represents a part of our Page, basically an element such as a Question, which can have multiple choice, a text box or any other form of answering it, or a Video that users can play, basically a shard of a page that is interchangeable, basically, our design was to have a specific area in our website which would be rendered through a list of Components, we tried at first to have each "Page" object have a List of Components, and each Component would have a method render that would return a Spring View, we thought we could iterate over the list and somehow mash the views together.
We also tried using XSTLViews with no more success, it seems to be more of a design problem and our abuse of the way Spring MVC should be used.
We will really be glad to receive any advice/tips/corrections about how to do it right and maybe some corrections about misconceptions we might have.
It sounds like you're more than half way to a design that uses AJAX to build your page. You're trying to mash up a bunch of Components into one request. What if you returned a container page which then requested/inserted a block of html for each URL it was given a render time. Each of these URLs would refer to a single component. It might be a performance hit if you are including a lot of these Components, but it seems to fit the design.

MVC3, custom object lists and searching

I'm new to MVC3 (and MVC in general) and looking for a bit of advice. Pointing me in the direction of some good articles or tutorials would be good enough I think. I'm a bit familiar with the concept of MVC, and I've been a c# programmer (hobbyist and partly professional) for a while now.
The issue I have is that I have an object (call it "Game"), which has a List<T> as a property (call T "Player"), and I want the user to "select" the player to add them to the Game.
All players would be managed in another part of the application, so there is no need to think about "managing" the master player pool at this point.
I'm looking for a best practice for:
adding custom objects to a list that of n length while on a page.
Searching for and selecting a custom object in the first place.
I can do the standard pages for the database access so that's not a problem. In asp I would have just done something like a wizard and managed everything through postback on the page, but I want to try and keep to best practice where i can for this project.
Any pointers welcome, also looking for some good physical books to buy on MVC.
If I understand you correctly you want two elements within the page, a player search (over all players) and a list of players already added to the game.
For the player search you want to use a bit of jQuery to hook up an actionResult that returns a JSON result of your player results. You can then display these results without having to leave the page, in appearance much like an AJAX post in webforms.
You have more options for how you add the player to the game, depending on if you want to add more than one at once, or want a backout stage (so you can "add" players and then cancel out and they won't be added).
the option I think would give the most seamless interface would be a jQuery/javascript call to an action method which datawise adds your player to the game, and use jQuery to add the element to your players in the game on the page.
For the adding of a player in your controller you could return a bool in a JSON result, just you have confirmation that the player was successfully added to the list.
For reference: This is quite an old article but highlights the power of working with jQuery and MVC quite nicely I think http://andreasohlund.net/2008/12/21/asp-net-mvc-jquery-true/

Ajax driven timeline-style blog (in Drupal)

I have created a blog in drupal using CCK and taxonomy.
I wish to display my posts in a timeline, according to the posted date (using views).
So far I have created a listing of the post titles on a timeline.
I now want to display the posts using ajax, wherein clicking on a post title will load the content of that node on the same page. Going ahead I'll add each fetched node into a ul tag and thus create a carousel kind of display of all fetched posts so far.
Whats the best way of achieving this, considering that I have enough knowledge to create a custom module.
Here's where I got my idea from.
http://www.jvm-neckar.de
Try the aptly named http://drupal.org/project/timeline project. I used it long time ago... its a nifty module and you can visualize your various posts on a scrollable timeline. Posts that are frequent will be together and posts that are apart (in time) will be apart -- its all scaled accurately. It has integration with views, of course.
I'm not sure about whether it will meet your exact requirements. Check out an example here:
http://simile.mit.edu/timeline/examples/jfk/jfk.html

Resources