add tutorial.md#142
Conversation
| @@ -0,0 +1,227 @@ | |||
| # Tutorial <!-- omit in toc --> | |||
|
|
|||
| - [Main Component](#main-component) | |||
|
|
||
|
|
||
| ## Main Component | ||
| In the root(`Eplant/main.tsx`), you can see the `Eplant` component, whchi is our main component of our application. |
There was a problem hiding this comment.
Spelling error: "...which is our main component..."
| </React.StrictMode> | ||
| ``` | ||
|
|
||
| We only have one single Route at the moment but we will have one Route for one component. |
There was a problem hiding this comment.
I suggest that we clarify here that it is the Eplant.tsx that handles routing. But you are correct, eventually we will expect to have one Route for each component.
|
|
||
|
|
||
| ## Eplant Layout | ||
| Eplant Layout (`Eplant/EplantLayout.tsx`) hosts the actual views and ViewContainer (`Eplant/UI/Layout/ViewContainer/index.tsx`) is main component that does this. |
There was a problem hiding this comment.
I would clarify that the ViewContainer is the one that hosts the actual views, and handles the viewing options available to the view. It also provides a topbar, and a preview stack if necessary.
|
|
||
|
|
||
| ### useViewData | ||
| The `useViewDatai` function is a custom React hook designed to manage and load view data in the application. It leverages TypeScript generics to handle different types of view data, state, and actions. |
There was a problem hiding this comment.
Spelling error: useViewData
|
|
||
|
|
||
| ## View Interface | ||
| Please see the `View` interface in `View \index.ts` |
There was a problem hiding this comment.
Path error: View/index.ts
| ### component: | ||
|
|
||
| A required React component that renders the view. | ||
| Takes props of type ViewProps<Data, State, Action>. |
There was a problem hiding this comment.
Perhaps we can wrap this in ViewProps<Data, State, Action> to follow the pattern in L160?
|
|
||
|
|
||
| ## state | ||
| `state` (`Eplant/state/index.tsx`) is a React module that manages state using `Jotai` and provides various hooks and utility functions for managing application state in the application, which is similar to `Redux` and `React Hooks`. |
|
|
||
|
|
||
|
|
||
| ## Eplant2 |
There was a problem hiding this comment.
This is a stupid approach, but can you add a section here that clarifies that using the Developer's console from the browser and poking around ePlant2 is the way that a developer can find the BAR APIs that they will need to call?
| ### Reactivity: | ||
| Components automatically re-render when atom state changes. | ||
|
|
||
| ## When you create a new `view` |
| ### getInitialData: | ||
|
|
||
| A required method that fetches the data needed for the view based on a given gene and provides loading feedback. | ||
|
|
There was a problem hiding this comment.
Should there be mention on error handling in this document? Such as what happens when getInitialData works improperly?
|
|
||
| ## Eplant2 | ||
| https://bar.utoronto.ca/eplant/ | ||
|
|
There was a problem hiding this comment.
Tutorial might benefit from a code template/boilerplate code to get started
|
Thank you everyone for the comments! |
|
I am unsure if this suggestion is unnecessary from other's perspectives but as a new joiner I think this tutorial would benefit from having mention of the config.ts file and updating that in order to display the new view. This is possible to figure out without explicit guidance but it may make things easier for those who know nothing about the code structure |
|
|
||
| Next, create the `GetStartedView` component that serves as an introductory view, guiding users on how to interact with the application. | ||
|
|
||
| ### Define GetStartedView Component: |
There was a problem hiding this comment.
Question, why was the component, tile, index structure chosen for the tutorial? Is this the expected format for new views moving forward, or just for ease of new contributors learning how everything works? I noticed that other views do not follow this structure
There was a problem hiding this comment.
@bdls-jamal yes you are right. Most of the views might not follow this structure. I chose them for easier understanding for new contributors who are not familiar with frontend development.
@Yukthiw , correct me if I'm wrong, or feel free to share any comments on this.
|
Hi @Yukthiw @mwkyuen @bdls-jamal I have completed this tutorial. |
4 participants
Created tutorial for new members.