hooks#useProgram TypeScript Examples

Meta = () => {
  const { programId } = useParams() as Params;

  const [program] = useProgram(programId);

  const programName = program?.name || programId;

  return (
    <div className="wrapper">
      {program ? (
        <>
          <PageHeader title="Upload metadata" fileName={programName} />
          <Box>
            <UploadMetaForm programId={program.id} programName={programName} />
          </Box>
        </>
      ) : (
        <Spinner absolute />
      )}
    </div>
  );
}

Send = () => {
  const { programId = '', messageId = '' } = useParams();

  const id = programId || messageId;

  const [message, setMessage] = useState<MessageModel>();

  const [program, metadata] = useProgram(programId || message?.source);

  useEffect(() => {
    if (messageId) {
      messagesService.fetchMessage(messageId).then(({ result }) => setMessage(result));
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

  return (
    <div className="wrapper">
      {program ? (
        <>
          <PageHeader title={programId ? 'New message' : 'Send reply'} fileName={program?.name || id} />
          <div className="send-message__block">
            <MessageForm id={id} replyErrorCode={message?.replyError} metadata={metadata} />
          </div>
        </>
      ) : (
        <Spinner absolute />
      )}
    </div>
  );
}

Program = () => {
  const params = useParams();
  const id = params.id as string;

  const [program, metadata] = useProgram(id);
  const [messages, setMessages] = useState<MessageModel[]>([]);

  const isState = !!metadata?.meta_state_output;

  useEffect(() => {
    const messageParams = {
      source: id,
      destination: localStorage.getItem(LOCAL_STORAGE.PUBLIC_KEY_RAW),
      limit: INITIAL_LIMIT_BY_PAGE,
    };

    getMessages(messageParams).then(({ result }) => setMessages(result.messages));
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

  return (
    <div className={styles.program}>
      {program ? (
        <>
          <PageHeader fileName={program.name || ''} />
          <div className={styles.container}>
            <div className={styles.list}>
              <div className={styles.item}>
                <p className={styles.itemCaption}>Id:</p>
                <p className={styles.itemValue}>{program.id}</p>
              </div>
              <div className={styles.item}>
                <p className={styles.itemCaption}>Name:</p>
                <p className={styles.itemValue}>{program.name}</p>
              </div>
              <div className={styles.item}>
                <p className={styles.itemCaption}>Title:</p>
                <p className={styles.itemValue}>{program.title ? program.title : '...'}</p>
              </div>
              <div className={styles.item}>
                <p className={clsx(styles.itemCaption, styles.top)}>Metadata:</p>
                {metadata ? <MetaData metadata={metadata} /> : <p className={styles.emptyMetadata}>No metadata</p>}
              </div>
              <div className={styles.item}>
                <div className={styles.buttons}>
                  <Link to={`/send/message/${id}`} className={clsx(styles.button, styles.link)}>
                    <img src={MessageIcon} alt="message" className={styles.buttonIcon} />
                    <span className={styles.buttonText}>Send Message</span>
                  </Link>
                  {isState && (
                    <Link to={`/state/${id}`} className={clsx(styles.button, styles.link)}>
                      <span className={styles.buttonText}>Read State</span>
                    </Link>
                  )}
                  <div className={styles.buttonUpload}>
                    <span className={styles.buttonCaption}>Uploaded at:</span>
                    <span className={styles.buttonTimestamp}>{formatDate(program.timestamp)}</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div className={styles.messages}>
            <p className={styles.messagesCaption}>MESSAGES</p>
            <MessagesList messages={messages} />
          </div>
        </>
      ) : (
        <Spinner absolute />
      )}
    </div>
  );
}

LogContent = ({ data }: Props) => {
  const { payload, source } = data;
  const formattedData = data.toHuman();

  const [error, setError] = useState('');
  const [decodedPayload, setDecodedPayload] = useState<Codec>();
  const [isDecodedPayload, setIsDecodedPayload] = useState(false);

  const isError = !!error;
  // check if manual decoding needed,
  // cuz data.toHuman() decodes payload without metadata by itself
  const formattedPayload = payload.toHuman();
  const isFormattedPayloadHex = isHex(formattedPayload);

  const [program, metadata] = useProgram(isFormattedPayloadHex ? source.toString() : void 0);

  const handlePayloadDecoding = (typeKey: TypeKey, errorCallback: () => void) => {
    if (metadata) {
      const type = metadata[typeKey];

      if (type) {
        try {
          setDecodedPayload(CreateType.decode(type, payload, metadata));
        } catch {
          errorCallback();
        }
      } else {
        errorCallback();
      }
    }
  };

  const setDecodingError = () => {
    setError("Can't decode payload");
  };

  const handleInitPayloadDecoding = () => {
    handlePayloadDecoding('init_output', setDecodingError);
  };

  const handleOutputPayloadDecoding = () => {
    handlePayloadDecoding('handle_output', handleInitPayloadDecoding);
  };

  useEffect(() => {
    if (metadata) {
      handleOutputPayloadDecoding();
    }

    if (program && !metadata) {
      handleInitPayloadDecoding();
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [metadata, program]);

  const handleCheckboxChange = ({ target: { checked } }: ChangeEvent<HTMLInputElement>) => {
    setIsDecodedPayload(checked);
  };

  const getDecodedPayloadData = () => {
    // is there a better way to get logData with replaced payload?
    const [dataObject] = formattedData as [{}];
    return [{ ...dataObject, payload: decodedPayload?.toHuman() }];
  };

  return (
    <>
      {isFormattedPayloadHex && (
        <div className={styles.checkbox}>
          <Checkbox
            label="Decoded payload"
            checked={isDecodedPayload}
            onChange={handleCheckboxChange}
            disabled={isError}
          />
          {isError && <p className={styles.error}>{error}</p>}
        </div>
      )}
      <Pre text={isDecodedPayload ? getDecodedPayloadData() : formattedData} />
    </>
  );
}