Challenge Accepted!
code for useMatchFetch down below.
import React from "react";
import { useMatchFetch } from "./effects/useMatchFetch";
export const Example = () => {
const render = useMatchFetch("https://swapi.co/api/people/1/?format=json");
return render({
pending: () => <div>Loading</div>,
error: err => <div>{err.toString()}</div>,
data: data => <pre>{JSON.stringify(data, null, 2)}</pre>
});
};
Watch my Live Stream
Want to see my process on how I created this? Watch me on Twitch!
useMatchFetch
I actually really like this. I think I might end up using this in a few places.
import { useState, useEffect } from "react";
const render = data => match =>
data.pending ? match.pending()
: data.error ? match.error(data.error)
: data.data ? match.data(data.data)
: null // prettier-ignore
export const useMatchFetch = url => {
const [data, setData] = useState({ pending: true });
useEffect(() => {
fetch(url)
.then(response => response.json())
.then(data => setData({ data, pending: false }))
.catch(error => setData({ error, pending: false }));
}, [url]);
return render(data);
};
End
Follow me on Twitter @joelnet
Oldest comments (46)
I really think this is such a cool DEV use-case: Taking a tweet and expanding on, replying to and generally going deeper on the idea.
I also think a browser extension which could add a button like this to Twitter would be kind of awesome if anyone wants to build that 😄
Announcing off-platform "Share to DEV" functionality
Ben Halpern ・ Apr 26 '19 ・ 3 min read
We actually have an existing Twitter extension we haven't touched in a while but would definitely welcome this added functionality if anyone wants to make a PR (along with some other needed updates 😬)
Bringing dev.to headlines to your Twitter browsing experience.
DevTwitter Chrome Extension
Bringing dev.to headlines to your Twitter browsing experience.
Installing
Go to The Chrome Store to download the extension.
To access development releases, simply download or clone this code and load as an unpacked extension.
Unpacked Extension
hamburger menu > More Tools > Extensionsin the menu.Load unpacked extension...and select thechrome-extensionfolder.Features
Future features
Twitter is a great way to connect and collaborate with other developers, and it would be fun to build in features that did that. The dev.to team will be thinking of ways to do this, but contributions are super welcome.
It is important…
Anyway, sorry to go on a tangent, this just made me happy. 🙂
I like this too. If someone has created a tweet, there's already some interest in that subject. I liked this tweet in particular because I kept thinking about it a few hours later.
Better integration would be awesome!
Heh, I've done that a couple of times, about git and about starting Node projects. I like the spark that a tweet can form in your mind and send you down a rabbit hole following ideas and writing code and posts in response.
Absolutely!
The fastest way to get me to do something is to tell me it can't be done!
I, too, want pattern matching in javascript and i also want Maybes and Eithers.
Same. You can use Maybes and Eithers today with a package import. The barrier is getting people familiar with them. Right now there's a lot of push back against them just because of familiarity bias.
If the language adopted them as native though, people would jump on board.
People are silly like that.
I think so too. Rust has them, they are called Option and Result. I secretly want Rust to become more popular so people can learn about them and how useful they are, and also start using them in other languages (and by other i mean javascript)
Interestingly, Rust has started to become more popular in Web Land as a language for writing WASM modules, in part because of the strong support from the Rust team themselves. See developer.mozilla.org/en-US/docs/W...
I like this one dev.to/_gdelgado/type-safe-error-h...
Currently im working on trying to reduce all the friction that happens when a language doesn’t support it more natively, hopefully have a post up with samples in the next month or so :)
You could try Z.
dev.to/kayis/pattern-match-your-ja...
Z looks interesting for sure. It's a little limited though. But it would work fine for this use case.
Reminds me a lot of this component package
I ran into a few different packages that did something very similar. This is the reason I didn't create an npm package. I think there are enough already.
But I thought the process would be fun, which is why I lived streamed it.
Hopefully people enjoy the process that went into making it happen.
Cheers!
🍻
I hope it was fun! Sorry if my comment implied I didn't see value in this, I totally do. I dig seeing the thought process behind the code in addition to the code itself. Have a good one!
No your comment didn't imply that it wasn't fun. I got you ;)
You too!
I'd probably use ReasonReact for this :D
ReactReason is a very interesting project. It's hard to convince large companies to switch to a totally different language though.
I'm still looking forward to playing with ReasonML for some personal projects.
Scala-js allows writing react components this way
This sounds pretty cool. I haven't seen scalajs but if it has pattern matching I'm down!
What if you want to render a loader while new data is loading? That means you'd render a loader + the current data at the same time. Same with errors.
Submit a pull request ;)
First time that I "unicorned" article! Well played Sir!
I'm so honored 😁
Wow!
Cheers!
🍻
Very functional and very Elm'ish.
I've watched this talk and it covered exactly that.
Thanks for the tip! I'm saving this video to my Watch Later.
Definitely worth watching. You might find some inspiration on how to improve your React code even more :)
There's always room for improvement!
Nice write up! :)
Reminds me of these posts using daggy from fantasy-land
medium.com/javascript-inside/slayi...
datarockets.com/blog/javascript-pa...
nice little library that wraps it up
github.com/devex-web-frontend/remo...
One of the reasons, I decided not to make this an npm package. I figured something was already out there. I thought it would be fun to show the process.
Looks like those other libs have the same idea. I always love seeing an article with
daggy!daggyis actually a perfect use case for this.Cheers!
🍻
Yeah indeed a lot times there’s a solution but not a how to reach it write up or something like that so def keep coming with the process writes up for sure !! :)
That was one thing I found interesting about this process. Most of the time the ideal solution would be created ahead of time and then you would teach that process.
But it's interesting to see how you would think to get to that conclusion on your own.
I think that's the difference between live streams and tutorials. You get to see the thought process, which I really enjoy watching!
Cheers!
🍻
yah that process is fun, we used to do FP lunch sessions at an old job and refactor some current/legacy code into something we just learned or found interesting right on a big screen tv so everyone could watch and we talk thru the process.