Skip to content

Commit a393368

Browse files
saajandsaajand
authored
Merge pull request #13 from icon-project/develop_ui-improvements
Add fetching status to Cosmos and EVM Proposals lists
2 parents 00aad5b + af12159 commit a393368

8 files changed

+55
-8
lines changed

‎src/components/CosmosProposalsTable.tsx

+7
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ interface CosmosProposalsPageProps {
88
proposals: Proposal[];
99
limit: number;
1010
offset: number;
11+
loading?: boolean;
1112
handleOffsetChange: (offset: number) => void;
1213
approveAction?: (proposalId: number) => void;
1314
executeAction?: (proposalId: number) => void;
@@ -17,6 +18,7 @@ const CosmosProposalsPage: React.FC<CosmosProposalsPageProps> = ({
1718
proposals,
1819
limit,
1920
offset,
21+
loading = false,
2022
handleOffsetChange,
2123
approveAction,
2224
executeAction,
@@ -41,6 +43,11 @@ const CosmosProposalsPage: React.FC<CosmosProposalsPageProps> = ({
4143
</tr>
4244
</thead>
4345
<tbody>
46+
<tr className="data-loading-details text-center font-semibold">
47+
{loading && <td colSpan={7}>Loading...</td>}
48+
{!loading && proposals.length === 0 && <td colSpan={7}>No proposals to display.</td>}
49+
</tr>
50+
4451
{proposals.map((proposal: Proposal, index: number) => (
4552
<tr key={index}>
4653
<th>{proposal.id}</th>

‎src/components/EVMProposalsTable.tsx

+9-8
Original file line numberDiff line numberDiff line change
@@ -34,6 +34,7 @@ interface EVMProposalsPageProps {
3434
proposal_data: Proposal[];
3535
limit: number;
3636
offset: number;
37+
loading?: boolean;
3738
handleOffsetChange: (offset: number) => void;
3839
approveAction?: (hash: string) => void;
3940
executeAction?: (hash: string) => void;
@@ -43,6 +44,7 @@ const EVMProposalsTable: React.FC<EVMProposalsPageProps> = ({
4344
proposal_data,
4445
limit,
4546
offset,
47+
loading = false,
4648
handleOffsetChange,
4749
approveAction,
4850
executeAction,
@@ -77,8 +79,12 @@ const EVMProposalsTable: React.FC<EVMProposalsPageProps> = ({
7779
</tr>
7880
</thead>
7981
<tbody>
80-
{proposal_data.length > 0 ? (
81-
proposal_data.map((proposal: Proposal, index: number) => (
82+
<tr className="data-loading-details text-center font-semibold">
83+
{loading && <td colSpan={7}>Loading...</td>}
84+
{!loading && proposal_data.length === 0 && <td colSpan={7}>No proposals to display.</td>}
85+
</tr>
86+
87+
{proposal_data.map((proposal: Proposal, index: number) => (
8288
<tr key={index} className="">
8389
<td className=" ">{proposal.proposal}</td>
8490

@@ -104,12 +110,7 @@ const EVMProposalsTable: React.FC<EVMProposalsPageProps> = ({
104110
</Link>
105111
</td>
106112
</tr>
107-
))
108-
) : (
109-
<tr>
110-
<td className="text-center">No proposals</td>
111-
</tr>
112-
)}
113+
))}
113114
</tbody>
114115
</table>
115116
</div>

‎src/pages/Cosmos/CosmosApproveProposalslPage.tsx

+8
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,7 @@ const CosmosApproveProposalslPage = () => {
2323
const itemsPerPageLimit = 10;
2424
const [itemsListOffset, setItemsListOffset] = useState(0);
2525
const chainId = state.activeCosmosChain.chainId;
26+
const [fetchingData, setFetchingData] = useState(false);
2627

2728
const handleInjectiveApprove = async (proposalId: number) => {
2829
const chainId = state.activeCosmosChain.chainId;
@@ -121,6 +122,7 @@ const CosmosApproveProposalslPage = () => {
121122
};
122123

123124
const getProposals = async (limit: number = 10, offset: number = 0) => {
125+
setFetchingData(true);
124126
const txMsg = {
125127
list_proposals: {
126128
limit: limit,
@@ -133,6 +135,7 @@ const CosmosApproveProposalslPage = () => {
133135
const filteredProposals = data.proposals.filter((proposal: Proposal) => proposal.status === ProposalStatus.open);
134136
setProposalList(filteredProposals);
135137
}
138+
setFetchingData(false);
136139
};
137140

138141
const handlePaginationChanges = (offset: number) => {
@@ -145,13 +148,18 @@ const CosmosApproveProposalslPage = () => {
145148
}
146149
}, [itemsListOffset, chainId, address]);
147150

151+
useEffect(() => {
152+
setProposalList([]);
153+
}, [chainId]);
154+
148155
return (
149156
<div className="cosmos-approval-page w-full m-auto bg-[rgba(255,255,255,0.5)] p-4 rounded flex flex-col items-center">
150157
<div className="mt-4 w-full max-w-[1600px]">
151158
<CosmosProposalsTable
152159
proposals={proposalList}
153160
limit={itemsPerPageLimit}
154161
offset={itemsListOffset}
162+
loading={fetchingData}
155163
handleOffsetChange={handlePaginationChanges}
156164
approveAction={handleApproveClick}
157165
/>

‎src/pages/Cosmos/CosmosExecuteProposalsPage.tsx

+8
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,7 @@ const CosmosExecuteProposalslPage = () => {
2323
const itemsPerPageLimit = 10;
2424
const [itemsListOffset, setItemsListOffset] = useState(0);
2525
const chainId = state.activeCosmosChain.chainId;
26+
const [fetchingData, setFetchingData] = useState(false);
2627

2728
const handleInjectiveExecute = async (proposalId: number) => {
2829
const chainId = state.activeCosmosChain.chainId;
@@ -117,6 +118,7 @@ const CosmosExecuteProposalslPage = () => {
117118
};
118119

119120
const getProposals = async (limit: number = 10, offset: number = 0) => {
121+
setFetchingData(true);
120122
const txMsg = {
121123
list_proposals: {
122124
limit: limit,
@@ -131,6 +133,7 @@ const CosmosExecuteProposalslPage = () => {
131133
);
132134
setProposalList(filteredProposals);
133135
}
136+
setFetchingData(false);
134137
};
135138

136139
const handlePaginationChanges = (offset: number) => {
@@ -143,13 +146,18 @@ const CosmosExecuteProposalslPage = () => {
143146
}
144147
}, [itemsListOffset, chainId, address]);
145148

149+
useEffect(() => {
150+
setProposalList([]);
151+
}, [chainId]);
152+
146153
return (
147154
<div className="cosmos-approval-page w-full m-auto bg-[rgba(255,255,255,0.5)] p-4 rounded flex flex-col items-center">
148155
<div className="mt-4 w-full max-w-[1600px]">
149156
<CosmosProposalsTable
150157
proposals={proposalList}
151158
limit={itemsPerPageLimit}
152159
offset={itemsListOffset}
160+
loading={fetchingData}
153161
handleOffsetChange={handlePaginationChanges}
154162
executeAction={handleExecuteClick}
155163
/>

‎src/pages/Cosmos/CosmosExecutedProposalsPage.tsx

+8
Original file line numberDiff line numberDiff line change
@@ -15,8 +15,10 @@ const CosmosExecutedProposalsPage = () => {
1515
const itemsPerPageLimit = 10;
1616
const [itemsListOffset, setItemsListOffset] = useState(0);
1717
const chainId = state.activeCosmosChain.chainId;
18+
const [fetchingData, setFetchingData] = useState(false);
1819

1920
const getProposals = async (limit: number = 10, offset: number = 0) => {
21+
setFetchingData(true);
2022
const txMsg = {
2123
list_proposals: {
2224
limit: limit,
@@ -31,6 +33,7 @@ const CosmosExecutedProposalsPage = () => {
3133
);
3234
setProposalList(filteredProposals);
3335
}
36+
setFetchingData(false);
3437
};
3538

3639
const handlePaginationChanges = (offset: number) => {
@@ -43,13 +46,18 @@ const CosmosExecutedProposalsPage = () => {
4346
}
4447
}, [itemsListOffset, chainId, address]);
4548

49+
useEffect(() => {
50+
setProposalList([]);
51+
}, [chainId]);
52+
4653
return (
4754
<div className="cosmos-approval-page w-full m-auto bg-[rgba(255,255,255,0.5)] p-4 rounded flex flex-col items-center">
4855
<div className="mt-4 w-full max-w-[1600px]">
4956
<CosmosProposalsTable
5057
proposals={proposalList}
5158
limit={itemsPerPageLimit}
5259
offset={itemsListOffset}
60+
loading={fetchingData}
5361
handleOffsetChange={handlePaginationChanges}
5462
/>
5563
</div>

‎src/pages/EVM/EVMApproveProposalsPage.tsx

+5
Original file line numberDiff line numberDiff line change
@@ -48,6 +48,7 @@ const EVMApproveProposalsPage = () => {
4848
const [proposal_data, setProposalData] = useState<Proposal[]>([]);
4949
const [thres, setThresh] = useState<number>(0);
5050
const [owner, setOwner] = useState<string[]>([]);
51+
const [fetchingData, setFetchingData] = useState(false);
5152

5253
function generateSignature() {
5354
if (!signer || !signer._address) {
@@ -135,6 +136,7 @@ const EVMApproveProposalsPage = () => {
135136
};
136137
const fetchData = async () => {
137138
try {
139+
setFetchingData(true);
138140
const data = await loadProposalData();
139141
let filteredData = data;
140142
if (chainId !== 0) {
@@ -145,6 +147,8 @@ const EVMApproveProposalsPage = () => {
145147
setProposalData(paginatedData);
146148
} catch (error) {
147149
console.error('Error fetching proposal data:', error);
150+
} finally {
151+
setFetchingData(false);
148152
}
149153
};
150154

@@ -192,6 +196,7 @@ const EVMApproveProposalsPage = () => {
192196
proposal_data={proposal_data}
193197
limit={itemsPerPageLimit}
194198
offset={itemsListOffset}
199+
loading={fetchingData}
195200
handleOffsetChange={handlePaginationChanges}
196201
approveAction={handleApprove}
197202
/>

‎src/pages/EVM/EVMExecuteProposals.tsx

+5
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,7 @@ const EVMExecuteProposals = () => {
2727
const itemsPerPageLimit = 5;
2828
const [itemsListOffset, setItemsListOffset] = useState(0);
2929
let contract = new ethers.Contract(contractAddress, abi, signer);
30+
const [fetchingData, setFetchingData] = useState(false);
3031

3132
const handleExecute = async (proposal: any) => {
3233
setLoading(true);
@@ -44,13 +45,16 @@ const EVMExecuteProposals = () => {
4445
};
4546
const fetchFilteredData = async () => {
4647
try {
48+
setFetchingData(true);
4749
const data = await loadProposalData();
4850

4951
let filteredData = data.filter((proposal: any) => proposal.status === 'Passed');
5052
const paginatedData = filteredData.slice(itemsListOffset, itemsListOffset + itemsPerPageLimit);
5153
setProposalData(paginatedData);
5254
} catch (error) {
5355
console.error('Error fetching proposal data:', error);
56+
} finally {
57+
setFetchingData(false);
5458
}
5559
};
5660
const handlePaginationChanges = (offset: number) => {
@@ -86,6 +90,7 @@ const EVMExecuteProposals = () => {
8690
proposal_data={proposal_data}
8791
limit={itemsPerPageLimit}
8892
offset={itemsListOffset}
93+
loading={fetchingData}
8994
handleOffsetChange={handlePaginationChanges}
9095
approveAction={handleExecute}
9196
/>

‎src/pages/EVM/EVMExecutedProposals.tsx

+5
Original file line numberDiff line numberDiff line change
@@ -17,16 +17,20 @@ const EVMExecutedProposals = () => {
1717

1818
const itemsPerPageLimit = 5;
1919
const [itemsListOffset, setItemsListOffset] = useState(0);
20+
const [fetchingData, setFetchingData] = useState(false);
2021

2122
const fetchFilteredData = async () => {
2223
try {
24+
setFetchingData(true);
2325
const data = await loadProposalData();
2426

2527
let filteredData = data.filter((proposal: any) => proposal.status === 'Executed');
2628
const paginatedData = filteredData.slice(itemsListOffset, itemsListOffset + itemsPerPageLimit);
2729
setProposalData(paginatedData);
2830
} catch (error) {
2931
console.error('Error fetching proposal data:', error);
32+
} finally {
33+
setFetchingData(false);
3034
}
3135
};
3236
const handlePaginationChanges = (offset: number) => {
@@ -50,6 +54,7 @@ const EVMExecutedProposals = () => {
5054
proposal_data={proposal_data}
5155
limit={itemsPerPageLimit}
5256
offset={itemsListOffset}
57+
loading={fetchingData}
5358
handleOffsetChange={handlePaginationChanges}
5459
/>
5560
</div>

0 commit comments

Comments
 (0)