Currently, I am trying to develop an app that works with the storage API and I want the UI of my app to update every time a form is submitted. However, I’m not sure how to update the UI of my app every time a form is submitted. Currently I have code that is run every time the index is run stored underneath if (!isFetched) of the code which calls
const [listofId] = useState(async () => await getListKeyFromContext(context))
const [fetchedmessages] = useState(async () => await getAll(listofId));
but it seems to only update fetchedmessages when I first load the app and not after I submit new information. Why does this happen and what can I do instead? I tried using just getAll without useState
as that seems to be the thing that causes the code to only run once but getAll doesn’t seem to work without it.
Currently, to update fetch issues, I have to reload the whole app which then calls useState properly.
Also, I had problems using the storage.get function within the return code of my App. As you can see from the code below, once I submit the Form within the IssuePanel, I call CreateMessages with the form data which calls my getAll function but getAll only returns a promise. I’m not sure why since storage.set seems to work perfectly fine.
import ForgeUI, { render, Fragment, Text, IssuePanel, IssuePanelAction, AdminPage, useState, useProductContext, ModalDialog, Button, Form, Select, Option, TextField, Table, Head, Row, Cell } from '@forge/ui';
import {storage, startsWith} from '@forge/api';
import api from "@forge/api";
const getListKeyFromContext = (context) => {
//console.log(context);
const { localId: id } = context;
return id.split('/')[id.split('/').length - 1];
}
const App = () => {
const context = useProductContext();
const issueId = context.platformContext.issueId
const [comments] = useState(async () => await fetchCommentForIssue(issueId));
var Messages = null;
const [isFormOpen, setFormOpen] = useState(false);
const [isDeleteOpen, setDeleteOpen] = useState(false);
var isFetched = null;
const getAll = async (listofId) =>{
//console.log(listofId);
console.log(`CALLED GETALL`);
return await storage.get(listofId) || [];
}
const createMessage = (MessageName, Message, context) => {
const listofId = getListKeyFromContext(context);
const newRecord = {
Name: MessageName,
Message: Message,
isChecked: false
}
Messages = getAll(listofId);
console.log(Messages);
storage.set(listofId, [...Messages, newRecord]);
console.log(`messege setting`);
console.log(Messages);
if (Messages != null) {
const newMessagesList = [...Messages, newRecord];
console.log(`newMessagesList not null`);
console.log(newMessagesList);
Messages = newMessagesList;
} else {
const newMessagesList = [newRecord];
console.log(`newMessagesList null`);
console.log(newMessagesList);
Messages = newMessagesList;
}
console.log(Messages);
console.log(`messege set`);
}
if (!isFetched) {
isFetched = true;
const [listofId] = useState(async () => await getListKeyFromContext(context))
const [fetchedmessages] = useState(async () => await getAll(listofId));
Messages = fetchedmessages;
for (const acomment of comments) {
console.log(`check comment`);
checkComment(issueId, acomment.id, acomment.body, false, Messages);
}
console.log(Messages);
}
return (
<Fragment>
<IssuePanel actions={[
<IssuePanelAction text="Reload Messages" onClick={() => {
if (!isFetched) {
isFetched = true;
const [listofId] = useState(async () => await getListKeyFromContext(context))
const [fetchedmessages] = useState(async () => await getAll(listofId));
Messages = fetchedmessages;
for (const acomment of comments) {
console.log(`check comment`);
checkComment(issueId, acomment.id, acomment.body, false, Messages);
}
console.log(Messages);
}
}}/>
]}>
<Button
text={`Add Secure Message`}
onClick={() => setFormOpen(true)}
/>
{isFormOpen && (
<ModalDialog header="Add Message" onClose={() => setFormOpen(false)}>
<Form
onSubmit={data => {
createMessage(data.MessageName, data.Message, context);
console.log(Messages);
for (const acomment of comments) {
console.log(`check comment`);
checkComment(issueId, acomment.id, acomment.body, false, Messages);
}
setFormOpen(false);
}}
>
<TextField label="Message Name" name="MessageName" isRequired={true}/>
<TextField label="Message Content" name="Message" isRequired={true}/>
</Form>
</ModalDialog>
)}
</IssuePanel>
</Fragment>
);
};
export const run = render(
<App/>
);