I want to show the relationship between activities and components (so that managers would understand :-)). Is it possible to achieve something like this in PlantUML?
You didn't say if it was an activity or a state diagram.
It's possible with a state diagram (however, the hide empty description won't work when you allowmixing for some reason -- it's a bug?):
#startuml
hide empty description
allowmixing
state A
state B
state C
A --> B
B --> C
component "Component" as Comp
B .right. Comp
#enduml
Related
I’m discovering React and I think there’s something I don’t understand correctly. Where am I supposed to put the code which computes things before displaying them, what would be the Model in a traditional MVC? Let’s say my app deals with fruits, and I want to display a list of them. So I get the list from an API (something like [{type: banana, boughtDate: 2021-01-03}, {type: apple, boughtDate: 2021-01-02}], give it to a FruitsList component, which loops over and generate FruitRow components. Now, I want to display every rows which are a banana in yellow. I can add a style="color: yellow" in my row component with a condition on the fruit type. But what if I want to have this color in every places where a banana is displayed in my app? That would duplicate this kind of if in every components. What is the React solution to this?
I could have an “utils” file with a function which takes a fruit and return the color, I guess, but that sounds like a very 2005 way of coding. Where I’m confused is that, in Java or other object languages where I come from, I would have a getColor() method on the Fruit class, and the Banana subclass would override it to return yellow. Or at the very least I would have the if (type === "banana") only once, in the getColor method of Fruit class. Can I (and should I) try to recreate that model in React with Javascript classes? So my ¨logical" code is only in one place, and then I could have generic component like Row which would take content and color as props, instead of a Fruit? If yes, where should I put this code?
Edit: Searching on the web, the official React doc links to this presentation by Pete Hunt from Facebook in 2013, where he says: "only put display logic in your components, I'm not advocating putting all your model validation code and fetching and data access in components, you might want to put them in third-party libraries that have some sort of bridges to your components, but only put logic that makes sense in your components"
So I think this is what I'm talking about, are there good practices about those "bridges", where do you put this logic?
Do this where you want to render anything that happens to have type: banana
<BananaType>
<WhateverYouWantToPutHere/>
</BananaType
And define BananaType like this:
const BananaType = props => <div style="color: yellow">{props.children}</div>
You can add logic to the BananaType component (e.g. fetch a thumbnail from an API) as well. Just do something like this:
const BananaType = props => {
const fetched_stuff = someHandyFunctionForFetchingStuff();
return <div><div>{fetched_stuff}</div>{props.children}</div>
}
If you only want to do some logic, and don't want to change the DOM at all, do this:
const BananaType = props => {
// Do whatever stuff you want to do here
return props.children;
}
I could have an “utils” file with a function which takes a fruit and return the color, I guess, but that sounds like a very 2005 way of coding.
Absolutely not at all! One of the things that makes react so strong is that it plays well with existing accepted practices and gives you options. Lets look at the issue you described and see what solutions we might be able to come up with.
Now, I want to display every rows which are a banana in yellow. I can add a style="color: yellow" in my row component with a condition on the fruit type.
So an important distinction to make here is, do you only want to style the row, or do you want to style "bananna" everywhere?
But what if I want to have this color in every places where a banana is displayed in my app? That would duplicate this kind of if in every components.
OPTION 1
In that case you COULD create a <Bananna /> component (and for each other fruit) and render that, which means you only need to style that one component and changing it in one place will affect all others.
OPTION 2
Use the method you descibed and just have it in a helper/utils file. I've been working on react applications since mid 2016 and I STILL find use for having separate files with re-usable logic in them.
OPTION 3
Your second option could be to use css module for this approach, using css modules would allow you to do something like css[bananna] in your component and which would apply the styling and prevent the need for you to have a switch statement.
Having not much experience in ReactJS currently trying to solve components cascade loading. Let me explain use case on an example.
Assume we have 3 comboboxes - Author, Book, Library.
Something triggers loading Author data -> When data is loaded, the first found author is automatically selected and is used as search criteria for the second combobox(Book) -> When all books of the selected Author is loaded, the first found book is selected. The selected Author and Book are used as search criteria for the 3rd combobox(Library) - after library is found select the first in the list.
Data is loaded using 'cross-fetch'.
Internal component is built from 3 "Select"(comboboxes) controls. Initially, an internal
implementation of 'Select' React control is used but the flow was
checked with react-select library as well. In both cases the
initialization of comboboxes looks similar:
<Select
options={authors}
value={selectedAuthor}
onChange={this._authorChanged}
/>
react-redux#connect maps state to props
So the questions is:
how properly and what is a proper place to catch "data loading is complete" events so that the next planning loadings may be initiated?
What I did/thought about:
I can detect in render() method that it is time to start the following data loading but as I learned it is not a good solution(we better not to do any operations other than required for rendering inside the method).
Theoretically, I can build loading chain from my actions but at the moment I do not like the idea as:
despite load method is currently used only for the initializaion of combobox later I want to reuse it in other places where next loading is not needed;
currently for me this does not look consistent when data load is not fired by ui events
I thought setting default selected value value={selectedAuthor}
during initialization would fire onChange event but it seems not true(at least in my case).
One page has been moved in the page tree structure. It was a second level child, now it is a third level child. The change has been made in the default language - English.
Before this change the page had already been translated to other languages.
After the change I noticed that the translated versions don't appear in the tree, neither in the old place nor in the new one.
In the database table Composite_Data_Types_IPageStructure seems to define child-parent relations, not depending on the language at all (all pages have the same Id in all languages, right?).
Tables Composite_Data_Types_IPage_Unpublished_<culture-code> still contain the translated pages.
However, for some reason only the default language tree shows all the pages.
How can I fix this?
That page that is the new parent of the moved page hadn't been translated yet. It seems that the CMS does not display a translated child under the not translated parent.
The steps that fixed the problem:
1. Translate the new parent page.
2. Click "Restart server".
The translated child appears in the tree after the server is reloaded (the cache is cleared).
Repeat these steps for every language.
I'm creating a large single page app with typescript (v1.8.10), react (v15.0.2), and react-router (v2.4.0) and I'm trying to find the best way to have data pass between components in the following type of scenario. I've seen other questions that are somewhat similar, but not quite the same especially when considering the type safety that TypeScript provides and I'd like to take advantage of.
Lets say I have a car viewing application with the following components: ComparisonComponent, DetailsComponent, and SelectComponent.
The DetailsComponent will show details of a car model and has a "select car" button which will bring up the SelectComponent. Once the user selects a car in the SelectComponent, the details of that car should be displayed in the DetailsComponent.
The ComparisonComponent will compare two car models and has 2 separate "select car" buttons (eg. button A and button B). When the user clicks button A, the SelectComponent should be displayed. Once the user selects a car in the SelectComponent, Car A should be displayed in the ComparisonComponent. Similarly if user hits button B, selects a car in SelectComponent, then Car B should be displayed in ComparisonComponent.
So, I am envisioning having the following routes:
"/details" -> DetailsComponent
"/details/select" -> SelectComponent
"/compare" -> ComparisonComponent
"/compare/select" -> SelectComponent
So, my questions are what is the proper way using react and react-router to have the SelectComponent pass back the selected car? Since the SelectComponent should be shared between the other components, once the user is done selecting a car, how does the CompareComponent know whether it was Car A or Car B that was selected? Since the SelectComponent is not a child of either DetailsComponent or CompareComponent, I don't think I can pass state from DetailsComponent or CompareComponent via props. So, how would I pass data between those different routes using react router?
What would be the proper flux way of handling this type of scenario? Would I create a details store and a compare store to keep track of the component specific data as the user navigates? It seems like that would lead to keeping a lot of UI specific data in stores, when that UI specific data is no longer used. It seems to me that it would waste a lot of memory especially for a large single page app that will end up having 100+ routes. How do I keep from showing stale data if the user exits and reenters either the DetailsComponent or the CompareComponent?
Thanks for any help that you guys can provide.
I would like to get your opinions and solutions on how can I solve this problem.
I have a website that displays restaurants, events and attractions in multiple cities and countries.
Right now I implemented the following structure:
Country A
--City A-1
----Restaurants
----Events
----Attractions
--City A-2
----Restaurants
----Events
----Attractions
Country B
--City B-1
----Restaurants
----Events
----Attractions
--City B-2
----Restaurants
----Events
----Attractions
There is so much redundancy, specially when it comes to modules that display content from specific categories.
What I thought would be a good solution, is to only create categories for Restaurants, Events and attractions, and figure out a way to specify which country and city by adding parameters to the URLS.
I would appreciate any thoughts and suggestions.
Thank you
You can't avoid creating the full menu in the menu manager.
As for modules you could add a textfield inside the module with an array like: 1,7:2,8... = menu_id_1,content_of_city_7:menu_id_2,content_of_city_8...
You will have just one module for each type (restaurant, event, attraction) connected to all menus you want to be displayed and you will check the content of it matching the menu id from url with your array.