SolidJS•15mo ago

Typing custom hooks

I made a custom hook for a post of a file, this is the code:

import axios from 'axios';

export const useUploadToOta = () => {
  const [errorCode, setErrorCode] = createSignal('');
  const [severity, setSeverity] = createSignal('');
  const [loadingPost, setLoadingPost] = createSignal(false);
  const [uploadProgress, SetUploadProgress] = createSignal(0);
  let res;
  const options = {
    headers: {
      'Content-Type': 'multipart/form-data',
    },
    onUploadProgress: (progressEvent) => {
      let progress = Math.round((100 * progressEvent.loaded) / progressEvent.total);
      console.log(progressEvent);
      SetUploadProgress(progress);
    },
  };

  async function postToOta(file) {
    let formData = new FormData();
    formData.append('file', file);
    return await axios
      .post('/ota/upload', formData, options)
      .then((response) => {
        if (response !== null) {
          setSeverity('success');
        } else {
          setSeverity('warning');
          setErrorCode('No response');
        }
        res = response;
      })
      .catch(function (error) {
        res = 'error';
        console.log(error);
        setSeverity('warning');
        setErrorCode(
          error.response
            ? error.response.status
            : error.request
            ? 'No response'
            : error.message
            ? 'General error'
            : 'General error'
        );
      })
      .finally(() => {
        setLoadingPost(false);
      });
  }
  return [postToOta, errorCode, severity, loadingPost, uploadProgress];
};

import axios from 'axios';

export const useUploadToOta = () => {
  const [errorCode, setErrorCode] = createSignal('');
  const [severity, setSeverity] = createSignal('');
  const [loadingPost, setLoadingPost] = createSignal(false);
  const [uploadProgress, SetUploadProgress] = createSignal(0);
  let res;
  const options = {
    headers: {
      'Content-Type': 'multipart/form-data',
    },
    onUploadProgress: (progressEvent) => {
      let progress = Math.round((100 * progressEvent.loaded) / progressEvent.total);
      console.log(progressEvent);
      SetUploadProgress(progress);
    },
  };

  async function postToOta(file) {
    let formData = new FormData();
    formData.append('file', file);
    return await axios
      .post('/ota/upload', formData, options)
      .then((response) => {
        if (response !== null) {
          setSeverity('success');
        } else {
          setSeverity('warning');
          setErrorCode('No response');
        }
        res = response;
      })
      .catch(function (error) {
        res = 'error';
        console.log(error);
        setSeverity('warning');
        setErrorCode(
          error.response
            ? error.response.status
            : error.request
            ? 'No response'
            : error.message
            ? 'General error'
            : 'General error'
        );
      })
      .finally(() => {
        setLoadingPost(false);
      });
  }
  return [postToOta, errorCode, severity, loadingPost, uploadProgress];
};

How can i type it so i don't have typescipt errors when i use this parts ? This is how i use it in the components:

  const [postToOta, errorCode, severity, loadingPost, uploadProgress] = useUploadToOta();

  const [postToOta, errorCode, severity, loadingPost, uploadProgress] = useUploadToOta();

And the use them like

  <p>Upload at {uploadProgress()}%</p>

  <p>Upload at {uploadProgress()}%</p>

6 Replies

thetarnav•15mo ago

return [postToOta, errorCode, severity, loadingPost, uploadProgress] as const

return [postToOta, errorCode, severity, loadingPost, uploadProgress] as const

also why the hell are you using a tuple with 5 items 😅

akerbeltzOP•15mo ago

because maybe i don't need to use all of them idk @thetarnav why this works and without typing "as const" typescript shows an error? you would do it with an object ? why don't you like the array ?

thetarnav•15mo ago

as const will make the shape readonly, and so if the size of the array can’t change, and it’s known at compile time, it’s pretty much a tuple if you remove as const, ts will type it as it could change, so the type will be very broad. also tuples are usually used when there are few items, and it’s obvious what they are like [get, set] or [result, error] but if you have a lot of fields, you have lookup what they are in each order tuples are mostly used so you can easily rename items

akerbeltzOP•15mo ago

@thetarnav so you would return as an object i imagine no? like this?

  return {postToOta, errorCode, severity, loadingPost, uploadProgress} as const;

  return {postToOta, errorCode, severity, loadingPost, uploadProgress} as const;

thetarnav•15mo ago

as const is not needed here objects are assumed to have static shape by default

akerbeltzOP•15mo ago

i see

Gaming

Programming

Typing custom hooks