Forem: Ryohlan

Conditional Component Rendering Tips

Ryohlan — Fri, 02 Sep 2022 02:41:36 +0000

How do you write a code if you want to render a component by some conditions?

Following is a my way.

It's TypeScript friendly!

 const If = <T extends string>(props: { 
   type: T, 
   [key in T]: ReactNode, 
   else: ReactNode 
 }) => {
   return <>{props[props.type] || props.else}</>
 }

Usage

type UserRole = 'admin' | 'developer' | 'manager' 
 export const UserRoleView = (props: { role: UserRole }) => (
   <If 
    type={props.role} 
    admin={<div>admin</div>} 
    developer={<div>developer</div>} 
    manager={<div>manager</div>} 
    else={<div>No role</div>} 
   />
 )

How to handle Next.js Api routes more type safely

Ryohlan — Thu, 25 Feb 2021 01:48:29 +0000

Create a utility method.

// handleMethods.ts
type ApiResponse<Data = {}, Error = { message: string }> =
  | { result: true; data: Data }
  | { result: false; data: Error }

export const handleMethods = <Q extends Record<string, string> = {}>() => {
  const handlers: { [key: string]: NextApiHandler | undefined } = {}
  const methodHandler = {
    get: <T, E = string>(
      handler: (
        req: NextApiRequest & { query: Q },
        res: NextApiResponse<ApiResponse<T, E>>,
      ) => void | Promise<void>,
    ) => {
      handlers['GET'] = handler
      return methodHandler
    },
    post: <T, E = string>(
      handler: (
        req: NextApiRequest & { query: Q },
        res: NextApiResponse<ApiResponse<T, E>>,
      ) => void | Promise<void>,
    ) => {
      handlers['POST'] = handler
      return methodHandler
    },
    put: <T, E = string>(
      handler: (
        req: NextApiRequest & { query: Q },
        res: NextApiResponse<ApiResponse<T, E>>,
      ) => void | Promise<void>,
    ) => {
      handlers['PUT'] = handler
      return methodHandler
    },
    delete: <T, E = string>(
      handler: (
        req: NextApiRequest & { query: Q },
        res: NextApiResponse<ApiResponse<T, E>>,
      ) => void | Promise<void>,
    ) => {
      handlers['DELETE'] = handler
      return methodHandler
    },
    prepare: (): NextApiHandler<ApiResponse> => (req, res) => {
      if (handlers[req.method]) {
        return handlers[req.method](req, res)
      } else {
        return res.status(404).json({ result: false, data: { message: 'not found' } })
      }
    },
  }
  return methodHandler
}

Usage

// pages/api/users/index.ts

type User = {...}

export default handleMethods()
  .get<Array<User>>(async (req, res) => {
      try {
         const result = await findUsers()
         return res.json({ result: true, data: result })
      } catch(e) {
         return res.status(400).json({ result: false, data: e })
      }
  })
  .post<User>(async (req, res) => {
      try {
         const result = await createUser()
         return res.json({ result: true, data: result })
      } catch(e) {
         return res.status(400).json({ result: false, data: e })
      }
  })
  .prepare()

// pages/api/users/[id].ts
export default handleMethods({ id: string })
  .get<Array<User>>(async (req, res) => {
      try {
         // you can access query.id type safely.
         const result = await findUsers({ id: req.query.id })
         return res.json({ result: true, data: result })
      } catch(e) {
         return res.status(400).json({ result: false, data: e })
      }
  })
  .prepare()

Type safe navigation for react-navigation v5

Ryohlan — Thu, 13 Aug 2020 15:16:35 +0000

First, I show my type-definitions.

// Define screens. The key is a screen name. The value is a parameter passed to a navigation object.
export type Screens = {
}

// Define your navigators.
export type Navigators = {
}

type Navigatable<T> = T extends keyof Screens
  ? ScreenParams<T>
  : T extends keyof Navigators
  ? NavigatorParams<T>
  : never

type ScreenParams<T extends keyof Screens> = {
  screen: T
  params: Screens[T]
}

type NavigatorParams<T extends keyof Navigators> = {
  screen: T
  params: Navigators[T]
}

export type NavigationParams = Screens & Navigators

export type TypedNavigatorParams<T extends keyof Navigators> = Pick<
  NavigationParams,
  NavigationParams[T]['screen']
>

Usage

Read my repository for detail.

https://github.com/ryohlan/typesafe-react-navigation-sample

if you are considering the following structure:

AppNavigator 
 - AuthNavigator
  - launch
  - signup
 - MainNavigator
  - MainTabNavigator
   - home
   - search

You can define the Screens and the Navigators the following:

// Define screens. The key is a screen name. The value is a parameter passed to a navigation object.
export type Screens = {
 launch: {}
 signup: { signupParam: string }
 home: {}
 search: { searchParam: number }
}

// Define your navigators.
export type Navigators = {
  AppNavigator: Navigatable<'AuthNavigator' | 'MainNavigator'>
  AuthNavigator: Navigatable<'launch'|'signup'>
  MainNavigator: Navigatable<'MainTabNavigator'>
  MainTabNavigator: Navigatable<'home'|'search>
}

A Navigator also can be checked:

import React from 'react'
import { createStackNavigator } from '@react-navigation/stack'
import { TypedNavigatorParams } from './NavigationParams'
import { LaunchScreen } from '../screens/LaunchScreen'

const { Screen, Navigator } = createStackNavigator<TypedNavigatorParams<'AuthNavigator'>>()

export const AuthNavigator = () => {
  return (
    <Navigator mode="card">
      <Screen {...LaunchScreen} />
    </Navigator>
  )
}

And create custom hooks for navigation.

import { useNavigation as useDefaultNavigation } from '@react-navigation/core'
import { StackNavigationProp } from '@react-navigation/stack'
import { NavigationParams } from '@src/components/navigators/NavigationParams'

export const useNavigation = () => useDefaultNavigation<StackNavigationProp<NavigationParams>>()

You can navigate type-safely using useNavigation!

const navigation = useNavigation()
navigation.navigate('AppNavigator', {
  screen: 'AuthNavigator',
  params: {
    screen: 'signup',
    params: { signupParam: '' }, // If
  },
})

Next.js + TypeScript template

Ryohlan — Fri, 08 Feb 2019 20:30:45 +0000

[updated] version 1.1.0 is out. Remove next-routes. Based on https://github.com/zeit/next.js#routing

I create a template for Next.js and TypeScript.

ryohlan / next-ts-template

Template for Next.js using parameterized typed routing

Next.js 9 is out!!

This version includes official dynamic routing using file system.

So, you may not need this repository. See this.

https://nextjs.org/blog/next-9#dynamic-route-segments

Next.js TypeScript project template

Requirement

node > 10.12.0

What is this?

This is a template for Next.js. This. template includes followings:

TypeScript
Parameterized routing
custom server
styled-components
cli for new page

This project provides a cli for creating new page. For example, if you want to add a new page named profile, run npm run new:page profile commands:

npm run new:page profile

create new page
  path: /next-ts-template/pages/profile/index.tsx
create new controller
  path: /next-ts-template/controllers/profile/index.tsx
create new layout
  path: /next-ts-template/layouts/profile/index.tsx
update pattern.json
  pattern:  { page: '/profile', pattern: '/profile' }
update createRoute.ts
  export const profile = () => ({
      as: `/profile`,
      href: `/profile`
    })

The command creates 3 files and updates 2 file.

Page

After the cli ran, a file…

View on GitHub

Next.js is a great framework. But it has no parameterized routing function. I often need it.

So, I create a project template and template generator CLI.

The big feature of it is to provide parameterized routing automatically.

For example, if we need 'users/:user_id' routing, run following:

npm run new:page users/:user_id

create new page
  path: /{PROJECT_PATH}/next-ts-template/pages/users/show.tsx
create new controller
  path: /{PROJECT_PATH}/next-ts-template/controllers/users/show.tsx
create new layout
  path: /{PROJECT_PATH}/next-ts-template/layouts/users/show.tsx
create new routes
  pattern:  
    page: 'users/show',
    pattern: '/users/:user_id' }

Then, we can access '/users/100'. And the query parameter type is defined automatically at the controller file.

// /controllers/users/show
import React from 'react'
import { NextContext } from 'next'
import { AppInitialProps, AppProps } from '@src/app'
import Layout from '@layouts/users/show'

interface InitialProps {}

type Query = {
  user_id: string
}

const getInitialProps = async ({

}: NextContext<Query> & AppInitialProps): Promise<InitialProps> => {
  return {}
}

const Page = ({  }: AppProps & InitialProps) => <Layout />

Page.getInitialProps = getInitialProps

export default Page

Also multiple query parameters are ok.

npm run new:page users/:user_id/items/:item_id

create new page
  path: /{PROJECT_PATH}/next-ts-template/pages/users/items/show.tsx
create new controller
  path: /{PROJECT_PATH}/next-ts-template/controllers/users/items/show.tsx
create new layout
  path: /{PROJECT_PATH}/next-ts-template/layouts/users/items/show.tsx
create new routes
  pattern:  {
    page: 'users/items/show',
    pattern: '/users/:user_id/items/:item_id' }

// users/items/show.tsx

...

type Query = {
  user_id: string,
  item_id: string
}

...

And you can create parameterized props for the Link component safely.

export const users_items_show = ({
  user_id,
  item_id
}: {
  user_id: string
  item_id: string
}) => ({
  as: `/users/${user_id}/items/${item_id}`,
  href: `/users/items/show?user_id=${user_id}&item_id=${item_id}`
})

Also users_items_show is created at the same time.

<Link {...users_items_show({ user_id: '2', item_id: '300' })} >
...

How to pass initial props from Android native.

Ryohlan — Thu, 16 Nov 2017 05:23:19 +0000

There is a official document of passing initial props from iOS native, but not Android.

It is passed by getLaunchOptions of ReactActivityDelegate.

So, override createReactActivityDelegate of MainActivity and getLaunchOptions of ReactActivityDelegate.

public class MainActivity extends ReactActivity {
    @Override
    protected ReactActivityDelegate createReactActivityDelegate() {
        return new ReactActivityDelegate(this, getMainComponentName()) {
            @Nullable
            @Override
            protected Bundle getLaunchOptions() {
                Bundle bundle = new Bundle();
                bundle.putString("message", "Hello world from Android Native");
                return bundle;
            }
        };
    }
    ...
}

It is received as the props of a root component, which is a second argument of AppRegistry.registerComponent.

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';

export default class App extends React.Component {
  render() {
    return (
      <View style={styles.container}>
        <Text>{this.props.message}</Text>
      </View>
    );
  }
}

...