Skip to content

Latest commit

 

History

History
575 lines (508 loc) · 12.1 KB

deck.mdx

File metadata and controls

575 lines (508 loc) · 12.1 KB

import { CodeSurfer, CodeSurferColumns, Step, } from "code-surfer"; import { github, nightOwl } from "@code-surfer/themes";

export const theme = nightOwl;

React SWR 👋

And the benefits of using it in your application

To start 😏

Lets take a look how we use to do for grabbing the fitter data and use it in FC...

// fitter-cockpit/modules/fitter/constants.js
import { createApiConstants } from 'utils/constant'

const namespace = 'fitter'
export const getMe = createApiConstants(namespace, 'get')
// fitter-cockpit/modules/fitter/constants.js
import { createApiConstants } from 'utils/constant'

const namespace = 'fitter'
export const getMe = createApiConstants(namespace, 'get')

import { getMe } from './constants'

// fitter-cockpit/modules/fitter/reducer.js
const initialState = {
  data: {
    countryCode: null,
    createdDate: null,
    email: null,
    firstName: null,
    id: null,
    lastModifiedDate: null,
    lastName: null,
    locale: null,
    photoUrl: null,
    salutation: null,
    timeZone: null,
  },
  status: {
    loading: false,
    success: false,
    failure: false,
  },
}
// fitter-cockpit/modules/fitter/constants.js
import { createApiConstants } from 'utils/constant'

const namespace = 'fitter'
export const getMe = createApiConstants(namespace, 'get')

import { getMe } from './constants'

// fitter-cockpit/modules/fitter/reducer.js
const initialState = {
  data: {
    countryCode: null,
    createdDate: null,
    email: null,
    firstName: null,
    id: null,
    lastModifiedDate: null,
    lastName: null,
    locale: null,
    photoUrl: null,
    salutation: null,
    timeZone: null,
  },
  status: {
    loading: false,
    success: false,
    failure: false,
  },
}

export default function(state = initialState, action) {
  switch (action.type) {
    case getMe.REQUEST: {
      return {
        ...state,
        status: {
          ...state.status,
          loading: true,
        },
      }
    }
    case getMe.SUCCESS: {
      return {
        ...state,
        status: {
          ...state.status,
          loading: false,
          success: true,
          failure: false,
        },
        data: {
          ...state.data,
          ...action.payload,
        },
      }
    }
    case getMe.FAILURE: {
      return {
        ...state,
        status: {
          ...state.status,
          loading: false,
          success: false,
          failure: true,
        },
      }
    }
    default:
      return state
  }
}
// fitter-cockpit/modules/fitter/constants.js
import { createApiConstants } from 'utils/constant'

const namespace = 'fitter'
export const getMe = createApiConstants(namespace, 'get')

import { getMe } from './constants'

// fitter-cockpit/modules/fitter/reducer.js
const initialState = {
  data: {
    countryCode: null,
    createdDate: null,
    email: null,
    firstName: null,
    id: null,
    lastModifiedDate: null,
    lastName: null,
    locale: null,
    photoUrl: null,
    salutation: null,
    timeZone: null,
  },
  status: {
    loading: false,
    success: false,
    failure: false,
  },
}

export default function(state = initialState, action) {
  switch (action.type) {
    case getMe.REQUEST: {
      return {
        ...state,
        status: {
          ...state.status,
          loading: true,
        },
      }
    }
    case getMe.SUCCESS: {
      return {
        ...state,
        status: {
          ...state.status,
          loading: false,
          success: true,
          failure: false,
        },
        data: {
          ...state.data,
          ...action.payload,
        },
      }
    }
    case getMe.FAILURE: {
      return {
        ...state,
        status: {
          ...state.status,
          loading: false,
          success: false,
          failure: true,
        },
      }
    }
    default:
      return state
  }
}

const branchSelector = state => state.fitter
export const fitterSelector = state => branchSelector(state).data
export const fitterIdSelector = state => fitterSelector(state).id
export const fitterStatusSelector = state => branchSelector(state).status
// fitter-cockpit/modules/fitter/constants.js
import { createApiConstants } from 'utils/constant'

const namespace = 'fitter'
export const getMe = createApiConstants(namespace, 'get')

import { getMe } from './constants'

// fitter-cockpit/modules/fitter/reducer.js
const initialState = {
  data: {
    countryCode: null,
    createdDate: null,
    email: null,
    firstName: null,
    id: null,
    lastModifiedDate: null,
    lastName: null,
    locale: null,
    photoUrl: null,
    salutation: null,
    timeZone: null,
  },
  status: {
    loading: false,
    success: false,
    failure: false,
  },
}

export default function(state = initialState, action) {
  switch (action.type) {
    case getMe.REQUEST: {
      return {
        ...state,
        status: {
          ...state.status,
          loading: true,
        },
      }
    }
    case getMe.SUCCESS: {
      return {
        ...state,
        status: {
          ...state.status,
          loading: false,
          success: true,
          failure: false,
        },
        data: {
          ...state.data,
          ...action.payload,
        },
      }
    }
    case getMe.FAILURE: {
      return {
        ...state,
        status: {
          ...state.status,
          loading: false,
          success: false,
          failure: true,
        },
      }
    }
    default:
      return state
  }
}

const branchSelector = state => state.fitter
export const fitterSelector = state => branchSelector(state).data
export const fitterIdSelector = state => fitterSelector(state).id
export const fitterStatusSelector = state => branchSelector(state).status

// fitter-cockpit/modules/fitter/actions.js
import { getMe } from './constants'
import { apiFetch } from 'utils/api'
import { changeLanguage } from '@audibene/ta-common-frontend/services/i18n'

export function fetchMe() {
  return async dispatch => {
    dispatch({ type: getMe.REQUEST })
    const payload = await apiFetch(`${process.env.REACT_APP_COCKPITAPI_URL}v1/fitters/me`)
    if (!payload) {
      dispatch({ type: getMe.FAILURE })
      return
    }
    changeLanguage(payload.locale)
    dispatch({ type: getMe.SUCCESS, payload })
    return payload
  }
}
// fitter-cockpit/modules/fitter/constants.js
import { createApiConstants } from 'utils/constant'

const namespace = 'fitter'
export const getMe = createApiConstants(namespace, 'get')

import { getMe } from './constants'

// fitter-cockpit/modules/fitter/reducer.js
const initialState = {
  data: {
    countryCode: null,
    createdDate: null,
    email: null,
    firstName: null,
    id: null,
    lastModifiedDate: null,
    lastName: null,
    locale: null,
    photoUrl: null,
    salutation: null,
    timeZone: null,
  },
  status: {
    loading: false,
    success: false,
    failure: false,
  },
}

export default function(state = initialState, action) {
  switch (action.type) {
    case getMe.REQUEST: {
      return {
        ...state,
        status: {
          ...state.status,
          loading: true,
        },
      }
    }
    case getMe.SUCCESS: {
      return {
        ...state,
        status: {
          ...state.status,
          loading: false,
          success: true,
          failure: false,
        },
        data: {
          ...state.data,
          ...action.payload,
        },
      }
    }
    case getMe.FAILURE: {
      return {
        ...state,
        status: {
          ...state.status,
          loading: false,
          success: false,
          failure: true,
        },
      }
    }
    default:
      return state
  }
}

const branchSelector = state => state.fitter
export const fitterSelector = state => branchSelector(state).data
export const fitterIdSelector = state => fitterSelector(state).id
export const fitterStatusSelector = state => branchSelector(state).status

// fitter-cockpit/modules/fitter/actions.js
import { getMe } from './constants'
import { apiFetch } from 'utils/api'
import { changeLanguage } from '@audibene/ta-common-frontend/services/i18n'

export function fetchMe() {
  return async dispatch => {
    dispatch({ type: getMe.REQUEST })
    const payload = await apiFetch(`${process.env.REACT_APP_COCKPITAPI_URL}v1/fitters/me`)
    if (!payload) {
      dispatch({ type: getMe.FAILURE })
      return
    }
    changeLanguage(payload.locale)
    dispatch({ type: getMe.SUCCESS, payload })
    return payload
  }
}

// Somewhere where you want to fetch the fitter details
const SomeComponent = () => {
  const dispatch = useDispatch()
  const fitter = useSelector(fitterSelector)

  useEffect(() => {
    dispatch(fetchMe())
  }, [dispatch])
}

const AnotherComponent = () => {
  const fitter = useSelector(fitterSelector)
}
// fitter-cockpit/modules/fitter/constants.js
import { createApiConstants } from 'utils/constant'

const namespace = 'fitter'
export const getMe = createApiConstants(namespace, 'get')

import { getMe } from './constants'

// fitter-cockpit/modules/fitter/reducer.js
const initialState = {
  data: {
    countryCode: null,
    createdDate: null,
    email: null,
    firstName: null,
    id: null,
    lastModifiedDate: null,
    lastName: null,
    locale: null,
    photoUrl: null,
    salutation: null,
    timeZone: null,
  },
  status: {
    loading: false,
    success: false,
    failure: false,
  },
}

export default function(state = initialState, action) {
  switch (action.type) {
    case getMe.REQUEST: {
      return {
        ...state,
        status: {
          ...state.status,
          loading: true,
        },
      }
    }
    case getMe.SUCCESS: {
      return {
        ...state,
        status: {
          ...state.status,
          loading: false,
          success: true,
          failure: false,
        },
        data: {
          ...state.data,
          ...action.payload,
        },
      }
    }
    case getMe.FAILURE: {
      return {
        ...state,
        status: {
          ...state.status,
          loading: false,
          success: false,
          failure: true,
        },
      }
    }
    default:
      return state
  }
}

const branchSelector = state => state.fitter
export const fitterSelector = state => branchSelector(state).data
export const fitterIdSelector = state => fitterSelector(state).id
export const fitterStatusSelector = state => branchSelector(state).status

// fitter-cockpit/modules/fitter/actions.js
import { getMe } from './constants'
import { apiFetch } from 'utils/api'
import { changeLanguage } from '@audibene/ta-common-frontend/services/i18n'

export function fetchMe() {
  return async dispatch => {
    dispatch({ type: getMe.REQUEST })
    const payload = await apiFetch(`${process.env.REACT_APP_COCKPITAPI_URL}v1/fitters/me`)
    if (!payload) {
      dispatch({ type: getMe.FAILURE })
      return
    }
    changeLanguage(payload.locale)
    dispatch({ type: getMe.SUCCESS, payload })
    return payload
  }
}

// Somewhere where you want to fetch the fitter details
const SomeComponent = () => {
  const dispatch = useDispatch()
  const fitter = useSelector(fitterSelector)

  useEffect(() => {
    dispatch(fetchMe())
  }, [dispatch])
}

const AnotherComponent = () => {
  const fitter = useSelector(fitterSelector)
}
// modules/fitter/hooks.js
const useFitter = () => {
  const {data, error} = useSWR('v1/fitters/me', apiFetch)

  return {
      user: data,
      isLoading: !error && !data,
      isError: error
  }
}

// somewhere where you want to fetch the fitter details
const SomeComponent = () => {
  const {fitter, isLoading, hasError} = useFitter()
}

const AnotherComponent = () => {
  const {fitter, isLoading, hasError} = useFitter()
}

Small POC time ⏰

docs:
SWR docs

That's all folks 🚀