How to use the react-cache.createResource function in react-cache

To help you get started, we’ve selected a few react-cache examples, based on popular ways it is used in public projects.

github jaredpalmer / react-conf-2018 / src / suspense / Artist.js View on Github external
import React from 'react';
import { fetch } from '../fetch';
import { createResource } from 'react-cache';
import { cache } from '../cache';
import { Spinner } from '../components/Spinner';
import { Img } from './Img';
const ArtistTopTracks = React.lazy(() => import('./ArtistTopTracks'));
// const ArtistAlbums = React.lazy(() => import('./ArtistAlbums'));
const ArtistRelatedArtists = React.lazy(() => import('./ArtistRelatedArtists'));

const ArtistResource = createResource(id =>
  fetch(`https://api.spotify.com/v1/artists/${id}`)
    .then(res => res.json())
    .then(
      artist => artist,
      error => {
        throw new Error(error);
      }
    )
);

function ArtistHeading(props) {
  const artist = ArtistResource.read(cache, props.id);
  return (
    <div className="heading">
      {artist.images &&
      artist.images.length > 0 &&
github jaredpalmer / react-conf-2018 / src / vanilla / odl / ArtistTopTracks.2.js View on Github external
import React, { useState, useEffect } from 'react';
import { fetch } from '../full-suspense/fetch';
import { createResource } from 'react-cache';
import { cache } from '../full-suspense/cache';

const ArtistTopTracksResource = createResource(id =>
  fetch(`https://api.spotify.com/v1/artists/${id}/top-tracks?market=US`)
    .then(res => res.json())
    .then(
      ({ tracks }) => tracks,
      error => {
        throw new Error(error);
      }
    )
);

export const AudioResource = createResource(
  src => {
    const audio = new Audio(src);
    return new Promise((resolve, reject) => {
      audio.onerror = reject;
      audio.onloadeddata = () => resolve(audio);
github jaredpalmer / react-conf-2018 / src / suspense / ArtistRelatedArtists.js View on Github external
import React, { useState } from 'react';
import { fetch } from '../fetch';
import { createResource } from 'react-cache';
import { cache } from '../cache';
import ListItem from './SuspenseListItem';

const ArtistRelatedArtistsResource = createResource(id =>
  fetch(`https://api.spotify.com/v1/artists/${id}/related-artists`)
    .then(res => res.json())
    .then(
      ({ artists }) => artists,
      error => {
        throw new Error(error);
      }
    )
);

function ArtistRelatedArtists(props) {
  const [currentId, setCurrent] = useState(null);
  const related = ArtistRelatedArtistsResource.read(cache, props.id);
  return (
    <div>
      <h3>Related Artists</h3>
github jaredpalmer / react-conf-2018 / src / vanilla / odl / ArtistTopTracks.2.js View on Github external
import { fetch } from '../full-suspense/fetch';
import { createResource } from 'react-cache';
import { cache } from '../full-suspense/cache';

const ArtistTopTracksResource = createResource(id =>
  fetch(`https://api.spotify.com/v1/artists/${id}/top-tracks?market=US`)
    .then(res => res.json())
    .then(
      ({ tracks }) => tracks,
      error => {
        throw new Error(error);
      }
    )
);

export const AudioResource = createResource(
  src => {
    const audio = new Audio(src);
    return new Promise((resolve, reject) => {
      audio.onerror = reject;
      audio.onloadeddata = () => resolve(audio);
    });
  },
  src => src
);

function Player({ url, onPause }) {
  const audio = AudioResource.read(cache, url);
  useEffect(
    () => {
      audio.play();
      return () => {
github jaredpalmer / react-conf-2018 / src / vanilla / odl / ArtistTopTracks.1.js View on Github external
import React, { useState, useEffect } from 'react';
import { fetch } from '../full-suspense/fetch';
import { createResource } from 'react-cache';
import { cache } from '../full-suspense/cache';

const ArtistTopTracksResource = createResource(id =>
  fetch(`https://api.spotify.com/v1/artists/${id}/top-tracks?market=US`)
    .then(res => res.json())
    .then(
      ({ tracks }) => tracks,
      error => {
        throw new Error(error);
      }
    )
);

export const AudioResource = createResource(
  src => {
    const audio = new Audio(src);
    return new Promise((resolve, reject) => {
      audio.onerror = reject;
      audio.onloadeddata = () => resolve(audio);
github jaredpalmer / react-conf-2018 / src / suspense / ArtistTopTracks.js View on Github external
import React from 'react';
import { fetch } from '../fetch';
import { createResource } from 'react-cache';
import { cache } from '../cache';
import { Track, AudioResource } from './SuspenseTrack';

const ArtistTopTracksResource = createResource(id =>
  fetch(`https://api.spotify.com/v1/artists/${id}/top-tracks?market=US`)
    .then(res => res.json())
    .then(({ tracks }) => tracks)
);

class ArtistTopTracks extends React.Component {
  render() {
    const tracks = ArtistTopTracksResource.read(cache, this.props.id);
    tracks.slice(0, 1).forEach(track => {
      AudioResource.preload(cache, track.preview_url);
    });
    return (
      <div className="topTracks">
        <h3 className="center">Top Tracks</h3>
        {tracks.slice(0, 3).map(track => (
          <Track key={track.id} track={track} />
github Raathigesh / hooks.guide / src / preview.js View on Github external
import styled from "styled-components";
import { Helmet } from "react-helmet";
import throttle from "lodash.throttle";
import { createCache, createResource } from "react-cache";
import { execute } from "./utils/executor";
import { fetchDoc } from "./utils/fetcher";
import { parse } from "./utils/md-parser";
import Editor from "./editor";
import Contributors from "./contributors";
import TabFrame from "./tab-frame";
import { highlightColor } from "./theme";
import LogoComp from "./logo";

window.React = React;
const cache = createCache();
const docsResource = createResource(fetchDoc);

const Container = styled.div`
  max-width: 900px;
  flex-direction: column;
  flex: 1 1 auto;
  padding-left: 70px;
  @media (max-width: 700px) {
    padding-left: 10px;
  }
`;

const Name = styled.div`
  font-size: 30px;
  font-weight: 400;
`;
github jaredpalmer / react-conf-2018 / src / vanilla / odl / ArtistTopTracks.1.js View on Github external
import { fetch } from '../full-suspense/fetch';
import { createResource } from 'react-cache';
import { cache } from '../full-suspense/cache';

const ArtistTopTracksResource = createResource(id =>
  fetch(`https://api.spotify.com/v1/artists/${id}/top-tracks?market=US`)
    .then(res => res.json())
    .then(
      ({ tracks }) => tracks,
      error => {
        throw new Error(error);
      }
    )
);

export const AudioResource = createResource(
  src => {
    const audio = new Audio(src);
    return new Promise((resolve, reject) => {
      audio.onerror = reject;
      audio.onloadeddata = () => resolve(audio);
    });
  },
  src => src
);

function Player({ url, onPause }) {
  const audio = AudioResource.read(cache, url);
  useEffect(
    () => {
      audio.play();
      return () => {
github jaredpalmer / react-conf-2018 / src / suspense / Img.js View on Github external
import React from 'react';
import { createResource } from 'react-cache';
import { cache } from '../cache';

export const ImgResource = createResource(
  ({ src }) => {
    const image = new Image();

    return new Promise((resolve, reject) => {
      image.onload = resolve;
      image.onerror = reject;
      image.src = src;
    });
  },
  ({ src }) => src
);

export const Img = props => {
  ImgResource.read(cache, props);

  return <img {...props} alt="yolo" />;

react-cache

A basic cache for React applications

MIT
Latest version published 4 years ago

Package Health Score

75 / 100
Full package analysis

Similar packages