DEV Community: terrierscript

TIL: JSX ＜Foo bar={bar} baz={baz}＞ can rewrite ＜Foo {...{baz,bar} }＞

terrierscript — Tue, 13 Apr 2021 12:45:55 +0000

In generally, we need pass all props like this.

const Baz = (props) => {
  const {a, b, c} = props
  return <>
    <div>{a}</div>
    <Foo {...props} />
    <Bar b={b} />
  </>
}

But we can omit props with spread operator and shorthand property name.

const Baz = ({a, b, c}) => {
  return <>
    <div>{a}</div>
    <Foo {...{a, b, c}} />
    <Bar b={b} />
  </>
}

Operate Firestore data with robot account on server side

terrierscript — Fri, 05 Feb 2021 15:35:29 +0000

Firestore is good product. But when we operate to firestore from server side, that firestore-admin ignore rule and enable full access. It's scary point.

I came up with a rule-based way to access the firestore from the server side

Warning

This is PoC, I'm not try this in production.

Prerequirement

First, you need create service(robot) account on console.

Sample Code

const firebaseAdmin = require("firebase-admin")
const firebaseClient = require("firebase")
require("firebase/firestore");

// Paste your service account (create on prerequirement)
const serviceAccount = require( "./YOUR-SERVICE-ACCOUNT.json")

const firebaseConfig = {
  // YOUR FIREBASE CLIENT CONFIG
}

// Paste your service(robot) account id
const serviceAccountUserId = "YOUR_SERVICE_ACCOUNT_USER_ID"

const main = async () => {
  firebaseClient.initializeApp(firebaseConfig)

  firebaseAdmin.initializeApp({
    credential: firebaseAdmin.credential.cert(serviceAccount)
  })
  // Create custom token with admin
  const customToken = await firebaseAdmin.auth().createCustomToken(serviceAccountUserId)

  // Execute sign-in. You can fail write access when comment out next line.
  await firebaseClient.auth().signInWithCustomToken(customToken)

  const db = firebaseClient.firestore()

  // rule like...
  // match /auth/{someobj} {
  //    allow read, write: if request.auth != null;
  // }
  const result = await db.collection("/auth").add({
    foo: "baz",
  }).doc
  console.log(result)

  // Failed Example:
  // const resultFailed = await db.collection("/auth-cant-write").add({
  //   foo: "baz",
  // }).doc
  // console.log(resultFailed)
}
main()

This will also help impersonate the user in server-side (like firebase-functions).

Process `string | string[]` item with `flat()` and `map()`

terrierscript — Tue, 01 Sep 2020 14:41:38 +0000

In some case, we meet string|string[] type (I meet this on next.js)

I found this can process simply with flat() and map() (Not flatMap())

function appendC(strOrArr : string | string[]) : string[] {
  return [strOrArr].flat().map( item => item + "c" )
}

appendC("a")  // ["ac"]
appendC(["aa", "bb")  // ["aac", "bbc"]

If you need generate array in map, you can use flatMap

function splitItems(strOrArr : string | string[]): string[]{
  return [strOrArr].flat().flatMap( item => item.split(",") )
}

splitItems("a,b")  // ["ac"]
splitItems(["aa,bb", "bb,cc")  // ["aac", "bbc"]

In addition, if you need process deep array (like [1,[1,2,[1,2,3],2],[3,2]]), you can use flat(Infinity)

[deepArray].flat(Infinity).map(...

Thinking about expo ( React native) versioning.

terrierscript — Mon, 31 Aug 2020 13:28:55 +0000

In expo, we need publish new version when build binary.
This behavior is a bit of a problem when enabling OTA.

We can disabling OTA, but it's useful in case of emergency

I think expo versioning for OTA friendly.
This based semantic versioning.

x(major) - Breaking Change.
y(minor) - Update when upload to apple store or google play store.
z(patch) - For OTA. Update without store upload.

minor is difference for semantic versioning.

We can this versioning with semver-extract.

$ semver-extract --pjson --minor -x
1.2.x

and package.json like this

"scripts": {
    "release-channel": "echo v$(semver-extract --pjson --minor -x)",
    "build:ios": "expo build:ios --release-channel=production-$(npm run release-channel --silent)"
}

If we upgrade store, version like 1.2.0 -> 1.3.0 and release channel change to production-v1.2 -> production-v1.3 (different release channel).
The other hand, we publish with OTA, version like 1.2.0 -> 1.2.1 and both version use release channel production-v1.2

Generate staging app.json for Expo like flavor

terrierscript — Sat, 25 Jul 2020 12:43:07 +0000

This article is depreacted
In Latest Expo version can dynamic config app.config.js

see: https://docs.expo.io/workflow/configuration/#dynamic-configuration-with-appconfigjs

In some case, we need change app.json variable for staging channel (like bundleIdentifer, icon , etc...)

But expo hasn't flavor function.
I try to generate app.json per publish.

build app.json

First, we write JSON override config.

app-staging-override.json

{
  "expo": {
    "slug":"my-application-staging"
      "ios": {
    "bundleIdentifier": "com.foo.baz.staging"
      }
    }
  }
}

Next we write app.json generator script.

bin/generate-staging-app-json.js

const merge = require("deepmerge")
const baseAppJson = require("../app.json")
const override = require("../app-staging-override.json")
const merged = merge.all([baseAppJson, override])
console.log(JSON.stringify(merged, null, 2))

This script is so simple. this merge app.json and ../app-staging-override.json and output stdout.

Finally, append prebuild script on package.json.

"scripts:"{
  "prebuild:ios:staging": "node bin/generate-staging-app-json.js > app.staging.generated.json",
  "build:ios:staging": "expo build:ios --config app.staging.generated.json --type archive --release-channel=YOUR_STAGING_CHANNEL "
}

Subscribe Pusher on the node environment

terrierscript — Wed, 29 Apr 2020 06:46:11 +0000

Pusher is great pub/sub service.

Basically, we need to subscribe pusher with pusher-js, and this library has node platform.
When we need private/presence channel, we need authorize with pusher-http-node.

Problem

Sometimes we need to subscribe private channel on node server.

Pusher have webhooks, but we can't detect only one endpoint in the some case (like IoT, edge device etc...)

Solution

pusher-js client can custom authorizer.
We can create self-auth authorization client.

const Pusher = require("pusher-js/node")
const PusherServer = require("pusher")
const uuid = require("uuid")


const pusherServer = new PusherServer({
  appId: PUSHER_APP_ID,
  key: PUSHER_KEY,
  secret: PUSHER_SECRET,
  cluster: "ap3",
  encrypted: true,
})
// Pusher.logToConsole = true
const pusher = new Pusher(PUSHER_KEY, {
  cluster: "ap3",
  authorizer: (channel) => {
    return {
      authorize: (socketId, callback) => {
        const auth = pusherServer.authenticate(socketId, channel.name, {
          user_id: `server-${uuid.v4()}`, // we require userId when presence channel
        })
        callback(false, auth)
      },
    }
  },
})

3D Printing JSX model with react-three-renderer

terrierscript — Mon, 30 Dec 2019 10:47:36 +0000

I succeed 3D printing JSX with
react-three-fiber and three.js Exporter!

What?

react-three-fiber is great library that treat three.js on React.
When we use this library, we use JSX for build mesh and geometry like this:

function Thing() {
  return (
    <mesh>
      <boxBufferGeometry attach="geometry" args={[1, 1, 1]} />
      <meshNormalMaterial attach="material" />
    </mesh>
  )
}

We need convert and output polygon data to STL or glTF if 3D printing.

Fortunately, three.js include exporters STLExporter and GLTFExporter (But some exporter is undocumented and may unstable)

We combine those two thing, it's enable "3D printing JSX"!

Demo

This demo can edit src/model/Model.tsx
Be careful demo maybe heavy.

Details

Build model

I generate for example model below.
Models can render both BufferGeometry and Geometry, can nest mesh and split as component.

// Model.tsx
import { Canvas, useFrame, useThree } from "react-three-fiber"
import React from "react"

export const Model = () => {
  return (
    <mesh>
      <Model1 />
      <Model2 />
    </mesh>
  )
}
const Model1 = () => {
  return (
    <mesh position={[0, 0, 0]}>
      <cylinderBufferGeometry attach="geometry" args={[5, 5, 5]} />
      <meshNormalMaterial attach="material" />
    </mesh>
  )
}
const Model2 = () => {
  return (
    <mesh>
      <mesh position={[-5, -1.5, -3]}>
        <boxBufferGeometry attach="geometry" args={[6, 2, 5]} />
        <meshNormalMaterial attach="material" />
      </mesh>
      <mesh>
        <mesh position={[0, 3, -1]}>
          <octahedronBufferGeometry attach="geometry" args={[4]} />
          <meshNormalMaterial attach="material" />
        </mesh>
        <mesh position={[3, 0.5, 3]}>
          <sphereGeometry attach="geometry" args={[3, 10, 32]} />
          <meshNormalMaterial attach="material" />
        </mesh>
      </mesh>
    </mesh>
  )
}

And we can render model like this.

const App = () => {
  const ref = useRef()
  const { gl } = useThree()
  gl.setClearColor("#ff99cc")

  return (
    <Canvas>
      <Model />
    </Canvas>
  )
}

Traverse scene and export STL

We can got scene from useThree and can convert to STL with STLExporter.

// ExportStl.tsx
import { STLExporter } from "three/examples/jsm/exporters/STLExporter"

export const ExportStl = () => {
  const { scene } = useThree()
  useEffect(() => {
    const stl = new STLExporter().parse(scene)
    console.log(stl)
  }, [scene])
  return <mesh></mesh>
}

Export STL data when append inside Canvas.

const App = () => {
  // ...
  return (
    <Canvas>
      <Model />
      <ExportStl />
    </Canvas>
  )
}

But bear geometries occure error or another some problem.
I try to convert and merge geometry for output.

export const toRenderble = (scene: Scene): Scene => {
  let tmpGeometry = new Geometry()

  const cloneScene = scene.clone()
  cloneScene.traverse((mesh) => {
    if (!isMesh(mesh)) return
    if (!mesh.geometry) {
      return
    }

    // Convert geometry
    const appendGeom = toRenderableGeometry(mesh.geometry)
    if (!appendGeom) {
      return null
    }

    // merge parent matrix
    if (mesh.parent) {
      mesh.parent.updateMatrixWorld()
      mesh.applyMatrix(mesh.parent.matrixWorld)
    }

    mesh.geometry = appendGeom
    tmpGeometry.mergeMesh(mesh)
  })

  // generate output scene
  const outputScene = new Scene()
  const buf = new BufferGeometry().fromGeometry(tmpGeometry)
  const mesh = new Mesh(buf, new MeshBasicMaterial())
  outputScene.add(mesh)
  return outputScene
}

// convert BufferGeometry -> Geometry
const toRenderableGeometry = (
  geom: Geometry | BufferGeometry
): Geometry | null => {
  if (isGeometry(geom)) {
    return geom
  }
  if (geom.index === null && !geom.getAttribute("position")) {
    return null
  }

  // Try to convert BufferGeometry (not stable...)
  try {
    const buf = new Geometry().fromBufferGeometry(geom)
    return buf
  } catch (e) {
    console.warn(`skip: ${geom}`)
    return null
  }
}

After this, we can those on component.
This time, pass result to React.Context

export const ExportStl = () => {
  const { scene } = useThree()
  const { setStl } = useExporterStore()
  useEffect(() => {
    const copyScene = toRenderble(scene)
    const stl = new STLExporter().parse(copyScene)
    setStl(stl)
  }, [scene])
  return <mesh></mesh>
}

We can write this logic as hooks if you need.

export const useSTLExporter = () => {
  const { scene } = useThree()
  const [result, setResult] = useState()
  useEffect(() => {
    const copyScene = toRenderble(scene)
    const stl = new STLExporter().parse(copyScene)
    setResult(stl)
  }, [scene])
  return result
}

When convert to glTF, like this

const exportGltf = (scene, cb) => {
  return new GLTFExporter().parse(
    scene,
    (obj) => {
      cb(JSON.stringify(obj, null, 2))
    },
    { trs: true }
  )
}

export const ExportGltf = () => {
  const { scene } = useThree()
  useEffect(() => {
    const copyScene = toRenderble(scene)
    exportGltf(copyScene, (glTF) => {
      console.log(glTF)
    })
  }, [scene])
  return <mesh></mesh>
}

Output model data to outsitde react-three-fiber

In above seciton, I talk about use React.Context, but in real react-three-fiber use React.Reconciler and cannot default hooks normaly in <Canvas> children.

I refer this issue and implemented relay

// App.tsx

const App = () => {
  return (
    <div>
      <ExporterStoreProvider>
        <World />
      </ExporterStoreProvider>
    </div>
  )
}

// World.tsx

export const World = () => {
  const value = useExporterStore() // get value
  return (
    <Canvas camera={{ position: [0, 0, 30] }}>
      <ExportPassProvider value={value}>
        {" "}
        {/* and pass inside Canvas */}
        <Model />
        <ExportStl />
      </ExportPassProvider>
    </Canvas>
  )
}

Do printing!

This section is not related react.

My printer need convert STL to gcode.
I use Ultimaker cura.

And printing!

Conclusion

This PoC is not good performance and some geometry pattern cannot converted, but we can "3D printing JSX".

It is hard to build everything with JSX and those hasn't real sizes but so good on little regular shapes model like this articles cover react logo.

I think it's useful that as a partial parts building and we can use another CAD tools like tinkercad.

Tips: CSS Variables for styled-components

terrierscript — Wed, 27 Nov 2019 14:35:59 +0000

In styled-components, custom property can use with props

const Item = styled.div`
  color: ${({color}) => color};
  background: ${({bgCbolor = "red"}) => bgColor};
`

but this syntax is redundant.

Solution: use CSS Variables

In modern browser, we can use CSS Variable. It’s very useful.

I found more useful that convert react props to CSS Variables.

export const Vars = styled.div`
  ${(props) => {
    return Object.entries(props)
      .filter(([_, v]) => typeof v === "string" || typeof v === "number")
      .map(([k, v]) => `--${k}: ${v};`)
      // You can convert to kebabCase if need.
      // .map(([k, v]) => `--${_.kebabCase(k)}: ${v};`)

  }}
`

Usage


const Item = styled.div`
  color: var(—-color);
  background: var(—-bgColor, "blue");
`

const FooComponent = () => (
  <Vars color="red" bgColor="yellow">
    <Item />
  </Vars>
)

Additionally, Be careful that variable effect to all component children. This behavior has pros and cons.

Create animating element on CSS Grid with React Hooks

terrierscript — Wed, 06 Nov 2019 00:46:53 +0000

In general, grid-row and grid-columns cannot transition and that is hard to create moving animation element.

I found that enable with use create element for calculate.

For example, I try to reproduce UpLabs SmoothBottomBar.

And It's can succeed

demo & Full Source Code

Making Step

1. Create base grid

First, I create bare gird.

Preview

Full Code

https://stackblitz.com/edit/react-ts-animation-grid-1

Description

Main grid is here. I use react-icons. It's very useful.

That icons array maybe tricky.

import { FiUser, FiHome, FiInbox } from "react-icons/fi"

export const Menu1 = () => {
  const icons = [FiHome, FiInbox, FiUser]

  return (
    <Container>
      <MenuGrid>
        {icons.map((Icon) => (
          <IconWrap>
            <Icon />
          </IconWrap>
        ))}
      </MenuGrid>
    </Container>
  )
}

2. Create element for calcurate.

Next, append cell for calcurate.

Preview

Full Code

https://stackblitz.com/edit/react-ts-animation-grid-2

Description

I need to append icons to grid columns and append get cell position state.


// Item got props that passed to `grid-column`
const Item = styled.div`
  ${({ x }) => css`
    grid-column: ${x};
  `}
  grid-row: 1;
`

export const Menu2 = () => {
  const [gridPosition, setGridPosition] = useState<number>(1)

  // ...
        {icons.map((Icon, i) => (
          <Item x={i + 1} onMouseOver={(e) => setGridPosition(i + 1)}>
            <IconWrap>
              <Icon />
            </IconWrap>
          </Item>
        ))}
  // ...
}

and append cell that named PositionCalcurator.


// PositionCalcurator extends Item. That can set row and cell.
const PositionCalcurator = styled(Item)`
  border: 1px solid red; // for debug
`

export const Menu2 = () => {
  const [gridPosition, setGridPosition] = useState<number>(1)
  const calcuratorRef = useRef<HTMLElement>(null) // calucrator has `ref`

  const icons = [FiHome, FiInbox, FiUser]

  return (
    <Container>
      {/* ... */}
        <PositionCalcurator ref={calcuratorRef} x={gridPosition} />
      {/* ... */}
    </Container>
  )
}

3. Append animating cursor.

Next, append hover cursor.

Preview

Full Code

https://stackblitz.com/edit/react-ts-animation-grid-3

Description

I set ref to PositionCalcurator, now we can get calcurated refs rect position that same as grid position.

I create cursorRect state and hook with useEffect. This effect called when change gridPosition.(but it's may be warn when use eslint-plugin-react-hooks)

export const Menu3 = () => {
  const [gridPosition, setGridPosition] = useState<number>(1)
  const [cursorRect, setCursor] = useState<null | Rect>(null) // append
  const calcuratorRef = useRef<HTMLElement>(null)
  useEffect(() => {
    if (!calcuratorRef.current) return
    const top = calcuratorRef.current.offsetTop
    const left = calcuratorRef.current.offsetLeft
    const width = calcuratorRef.current.clientWidth
    const height = calcuratorRef.current.clientHeight
    const cursor = { top, left, width, height }
    setCursor(cursor)
  }, [gridPosition])

I append Cursor component that passed cursorRect. This element enable animation because isolated from grid and set position:absolute and animating attributes.


const Cursor = styled.div`
  position: absolute;
  transition: 0.4s;
  transition-timing-function: ease-in-out;
  background: green;
  opacity: 0.5;
  ${({ top, left, width, height }) => css`
    top: ${top}px;
    left: ${left}px;
    width: ${width}px;
    height: ${height}px;
  `};
`
export const Menu3 = () => {
  const [cursorRect, setCursor] = useState<null | Rect>(null) // append

  // ...
  return (
    <Container>
      {/* Append first for z-index! */}
      {cursorRect && <Cursor {...cursorRect} />}

<Cursor> needs first element on Container because of z-index.

4. Text animation.

This is not related grid animation, but I follow original.

Preview

Full Cod

https://stackblitz.com/edit/react-ts-animation-grid-4

Description

I want to use only :hover pseudo, but I append active prop because it's can't sync to cursor state

export const Menu4 = () => {
  const [gridPosition, setGridPosition] = useState<number>(1)
  const isActive = useCallback((x) => gridPosition === x, [gridPosition])
  const icons = [["Home", FiHome], ["Inbox", FiInbox], ["Profile", FiUser]]
  return (
    {/* ... */}
    {icons.map(([text, Icon], i) => (
      <Item x={i + 1} onMouseOver={(e) => setGridPosition(i + 1)}>
        <AnimateIcon
          x={i + 1}
          onMouseOver={(e) => setGridPosition(i + 1)}
          text={text}
          active={isActive(i + 1)}
        >
          <Icon />
        </AnimateIcon>
      </Item>
    ))}
  )

and change AnimateIcon

const AnimateIconInner = styled(IconWrap)`
  transition: 0.5s;
  ::after {
    font-size: 0.6em;
    transition: 0.5s;

    overflow: hidden;
    content: attr(data-text);
    ${({ active }) => css`
      width: ${active ? "100%" : "0px"};
    `}
  }
`

const AnimationContainer = styled.div`
  width: auto;
`

const AnimateIcon = ({ x, onMouseOver, active, children, text }) => {
  return (
    <Item x={x} onMouseOver={onMouseOver}>
      <AnimateIconInner active={active} data-text={text}>
        <AnimationContainer>{children}</AnimationContainer>
      </AnimateIconInner>
    </Item>
  )
}

5. Turning & Finish.

Something turned version is here ( same as first demo)

Full Code: https://stackblitz.com/edit/react-ts-animation-grid-final

Conclusion

I cannot found CSS Grid animating with raw css.
On the other hand, it seems useful to be able to use the grid as coordinate calculation.

I create another pattern like Mega man stage select.
https://amination-grid-menu.netlify.com/

Happy animation with CSS Grid!

Suspend pinch-zoom on React Hooks

terrierscript — Sun, 03 Nov 2019 14:21:17 +0000

I create hooks that suspend mobile device pinch zoom.
This behavior not recommended, but we need sometime.

const useDisablePinchZoomEffect = () => {
  useEffect(() => {
    const disablePinchZoom = (e) => {
      if (e.touches.length > 1) {
        e.preventDefault()
      }
    }
    document.addEventListener("touchmove", disablePinchZoom, { passive: false })
    return () => {
      document.removeEventListener("touchmove", disablePinchZoom)
    }
  }, [])
}

If you want suspend pinch zoom partial area, you can use this component.


const SuspendPinchZoom = ({ children }) => {
  const ref = useRef(null)
  // const ref = useRef<HTMLDivElement>(null)

  useLayoutEffect(() => {
    const target = ref.current
    if (!target) return
    const disablePinchZoom = (e) => {
      if (e.touches.length > 1) {
        e.preventDefault()
      }
    }
    target.addEventListener("touchmove", disablePinchZoom, { passive: false })
    return () => {
      target.removeEventListener("touchmove", disablePinchZoom)
    }
  }, [])
  return <div ref={ref}>{children}</div>
}

reference: https://stackoverflow.com/questions/49500339/cant-prevent-touchmove-from-scrolling-window-on-ios?noredirect=1&lq=1

original post(japanese): https://www.terrier.dev/blog/2019/20191103224505-react-hooks-pinch-zoom/

Rewrite Auth0 Example with React Hooks

terrierscript — Sun, 23 Jun 2019 12:02:39 +0000

Auth0 default React example don't use react hooks.

I try to rewrite this example to use React Hooks.

Full Example

You can read full example in this repository
https://github.com/terrierscript/example-auth0/tree/full-example

Details

1. Create Context

First, I create AuthContext that hold auth object and some auth result state.

// auth/AuthContext
import React, { createContext, useState, useContext } from 'react';

import { WebAuth } from 'auth0-js';
import { AUTH_CONFIG } from './auth0-variables';

const generateAuth = () =>
  new WebAuth({
    domain: AUTH_CONFIG.domain,
    clientID: AUTH_CONFIG.clientID,
    redirectUri: AUTH_CONFIG.callbackUrl,
    responseType: 'token id_token',
    scope: 'openid'
  });

const Auth0Context = createContext<ReturnType<typeof useContextValue>>(null);

const useAuthState = () => {
  return useState({
    accessToken: null,
    idToken: null,
    expiresAt: 0
  });
};

const useContextValue = () => {
  const [authState, updateAuthState] = useAuthState();
  return {
    auth0: generateAuth(),
    authState,
    updateAuthState
  };
};

export const Auth0Provider = ({ children }) => {
  const value = useContextValue();
  return (
    <Auth0Context.Provider value={value}>{children}</Auth0Context.Provider>
  );
};

export const useAuth0Context = () => {
  return useContext(Auth0Context);
};

2. Create Context

Next, generate useAuth.

Almost logics same as Auth.js

But isAuthenticated changed from function to boolean value with useMemo

// src/useAuth
import { useCallback, useMemo } from 'react';
import history from '../history'; // TODO: history may pass from props
import { useAuth0Context } from './AuthContext';

const useIsAuthenticated = expiresAt => {
  return useMemo(() => {
    return new Date().getTime() < expiresAt;
  }, [expiresAt]);
};

export const useAuth0 = () => {
  const { auth0, authState, updateAuthState } = useAuth0Context();

  const isAuthenticated = useIsAuthenticated(authState.expiresAt);

  const login = useCallback(() => {
    auth0.authorize();
  }, [auth0]);

  const logout = useCallback(() => {
    updateAuthState({
      accessToken: null,
      idToken: null,
      expiresAt: 0
    });
    localStorage.removeItem('isLoggedIn');

    auth0.logout({
      returnTo: window.location.origin
    });

    // navigate to the home route
    history.replace('/home');
  }, [auth0, updateAuthState]);

  const setSession = useCallback(
    authResult => {
      localStorage.setItem('isLoggedIn', 'true');

      let expiresAt = authResult.expiresIn * 1000 + new Date().getTime();
      updateAuthState({
        accessToken: authResult.accessToken,
        idToken: authResult.idToken,
        expiresAt: expiresAt
      });
      history.replace('/home');
    },
    [updateAuthState]
  );

  const renewSession = useCallback(() => {
    auth0.checkSession({}, (err, authResult) => {
      if (authResult && authResult.accessToken && authResult.idToken) {
        setSession(authResult);
      } else if (err) {
        logout();
        console.error(err);
        alert(
          `Could not get a new token (${err.error}: ${err.error_description}).`
        );
      }
    });
  }, []);

  const handleAuthentication = useCallback(() => {
    auth0.parseHash((err, authResult) => {
      if (authResult && authResult.accessToken && authResult.idToken) {
        setSession(authResult);
      } else if (err) {
        history.replace('/home');
        alert(`Error: ${err.error}. Check the console for further details.`);
      }
    });
  }, []);

  // retun some functions
  return {
    login,
    logout,
    handleAuthentication,
    isAuthenticated,
    renewSession
  };
};

3. fix `<Callback>`

In base example, handleAuthentication called in router like this.

  <Route path="/callback" render={(props) => {
    handleAuthentication(props);
    return <Callback {...props} /> 
  }}/>

I feel it's so tricky.
But when use hooks, we call that with useEffect

// Callback/Callback

import React, { useEffect } from 'react';
import loading from './loading.svg';
import { useAuth0 } from '../Auth/useAuth';

export const Callback = props => {
  const { handleAuthentication } = useAuth0();
  const { location } = props;
  useEffect(() => {
    if (/access_token|id_token|error/.test(location.hash)) {
      handleAuthentication();
    }
  }, [handleAuthentication, location]);

  const style = {
  //....
  };

  return (
    <div style={style}>
      <img src={loading} alt="loading" />
    </div>
  );
};

4. fix `<App>` and `<Home>`

<App> and <Home> rewrited too.

<App> call renewSession with useEffect

// App

import React, { useCallback, useEffect, useMemo } from 'react';
import { Navbar, Button } from 'react-bootstrap';
import './App.css';
import { useAuth0 } from './Auth/useAuth';

const useGoToHandler = history => {
  return useCallback(route => () => history.replace(`/${route}`), [history]);
};

export const App = ({ history }) => {
  const { login, logout, isAuthenticated, renewSession } = useAuth0();

  const goToHandler = useGoToHandler(history);
  useEffect(() => {
    if (localStorage.getItem('isLoggedIn') === 'true') {
      renewSession();
    }
  }, [renewSession]);

  return (
    <div>
      <Navbar fluid>
        <Navbar.Header>
          <Navbar.Brand>
            <a href="#">Auth0 - React</a>
          </Navbar.Brand>
          <Button
            bsStyle="primary"
            className="btn-margin"
            onClick={goToHandler('home')}
          >
            Home
          </Button>
          {!isAuthenticated && (
            <Button
              id="qsLoginBtn"
              bsStyle="primary"
              className="btn-margin"
              onClick={login}
            >
              Log In
            </Button>
          )}
          {isAuthenticated && (
            <Button
              id="qsLogoutBtn"
              bsStyle="primary"
              className="btn-margin"
              onClick={logout}
            >
              Log Out
            </Button>
          )}
        </Navbar.Header>
      </Navbar>
    </div>
  );
};

// Home/Home

import React from 'react';
import { useAuth0 } from '../Auth/useAuth';

export const Home = () => {
  const { login, isAuthenticated: isAuthenticated } = useAuth0();
  return (
    <div className="container">
      {isAuthenticated && <h4>You are logged in!</h4>}
      {!isAuthenticated && (
        <h4>
          You are not logged in! Please
          <a style={{ cursor: 'pointer' }} onClick={login}>
            Log In
          </a>
          to continue.
        </h4>
      )}
    </div>
  );
};

5. fix router

Rewrite router to this.

Routers wrapped <Auth0Provider>.
Callback logic moved that component.
(trivial) Use react-router <Switch>.

// roter
import React from 'react';
import { Route, Router, Switch } from 'react-router-dom';
import { App } from './App';
import { Home } from './Home/Home';
import { Callback } from './Callback/Callback';
import history from './history';
import { Auth0Provider } from './Auth/AuthContext';

const Routes = () => {
  return (
    <Router history={history}>
      <Route path="/" render={props => <App {...props} />} />
      <Switch>
        <Route path="/home" render={props => <Home {...props} />} />
        <Route path="/callback" render={props => <Callback {...props} />} />
      </Switch>
    </Router>
  );
};

export const makeMainRoutes = () => {
  return (
    <Auth0Provider>
      <Routes />
    </Auth0Provider>
  );
};

6. Setup Auth0 and `npm start`

That all !

styled-component + react-transition-group = very simple Transition

terrierscript — Tue, 26 Feb 2019 12:00:25 +0000

If we need animate react component, we can use library like react-pose or react-spring. Those library is very cool but so heavy if we need only tiny transition.

On the other hand, react-transition-group is so simple.

If we use styled-componets, <Transition> component may be better than <CSSTransition>

Example

First, I create transition wrapped component.
In this example, I use React Hooks but you can use class component if you need.



import { Transition } from "react-transition-group"
import { Animation } from "./Animation"

export const AnimateItem = () => {
  const [animate, setAnimate] = useState(false)

  // Animate on click button and revert after 3000ms.
  const doAnimate = useCallback(() => {
    setAnimate(true)
    setTimeout(() => {
      setAnimate(false)
    }, 3000)
  }, [])

  return (
    <div>
      {/* Transition change state with `in` props */}
      <Transition in={animate} timeout={500}>
        {(state) => (
          // state change: exited -> entering -> entered -> exiting -> exited
          <Animation state={state}>Hello</Animation>
        )}
      </Transition>
      <button onClick={doAnimate}>Animate</button>
    </div>
  )
}

Next, create component that based on styled-component.



// Animation.js
import styled from "styled-components"

export const Animation = styled.div`
  transition: 0.5s;
  width: 300px;
  height: 200px;
  /* example for move item */
  transform: translateX(
    ${({ state }) => (state === "entering" || state === "entered" ? 400 : 0)}px
  );
  /* change color*/
  background: ${({ state }) => {
    switch (state) {
      case "entering":
        return "red"
      case "entered":
        return "blue"
      case "exiting":
        return "green"
      case "exited":
        return "yellow"
    }
  }};
`

You can split Item and Animation too.



const BaseItem = styled.div`
  width: 300px;
  height: 200px;
`

export const Animation = styled(BaseItem)`
  transition: 0.5s;
  transform: translateX(
    ${({ state }) => (state === "entering" || state === "entered" ? 400 : 0)}px
  );
`

Preview

Fade example

You can create fadeIn/fadeOut animation with same way.



export const Fade = styled.div`
  transition: 0.5s;
  opacity: ${({ state }) => (state === "entered" ? 1 : 0)};
  display: ${({ state }) => (state === "exited" ? "none" : "block")};
`

Or you can use with unmountOnExit and mountOnEnter.




export const Fade2 = styled.div`
  transition: 5s;
  opacity: ${({ state }) => (state === "entered" ? 1 : 0)};
`

const Item = () => {
  // ...
  return <Transition in={animate} timeout={500} unmountOnExit mountOnEnter>
    {(state) => <Fade2 state={state}>Fade In</Fade2>}
  </Transition>
}

DEV Community: terrierscript

TIL: JSX ＜Foo bar={bar} baz={baz}＞ can rewrite ＜Foo {...{baz,bar} }＞

Operate Firestore data with robot account on server side

Warning

Prerequirement

Sample Code

Process `string | string[]` item with `flat()` and `map()`

Thinking about expo ( React native) versioning.

Generate staging app.json for Expo like flavor

build app.json

Subscribe Pusher on the node environment

Problem

Solution

3D Printing JSX model with react-three-renderer

What?

Demo

Details

Build model

Traverse scene and export STL

Output model data to outsitde react-three-fiber

Do printing!

Conclusion

Tips: CSS Variables for styled-components

Solution: use CSS Variables

Create animating element on CSS Grid with React Hooks

Making Step

1. Create base grid

Preview

Full Code

Description

2. Create element for calcurate.

Preview

Full Code

Description

3. Append animating cursor.

Preview

Full Code

Description

4. Text animation.

Preview

Full Cod

Description

5. Turning & Finish.

Conclusion

Suspend pinch-zoom on React Hooks

Rewrite Auth0 Example with React Hooks

Full Example

Details

1. Create Context

2. Create Context

3. fix <Callback>

4. fix <App> and <Home>

5. fix router

6. Setup Auth0 and npm start

styled-component + react-transition-group = very simple Transition

Example

Preview

Fade example

3. fix `<Callback>`

4. fix `<App>` and `<Home>`

6. Setup Auth0 and `npm start`