Image upload example is too complicated

[alexslavr]

The image upload example is too complicated.

All state in the single hook is not readable: https://github.com/reimagined/resolve/blob/dev/examples/ts/personal-data/client/components/ImageUpload.tsx#L27 React docs about splitting state variables: https://reactjs.org/docs/hooks-faq.html#should-i-use-one-or-many-state-variables

What is the difference between token and staticToken ? https://github.com/reimagined/resolve/blob/dev/examples/ts/personal-data/client/components/ImageUpload.tsx#L58 https://github.com/reimagined/resolve/blob/dev/examples/ts/personal-data/client/components/ImageUpload.tsx#L96

The cdnUrl available also in ResolveContext, uploader context is redundant: https://github.com/reimagined/resolve/blob/dev/examples/ts/personal-data/client/components/ImageUpload.tsx#L55 Related issue: #2150

It will be better to split ImageUploader react component into something like:

Parent component:

// hooks and upload logic
<ImageUploader /> - 

Upload renderer: https://github.com/reimagined/resolve/blob/dev/examples/ts/personal-data/client/components/ImageUpload.tsx#L115

<UploadForm  fields={form.fields} onSubmitHandler={onSubmitHandler}  />

Maybe other forms:

...
 <OtherForms defaultValue={cdnUrl} onClick={handleGetUrl}  /> 
...