Forem: Raphael Chaula

How to bold matching characters in text JavaScript.

Raphael Chaula — Sat, 24 Sep 2022 10:27:37 +0000

To achieve this, we need to replace a character match with {input character} in a particular sentence.

So Here is the function:


const boldMatchCharacters = ({ sentence = "", characters = "" }) => {
    const regEx = new RegExp(characters, 'gi');
    return sentence.replace(regEx, '<strong>$&</strong>')
}

I create regex from input characters
Using string's replace function, I replace $& which returns the whole match as it is with $&

Example

console.log(boldMatchCharacters({ sentence: 'Hello Hello Hello, How are you?', characters: 'hel' }));

Output

Hello Hello Hello, How are you?

Happy Hacking

How to create a select component with placeholder in React

Raphael Chaula — Sun, 14 Mar 2021 11:36:37 +0000

Suppose you want a select component with a placeholder that will not be displayed in the options list as we normally make the first option the placeholder by making its value = "none" when user selects it we know they didn't select a thing.

Let's hide it, let's not show it in the options list at all.

Here is how

We do what we normally do i.e add the first option with value = "none" but only display it only on some conditions.

When user focuses the select (onFocus), we hide it from the options list by applying css display: none
When user closes the select (onClose), we check if he selected any option, so if e.target.value === undefined, we know they didn't select a thing so we show the first option (placeholder).

Select.js

import React, { useState } from 'react';
import clsx from 'clsx';
import Select from '@material-ui/core/Select';
import grey from '@material-ui/core/colors/grey';
import MenuItem from '@material-ui/core/MenuItem';
import InputBase from '@material-ui/core/InputBase';
import { makeStyles } from '@material-ui/core/styles';

const useStyles = makeStyles( theme => ({
  container: {
    width: "100%",
    height: "100vh",
    display: "flex",
    alignItems: "center",
    justifyContent: "center",
  },
  select: {
    height: 36,
    width: 320,
    outline: 'none',
    cursor: 'pointer',
    textAlign: 'left',
    paddingLeft: theme.spacing(1),
    paddingRight: theme.spacing(1),
    border: `1px solid ${grey[300]}`,
    color: theme.palette.common.black,
    backgroundColor: theme.palette.common.white,
  },
  selectdisabled: {
    color: grey[500],
  },
  menuitem: {
    direction: "rtl",
  },
  menuitemhidden: {
    display: "none"
  },
})); 

const PlaceholderSelect = () => {
    const classes = useStyles();
    const [value, setValue] = useState("none");
    const [showPlaceholder, setShowPlaceholder] = useState(value === "none");
    return (
        <div className={classes.container} >
            <Select
                value={value}
                defaultValue="none"
                input={<InputBase />}
                onChange={(e) => setValue(e.target.value)}
                onFocus={(e) => setShowPlaceholder(false)}
                onClose={(e) => setShowPlaceholder(e.target.value === undefined)}
                className={clsx(classes.select, value === "none" ? classes.selectdisabled : null)}
            >
                <MenuItem className={clsx(classes.menuitem, !showPlaceholder ? classes.menuitemhidden : null)} key="0" disabled value="none" >Select No.</MenuItem>
                <MenuItem className={classes.menuitem} key="1" value="1" >1</MenuItem>
                <MenuItem className={classes.menuitem} key="2" value="2" >2</MenuItem>
                <MenuItem className={classes.menuitem} key="3" value="3" >3</MenuItem>
            </Select>
        </div>
    );
}

export default PlaceholderSelect;

Here is how the select components behaves in action

Note: I used Materia UI components but you can use anything else only the states and the select events used matter.

Happy Hacking!

How to persist data and access them on both client and server side in Next.js

Raphael Chaula — Thu, 11 Feb 2021 13:52:56 +0000

Suppose you have data like theme and localeand you want to get their value as immediate as your Next.js app starts, be it client or server side. You obvious need a storage that can be accessed both client and server side, that storage is Cookies of coarse, but how?

Here is how I do it:

After you have successfully created your Next.js app, create a custom _app.js file, this is the file where our logic will be.

Scenario: When user initially opens the app or refreshes, it does server side rendering, I want to get the previous theme they selected before rendering the default theme then changing it, that is disturbing.

Logic: When user selects theme, lets say light, I change the current theme to what he selected and store its value to Cookie storage when user opens the app next time or refreshes it, I will grab that cookie during server side rendering and pass it as props to the app hence rendering the previous theme they selected.

Note: I use Material UI for styling and theming and js-cookie for cookies, you can use any, the aim is just to understand how I do it.

_app.js

import React from 'react';
import PropTypes from 'prop-types';
import { setCookie, getCookie } from '../libs/cookie';
import { darktheme, lighttheme } from '../libs/themes';
import { ThemeProvider } from '@material-ui/core/styles';
// Context API
import { ThemeContext } from '../context';

const App = ({ Component, pageProps, previousTheme }) => {
  const [theme, setTheme] = React.useState(previousTheme);

  const toggleTheme = async () => {
    if (theme === 'light') {
      setTheme('dark');
      setCookie('theme', 'dark');
    } else {
      setTheme('light');
      setCookie('theme', 'light');
    }
  };

  return (
    <React.Fragment>
      <ThemeContext.Provider value={theme} >
        <ThemeContext.Consumer>
          {
            value =>
              <ThemeProvider theme={value === 'dark' ? darktheme : lighttheme} >
                <Component toggleTheme={toggleTheme} {...pageProps} />
              </ThemeProvider>
          }
        </ThemeContext.Consumer>
      </ThemeContext.Provider>
    </React.Fragment>
  );
};

App.propTypes = {
  Component: PropTypes.elementType.isRequired,
  pageProps: PropTypes.object.isRequired
};

App.getInitialProps = async ({ Component, ctx }) => {
  let pageProps = {};
  let previousTheme = null;
  if (Component.getInitialProps) {
    pageProps = await Component.getInitialProps(ctx);
  }
  if (ctx.req) {
    previousTheme = await getCookie('theme', ctx.req.headers.cookie);
  }
  return {
    pageProps,
    previousTheme
  };
};

export default App;

I have ThemeContext to store theme state, setCookie, getCookie functions imported and toggleTheme function.

getIntitialprops is where the app starts, I check if it is server side rendered I get the cookie value using getCookie function and pass it as props to the app. toggleTheme is prop drilled to Component so that it can be accessed anywhere inside the app, this function updates the currentTheme state which in turn updates the ThemeContext and store the selected theme value to cookie using setCookie function.

ThemeContext

import { createContext } from 'react';

const ThemeContext = createContext();
export {
  ThemeContext
};

libs/cookie.js

const Cookies = require('js-cookie');

module.exports = {
  getCookie: async (cookiename, cookiestring) => {
    var name = cookiename + '=';
    var decodedCookie = decodeURIComponent(cookiestring);
    var ca = decodedCookie.split(';');
    for (var i = 0; i < ca.length; i++) {
      var c = ca[i];
      while (c.charAt(0) === ' ') {
        c = c.substring(1);
      }
      if (c.indexOf(name) === 0) {
        return c.substring(name.length, c.length);
      }
    }
    return '';
  },
  setCookie: (cookiename, cookievalue) => {
    Cookies.set(cookiename, cookievalue, { expires: 365 });
  }
};

You can add more data like locale, jwt, sessionKey whatever that you need to access on initial start or refresh or your Next.js app and get/process it at getInitialprops.

Happy Hacking!

GitHub tips for beginners

Raphael Chaula — Tue, 02 Feb 2021 15:30:54 +0000

At first, you create a repo with a base/main branch, you push your initial/first commit there, after that we want to have a way to properly manage our project.

Here is how I manage my repos/projects on GitHub.

1. Create a project

For every repo I create, I add a project for it, which includes three columns:

To Do - All issues that I am to work on stay here.
In Progress - All issues I am currently working on.
Done - All issues I have completed are seen here.

2. Create an issue

I treat every thing I add or remove on my repos as an issue, before starting coding I create issues I want to work on to the repo, assign it to myself or someone else, add labels to them e.g enhancement, bug or any other custom label, add it to a project - the one I created for the repo, sometimes I add a milestone then I start working on them (issues).

NB: When you are working on an issue, it is a good practice to move it to the In Progress column in the project, this helps others to know what you are currently working on

3. Create a branch

After you have solved one of the issues above, commit your changes then check out to a new branch, push your changes to this branch. I normally use one branch for one purpose then I delete it after merging with the main/base branch, if you like working on the same branch all time, that is OK if it works for you.

4. Create a pull request

You have your changes pushed to the new branch, you need to create a pull request so that you can merge your new changes to the main/base branch, on creating the pull request make sure you close the issue you just solved by simply writing closes #21 on the comment section, this will identify issue no. 21 as the one to be closed if this pull request is successfully merged.
NB: Replace #21 with your issue number.

5. Merge your branch to main/base branch

After your pull request is validated and it gave you the green light for you to merge, merge your branch to the main/base branch, this should move your issues from In Progress column to Done column in the project, after that you can delete the branch you were working on.

This way, you can track all your activities from the beginning to the end or your project on GitHub.

BONUS: You can use Milestones in GitHub, this is useful if you want to group your issues based on your goals, for instance you want to improve your site accessibility, then you create a milestone - Site accessibility - Improve site accessibility and all the issues related to site accessibility should be added to this milestone, grouping them this way will help you track how much you have done on site accessibility goal.

Happy Hacking!

How to localize Material UI DatePicker to your preferred locale in React

Raphael Chaula — Tue, 26 Jan 2021 18:21:28 +0000

Material UI DatePickers are usually in English language i.e en locale but sometimes you wish they were in your first language for instance mine is Swahili, sw locale.

Here is how, after you have created a React app and added Material UI to it you need more libraries: @material-ui/pickers, @date-io/core, @date-io/date-fns, @date-io/moment, date-fns and moment.

When installing them there might be some compatibility issues so make sure you use compatible libs for the @material-ui/pickers you are using, for my case, I use @material-ui/pickers version 3 so here are its compatibe libs versions.

yarn add @material-ui/pickers@^3.0.0

yarn add @date-io/date-fns@^2.0.0
yarn add @date-io/moment@^1.0.0
yarn add @date-io/core@^1.0.
yarn add date-fns@^2.0.0
yarn add moment@^2.0.0

DatePickerComponent.js

import React from 'react';
import { DatePicker, MuiPickersUtilsProvider } from "@material-ui/pickers";
import { createMuiTheme, ThemeProvider} from '@material-ui/core/styles';
import MomentUtils from "@date-io/moment";
import moment from "moment";
import "moment/locale/sw";

const DatePickerComponent = ({ date, setDate}) => {

  const theme = createMuiTheme({
    palette: {
      primary: {
        main: '#2EC4B6'
      },
      secondary: {
        main: '#2EC4B6'
      },
    },
  });

  return (
    <ThemeProvider theme={theme}>
      <MuiPickersUtilsProvider libInstance={moment} utils={MomentUtils} locale={"sw"} >
        <DatePicker
          required
          format="L"
          clearable
          okLabel="Sawa"
          clearLabel="Futa"
          cancelLabel="Hairisha"
          value={date}
          variant="dialog"
          maxDateMessage=""
          mask="__/__/____"
          placeholder="dd/MM/yyyy"
          onChange={(dateChanged) => setDate(dateChanged)}
          views={["year", "month", "date"]}
          InputProps={{ disableUnderline: true }}
        />
      </MuiPickersUtilsProvider>
    </ThemeProvider>
  );

};

export default DatePickerComponent;

Replace sw in the DatePickerComponent with the locale you prefer you will have it in your locale, here is how mine looks.

Happy Hacking!

Adding MongoDB (Mongoose) to Next.js APIs

Raphael Chaula — Mon, 25 Jan 2021 09:19:42 +0000

After you have created a Next.js app, install mongoose yarn add mongoose then create next.config.js at the root directory of your app if it doesn't exist and in it add your MongoDB connection url string.

next.config.js

module.exports = {
    env: {
        mongodburl: "Your MongoDB connection String",
    }
};

Then create a MongoDB connect middleware that will be called to create a new connection to DB or reuse the existing one whenever we do an operation to DB, in my case I added middleware folder in the root directory of the app and added it there.

middleware/mongodb.js

import mongoose from 'mongoose';

const connectDB = handler => async (req, res) => {
  if (mongoose.connections[0].readyState) {
    // Use current db connection
    return handler(req, res);
  }
  // Use new db connection
  await mongoose.connect(process.env.mongodburl, {
    useUnifiedTopology: true,
    useFindAndModify: false,
    useCreateIndex: true,
    useNewUrlParser: true
  });
  return handler(req, res);
};

export default connectDB;

Then create your models, in my case I added models folder in root directory of the app and created a User model in it.

models/user.js

import mongoose from 'mongoose';
var Schema = mongoose.Schema;

var user = new Schema({
  name: {
    type: String,
    required: true
  },
  email: {
    type: String,
    required: true
  },
  password: {
    type: String,
    required: true
  },
  since: {
    type: Date,
    default: Date.now
  }
});

mongoose.models = {};

var User = mongoose.model('User', user);

export default User;

Then lets create an api for user and add create a new user functionality in it in the pages/api/user directory.

pages/api/user.js

import connectDB from '../../middleware/mongodb';
import bcrypt from '../../middleware/bcrypt';
import User from '../../models/user';

const handler = async (req, res) => {
  if (req.method === 'POST') {
    // Check if name, email or password is provided
    const { name, email, password } = req.body;
    if (name && email && password) {
        try {
          // Hash password to store it in DB
          var passwordhash = await bcrypt.sign(password);
          var user = new User({
            name,
            email,
            password: passwordhash,
          });
          // Create new user
          var usercreated = await user.save();
          return res.status(200).send(usercreated);
        } catch (error) {
          return res.status(500).send(error.message);
        }
      } else {
        res.status(422).send('data_incomplete');
      }
  } else {
    res.status(422).send('req_method_not_supported');
  }
};

export default connectDB(handler);

We are done here, just make a post request to http://localhost:3000/api/user in the request body include: name email and password you will get a response either user object if user is created successfully or an error message if something went wrong.

Happy Hacking!

A simple image test in React

Raphael Chaula — Fri, 22 Jan 2021 19:02:47 +0000

There isn't much to test in images, when I write a test for an image element (img) in React apps, I just check if img element exists and if img src and its alt is correct.

Here is how.

Logo

import { FunctionComponent } from 'react';

const Logo: FunctionComponent = () => {
  return (
    <img src="/logo.svg" alt="Logo"  />
  );
};

export default Logo;

Logo.test

import { render, screen } from '@testing-library/react';
import Logo from './logo';

describe('Logo', () => {
  test('Logo must have src = "/logo.svg" and alt = "Logo"', () => {
    render(<Logo/>);
    const logo = screen.getByRole('img');
    expect(logo).toHaveAttribute('src', '/logo.svg');
    expect(logo).toHaveAttribute('alt', 'Logo');
  });
});

Then run yarn test or npm run test
Results of your tests will be displayed on console

Happy Hacking!

How to reuse input elements in the form React

Raphael Chaula — Thu, 21 Jan 2021 16:50:56 +0000

We normally use text fields with lots of similarity especially styles in our forms, they just differ in values they store, placeholders and some types they have. For that case I often iterate the array of objects (formElements) and reuse the input component.

Here is how.

Form

import React, { useState} from 'react';

const SigninForm = () => {
  const [formData, setFormData] = useState({});

  const changeFormData = (key, value) => {
    const formdata = {
      ...formData,
      [key]: value,
    };
    setFormData(formdata);
  };

  const submitFormData = (event) => {
    // Submit form data here
    event.preventDefault();
    console.log(formData);
  };

  const formElements = [
    { name: "email", type: "text", placeholder: "Email"},
    { name: "password", type: "password", placeholder: "Password"},
    { name: "button", type: "submit", value: "Submit"},
  ];

  return (
    <form onSubmit={submitFormData} >
      {formElements.map(element => {
        // Return submit button
        if (element.type === "submit") {
          return (
            <button
              key={element.name}
              type={element.type}
              onClick={submitFormData} 
            >
              {element.value}
            </button>
          );
        }
        // Return text inputs
        return (
          <input
            key={element.name}
            type={element.type}
            value={formData[element.name] || ""}
            placeholder={element.placeholder}
            onChange={(e) => changeFormData(element.name, e.target.value)}
          />
        );
      })}
    </form>
  );
};

export default SigninForm;

How to update object or array state in React

Raphael Chaula — Wed, 20 Jan 2021 17:27:41 +0000

Ever tried to update object or array state directly in React?
I did that, the state of my component didn't change.
Destructuring the object/array was the solution.

When you update the state, create a new array/object by destructuring the one in the state, manipulate it then set it as a new value in the state.

Object

import React, { useState } from 'react';

const States = () => {

  const [objectValue, setObjectValue] = useState({});

  const updateObjectValue = (key, value) => {
    // Destructure current state object
    const objectvalue = {
      ...objectValue,
      [key]: value,
    };
    setObjectValue(objectvalue);
  };

  return <Component/>;

};

export default States;

Array

import React, { useState } from 'react';

const States = () => {

  const [arrayValue, setArrayValue] = useState([]);

  const updateArrayValue = (value) => {
    // Destructure current state array
    const arrayvalue = [ ...arrayValue ];
    arrayvalue.push(value);
    setArrayValue(arrayvalue);
  };

  return <Component/>;

};

export default States;

Happy Hacking!

How to insertAt, removeAt and remove an element in array JavaScript

Raphael Chaula — Tue, 19 Jan 2021 17:16:27 +0000

Suppose [0, 1, 2, 3, 4, 5, 6] is your array and you want to insert another value at a centain index (replace) in it or you want to remove a value at a certain index from it or you just want to remove a certain value lets say 5 out of it, here is what you can do in JavaScript.

insertAt

let numbers = [0, 1, 2, 3, 4, 5, 6];

const insertAt = (element, index) => {
    numbers.splice(index, 1, element)
}

insertAt(7, 1);
console.log(numbers);

When you run the script the out put will be [ 0, 7, 2, 3, 4, 5, 6 ]
Element 1 is replaced with 7

removeAt

let numbers = [0, 1, 2, 3, 4, 5, 6];

const removeAt = (index) => {
    numbers.splice(index, 1);
};

removeAt(1);
console.log(numbers);

When you run the script the out put will be [ 0, 2, 3, 4, 5, 6 ]
Element at index 1 is removed from numbers.

removeElement

let numbers = [0, 1, 2, 3, 4, 5, 6];

const removeElement = (element) => {
    const index = numbers.indexOf(element);
    if (index > -1) {
        numbers.splice(index, 1);
    } else {
        throw new Error('Element not found in array');
    }
}

removeElement(5);
console.log(numbers);

When you run the script the out put will be [ 0, 1, 2, 3, 4, 6 ]
Element 5 is removed from numbers.
If you run removeElement(9) it will throw an error - Element not found in array because 9 is not in the numbers array.

Happy hacking!