Izara Wiki - User contributions [en]

User talk:Nink

2023-07-26T01:41:22Z

Nink:

<h1>useEffect: Render Cycle and Cleanup Function</h1>
<p>In the sitePageConfigOutput, there're two useEffects to be used which pulls two different response data from the backend.</p>
<code>
useEffect(() => {
// let cancel = false;
async function sendRequestA(objectFormConfigId) {
let responseDataA = await sendBackendRequestA(
"post",
"https://0yzv0v3f86.execute-api.us-west-2.amazonaws.com/Test/Email/List",
{
objectFormConfigId: objectFormConfigId,
}
);
cancel = false;
if (cancel === false) {
setObjectFormConfig((objectFormConfig) => {
objectFormConfig.objectFormConfigId = responseDataA;
return { ...objectFormConfig };
});
}
}
sendRequestA(getObjectFormConfig);
return () => {
cancel = true
};
}, [getObjectFormConfig]);
</code>
<h2>Problems</h2>
<ul>
<li>useEffect returns the clean up function before the effect</li>
<li>If condition renders only once instead of four times</li>
</ul>
<h2>Possible causes</h2>
<ul>
<li>Due to the async function, useEffect has to skip the async function and push it into the update queue, so there’ll be four sendRequestA in the queue waiting to be rendered. While waiting, useEffect will return the cleanup function.</li>
<li>useEffect remembers the last value, then renders the tasks in the queue. Therefore, for index 0 to 2, cancel will be set to true (due to the cleanup) and to false for the last index (3).
</li>
</ul>
<h2>Solution</h2>
<ul>
<li>Set cancel to false right before the if condition.</li>
</ul>
<h2>Note</h2>
<p>
The reason why the last index doesn’t clean up after finishing the effect is still unknown. It might happen because all the tasks are done, so there’s no need to clean up anymore. However, the cleanup function runs when a component unmounts and after each (re-)render. Therefore, the last index still needs the cleanup.
</p>
<h2>Resources</h2>
<ul>
<li>https://retool.com/blog/the-react-lifecycle-methods-and-hooks-explained/</li>
<li>https://dev.to/otamnitram/react-useeffect-cleanup-how-and-when-to-use-it-2hbm</li>
<li>https://hackernoon.com/cleanup-functions-in-reacts-useeffect-hook-explained</li>
<li>https://blog.bitsrc.io/everything-you-need-to-know-about-useeffects-clean-up-function-in-react-dfa6bc75f4f3</li>
<li>https://dev.to/haseeb1009/avoid-ignoring-react-hooksexhaustive-deps-linting-warnings-244f#:~:text=It%20might%20not%20seem%20like,with%20given%20ways%20instead%20disabling.</li>
</ul>

User talk:Nink

2023-07-25T07:16:12Z

Nink: Created page with "<h1>useEffect: Render Cycle and Cleanup Function</h1> <p>In the sitePageConfigOutput, there're two useEffects to be used which pulls two different response data from the backend.</p> <code> useEffect(() => { // let cancel = false; async function sendRequestA(objectFormConfigId) { let responseDataA = await sendBackendRequestA( "post", "https://0yzv0v3f86.execute-api.us-west-2.amazonaws.com/Test/Email/List", { objectFormCon..."

Service - SitePage Config

2023-07-07T05:21:38Z

Nink: /* sitePageConfig Object */

= Overview =

Manages configuration for site pages created by users that can include elements such as tables, forms to create/update objects, graphs, etc

= Repository =

https://bitbucket.org/izara-core-shared/izara-core-shared-sitepage-config

= DynamoDB tables =

== SitePageConfigMain ==

<syntaxhighlight lang="JavaScript">
{
sitePageConfigId: "xx", // {random uuid}
sitePageConfig: "xx", // json encoded object of configuration
sitePageConfigName: "yy", // user specified name of the config
userId: "xx"
}
</syntaxhighlight>

* partition key: sitePageConfigId
* sort key: {none}

== UsersSitePageConfigs ==

<syntaxhighlight lang="JavaScript">
{
userId: "xx" // user who owns the sitePageConfig
sitePageConfigId: "xx",
}
</syntaxhighlight>

* partition key: userId
* sort key: sitePageConfigId

= sitePageConfig Object =

<syntaxhighlight lang="json">
{
pageName: "xx", // set by the creator of the page, displayed in setup pages eg menuConfig

// grouping/row/cell/elements structure same tableConfig
// add css theme and overwrite settings
// standardize property names to match tableConfig structure (eg elementTypes)
sections: [
{
sectionName: "xx",
groupings: [
{
groupingName: "xx",
rows: [
{
rowName: "xx",
cells: [
{
cellName: "xx",
elements: [
{
pageElementType: "table", //"table"|"formObjectCreate"|"formObjectEdit"|"freeText"
tableConfigId: "tableConfigId_1",
//optional:
overwriteFilter: ""
},
{
pageElementType: "formObjectCreate",
objectCreateConfigId: "formObjectCreateConfigId_1",
//objectType set in formObjectCreateConfig
},
{
pageElementType: "formObjectEdit",
objectFormConfigId: "formObjectEditConfigId_1",
//optional:
identifiers: { // check structure with SeaGame
xx: "yy",
qq: "rr"
}
//objectType set in formObjectEditConfig
},
{
pageElementType: "freeText",
text: "xxx",
},
]
},
// ..
]
},
//...
],
},
//...
],
},
//...
]
}
</syntaxhighlight>

= Multiple pageElements on one page =

* any number of tables or forms can be shown on a single page, presented according to groupings/rows structure
* each table and form is independent from each other, so each form has it's own submission and submits independently from other forms
* each form receives it's identifiers independently, so each form will check if identifiers sent by menuConfig, if not will show inputs for them

= Interaction with MenuConfig =

* MenuElements set to sitePages link to a sitePageConfigId
* if sitePageConfig has any "objectForm"|"objectDisplay" pageElements then menuConfig offers to hardcode identifierIds, or eg a popup to enter the identifiers
* if no identifierIds are sent to "objectForm"|"objectDisplay" page then the page initially offers inputs to set the identifierIds (no pageElements shown) for that pageElement

= Authorizers =

* after have identifierIds we can pull the data for that object
* also need to pull the targetId for any authorizer which will need to be sent with submissions
* might be cases where we can edit appLevel objects? In which case tagetId not required

= Create or Display/Update multiple linked objects =

* considering having new pageTypes that hook into ImportData flow for creating multiple objects according to object relationships
* basic "createObject"|"displayObject" pages send directly to service that is responsible for objectType to perform the action
* multiple linked object submission will format request and send to ImportData which creates PendingObject/Links and processes accordingly

= Working documents =

[[:Category:Working_documents - SitePage Config|SitePage Config]]

[[Category:Backend services| SitePage Config]]

Frontend Page - Configure MenuConfig

2023-06-13T07:20:10Z

Nink: Created page with "= Overview = Frontend page for creating and editing MenuConfigs = Repository = = visibleObj Object = <syntaxhighlight lang="json"> let visibleObj = { visibleRowIndex: 0, // row index we have open on page visibleRenameRowIndex: 0, // row index currently renaming rows:[ { menuElements: [ { show: false, // whether the menuElement settings are expanded menuText menuElements: [ // if menuElement is elementType menu, will have child menuElements..."

= Overview =

Frontend page for creating and editing MenuConfigs

= Repository =

= visibleObj Object =

<syntaxhighlight lang="json">
let visibleObj = {
visibleRowIndex: 0, // row index we have open on page
visibleRenameRowIndex: 0, // row index currently renaming
rows:[
{
menuElements: [
{
show: false, // whether the menuElement settings are expanded
menuText
menuElements: [ // if menuElement is elementType menu, will have child menuElements

],
},
// ..
]
},
// ..
]
}
</syntaxhighlight>

== menuElements recursion ==

* Menu elements are nested to any level
* Structure of rows and menuElements in visible object matches structure of menuConfig/menuConfigSetting

= Working documents =

[[Category:Frontend pages| Configure MenuConfig]]