react-icons/md#MdOutlinePreview TypeScript Examples

CreateProposalPage: React.FC = () => {
  const { isLoading: isGuildAvailabilityLoading } = useContext(
    GuildAvailabilityContext
  );

  const ttlMs = 345600000;
  const history = useHistory();
  const [editMode, setEditMode] = useState(true);
  const [title, setTitle] = useState('');
  const [referenceLink, setReferenceLink] = useState('');
  const [options, setOptions] = useState<Option[]>([]);
  const [proposalBodyHTML, setProposalBodyHTML] =
    useLocalStorageWithExpiry<string>(
      `guild/newProposal/description/html`,
      null,
      ttlMs
    );
  const [proposalBodyMd, setProposalBodyMd] = useLocalStorageWithExpiry<string>(
    `guild/newProposal/description/md`,
    null,
    ttlMs
  );

  const handleToggleEditMode = () => {
    // TODO: add proper validation if toggle from edit to preview without required fields
    if (editMode && !title.trim() && !proposalBodyMd.trim()) return;
    setEditMode(v => !v);
  };

  const handleBack = () => history.push('/');

  const ipfs = useIPFSNode();
  const uploadToIPFS = async () => {
    const content = { description: proposalBodyHTML, url: referenceLink };
    const cid = await ipfs.add(JSON.stringify(content));
    await ipfs.pin(cid);
    return contentHash.fromIpfs(cid);
  };

  const { createTransaction } = useTransactions();
  const { guild_id: guildAddress } = useParams<{ guild_id?: string }>();
  const guildContract = useERC20Guild(guildAddress);
  const handleCreateProposal = async () => {
    const contentHash = await uploadToIPFS();

    const encodedOptions = bulkEncodeCallsFromOptions(options);
    const totalActions = encodedOptions.length;
    const maxActionsPerOption = encodedOptions.reduce(
      (acc, cur) => (acc < cur.actions.length ? cur.actions.length : acc),
      0
    );

    const calls = encodedOptions
      .map(option => {
        const actions = option.actions;
        if (option.actions.length < maxActionsPerOption) {
          // Pad array with empty calls
          return actions.concat(
            Array(maxActionsPerOption - option.actions.length).fill(EMPTY_CALL)
          );
        } else {
          return actions;
        }
      })
      .reduce((acc, actions) => acc.concat(actions), [] as Call[]);

    const toArray = calls.map(call => call.to);
    const dataArray = calls.map(call => call.data);
    const valueArray = calls.map(call => call.value);

    createTransaction(`Create proposal ${title}`, async () => {
      return guildContract.createProposal(
        toArray,
        dataArray,
        valueArray,
        totalActions,
        title,
        `0x${contentHash}`
      );
    });
  };

  const isValid = useMemo(() => {
    if (!title) return false;
    if (!proposalBodyHTML) return false;

    return true;
  }, [title, proposalBodyHTML]);

  if (isGuildAvailabilityLoading) return <Loading loading />;

  return (
    <PageContainer>
      <PageContent>
        <Flex
          direction="row"
          justifyContent="space-between"
          margin="0px 0px 24px"
        >
          <StyledButton iconLeft onClick={handleBack}>
            <FiChevronLeft />
            Change proposal type
          </StyledButton>

          <StyledButton
            padding="8px"
            onClick={handleToggleEditMode}
            disabled={!title || !proposalBodyMd}
            data-testId="create-proposal-editor-toggle-button"
          >
            {editMode ? (
              <MdOutlinePreview size={18} />
            ) : (
              <MdOutlineModeEdit size={18} />
            )}
          </StyledButton>
        </Flex>
        <Box margin="0px 0px 24px">
          {editMode ? (
            <>
              <Label>Title</Label>
              <Input
                data-testId="create-proposal-title"
                placeholder="Proposal Title"
                value={title}
                onChange={e => setTitle(e.target.value)}
              />
            </>
          ) : (
            <Label size="24px"> {title}</Label>
          )}
        </Box>
        <Box margin="0px 0px 24px">
          {editMode ? (
            <>
              <Label>Reference link (optional)</Label>
              <InputWrapper>
                <Input
                  placeholder="https://daotalk.org/..."
                  value={referenceLink}
                  onChange={e => setReferenceLink(e.target.value)}
                  icon={<MdLink size={18} />}
                  data-testId="create-proposal-link"
                />
                <StyledButton variant="secondary" marginLeft={'1rem'}>
                  Import
                </StyledButton>
              </InputWrapper>
            </>
          ) : referenceLink ? (
            <>
              <Label size="16px">{referenceLink}</Label>
              <StyledButton> Import </StyledButton>
            </>
          ) : null}
        </Box>
        {editMode ? (
          <Editor
            onMdChange={setProposalBodyMd}
            onHTMLChange={setProposalBodyHTML}
            content={proposalBodyHTML}
            placeholder="What do you want to propose?"
          />
        ) : (
          <div
            dangerouslySetInnerHTML={{ __html: sanitizeHtml(proposalBodyHTML) }}
          />
        )}
        <Box margin="16px 0px 24px">
          <ActionsBuilder
            options={options}
            onChange={setOptions}
            editable={editMode}
          />
        </Box>
        <Box margin="16px 0px">
          <StyledButton
            onClick={handleCreateProposal}
            variant="secondary"
            disabled={!isValid}
            data-testId="create-proposal-action-button"
          >
            Create Proposal
          </StyledButton>
        </Box>
      </PageContent>
      <SidebarContent>
        <SidebarInfoCard />
      </SidebarContent>
    </PageContainer>
  );
}