| import { BlurImage, YouTube } from "@dub/ui"; | |
| import { nFormatter } from "@dub/utils"; | |
| import { Eye, UserCheck, Video } from "lucide-react"; | |
| import { Suspense } from "react"; | |
| export function YoutubeChannel({ id }: { id: string }) { | |
| return ( | |
| <Suspense fallback={<div className="not-prose grid gap-4"></div>}> | |
| <YoutubeChannelRSC id={id} /> | |
| </Suspense> |
A typical use-case on web for maintaining React State is your URL's query parameters. It lets users refresh pages & share links without losing their spot in your app.
URL-as-state is especially useful on Next.js, since next/router will re-render your page with shallow navigation.
This gist lets you leverage the power of URL-as-state, while providing a fallback to React state for usage in React Native apps.
It's essentially a replacement for useState.
It's 2019, and creating smooth shared element transitions in react native (& expo!) is finally easy.
Ideally, as Pablo Stanley suggests, your app's navigation will use these shared transitions for similar components that appear across screens.
Is it possible to achieve the great experience above using react-native/expo? Now it is.
| import { ApolloClient, QueryOptions, MutationOptions } from 'apollo-client'; | |
| import { DocumentNode } from 'graphql'; | |
| import { getSdk, Requester } from '.generated/schema-typedefs'; | |
| import { ApolloRequestError } from './ApolloRequestError'; | |
| export type ApolloRequesterOptions<V, R> = | |
| | Omit<QueryOptions<V>, 'variables' | 'query'> | |
| | Omit<MutationOptions<R, V>, 'variables' | 'mutation'>; |
| import React from 'react'; | |
| import { Link as GatsbyLink } from 'gatsby'; | |
| import * as deepmerge from 'deepmerge'; | |
| import { INLINES, BLOCKS, MARKS } from '@contentful/rich-text-types'; | |
| import { documentToJSX } from './../scripts/documentToJSX'; | |
| import { getEntry } from './../scripts/getContentfulEntry'; | |
| const Link = ({ children, to, activeClassName, ...other }) => { | |
| const internal = /^\/(?!\/)/.test(to); |
| const puppeteer = require('puppeteer'); | |
| function sleep(ms){ | |
| return new Promise(resolve=>{ | |
| setTimeout(resolve,ms) | |
| }) | |
| } | |
| (async() => { |
| import HomePage from './HomePage.jsx'; | |
| import AboutPage from './AboutPage.jsx'; | |
| import UserPage from './UserPage.jsx'; | |
| import FourOhFourPage from './FourOhFourPage.jsx'; | |
| const PAGES = { | |
| home: HomePage, | |
| about: AboutPage, | |
| user: UserPage, | |
| }; |
| // this is the service worker which intercepts all http requests | |
| self.addEventListener('fetch', function fetcher (event) { | |
| var request = event.request; | |
| // check if request | |
| if (request.url.indexOf('assets.contentful.com') > -1) { | |
| // contentful asset detected | |
| event.respondWith( | |
| caches.match(event.request).then(function(response) { | |
| // return from cache, otherwise fetch from network | |
| return response || fetch(request); |
###Redux Egghead Video Notes###
####Introduction:#### Managing state in an application is critical, and is often done haphazardly. Redux provides a state container for JavaScript applications that will help your applications behave consistently.
Redux is an evolution of the ideas presented by Facebook's Flux, avoiding the complexity found in Flux by looking to how applications are built with the Elm language.
####1st principle of Redux:#### Everything that changes in your application including the data and ui options is contained in a single object called the state tree
| import React, { Component, PropTypes } from 'react' | |
| import { connect, PromiseState } from 'react-refetch' | |
| import LoadingAnimation from './LoadingAnimation' | |
| import ErrorBox from './ErrorBox' | |
| class PromiseStateContainer extends Component { | |
| static propTypes = { | |
| ps: PropTypes.instanceOf(PromiseState).isRequired, | |
| onPending: PropTypes.func, | |
| onNoResults: PropTypes.func, |
