DEV Community: Afroze Kabeer Khan. M

Jest for React Native

Afroze Kabeer Khan. M — Sat, 05 Feb 2022 05:13:14 +0000

This is an article on how to setup jest in react-native with support for vscode.

The base setup of react-native
npx react-native init unittest

Installing the additional dependencies
yarn add --dev @testing-library/react-native @testing-library/jest-native

Extend your jest config in package.json,

{
  "preset": "react-native",
  "setupFilesAfterEnv": ["@testing-library/jest-native/extend-expect"]
}

You're ready to write unit test cases for react-native, let's setup your vscode.

Intellisense is important for code completion, create a jsconfig.json file in your project root directory.
Add the following contents in it.

{
    "typeAcquisition": {
        "include": [
            "jest"
        ]
    }
}

Install types to support autocompletion.
yarn add @types/jest

Lets add a plugin to vscode, which makes testing easier, Jest Test Explorer

Let's write some test cases.
Create a folder structure as below,

A Sample React Native component, Banner.js

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

const Banner = () => {
  return (
    <View>
      <Text>Banner</Text>
    </View>
  )
}

export default Banner;

A Sample test file for the component, Banner.test.js

import React from 'react'
import { render } from '@testing-library/react-native';

import Banner from './Banner'

describe('Banner', () => {
  it('renders correctly', () => {
    const { getByText } = render(<Banner />)
    const textField = getByText('Banner')
    expect(textField).toBeDefined()
  });
})

After adding the file, you can see three options in your file, This provides us the ability to validate a single test case without having to write special commands, debug them.

It also gives us a look at the tree structure of all the test cases in your project and run them as a whole.

So its a wrap, Hope you find this useful and effective to work with.

Talk to me on twitter droidmakk

droidmakk.dev PORTFOLIO

Afroze Kabeer Khan. M — Fri, 14 Aug 2020 06:52:29 +0000

SHORT, my new portfolio - https://droidmakk.dev

LONG,
It's been a long time in my mind that I've got to have a website as my portfolio.
But I was confused between which framework to use as I was already developing applications using React and React Native, Playing around with svelte and VUE.
After a lot of confusion, I decided to let's go retro and develop it in HTML, CSS, and Javascript with a bit of Jquery.

After putting my heads down and developing the website within half a day... I had put it aside for more than 2/3 months.

Now I myself got a chance to make some minor fixes and push it to live.

https://droidmakk.dev

Form Generator... 🏎

Afroze Kabeer Khan. M — Wed, 29 Jul 2020 03:47:34 +0000

Hey, Everyone. It's been a very very very long time since I've written an article and I'm pretty sure this is not an article 😁.

But still, I just wanted to share something that I've created and need to see if it could help anyone.

Yup, as the title says it's nothing but a form generator based on JSON. And it's hosted as a web app. It supports validation and does let me know if there's anything else you want me to add.

https://stackblitz.com/edit/react-form-json?file=index.js

Share your thoughts below... 😁

The 3S - Svelte, Sass and StoryBook

Afroze Kabeer Khan. M — Tue, 07 Jan 2020 20:36:37 +0000

I started to work on some project which I thought would help me to freelance and showcase my work. I've been working in React for years as of now. But two months before I was introduced to a framework called "svelte". Which had context, event bindings and the best is no Virtual DOMs.

So I thought why don't we implement the project using Svelte after all adapt and evolve is the best way we could deliver the best of solutions to clients. With this in my mind. I usually have a component library that showcases all of my components.

To Encourage reusability and document the UI. I Used "Storybook".

The Usual way I used the sveltejs template and bootstrapped the project.
npx degit sveltejs/template my-supercool-app

I wanted to add sass to my project. As to use a proper implementation I had to configure in three places as I will be using sass inline.

rollup
vscode
storybook

Below is a simple svelte component using sass,

<script type="text/javscript" >
    export const title;
<script>
<style type="text/scss" lang="scss" >
    div{
        display: flex;
        button {
            margin:auto;
        }
    }
</style>
<div>
    <button>{title}</button>
</div>

Configure Rollup

Your cloned template uses rollup to bundle your app. So to configure it we need to install a few plugins to preprocess sass in your source.
Luckily svelte gives you a plugin svelte-preprocess which pre-process sass syntax also does more than that.

First let's install the plugin npm i -D svelte-preprocess autoprefixer
Then add it into rollup.config.js file

import svelte from 'rollup-plugin-svelte';
import resolve from '@rollup/plugin-node-resolve';
import commonjs from '@rollup/plugin-commonjs';
import livereload from 'rollup-plugin-livereload';
import autoPreprocess from 'svelte-preprocess';
import { terser } from 'rollup-plugin-terser';

const production = !process.env.ROLLUP_WATCH;

// Your Preprocess which compiles source code to sass
const preprocess = autoPreprocess({ 
    scss: { includePaths: ['src'] },
    postcss: {
        plugins: [ require('autoprefixer') ],
    },
});

export default {
    input: 'src/main.js',
    output: {
        sourcemap: true,
        format: 'iife',
        name: 'app',
        file: 'public/build/bundle.js'
    },
    plugins: [
        svelte({
            dev: !production,
            css: css => {
                css.write('public/build/bundle.css');
            },
            // adding the preprocess into svelte loader
            preprocess
        }),
        resolve({
            browser: true,
            dedupe: importee => importee === 'svelte' || importee.startsWith('svelte/')
        }),
        commonjs(),
        !production && serve(),
        !production && livereload('public'),
        production && terser()
    ],
    watch: {
        clearScreen: false
    }
};

function serve() {
    let started = false;

    return {
        writeBundle() {
            if (!started) {
                started = true;

                require('child_process').spawn('npm', ['run', 'start', '--', '--log.format','dev'], {
                    stdio: ['ignore', 'inherit', 'inherit'],
                    shell: true
                });
            }
        }
    };
}

Looking at the specific coding part in the above config. Includes sass in the src directory and use an autoprefixer for browser dependency.

const preprocess = autoPreprocess({ 
    scss: { includePaths: ['src'] },
    postcss: {
        plugins: [ require('autoprefixer') ],
    },
});

Configure VS Code

If you're using vscode it'll start reporting your CSS as errors and the confusion starts.

For this to work open your settings.
Search for "svelte"
set your nodejs path in option Svelte -> Language-server: Runtime

Use below image for reference,

Then install node-sass npm i -D node-sass

Then create a file svelte.config.js in your root directory. Add the following contents.

const sass = require('node-sass');

module.exports = {
    preprocess: {
        style: async ({ content, attributes }) => {
            if (attributes.type !== 'text/scss') {
                return;
            }

            const result = await sass.renderSync({
                data: content,
                sourceMap: 'style.css.map',
                omitSourceMapUrl: true,
            });

            return {
                code: result.css.toString('utf8'),
                map: result.map.toString('utf8'),
            };
        },
    },
};

The Above code says that we want to process sass code using node-sass.

Configure Storybook

Assuming, you would've followed the default steps and add storybook to your project.

Now in .storybook folder create a file webpack.config.js to override default config with our customizations.

// import the preprocess from svelte config
const stylepreprocess = require('../svelte.config');

module.exports = async ({ config, mode }) => {
    let j;
    // Find svelteloader from the webpack config
    const svelteloader = config.module.rules.find((r, i) => {
        if (r.loader && r.loader.includes('svelte-loader')) {
            j = i;
            return true;
        }
    });

    // safely inject preprocess into the config
    config.module.rules[j] = {
        ...svelteloader,
        options: {
            ...svelteloader.options,
            style: stylepreprocess.preprocess.style
        }
    }

    // return the overridden config
    return config;
}

In the above code, we've overridden the svelte-loader options with our own preprocess.

Try running npm run storybook, This should work.

Hopefully, this will help you better set up the development environment.
Happy Coding 👩‍💻👨‍💻

The Sample implementation will be added soon.

React + Redux = React + Context

Afroze Kabeer Khan. M — Mon, 30 Dec 2019 12:59:34 +0000

I know, many articles are already talking about whether or not to replace Redux with Context. If yes, what are the tradeoffs, etc? But I don't think this is one of them.

This is simply for fun 😁. But still, you can try this in your pet projects 😉.

Hoping you have installed NodeJS, npm, and npx

First, let's set up a basic react template. Go to your favorite directory you'd like to play with. Run,
npx create-react-app fooapp

Change the app directory cd fooapp.

Now start the app, npm start. I hope the app has started and is opened in your browser at http://localhost:3000/.

Create a folder store under src.
cd src && mkdir store

Create two files under store. index.js and handlers.js

In index.js file under store. We'll create a Context.

/** index.js **/
import React from "react";
import PropTypes from "prop-types";

// Import all handlers
import * as handlers from "./handlers";

// Default state
const initialState = { todos:[] };

// Export the context
export const Context = React.createContext({ state: initialState, handlers });

// Export the provider
export const Provider = ({ children }) => {
  // This will be our global state
  const [state, setState] = React.useState(initialState);

  // Modify our hanlders with state and setState
  // Thanks Jose for this one 👍
   const modHandlers = Object.keys(handlers).map(key => handlers[key](state, setState))

  // Feed the state and modified handlers to the provider
  return (
    <Context.Provider value={{ state, handlers: modHanlders }}>
      {children}
    </Context.Provider>
  );
};

Provider.propTypes = {
  children: PropTypes.children.isRequired
};

Let's create handlers to add / remove todo's from the list. In store/handlers.js.

/* handlers.js*/
export const addTodo = (state, setState) => todo => {
  state.todos.push(todo);
  setState({ ...state });
}

export const removeTodo = (state, setState) => i => {
  delete state.todos[i];
  setState({ ...state });
};

Update src/index.js file. Adding the following contents.

// src/index.js
import React from "react";
import ReactDOM from "react-dom";

import Todo from "./components/Todo";
import { Provider } from "./store";

function App() {
  return (
    <Provider>
      <div className="App">
        <h2 className="apptitle">Todo List</h2>
        <Todo />
      </div>
    </Provider>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

Don't mind if it throws an error. We will update it.

Create a folder componentsunder src directory. Add the three files to it Todo.js, TodoField.js & TodoItem.js.

In your components/Todo.js file create a component. That holds the todo list.

// components/Todo.js
import React from "react";

import TodoItem from "./TodoItem";
import TodoField from "./TodoField";
import { Context } from "../store";

const Todo = props => {
  // Get the state from Context using useContext hook
  const { state } = React.useContext(Context);

  return (
    <div>
      <TodoField />
      <ul>
        {state.todos.map((todo, i) => (
          <TodoItem value={todo} index={i} />
        ))}
      </ul>
    </div>
  );
};

export default Todo;

The error should've been gone by now.

In your components/TodoField.js add the following code.

// components/TodoField.js
import React from "react";

import { Context } from "../store";

const TodoField = () => {
  const [todo, setTodo] = React.useState(null);

  // Import the handlers from context
  const { handlers } = React.useContext(Context);

  // Handles form and other things
  const handleSubmit = e => {
    e.preventDefault();
    // Add the todo to the store
    handlers.addTodo(todo);
  };

  const handleChange = e => {
    setTodo(e.target.value);
  };

  // Form with field and submit button
  return (
    <form onSubmit={handleSubmit} onChange={handleChange}>
      <input type="text" value={todo} required />
      <input type="submit" value="Add Todo" />
    </form>
  );
};

export default TodoField;

In your components/TodoItem.js add the following code.

// components/TodoItem.js
import React from "react";

import { Context } from "../store";

const TodoItem = ({ value, index }) => {
  const { handlers } = React.useContext(Context);
  const removeFromTodo = e => {
    handlers.removeTodo(index);
  };

  return (
    <li>
      {value} <button onClick={removeFromTodo}>x</button>
    </li>
  );
};

export default TodoItem;

After adding all the files. Your app should be working like this.

All the data is manipulated from the single store and manipulated using handlers.

You could use get and set method in Lodash for complex JSON object operations.
PS: The above method can also handle async operations based on Promise.

The implementation is in codesandbox.
Happy Coding. 👩‍💻👨‍💻.... 😀

Flutter for Desktop

Afroze Kabeer Khan. M — Sat, 21 Dec 2019 22:35:16 +0000

EDITED

So with all of this cross-platform trend that is going on 🤩, Flutter is setting some greater standards compared to other frameworks. The main added advantage is that it compiles directly to machine code.

Let's see how it's done on Flutter for desktop applications 😁. Since the feature has not been standardised it's available in the master branch of the repo.

Clone the repo into folder like /etc/bin for linux, or C:\Program Files\ for windows.

git clone https://github.com/flutter/flutter.git

If you have to checkout other versions, you can list out the remote branches and checkout and use them.

git branch -a #will list out branches
git checkout <your-specific-branch>

After cloning, add the bin folder path along with the prefix to environment variables

Linux export PATH=$PATH:<your-flutter-path>/flutter/bin
Windows setx PATH="%path%;<your-flutter-path/flutter/bin>"

Make sure to add it in .bashrc for linux and environment variables console for windows. This will store the path permanently.

Now see that if you're able to access the flutter-cli
flutter --version
This command install some binaries for flutter later printing out the version. Mine was 1.13.5 at the time of writing.

Flutter 1.13.5-pre.11 • channel master • https://github.com/flutter/flutter.git
Framework • revision 72a3d914ee (6 hours ago) • 2019-12-20 08:50:42 -0800
Engine • revision 472197a8e9
Tools • Dart 2.8.0 (build 2.8.0-dev.0.0 8d11c1dce6)

Now let's check if it has all dependencies to run desktop application. For this we need to run

#Prints out devices if available for desktop
flutter devices
1 connected device:

Windows • Windows • windows-x64 • Microsoft Windows [Version 10.0.18362.535]

Now, let's see if the toolchain to build application is ready.

#This'll run a basic diagnosis on the requirements
flutter doctor

Doctor summary (to see all details, run flutter doctor -v):
[√] Flutter (Channel master, v1.13.5-pre.11, on Microsoft Windows [Version 10.0.18362.535], locale en-IN)
[!] Android toolchain - develop for Android devices (Android SDK version 29.0.1)
    X Android license status unknown.
      Try re-installing or updating your Android SDK Manager.
      See https://developer.android.com/studio/#downloads or visit https://flutter.dev/setup/#android-setup for detailed
      instructions.
[!] Visual Studio - develop for Windows (Visual Studio Community 2019 16.2.2)
    X Visual Studio is missing necessary components. Please re-run the Visual Studio installer for the "Desktop
      development with C++" workload, and include these components:
        MSBuild
        MSVC v142 - VS 2019 C++ x64/x86 build tools
       - If there are multiple versions, install the latest one
        Windows 10 SDK (10.0.17763.0)
[√] Android Studio (version 3.5)
[√] VS Code (version 1.41.1)
[√] Connected device (1 available)

! Doctor found issues in 2 categories.

In my case i was missing three dependencies to build desktop applications which are

windows 10 SDK
MSBUILD
MSVC V142

Start Visual studio Installer. Select modify option under Visual Studio 2019.
Then select the following components.

Also make sure to select the option include MSVC v142

Now click on modify to begin the installation process. Once the installation process is done. Run flutter doctor to see if everything is good.

Once the installation is done. Re-run the flutter doctor to see if everything is as expected.

flutter doctor
[√] Flutter (Channel master, v1.13.5-pre.11, on Microsoft Windows [Version 10.0.18362.535], locale en-IN)
[!] Android toolchain - develop for Android devices (Android SDK version 29.0.1)
    X Android license status unknown.
      Try re-installing or updating your Android SDK Manager.
      See https://developer.android.com/studio/#downloads or visit https://flutter.dev/setup/#android-setup for detailed
      instructions.
[√] Visual Studio - develop for Windows (Visual Studio Community 2019 16.4.2)
[√] Android Studio (version 3.5)
[√] VS Code (version 1.41.1)
[√] Connected device (1 available)

! Doctor found issues in 1 category.

So leaving the android toolchain, Let's run our first project flutter desktop. Let's create a flutter project. Move into directory where you'd like to have the source code of the application or place where you think is suitable for your playground.
Since the flutter create command is supported only for macOS we need make use of an example repo which has modified template that includes for windows for linux.

git clone https://github.com/google/flutter-desktop-embedding desktop_app

Now let's enable desktop feature for our project.

flutter config --enable-linux-desktop to enable Linux.
flutter config --enable-macos-desktop to enable macOS.
flutter config --enable-windows-desktop to enable Windows.

After enabling the feature, that actually sets environment variable. Now cd into the project folder and into a folder name example
cd desktop_app/example

In the project tree you can find folder specific to windows and linux which contains configurations for desktop application specific to platform which are not stable and yet to change as said by the flutter team.

├───fonts
│   └───Roboto
├───lib
├───linux
│   └───flutter
├───macos
│   ├───Flutter
│   ├───Runner
│   │   ├───Assets.xcassets
│   │   │   └───AppIcon.appiconset
│   │   ├───Base.lproj
│   │   └───Configs
│   ├───Runner.xcodeproj
│   │   ├───project.xcworkspace
│   │   │   └───xcshareddata
│   │   └───xcshareddata
│   │       └───xcschemes
│   └───Runner.xcworkspace
│       └───xcshareddata
├───test
└───windows
    ├───flutter
    ├───resources
    └───scripts

Now let's build the application and see how it looks.

flutter run

Once finishing build, the application starts and you can edit to see your changes reflect.
You need to make changes in lib\main.dart file.
Focus the terminal and enter r key refreshes the application..

Hope you loved the article 🤗, comment your thoughts and feel free ask any doubts in comments.
🏇 Actually here i'm starting on my journey with Flutter.

Custom Hooks and Sockets

Afroze Kabeer Khan. M — Tue, 10 Sep 2019 18:04:56 +0000

So, it's been a while since the hooks came in and I've been trying to find time to try and learn to create custom hooks. Really mind-boggling 🧠. Though the interesting part is that the concept may be simple but if you find the right use case to it.

The first thing i wanted to try out was to make network request and to see how we can implement using hooks. The usual way in react was obviously setState. Assuming that most of you have worked with setState. Now let's see how to write it in a functional component using Hooks.

For this let's use JSON placeholder to fetch posts.

import React,{ useState } from "react";

// URL to fetch posts
const postsUrl = "https://jsonplaceholder.typicode.com/posts"

// Our Component
const ListPosts = () => {
    // Using state hook to set if loading
    const [ loading, setLoading ] = useState(true);
    // Fetch and set list of posts
    const [ posts, setPosts ] = useState([]);

    //Here we fetch the posts and add it to posts state
    fetch(postsUrl)
        .then(res => res.json())
        .then(data => { setPosts(data); setLoading(false); })
        .catch(err => {
            alert('Error fetching posts');
            setLoading(false);
        });

    //Our Component which will lists posts
    return(
        <div>
            // Loop through the list of posts
            <h1>My Posts <span>{posts.length}</span></h1>
            {loading ? 
                <h1>Loading posts...</h2> 
                : posts.map(post => (
                    <div>
                        <h3>{post.title}</h3>
                        <hr/>
                        <p>{post.body}</p>
                    </div>
            })}
        </div>
    )
}

In this component we used useState hook to set posts and loading state. But now let's see how we can rewrite this as a hook separating the logic from component.

First let's use the effect hook which will react to changes inside the component. Let's check it out.

React.useEffect(() => {
    // Function called whenever something updates in component
},[ /* Update based on variable */ ])

Now let's see how to use it in our component

import React,{ useState } from "react";

// URL to fetch posts
const postsUrl = "https://jsonplaceholder.typicode.com/posts"

// Our Component
const ListPosts = () => {
    // Using state hook to set if loading
    const [ loading, setLoading ] = useState(true);
    // Fetch and set list of posts
    const [ posts, setPosts ] = useState([]);

    // Use effect to update component
    React.useEffect(() => {
        //Here we fetch the posts and add it to posts state
        fetch(postsUrl)
            .then(res => res.json())
            .then(data => { setPosts(data); setLoading(false); })
            .catch(err => {
                alert('Error fetching posts');
                setLoading(false);
            });
    },[ postsUrl ])

    //Our Component which will lists posts
    return(
        <div>
            // Loop through the list of posts
            <h1>My Posts <span>{posts.length}</span></h1>
            {loading ? 
                <h1>Loading posts...</h2> 
                : posts.map(post => (
                    <div>
                        <h3>{post.title}</h3>
                        <hr/>
                        <p>{post.body}</p>
                    </div>
            })}
        </div>
    )
}

Now let's separate the logic from the application

// Here is our hook which makes request and returns the posts
const usePosts = (postUrl) => {
    const [ loading, setLoading ] = useState(true);
    const [ posts, setPosts ] = useState([]);

    React.useEffect(() => {
        //Here we fetch the posts and add it to posts state
        fetch(postsUrl)
            .then(res => res.json())
            .then(data => { setPosts(data); setLoading(false); })
            .catch(err => {
                alert('Error fetching posts');
                setLoading(false);
            });
    },[ postsUrl ])

    return { loading, posts }
}

// Adding it to our component
const postsUrl = "https://jsonplaceholder.typicode.com/posts";

const ListPosts = () => {
    const { loading, posts } = usePosts(postsUrl);

    return(  
        <div>  // Loop through the list of posts  
            <h1>My Posts <span>{posts.length}</span></h1>  
            {loading ?  
                <h1>Loading posts...</h2>
                : posts.map(post =>  (
                <div>
                    <h3>{post.title}</h3>  
                    <hr/>
                    <p>{post.body}</p>
                </div>
                })}  
        </div>)
}

So there we go, we have created our first simple custom hook. This is okay if we are going to use static requests to fetch data. What if we are going to recieve a stream of data based on events.
Let's see how we can write the same component using a socket to fetch temperature from an IoT Device. Which will constantly send data.

For this I've created a sample code that streams a random temperature between 0 and 100 using express and socket-io. The code is as below.

// server.js
const app = require('express')();
const server = require('http').createServer(app);
const socket = require('socket.io');
const io = socket(server);

const port = 8080 || process.env.PORT;

io.on('connection', () => {
    console.info('SOME ONE IS HERE');
});

setInterval(() => {
    const temp = Math.floor(Math.random()* 100);
    const topic = 'temperature';
    console.info(`TEMP : ${temp}`);
    io.emit(topic,temp);
}, 3000);

const listenCb = () => console.table([['status', 'port'],['started',port]])
server.listen(port, listenCb);

Install the dependencies and run the server using the follwoing code

npm i -S socket.io express

# Run the app using nodejs
node app.js

This will constantly send the data every 3 seconds.

Now let's see how to use this in our React's component using custom hooks. First let's write our hook.

import React from 'react';
import PropTypes from 'prop-types';
import socket from 'socket.io-client';

// Use socket to fetch request to data 
// Socket server's url and topic in which data is sent
const useSocket = (serverUrl, topic) => {
    const [temp, setTemp] = React.useState(0);
    const [isConnected, setConnected] = React.useState(false);

    React.useEffect(() => {
        const client = socket.connect(serverUrl);
        client.on("connect", () => setConnected(true));
        client.on("disconnect", () => setConnected(false));
        client.on(topic, (data) => {
            setTemp(data);
        })
    }, [serverUrl, topic, isConnected]);

    return { temp, isConnected };
}

// Our component which sends the request through the topic
const Sockt = () => {
    const serverUrl='http://localhost:8080', topic='temperature';
    const { temp, isConnected } = useSocket(serverUrl, topic);

    return (
        <div>
            <h4>Temperature</h4>
            <h1>{temp}</h1>
            <h3>{`CONNECTED: ${isConnected}`}</h3>
        </div>
    )
}

The component now will show the temperature which is received from the socket server. Every time data is sent through the socket.

I hope, you got to learn something new and interesting. Find the code sandbox for the implementation of what we went through this entire article.

Backend - Socket Server 🧦
https://codesandbox.io/s/express-socket-io-70t5x

React using hooks
https://codesandbox.io/s/priceless-greider-3b814

Just another React Template 🤷‍♂️

Afroze Kabeer Khan. M — Tue, 03 Sep 2019 03:46:25 +0000

Hey Dev People 👩‍💻👨‍💻,

It's been a while since I wrote something. There have been lots of things going on like, It's been a roller coaster I should say yet I'm not even halfway through it. So thought I might post something that if / may some of you might find it useful of any sort.

react-template

Maybe just yet an another react template. Where I'm adding features that I feel are interesting and easy to develop. where I found this plugin called craco which can extend the create-react-app's config without ejecting the app 😱. That's another level 😎.

Have configured different scripts that are mostly used by the devs around the world. Some other features which I found interesting were something like,

storybook
nodemon
PM2
react-router replacing with reach-router
Lighthouse 🚨 CLI
Gitlab Pipeline

I'm planning to add more features which involve like,

webhint reports in pipeline
Dockerfile to host using pm2 / Nginx
Extend service worker ... more to come

Let me know if there's something you want me to add or you find it interesting. I will jump into it and if we're on the same page will simply put on the list and later will be merged into the base.

The folder structure itself is what I found interesting is that after working through several projects found it compulsive that data-service-view layers are doing a great job and looks like components are becoming the future of the web. So it's better to have a standard folder structure like

src/
    |--components/
        |-- ComponentName/
            |-- index.js ( adding mappers and context )
            |-- Component.js ( your component's code )
            |-- componentname.(css|scss) ( Your component's styling )
    | --screens/
        |--ScreenName/
            |--index.js ( mapper and context )
            |--Screen.js ( your screen's code )
            |--components/ ( screen specific code )
                |-- ComponentA.js
                |-- ComponentB.js
            |--screenname.(css|scss) ( Screen's styling / overrides )

Let me know if there's something more to it, so I would simply merge into the base and use it for future iterations.

Buenos Dias, Amigos!
Feel free to dm/Whatsapp/mail me in case of any suggestion you would want me to add.
🤙 + 91 - 8939717211 | @droidmakk |

Forms in React 🚧 THE SIMPLEST

Afroze Kabeer Khan. M — Tue, 18 Jun 2019 21:04:08 +0000

Form validation can be a nightmare sometimes. After trying out some patterns of code, I came to a conclusion. That this can be an optimal solution without any plugins.
NOTE: Better ways are always welcome & I'm in search for it ⌛

Code Sandbox Link

InputField

Let's get started. First things first. Let's create a component for input field.

input field to accept user inputs and pass other common props

handleInvalid method to do it's magic when it detects error

onChange method to reset the error and pass on the control to the parent component

import React from "react";

/** We'll be using this only for username and password **/
export const InputField = props => {
  const { message, ...rest } = props; // Filter what you need and transfer rest to input
  let [error, setError] = React.useState(false); //display error message

  const handleInvalid = e => {
    e.preventDefault();
    setError(true);
    props.handleInvalid(e);
  }; // Handle error
  const onChange = e => {
    setError(false);
    props.handleChange(e);
  }; // Reset error

  // The Component
  return (
    <div className="input-container">
      <input {...rest} onInvalid={handleInvalid} onChange={onChange} />
      {error ? <span className="error-message">{message}</span> : ""}
    </div>
  );
};

Form Component

Now let's create a Form Component that will wrap our input fields around a form and some methods to handle it.

We have a state variable which will hold our form object

handleChange method to handle specific updates in input fields according to name.

handleSubmit method which would help us hitting API once all fields are filled properly

action="javascript:void(0)" this was of my particular interest when I was trying to find out the best way to handle forms. It would prevent the form element from doing default work.

import React from "react";
import { InputField } from "./InputField";

export const Form = props => {

  const [state, setState] = React.useState({ mail: "", password: "" });

  const handleChange = e =>
    setState({ ...state, [e.target.name]: e.target.value });

  const handleSubmit = e => console.info("FORMDATA", state);

  return (
    <form
      action="javascript:void(0)"
      onChange={handleChange}
      onSubmit={handleSubmit}
    >
      <InputField name="mail" type="email" message="We need a proper mail id" />
      <InputField name="password" minLength="9" type="password" message="Not a valid password"
      />
      <input type="submit" value="Login" />
    </form>
  );
};

App.css

Now let's add some css to make it look atleast a little bit uilicious

.error-message {
  color: darkred;
  text-align: right;
  font-size: 12px;
}

.input-container {
  display: flex;
  flex-direction: column;
  width: 40%;
  margin: auto;
}

.input-container > input {
  border-top: none;
  border-right: none;
  border-left: none;
  margin-bottom: 5px;
  margin-top: 20px;
}

input:invalid {
  border-color: darkred;
}

So I hope how easy it can be to handle forms in React. It's all patterns. Critics are most welcome as I'm searching for further best practices in form.
Just let me know if there's something that can be done better than this

A Dead simple object validator

Afroze Kabeer Khan. M — Thu, 18 Apr 2019 06:02:56 +0000

As i said it's simple to the core

Compares the validation object with model and returns its invalid / does not exist.

async function validator(requestObject, validatingObj){

  let paramsError = {
    missingParams: [],
    invalidParams: [],
    message: ''
  }

  function constructMessage(_paramsError){
    let missingParamsMsg = `Missing the following parameters ${_paramsError.missingParams.join()}`;

    let invalidParamsMsg = `The Following parameters are invalid ${_paramsError.invalidParams.join()}`;

    return missingParamsMsg + '. ' + invalidParamsMsg;
  }


  await Object.keys(validatingObj).map(validParam => {
  Object.keys(requestObject).includes(validParam) 
    ? typeof validatingObj[validParam] === typeof requestObject[validParam] ?
       '' : paramsError.invalidParams.push(validParam) : paramsError.missingParams.push(validParam);
  })

  paramsError.message = constructMessage(paramsError);

  return paramsError;
}

Now let's see an example on how to use it.

let requestObject = { username: 'one', mailid: 123123, rides: [] };
let validatingObj = {
  username: "",
  mobile: 0,
  mailid: "",
  age: 0,
  rides: { driverid: 0, carModel: '' }
}

//validating object with the request object
validator(requestObject, validatingObj).then(paramsError => {
  console.info('paramsError',paramsError);
}).catch(err => {
  console.error("\nError",err)
})

😜 My Looks on ⚓ Hooks

Afroze Kabeer Khan. M — Sat, 30 Mar 2019 05:02:25 +0000

An article on what i love the most after a long time.
You don't need Class to maintain state hereafter

Functional Stateful Component 🎡

Is that even a word ?

So here we had a traditional way of creating stateful component like Class App extends blah blah blah...

But that's not it here we have functional stateful component like the one below.

import React, { useState } from 'react'; //Importing modules

function App() {

  const [date, updateDate] = React.useState(Date());

  return (
    <div className="App">
      <h1>{date}</h1>
      <button onClick={() => {
        updateDate(Date())
      }}> Update </button>
    </div>
  );
}

Cool uh... 😁

useEffect

That's not it... We have even more cool stuff in the closet. Now that we know how to maintain state in a functional component. So how de we react if there are some effects in the component... 🤔 Really just useEffect 😜.

Let's handle effective changes.

import React, { useState, useEffect } from 'react'; //Importing modules

function App() {

  let count_p = React.createRef();

  const [date, updateDate] = React.useState(Date());

  React.useEffect(() => {
    count_p.current.textContent = Number(count_p.current.textContent)+1;
  });

  return (
    <div className="App">
      <h1>{date}</h1>
      <button
        onClick={() => {
          updateDate(Date());
        }}
      >
        {" "}
        Update{" "}
      </button>
      <p>You've updated dated <span ref={count_p} ></span> time(s)</p>
    </div>
  );
}

So everytime you update state the method useEffect is called. There we go.
We're using Ref's here is there a better way? 🙄

useRef

There's an another hook we can use from the above example. useRef. Let's use that.

import React, { useState, useEffect, useRef } from 'react'; //Importing modules

function App() {

  let count_p = useRef(null);

  const [date, updateDate] = React.useState(Date());

  useEffect(() => {
    count_p.current.textContent = Number(count_p.current.textContent)+1;
  });

  return (
    <div className="App">
      <h1>{date}</h1>
      <button
        onClick={() => {
          updateDate(Date());
        }}
      >
        Update
      </button>
      <p>You've updated dated <span ref={count_p} ></span> time(s)</p>
    </div>
  );
}

useContext

So the context which was released has become legacy context. Now there's a new way of writing it.
So let's say i have a context called Ration Context. In this i list i add new ration every year. Once i do that i wanted that to be listed in all ration shops. So we use something called Context. Let's see how it works.

// RationContext.js
import React,{ Component, createContext } from 'react';

// Create a context which gives Provider and Consumer
const RationContext = React.createContext({
    //Add initial values
    ration: [],
    addRation: () => null
});

//export the consumer
export RationConsumer = RationContext.Consumer;

//export the provider with state and other methods
export class RationProvider extends Component {

    constructor(props){
        super(props);
        this.addRation = this.addRation.bind(this);
        this.state = { ration: [] }
    }

    addRation = (ration) => {
        let { ration } = this.state;
        ration.push(ration);
        this.setState({ ration });
    }

    render(){
        let { ration } = this.state;
        let { children } = this.props;

        return(
            <RationContext.Provider value={{ ration, addRation }} >
                {children}
            </RationContext.Provider>
        )
    }
}

So we have to list somewhere the rations which is provided. Lets see how to do this using hooks.
For this we need to change a line in RationContext.js

    const RationContext to export const RationContext

Now let's list Rations in RationList.js

    import React,{ useContext } from 'react';
    import { RationContext } from './RationContext';

    export const RationList = () => {
        let { rations } = useContext(RationContext);

        return(
            <div>
                <ul>
                    {rations.map(ration => <li>{ration}</li>)}
                </ul>
            </div>
        )
    }

Cool. Now let's add ration from AddRation.js

    import React,{ useContext, useState } from 'react';
    import { RationContext } from './RationContext';

    export const AddRation = () => {
        let { addRation } = useContext(RationContext);

        updateRation = (e) => { e.keyCode === 13 ? addRation(e.value) : '' }

        return(
            <div>
                <input type="text" placeholder="Ration name" onKeyDown={updateRation}/>
            </div>
        )
    }

Context is no magic it sits on top of the DOM Tree 🕵🏼‍♂️ and Has its People( Consumer ) down the tree working for it . Here we consider App.js is the entry point of App. Now let's have App.js.

// App.js
import React from 'react';
import { RationProvider } from './RationContext';
import { RationList } from './RationList';
import { AddRation } from './AddRation';

const App = (props) => {
    return(
        <RationProvider>
            <RationList />
            <AddRation />
        </RationProvider>
    )
}

Now i think you must have a good overview of React Hooks. But still there's a lot more to cover for hooks. Expect a part two soon 🤗.
Until then Adios... Happy Coding!

Configuring Hyper Terminal in Windows

Afroze Kabeer Khan. M — Sun, 22 Jul 2018 04:04:08 +0000

So what is hyper?

Hyper is a highly extensible & customisable 📝, electron based terminal application for cross platform.

So, I'll share how I have configured my windows bash as interactive as possible. ☝️

In my development phase. I can take the privilege of saying pre hyper and post hyper. As my work most of it involved with terminal, there use to be a bunch of command prompt windows opened.

After hyper came into my life it was more organised. Since they said that it is completely customisable I started to see the plugins and what we can do with that.

So I made a few changes by installing plugins like hyper-power, hyper-border, hyper-cwd.

After all this is done. I took a look at ZSH terminal for MAC users. Which was not possible in windows as you have to setup PS1 Variable which is not going to happen in command prompt.
PS : There was also no colored output. Maybe i don't know how to do that!

So I found a way that we can do that in git bash. So this put an interesting smile on my face 😁. In my hyper config changed the terminal to git-command and some extra parameters to start it. Then edited the PS1 of Git bash.

Then, something was wrong i was'nt getting the special characters like branch icon / the wrong symbol. After doing some research i found the font Fira Code. Just changed the font family in hyper config to Fira Code after installation. Now take a look how it looks.

And here is my config file . Link

// Future versions of Hyper may add additional config options,
// which will not automatically be merged into this file.
// See https://hyper.is#cfg for all currently supported options.
module.exports = {
    config: {
        // choose either `'stable'` for receiving highly polished,
        // or `'canary'` for less polished but more frequent updates
        updateChannel: 'stable',
        // default font size in pixels for all tabs
        fontSize: 12,
        // font family with optional fallbacks
        fontFamily: "Fira Code",
        // default font weight: 'normal' or 'bold'
        fontWeight: 'normal',
        // font weight for bold characters: 'normal' or 'bold'
        fontWeightBold: 'bold',
        // terminal cursor background color and opacity (hex, rgb, hsl, hsv, hwb or cmyk)
        cursorColor: 'rgba(248,28,229,0.8)',
        // terminal text color under BLOCK cursor
        cursorAccentColor: '#000',
        // `'BEAM'` for |, `'UNDERLINE'` for _, `'BLOCK'` for █
        cursorShape: 'BLOCK',
        // set to `true` (without backticks and without quotes) for blinking cursor
        cursorBlink: true,
        // color of the text
        foregroundColor: '#fff',
        // terminal background color
        // opacity is only supported on macOS
        backgroundColor: '#000',
        // terminal selection color
        selectionColor: 'rgba(248,28,229,0.3)',
        // border color (window, tabs)
        borderColor: '#333',
        // custom CSS to embed in the main window
        css: '',
        // custom CSS to embed in the terminal window
        termCSS: '',
        // if you're using a Linux setup which show native menus, set to false
        // default: `true` on Linux, `true` on Windows, ignored on macOS
        showHamburgerMenu: '',
        // set to `false` (without backticks and without quotes) if you want to hide the minimize, maximize and close buttons
        // additionally, set to `'left'` if you want them on the left, like in Ubuntu
        // default: `true` (without backticks and without quotes) on Windows and Linux, ignored on macOS
        showWindowControls: 'left',
        // custom padding (CSS format, i.e.: `top right bottom left`)
        padding: '12px 14px',
        // the full list. if you're going to provide the full color palette,
        // including the 6 x 6 color cubes and the grayscale map, just provide
        // an array here instead of a color map object
        colors: {
        black: '#000000',
        red: '#C51E14',
        green: '#1DC121',
        yellow: '#C7C329',
        blue: '#0A2FC4',
        magenta: '#C839C5',
        cyan: '#20C5C6',
        white: '#C7C7C7',
        lightBlack: '#686868',
        lightRed: '#FD6F6B',
        lightGreen: '#67F86F',
        lightYellow: '#FFFA72',
        lightBlue: '#6A76FB',
        lightMagenta: '#FD7CFC',
        lightCyan: '#68FDFE',
        lightWhite: '#FFFFFF',
        },
        // the shell to run when spawning a new session (i.e. /usr/local/bin/fish)
        // if left empty, your system's login shell will be used by default
        //
        // Windows
        // - Make sure to use a full path if the binary name doesn't work
        // - Remove `--login` in shellArgs
        //
        // Bash on Windows
        // - Example: `C:\\Windows\\System32\\bash.exe`
        //
        // PowerShell on Windows
        // - Example: `C:\\WINDOWS\\System32\\WindowsPowerShell\\v1.0\\powershell.exe`
        shell: "C:\\Program Files\\Git\\git-cmd.exe",
        // for setting shell arguments (i.e. for using interactive shellArgs: `['-i']`)
        // by default `['--login']` will be used
        shellArgs: ['--command=usr/bin/bash.exe', '-l', '-i'],
        // for environment variables
        env: { TERM: 'cygwin' },
        // set to `false` for no bell
        bell: 'SOUND',
        // if `true` (without backticks and without quotes), selected text will automatically be copied to the clipboard
        copyOnSelect: false,
        // if `true` (without backticks and without quotes), hyper will be set as the default protocol client for SSH
        defaultSSHApp: true,
        // if `true` (without backticks and without quotes), on right click selected text will be copied or pasted if no
        // selection is present (`true` by default on Windows and disables the context menu feature)
        // quickEdit: true,
        // URL to custom bell
        // bellSoundURL: 'http://example.com/bell.mp3',
        // for advanced config flags please refer to https://hyper.is/#cfg
        opacity: 0.96
    },
    // a list of plugins to fetch and install from npm
    // format: [@org/]project[#version]
    // examples:
    // `hyperpower`
    // `@company/project`
    // `project#1.0.1`
    plugins: [
    "hyper-snazzy",
    "hyper-systray",
    "hyper-opacity",
    "hyper-tab-icons",
    "hyperborder"
    ],
    // in development, you can create a directory under
    // `~/.hyper_plugins/local/` and include it here
    // to load it and avoid it being `npm install`ed
    localPlugins: [],
    keymaps: {
    // Example
    // 'window:devtools': 'cmd+alt+o',
    }
};

Resources

Some links that i found helpful in the path of customization 😉