Skip to content

Instantly share code, notes, and snippets.

View jgcmarins's full-sized avatar

João Marins jgcmarins

View GitHub Profile
@jgcmarins
jgcmarins / useAuth.tsx
Created February 26, 2020 15:03 — forked from sibelius/useAuth.tsx
useAuth hook to handle authentication, use @inline to consume Relay/GraphQL data outside components
import { useEffect } from 'react';
import { graphql, readInlineData } from 'react-relay';
import { useHistory } from '../routing/useHistory';
import { useAuth_user } from './__generated__/useAuth_user.graphql';
const useAuthFragment = graphql`
fragment useAuth_user on User @inline {
id
@jgcmarins
jgcmarins / usePrompt.tsx
Created February 27, 2020 14:24 — forked from sibelius/usePrompt.tsx
Prompt user before leaving route or reload
import { useEffect, useRef } from 'react';
import { useHistory } from 'react-router-dom';
export const usePrompt = (when: boolean, message: string = 'Are you sure you want to quit without saving your changes?') => {
const history = useHistory();
const self = useRef(null);
const onWindowOrTabClose = event => {
if (!when) {
time_namelookup: %{time_namelookup}\n
time_connect: %{time_connect}\n
time_appconnect: %{time_appconnect}\n
time_pretransfer: %{time_pretransfer}\n
time_redirect: %{time_redirect}\n
time_starttransfer: %{time_starttransfer}\n
----------\n
time_total: %{time_total}\n
// ---- routes.ts ---
import * as React from 'react';
import { prepareQuery } from '../../relay';
export default [
{
path: path => `${path}Home`,
component: React.lazy(() => import('./Home')),
prepare: () => {
@jgcmarins
jgcmarins / useAuth.js
Created March 3, 2020 10:54 — forked from gsasouza/useAuth.js
Relay hook to handle authenticantion
import { ROOT_ID } from 'relay-runtime';
import { useRelayEnvironment } from 'react-relay/hooks';
import { useLocation, useHistory } from 'react-router-dom';
import { commitLocalUpdate } from 'react-relay'
import { useMutation } from 'relay-hooks/lib';
import { AuthUserMutation } from 'mutations/AuthUserMutation';
export const TOKEN_KEY = 'KEY';
@jgcmarins
jgcmarins / config
Last active July 14, 2021 19:31
Setup different SSH keys for multiple git remotes: https://twitter.com/jgcmarins/status/1234881259316404229
# GitHub.com
Host github.com
Preferredauthentications publickey
IdentityFile ~/.ssh/id_rsa_github
# GitLab.com
Host gitlab.com
Preferredauthentications publickey
IdentityFile ~/.ssh/id_rsa_gitlab
@jgcmarins
jgcmarins / useInternetReachable.js
Created March 4, 2020 12:04 — forked from julioxavierr/useInternetReachable.js
Alternative hook to check if the internet is reachable with @react-native-community/netinfo that does not return false on the initial results
import { useState, useEffect } from 'react';
import NetInfo from '@react-native-community/netinfo';
const useInternetReachable = () => {
const [isReachable, setIsReachable] = useState(false);
const [isLoading, setIsLoading] = useState(true);
useEffect(() => {
const unsubscribe = NetInfo.addEventListener(({ isInternetReachable }) => {
if (typeof isInternetReachable !== 'boolean') return;
@jgcmarins
jgcmarins / createLoader.tsx
Created March 17, 2020 12:51 — forked from sibelius/createLoader.tsx
createLoader used on react europe relay workshop
// eslint-disable-next-line
import { mongooseLoader } from '@entria/graphql-mongoose-loader';
import DataLoader from 'dataloader';
import { ConnectionArguments } from 'graphql-relay';
import { Model, Types } from 'mongoose';
import { buildMongoConditionsFromFilters } from '@entria/graphql-mongo-helpers';
import { validateContextUser } from './validateContextUser';
import { withConnectionCursor } from './withConnectionCursor';
@jgcmarins
jgcmarins / usePreloadRoute.tsx
Created March 17, 2020 12:57 — forked from sibelius/usePreloadRoute.tsx
usePreloadRoute to preload code or data based on events
import { useCallback } from 'react';
import { matchRoutes, MatchedRoute, RouteConfig } from 'react-router-config';
const prepareMatches = <Params extends { [K in keyof Params]?: string }>(matches: Array<MatchedRoute<Params>>) => {
return matches.map(match => {
const { route, match: matchData } = match;
const prepared = route.prepare ? route.prepare(matchData.params) : {};
const Component = route.component.get();
if (Component == null) {
route.component.load(); // eagerly load
@jgcmarins
jgcmarins / App.js
Created March 17, 2020 13:07 — forked from BorisTB/App.js
Demo of helper hooks for automatic refetch on sort/pagination change
const App = React.memo(
({
node: {
items: { totalCount, ...items }
},
relay
}) => {
const [fulltext, setFulltext] = useState('')
const fulltextDebounced = useDebounce(fulltext, 300)
const [{ sort, order }, updateSort] = useSort({ sort: 'name', order: 'asc' })