DEV Community: Mohit Kumar Yadav

Trap focus in react

Mohit Kumar Yadav — Tue, 30 Mar 2021 11:20:25 +0000

Use following keyDownHandler on div you want to trap focus


  const keyDownHandler = (e) => {
    // only execute if tab is pressed
    if (e.key !== 'Tab') return

    // here we query all focusable elements, customize as your own need
    const focusableModalElements = modalRef.current.querySelectorAll(
      'a[href], button:not([disabled]), textarea, input, select'
    )

    const firstElement = focusableModalElements[0]
    const lastElement =
      focusableModalElements[focusableModalElements.length - 1]

    // if going forward by pressing tab and lastElement is active shift focus to first focusable element 
    if (!e.shiftKey && document.activeElement === lastElement) {
      firstElement.focus()
      return e.preventDefault()
    }

    // if going backward by pressing tab and firstElement is active shift focus to last focusable element 
    if (e.shiftKey && document.activeElement === firstElement) {
      lastElement.focus()
      e.preventDefault()
    }
  }

Set default SSH key for authenticate

Mohit Kumar Yadav — Mon, 22 Mar 2021 09:32:16 +0000

Navigate to ~/.ssh and if using Windows and git bash go to C:\Users\<user>\.ssh

Create a file named config in following format

Host *.someurl.com
IdentityFile ~/.ssh/my_key

In this example * (star) is for everything. Now to connect do ssh ubuntu@abc.someurl.com.

Some more examples of ssh config file.


Host someurl.com
IdentityFile <path to private key>

Host <ip address>
IdentityFile <path to private key>

You can further define config to save time connecting to machines

Host dev
        HostName dev.mysite.com
        IdentityFile <path to private key>
        User ubuntu

Host stage
        HostName stage.mysite.com
        IdentityFile <path to private key>
        User <username>

And directly connect with ssh dev or ssh stage.

Customizing Webpack for react apps

Mohit Kumar Yadav — Wed, 25 Nov 2020 03:52:26 +0000

If you have any of the following question this post might be helpful.

How to override default webpack config of react apps created with create-react-app?
How to modify default eslint rules/config of react apps?
How to add additional webpack plugins to react apps?
How to use custom eslint file when running react apps?

Solution : `eject`

Run `npm run eject` or `yarn eject`.

react-scripts will warn you, simply ignore 😇.

After this process completes CRA (create-react-app) will eject all configs and scripts
There will be 2 new folders in the root of the project

/config
..env.js
..getHttpsConfig.js
..modules.js
..paths.js
..pnpTs.js
..webpack.config.js   <----------- webpack config file
..webpackDevServer.config.js
../jest

/scripts
..build.js
..start.js
..test.js

There you go, modify the webpack.config.js files as you wish. Questions 1 and 3 are solved.
For Q2 and 4 you don't have to do anything, once we eject all the configs webpack will automatically use eslint files in the project root.

Flutter step progress bar with dynamic total step

Mohit Kumar Yadav — Fri, 16 Oct 2020 10:40:30 +0000

class StepProgressBar extends StatelessWidget {
  const StepProgressBar({
    Key key,
    this.currentStep,
    this.totalSteps,}) :super(key: key);

  final int currentStep;
  final int totalSteps;

  @override
  Widget build(BuildContext context) {

    final screenWidth = MediaQuery.of(context).size.width;
    // if you are wrapping this widget in some padding
    const leftPadding = 20.0;
    const rightPadding = 20.0;

    // width of the separete widget
    const separatedWidth = 1.0;

    return Padding(
      padding: const EdgeInsets.only(top: 20, left: leftPadding, right: rightPadding, bottom: 0),
      child: Container(
        constraints: BoxConstraints(maxHeight: 2, maxWidth: screenWidth),
        child: ListView.separated(
          shrinkWrap: true,
          scrollDirection: Axis.horizontal,
          physics: const NeverScrollableScrollPhysics(),
          itemCount: totalSteps,
          separatorBuilder: (context, index) => const SizedBox(width: separatedWidth,),
          itemBuilder: (context, position) {
            return Container(
              width: (screenWidth - ((totalSteps - 1) * separatedWidth)
                      - (leftPadding + rightPadding)) / totalSteps,
              decoration: BoxDecoration(
                color: AppTheme.nearlyWhite20,
                borderRadius: BorderRadius.circular(20)
              ),
              child: Container(
                height: 2,
                decoration: BoxDecoration(
                color: currentStep >= position ? AppTheme.lightGreen.withOpacity(0.4) : Colors.transparent,
                      borderRadius: BorderRadius.circular(20)
                ),
              ),
            );
          },
        ),
      ),
    );
  }
}

Format double according to locale

Mohit Kumar Yadav — Fri, 16 Oct 2020 10:15:53 +0000

Problem

I was working on an app targeted for Germany. And in German locale 12.5 is written 12,5, 1.050 in German means one thousand and fifty.

Solution

I created 2 utility functions 1st to parse double to de locale and second to convert back to double.

Here is the code

import 'package:intl/intl.dart';

static String deFormat (String val) {
    final deFormat = NumberFormat.decimalPattern('de',);
    return deFormat.format(double.parse(val));
  }


  static num enFormat (String val) {
    final deFormat = NumberFormat.decimalPattern('de',);
    return deFormat.parse(val);
  }

You'll need intl package.

Handle deep links in the Android apps with flutter

Mohit Kumar Yadav — Sun, 06 Sep 2020 03:33:15 +0000

What are deep links?

Deep links are a type of link that send users directly to an app instead of a website.

Why we need this?

To provide a seamless user experience in both web and mobile. Another reason is that when a business has a web site and a mobile app, it can escape the “Mobile first” web design patters by using deep links.

Implementation

find AndroidManifest.xml file under android/app/src/main

Add these links inside <activity>

 <intent-filter android:label="InviteLink">
    <action android:name="android.intent.action.VIEW" />
    <category android:name="android.intent.category.DEFAULT" />
    <category android:name="android.intent.category.BROWSABLE" />
    <data
        android:scheme="https"
        android:host="only4.dev"
        android:pathPrefix="/invite"
    />
</intent-filter>

Android operating systems provides APIs to register certain action to some apps, for example when we click on a mp3 file Android prompts user to select an app from the list of supported apps.

If I click on a link which starts from only4.dev/invite it will always prompt to open this link with the mobile app.

Lets handle the link in the app

There can be 2 types of events:

When the app is not running
when the app is already running.

We create 2 types of messages for that and also create a Broadcast receiver.

A broadcast receiver (receiver) is an Android component which allows you to register for system or application events. All registered receivers for an event are notified by the Android runtime once this event happen

private static final String CHANNEL = "initial";
private static final String EVENTS = "eventWhileAppIsRunning";
private String startString;
private BroadcastReceiver linksReceiver;

Let’s handle the cases. We create a new MethodChanenel for the 1st case and new EventChannel for the 2nd case.

On the Android side MethodChannel Android (API) and on the iOS side FlutterMessageChannel (API) is used for receiving method calls and sending back result. If required, method calls can also be sent in the reverse direction, with the Android/IOS platform acting as client and method implemented in Dart.

An EventChannel is used when you want to stream data. This results in having a Stream on the Dart side of things and being able to feed that stream from the native side. (In other words when the app is already running).

protected void onCreate(Bundle savedInstanceState) {
  super.onCreate(savedInstanceState);
  GeneratedPluginRegistrant.registerWith(this);

  Intent intent = getIntent();
  Uri data = intent.getData();

  new MethodChannel(getFlutterView(), CHANNEL).setMethodCallHandler(
    new MethodChannel.MethodCallHandler() {
      @Override
      public void onMethodCall(MethodCall call, MethodChannel.Result result) {
        if (call.method.equals("initialLink")) {
          if (startString != null) {
            result.success(startString);
          }
        }
      }
    }
  );

  new EventChannel(getFlutterView(), EVENTS).setStreamHandler(
    new EventChannel.StreamHandler() {
      @Override
      public void onListen(Object args, final EventChannel.EventSink events) {
        linksReceiver = createChangeReceiver(events);
      }

      @Override
      public void onCancel(Object args) {
        linksReceiver = null;
      }
    }
  );

  if (data != null) {
    startString = data.toString();
    if(linksReceiver != null) {
      linksReceiver.onReceive(this.getApplicationContext(), intent);
    }
  }
}

Take your time to read and understand this.

ake your time to understand this if you need to implement deep links.

here is final MainActivity.java

package my.app.com;

import android.content.BroadcastReceiver;
import android.content.Context;
import android.content.Intent;
import android.net.Uri;
import android.os.Bundle;

import io.flutter.app.FlutterActivity;
import io.flutter.plugin.common.EventChannel;
import io.flutter.plugin.common.MethodCall;
import io.flutter.plugin.common.MethodChannel;
import io.flutter.plugins.GeneratedPluginRegistrant;
import io.flutter.plugins.GeneratedPluginRegistrant;

public class MainActivity extends FlutterActivity {
  private static final String CHANNEL = "initial";
  private static final String EVENTS = "eventWhileAppIsRunning";
  private String startString;
  private BroadcastReceiver linksReceiver;

  protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    GeneratedPluginRegistrant.registerWith(this);

    Intent intent = getIntent();
    Uri data = intent.getData();

    new MethodChannel(getFlutterView(), CHANNEL).setMethodCallHandler(
      new MethodChannel.MethodCallHandler() {
        @Override
        public void onMethodCall(MethodCall call, MethodChannel.Result result) {
          if (call.method.equals("initialLink")) {
            if (startString != null) {
              result.success(startString);
            }
          }
        }
      }
    );

    new EventChannel(getFlutterView(), EVENTS).setStreamHandler(
      new EventChannel.StreamHandler() {
        @Override
        public void onListen(Object args, final EventChannel.EventSink events) {
          linksReceiver = createChangeReceiver(events);
        }

        @Override
        public void onCancel(Object args) {
          linksReceiver = null;
        }
      }
    );

    if (data != null) {
      startString = data.toString();
      if(linksReceiver != null) {
        linksReceiver.onReceive(this.getApplicationContext(), intent);
      }
    }
  }

  @Override
  public void onNewIntent(Intent intent){
    super.onNewIntent(intent);
    if(intent.getAction() == android.content.Intent.ACTION_VIEW && linksReceiver != null) {
      linksReceiver.onReceive(this.getApplicationContext(), intent);
    }
  }

  private BroadcastReceiver createChangeReceiver(final EventChannel.EventSink events) {
    return new BroadcastReceiver() {
      @Override
      public void onReceive(Context context, Intent intent) {
        // NOTE: assuming intent.getAction() is Intent.ACTION_VIEW

        String dataString = intent.getDataString();

        if (dataString == null) {
          events.error("UNAVAILABLE", "Link unavailable", null);
        } else {
          events.success(dataString);
        }
      }
    };
  }
}

Next step is to pass these events to flutter code

We create a StreamController() in a DeepLinkBloc class.

Create the constructer for this class

DeepLinkBloc() {
    startUri().then(_onRedirected);
    stream.receiveBroadcastStream().listen((d) => _onRedirected(d));
  }

When ever we receive an event it calls the _onRedirected method. Now we finally have the initial link in the flutter code.

Here’s the full code for the class.

import 'dart:async';

import 'package:flutter/services.dart';
import 'package:flutter/widgets.dart';

abstract class Bloc {
  void dispose();
}

class DeepLinkBloc extends Bloc {
  DeepLinkBloc() {
    startUri().then(_onRedirected);
    stream.receiveBroadcastStream().listen((d) => _onRedirected(d));
  }

  // Initial event channel
  static const platform = MethodChannel('initial');

  // Runtime Event channel
  static const stream = EventChannel('eventWhileAppIsRunning');

  final StreamController<String> _stateController = StreamController();

  Stream<String> get state => _stateController.stream;

  Sink<String> get stateSink => _stateController.sink;

  //Adding the listener into constructor

  void _onRedirected(String uri) {
    debugPrint(uri);
    stateSink.add(uri);
  }

  @override
  void dispose() {
    _stateController.close();
  }

  Future<String> startUri() async {
    try {
      return platform.invokeMethod('initialLink');
    } on PlatformException catch (e) {
      return "Failed to Invoke: '${e.message}'.";
    }
  }
}

Now simply wrap the widgets in Provider<DeepLinkBloc>.value(value: _bloc) where you want to use the links.

Lets create a new widget which uses this provider.

class DeepLinkWrapper extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final _bloc = Provider.of<DeepLinkBloc>(context);

    return StreamBuilder<String>(
      stream: _bloc.state,
      builder: (context, snapshot) {
        // if app is started normally, no deep link is clicked show your old home page widget
        if (!snapshot.hasData) {
        return Container(
          child: const HomePage(),
        );
      } else {
        final splitInviteLink = snapshot.data.split('/');
        final inviteToken = splitInviteLink[splitInviteLink.length - 1];

        return RegisterStartPage(key: UniqueKey(),inviteToken: inviteToken,);
      }
    });
  }
}

Just this last change and we are good to go. Make this modification in your main.dart file.

 home: Scaffold(
   body: Provider<DeepLinkBloc>(
     builder: (context) => _bloc,
     dispose: (context, bloc) => bloc.dispose(),
     child: DeepLinkWrapper()
   )
 )

Here is the code for the final `MyApp` class in main.dart.

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final _bloc = DeepLinkBloc();

    return MultiProvider(
      providers: [
        Provider<DeepLinkBloc>.value(value: _bloc),
        // ...other providers
      ],
      child: MaterialApp(
        debugShowCheckedModeBanner: false,
        localizationsDelegates: const [
          AppLocalizationsDelegate(),
          GlobalMaterialLocalizations.delegate,
          GlobalWidgetsLocalizations.delegate,
        ],
        supportedLocales: const [
          Locale('de'),
          Locale('en'),
        ],
        routes: {
          HomePage.route: (context) => const HomePage(),
          LoginPage.route: (context) => LoginPage(),
        },
        home: Scaffold(
          body: Provider<DeepLinkBloc>(
            create: (context) => _bloc,
            dispose: (context, bloc) => bloc.dispose(),
            child: DeepLinkWrapper()
          )
        )
      ),
    );
  }
}

Display online/offline pdf files in React using react-pdf

Mohit Kumar Yadav — Sun, 06 Sep 2020 03:13:04 +0000

react-pdf is a great package for react it's based on the pdf.js from Mozilla.

Install npm i react-pdf
Import

import { Document, Page, pdfjs } from 'react-pdf'
// right after your imports
pdfjs.GlobalWorkerOptions.workerSrc = `//cdnjs.cloudflare.com/ajax/libs/pdf.js/${pdfjs.version}/pdf.worker.js`

<Document
  file={{ url: urlPdf }}
  onLoadSuccess={onDocumentLoadSuccess}
>
  // pages here, we will get back to that later
</Document>

in above code urlPDF is url to pdf. Remember this resource must not be blocked by CORS. Or pdf will not render.
If the resources is not available for cross origins use this instead (just a temporary solution, don't use it in production).

file={{ url: `https://cors-anywhere.herokuapp.com/${urlPdf}` }}

onLoadSuccess is invoked when the file has loaded use this to set total pages in pdf const [totalPages, setTotalPages] = useState(null) const onDocumentLoadSuccess = ({ numPages }) => setTotalPages(numPages)
Now we have totalPages, let's display the pages now

<Document
  file={{ url: attachment.url }}
  onLoadSuccess={onDocumentLoadSuccess}
>
  {
    Array.apply(null, Array(totalPages))
     .map((x, i) => i + 1)
     .map((page) => <Page pageNumber={page} />)
  }
</Document>

Turn off IDM extension module in your browser or it will prompt to download the file and you'll see and error "faild to load" in the browser.
References https://github.com/wojtekmaj/react-pdf

Upload files to S3 buckets from react

Mohit Kumar Yadav — Sun, 06 Sep 2020 03:06:57 +0000

Disclaimer - When uploading files to s3 directly from front end, your AWS credentials are exposed in the network tab. Refrain from uploading files to protected S3 buckets directly from FE. Always use a server to upload files.

You need to install aws-sdk npm package in order to upload files to s3 buckets.

npm install aws-sdk --save

Make sure the bucket has following policy

<?xml version="1.0" encoding="UTF-8"?>
 <CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
    <CORSRule>
        <AllowedOrigin>*</AllowedOrigin>
        <AllowedMethod>POST</AllowedMethod>
        <AllowedMethod>GET</AllowedMethod>
        <AllowedMethod>PUT</AllowedMethod>
        <AllowedMethod>DELETE</AllowedMethod>
        <AllowedMethod>HEAD</AllowedMethod>
        <ExposeHeader>ETag</ExposeHeader>
        <AllowedHeader>*</AllowedHeader>
    </CORSRule>
</CORSConfiguration>

The ETag header must be exposed or bigger uploads will not complete.

Let's write some React
import AWS from 'aws-sdk'

in the component constructor set the AWS access key and the secret keys. You get them straight from the aws console.

AWS.config.update({
  accessKeyId: AWSAccessKeyId,
  secretAccessKey: AWSSecretKey
})

Create the bucket in the constructor as well
Always double check bucket's name and region.

this.myBucket = new AWS.S3({
  params: { Bucket: 'video-bucket-xyz'},
  region: 'ap-south-1',
})

Now when ever you want to upload a file to the bucket call the following function and pass the selected file as function argument.

uploadFile = (file) => {
  const params = {
    ACL: 'public-read',
    Key: file.name,
    ContentType: file.type,
    Body: file,
  }
  this.myBucket.putObject(params)
    .on('httpUploadProgress', (evt) => {
      // that's how you can keep track of your upload progress
      this.setState({
        progress: Math.round((evt.loaded / evt.total) * 100),
      })
    })
    .send((err) => {
       if (err) {
         // handle the error here
       }
    })
}

you can read more about putObject here.

References
aws-sdk