Fix/1128: Individual proposal pages failing to load - refactored from rest to gql as an easy way to avoid wrong endpoints (#1131)
This commit is contained in:
parent
9b7a6b3598
commit
233647f550
@ -1,11 +1,11 @@
|
|||||||
import { useTranslation } from 'react-i18next';
|
import { useTranslation } from 'react-i18next';
|
||||||
import { SyntaxHighlighter } from '@vegaprotocol/ui-toolkit';
|
import { SyntaxHighlighter } from '@vegaprotocol/ui-toolkit';
|
||||||
import type { RestProposalResponse } from '../../proposal/proposal-container';
|
import type { Proposal_proposal_terms } from '../../proposal/__generated__/Proposal';
|
||||||
|
|
||||||
export const ProposalTermsJson = ({
|
export const ProposalTermsJson = ({
|
||||||
terms,
|
terms,
|
||||||
}: {
|
}: {
|
||||||
terms: RestProposalResponse;
|
terms: Proposal_proposal_terms;
|
||||||
}) => {
|
}) => {
|
||||||
const { t } = useTranslation();
|
const { t } = useTranslation();
|
||||||
return (
|
return (
|
||||||
|
@ -1,6 +1,8 @@
|
|||||||
import { ProposalHeader } from '../proposal-detail-header/proposal-header';
|
import { ProposalHeader } from '../proposal-detail-header/proposal-header';
|
||||||
import type { Proposal_proposal } from '../../proposal/__generated__/Proposal';
|
import type {
|
||||||
import type { RestProposalResponse } from '../../proposal/proposal-container';
|
Proposal_proposal,
|
||||||
|
Proposal_proposal_terms,
|
||||||
|
} from '../../proposal/__generated__/Proposal';
|
||||||
import { ProposalChangeTable } from '../proposal-change-table';
|
import { ProposalChangeTable } from '../proposal-change-table';
|
||||||
import { ProposalTermsJson } from '../proposal-terms-json';
|
import { ProposalTermsJson } from '../proposal-terms-json';
|
||||||
import { ProposalVotesTable } from '../proposal-votes-table';
|
import { ProposalVotesTable } from '../proposal-votes-table';
|
||||||
@ -8,7 +10,7 @@ import { VoteDetails } from '../vote-details';
|
|||||||
|
|
||||||
interface ProposalProps {
|
interface ProposalProps {
|
||||||
proposal: Proposal_proposal;
|
proposal: Proposal_proposal;
|
||||||
terms: RestProposalResponse;
|
terms: Proposal_proposal_terms;
|
||||||
}
|
}
|
||||||
|
|
||||||
export const Proposal = ({ proposal, terms }: ProposalProps) => {
|
export const Proposal = ({ proposal, terms }: ProposalProps) => {
|
||||||
|
@ -1,30 +1,13 @@
|
|||||||
import { gql, useQuery } from '@apollo/client';
|
import { gql, useQuery } from '@apollo/client';
|
||||||
import { Callout, Intent, Splash } from '@vegaprotocol/ui-toolkit';
|
import { AsyncRenderer } from '@vegaprotocol/ui-toolkit';
|
||||||
import React from 'react';
|
|
||||||
import { useTranslation } from 'react-i18next';
|
|
||||||
import { useParams } from 'react-router-dom';
|
import { useParams } from 'react-router-dom';
|
||||||
|
|
||||||
import { SplashLoader } from '../../../components/splash-loader';
|
|
||||||
import { useFetch } from '@vegaprotocol/react-helpers';
|
|
||||||
import { Proposal } from '../components/proposal';
|
import { Proposal } from '../components/proposal';
|
||||||
import { PROPOSALS_FRAGMENT } from '../proposal-fragment';
|
import { PROPOSALS_FRAGMENT } from '../proposal-fragment';
|
||||||
import type {
|
import type {
|
||||||
Proposal as ProposalQueryResult,
|
Proposal as ProposalQueryResult,
|
||||||
ProposalVariables,
|
ProposalVariables,
|
||||||
} from './__generated__/Proposal';
|
} from './__generated__/Proposal';
|
||||||
import { ENV } from '../../../config/env';
|
|
||||||
|
|
||||||
/**
|
|
||||||
* TODO: how do we do this properly to ensure that it is kept up to date?
|
|
||||||
*/
|
|
||||||
export interface RestProposalResponse {
|
|
||||||
data: {
|
|
||||||
proposal: {
|
|
||||||
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
||||||
terms: any;
|
|
||||||
};
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
export const PROPOSAL_QUERY = gql`
|
export const PROPOSAL_QUERY = gql`
|
||||||
${PROPOSALS_FRAGMENT}
|
${PROPOSALS_FRAGMENT}
|
||||||
@ -36,16 +19,7 @@ export const PROPOSAL_QUERY = gql`
|
|||||||
`;
|
`;
|
||||||
|
|
||||||
export const ProposalContainer = () => {
|
export const ProposalContainer = () => {
|
||||||
const { t } = useTranslation();
|
|
||||||
const params = useParams<{ proposalId: string }>();
|
const params = useParams<{ proposalId: string }>();
|
||||||
const proposalUrl = React.useMemo(
|
|
||||||
() => new URL(`governance/proposal/${params.proposalId}`, ENV.restUrl).href,
|
|
||||||
[params.proposalId]
|
|
||||||
);
|
|
||||||
|
|
||||||
const {
|
|
||||||
state: { loading: restLoading, error: restError, data: restData },
|
|
||||||
} = useFetch<RestProposalResponse>(proposalUrl);
|
|
||||||
|
|
||||||
const { data, loading, error } = useQuery<
|
const { data, loading, error } = useQuery<
|
||||||
ProposalQueryResult,
|
ProposalQueryResult,
|
||||||
@ -57,23 +31,11 @@ export const ProposalContainer = () => {
|
|||||||
pollInterval: 5000,
|
pollInterval: 5000,
|
||||||
});
|
});
|
||||||
|
|
||||||
if (error || restError) {
|
|
||||||
return (
|
|
||||||
<Callout intent={Intent.Danger} title={t('Something went wrong')}>
|
|
||||||
<pre>{error?.message || restError?.message}</pre>
|
|
||||||
</Callout>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
if (loading || !data || restLoading || !restData) {
|
|
||||||
return (
|
|
||||||
<Splash>
|
|
||||||
<SplashLoader />
|
|
||||||
</Splash>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Proposal proposal={data.proposal} terms={restData?.data.proposal.terms} />
|
<AsyncRenderer loading={loading} error={error} data={data}>
|
||||||
|
{data && (
|
||||||
|
<Proposal proposal={data.proposal} terms={data.proposal.terms} />
|
||||||
|
)}
|
||||||
|
</AsyncRenderer>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
Loading…
Reference in New Issue
Block a user