Maxim Romanov

TILOctober 10, 2019by Maxim Romanov

How quickly and easily run a local server with fake api data (mocks)?

Sometimes you need to develop a frontend part of a project without a ready-made api, knowing only its structure. In this case, using json-schema-faker, you can generate fake data (mocks) and deploy it to your local server.

Firstly u will need to install json-schema-faker package


yarn add json-schema-faker

Then open the package.json file and add scripts with the following


// ...

"scripts": {

  // ...

  "start-mockapi": "json-server --watch ./mocks/api/db.json --port 3001",

  "generate-mock-data": "node ./generateMockData",

}

After installation, you will need to describe the structure in ./mocks/dataSchema.js of future mocks. You can find more information here.


const schema = {

  reports: {

    type: 'array',

    minItems: 5,

    maxItems: 10,

    items: {

      id: {

        type: 'integer',

        unique: true,

        minimum: 1,

        maximum: 1000,

      },

      title: {

        enum: ['production', 'azure data', 'azure data 2'],

      },

      logo: 'https://picsum.photos/200'

    },

  },

}



module.exports = schema;

Copy paste script for generating mock data from here in ./generateMockData.js and run the following


yarn generate-mock-data && yarn start-mockapi

TILAugust 02, 2019by Maxim Romanov

How to blur a screen in React Navigation

Screens overlap each other in stackNavigator. React Navigation provides us not only with changing the background color of these screens, but also controlling their transparency.

To make the screen background blur, we first need to make the screens transparent.


import { createStackNavigator } from 'react-navigation';



export default createStackNavigator(

  {

    HomeStack,

    BlurModal,

  },

  {

    ...NAVIGATOR_CONFIG,

    mode: 'modal',

    cardStyle: { opacity: 1 },

    transparentCard: true,

  },

);

And then use blurView as background.


import React from 'react';

import { BlurView } from '@react-native-community/blur';

import Styled from 'styled-components';



function BlurModal() {

  return (

    <BlurWrapper blurType="light" blurAmount={20}>

      <Text>Modal with blur background</Text>

    </BlurWrapper>

  );

}



const BlurWrapper = Styled(BlurView)`

  position: absolute;

  top: 0;

  left: 0;

  bottom: 0;

  right: 0;

`;

TILJuly 17, 2019by Maxim Romanov

How to handle 401 unauthorized error in a Redux React application

In response to a client request, the server may return a 401 Unauthorized error. You must correctly catch it, for example, clear the state and redirect to the authorization page. To solve this problem, we wrote a custom Middleware which, in our opinion, is the best solution.


import * as actions from 'actions';



const authInterceptor = ({ dispatch }) => (next) => (action) => {

  if (action.status === 401) {

    dispatch(actions.removeJwt());

  } else {

    next(action);

  }

};