Forem: Benedict Steven

Understanding ClickPesa Payment Gateway Integrations: Methods and Use Cases

Benedict Steven — Wed, 25 Sep 2024 18:13:58 +0000

In today’s fast-paced digital economy, businesses need reliable, seamless payment solutions to serve customers and suppliers effectively. ClickPesa as a licensed payments system provider, offers a suite of integration methods that enable businesses to support payments collection and disbursement functionalities seamlessly into their systems. ClickPesa Payment Gateway supports three integration methods: Embedded Integration, Hosted Integration, and API Integration. Each method is tailored to specific business needs and technical capabilities.

1. Embedded Integration

What is Embedded Integration?

Embedded Integration allows businesses to integrate ClickPesa’s payment functionalities directly into their websites or applications using customizable widgets. It allows businesses and their customers to complete transactions without leaving the business’s site or application, providing a seamless user experience while leaving the payment processing intrinsic to the ClickPesa Payment Gateway.

Use Cases for Embedded Integration:

SMBs Looking for Quick Setup: Small businesses that need a fast, easy-to-implement payment solution can use Embedded Integration to add payment functionality to their platforms without complex development.
Startups and Fast-Growing Platforms: Startups can quickly launch payment services using ClickPesa’s widgets, enabling them to focus on scaling their core offerings.
Platforms with Limited Development Resources: Businesses without large development teams can use Embedded Integration to offer payments without the overhead of custom-built solutions.

When to Use Embedded Integration:

Rapid Deployment: If you need to launch payments quickly and with minimal development effort, Embedded Integration is the best fit.
Simplified Setup: If your business doesn’t have a dedicated development team or wants to avoid managing payments directly, Embedded Integration offers a quick, simple solution.
Basic Customization: You can adjust the appearance of the payment widget to match your branding without complex coding.

When Not to Use Embedded Integration:

High Customization Needs: If your business requires a highly tailored payment flow with unique UI/UX features, Embedded Integration may not offer enough flexibility.
Complex Transaction Logic: For businesses needing advanced payment logic, a more customizable solution like API Integration would be more appropriate.

Development Considerations:

Minimal Technical Expertise: Embedded Integration doesn’t require extensive technical resources. Simply importing the widget into your app or website allows you to start making transactions without needing to manage security or infrastructure.
Security: In Embedded Integration, security is handled within the widget itself, meaning no API keys are required, which reduces the risk of exposing sensitive information. This makes Embedded Integration inherently more secure compared to Hosted or API options where API keys are involved.

Getting started:

Take a look at the embedding integration documentation.

2. Hosted Integration

What is Hosted Integration?

Hosted Integration allows business systems to use ClickPesa’s API to generate unique, secured and short-living hosted links. The links can be used by the business to make payouts or be shared with customers to collect payments. A business system initiates a transaction, the hosted page confirms it, and ClickPesa Payment Gateway processes it and responds the results back to the business’s system. Offering a seamless order processing securely.

Use Cases for Hosted Integration:

Small to Medium-Sized Businesses (SMBs): Businesses that want to initiate payments within their system but do not wish to manage complex payment infrastructure can use Hosted Integration to generate links for customers to complete transactions.
Invoicing Platforms: Businesses that send invoices to clients can use Hosted Integration to generate secure payment links, allowing clients to pay without the need to embed payment features into their system.
Startups and Non-Tech-Heavy Businesses: Startups or businesses with limited technical resources can initiate transactions within their app or system and have customers complete payments externally on ClickPesa’s hosted page.

When to Use Hosted Integration:

Transaction Initiation with Minimal Setup: If your business wants to initiate payments within your system but doesn’t need full control over the transaction process, Hosted Integration provides a quick and secure way to complete transactions.
Link-Based Payments: If your business sends payment links to customers (e.g., via email or messaging), Hosted Integration is ideal because it allows users to complete payments outside your main application.
Ease of Payment Processing: When you want to manage transaction initiation internally but prefer to hand off the actual payment processing to ClickPesa, Hosted Integration provides an easy solution.

When Not to Use Hosted Integration:

Need for Full Customization: If your business requires a fully customized payment flow where you control every step of the transaction process, Hosted Integration may not offer enough flexibility.
Real-Time On-Site Payments: For businesses that require customers to complete payments directly on their site or within their app, without being redirected, Embedded or API Integration may be a better choice.

Development Considerations:

API-Based Setup: Hosted Integration involves using ClickPesa’s API to generate payment links, which are then used to complete transactions on a hosted page. This reduces the technical burden of managing payments internally, while still offering flexibility in how transactions are initiated.
Security: Hosted Integration requires API keys, which if mishandled can pose security risks. Although ClickPesa’s infrastructure ensures payment security, extra care must be taken to properly secure API keys. For sensitive actions like payouts, an additional security layer is applied using two-factor authentication (2FA) via OTP to the user’s phone.

Getting started:

Get started with hosted integration.

3. API Integration

What is API Integration?

API Integration offers the most flexibility by allowing businesses to fully customize the integration of ClickPesa Payment Gateway functionalities into their existing systems. The gateway provides RESTful APIs to authenticate, initiate and manage business transactions. API’s provide businesses the ability to create highly customizable user experience that fits their unique requirements and infrastructure while staying compliant and secure.

Use Cases for API Integration:

Large Enterprises: Large organizations can integrate ClickPesa’s payment APIs with their existing systems to streamline payment processing and manage high transaction volumes.
Fintech Platforms: Companies building financial products such as wallets, peer-to-peer lending platforms, or multi-party payments will benefit from the flexibility and customization that APIs offer.
Marketplaces: Marketplaces that need to handle complex payment flows between buyers and sellers, including escrow services, can leverage APIs for full control over their transactions.

When to Use API Integration:

Full Control Over Payment Flow: If your business needs total control over the payment experience, including custom features like multi-party transactions or integrating with third-party systems, API Integration is the best fit.
Deep Integration with Internal Systems: API Integration is ideal for businesses that need payments tightly connected to internal systems, like accounting software or CRM tools.
Highly Customizable: If you require advanced customization and development flexibility, API Integration offers the highest degree of control.

When Not to Use API Integration:

Lack of Development Resources: If your business doesn’t have a dedicated technical team or the capacity to manage a custom integration, API Integration might be too complex.
Urgent Launch Needs: If you need to get payments up and running quickly, API Integration’s longer development time and resource requirements might not be suitable.

Development Considerations:

High-Level Technical Expertise: API Integration requires in-house development expertise, as it involves building a custom payment solution and maintaining the infrastructure. It’s a great option for businesses with the technical capacity to develop and manage a fully customized payment flow.
Security: Like Hosted Integration, API Integration relies on API keys. These must be carefully managed to avoid unauthorized access. For sensitive operations like payouts, additional layers of security, such as 2FA, are implemented.

Getting started:

API Integration is now in Beta testing. Reach out to tech@clickpesa.com for early access.

Choosing the Right Integration Method for Your Business

Selecting the right integration method depends on the size of your business, your technical capabilities, and your customization needs:

Embedded Integration: Ideal for businesses that need a fast-to-market solution with minimal setup and technical expertise. This option allows for a seamless, customizable payment experience. No Interaction with API’s, No Need to Create UI.
Hosted Integration: Best for companies prioritizing ease of use and minimal technical management. Hosted Integration is simple to implement and eliminates the need for handling payment data directly. Minimal Interaction with API’s, No Need to Create UI
API Integration: Suitable for large enterprises or businesses with dedicated development teams looking for full control and integration into their infrastructure. Full Interaction via API’s, Need to Create UI

At ClickPesa, we strive to provide flexible payment solutions that meet the needs of every business. Explore our Developers documentation today to understand the technicality and choose the integration method that fits your business requirements.

From Idea to Market: The Evolution of Flexbeats and its Product Development.

Benedict Steven — Wed, 02 Aug 2023 08:22:49 +0000

3 years ago (2020), an idea for marketplace to sell and buy beats was born. The name is Flexbeats, which was launched mid 2023 is a platform where music producers are able to sell their beats and music kits. It allows buyers to purchase beats online with different licenses. Visit https://flexbeats.studio to learn more about Flexbeats platform.

Origin of an idea

The story of Flexbeats began when a friend of mine (music producer) came up with an idea to create an app which he will use to sell his beats. The earliest version of that app can be found here, it didn't have a name yet, its no longer maintained and has only frontend.

Evolution of the idea

Over time life took over after finishing college and the idea was no longer in development until after I met new friends who has the same passion I had on software development. We shared couple of ideas that we could execute together and we thought it was a good idea to start a software company. During that time (2021) I mention Flexbeats and how we can make a backend to make it work, Bennett (Backend developer) suggested that instead of making a platform for one producer to sell their beats, We could make a whole marketplace for any producer to sell and buy music products. Thats was when we came up with Flexbeats name and Flexcode Labs name for a company. More on these names we talked about it on our pilot podcast.
We started actively building a web app since that time and we officially launched end of May, 2023.

Product Development

The first idea focused on a platform where one producer could showcase and sell their beats to interested buyers. In the early stages, the development process lacked a concrete design, and the team immediately jumped into development without a well-defined user interface. Unfortunately, this approach led to challenges and a less than optimal user experience. The beats were manually added to the platform, and the purchasing process was also manual, lacking the necessary innovation and simplicity.

As the team evolved their vision, the second idea emerged, expanding the platform to allow multiple producers to post their beats for sale. Learning from our past experiences, we started with a landing page design and later invested in a better user experience, in 2022. The incorporation of better design practices significantly enhanced the user interface and overall user experience, laying the foundation for the app's growth.

Throughout the development journey of the second idea, We had a dedicated team comprising our music producer, designer, frontend and backend developer, as well as a legal expert. This team collaborated to bring the vision to life. When a new feature was proposed, the team followed a Thorough validation process. We researched the required technologies, ensuring feasibility and legal compliance with the help of our in-house lawyer. This proactive approach ensured that each feature was carefully vetted before the design and development phases.

As the product matured, the team shifted to a more structured development flow, incorporating more tools such as dev-ops to ensure that development workflow is as seamless as possible. These changes allowed us to create a more streamlined and efficient development process, resulting in improved functionality and a seamless user experience. Additionally, we actively engaged with our producer, seeking feedback and testing new features to ensure they met the needs of both producers and buyers.

Challenges

The journey of developing Flexbeats was not without its fair share of challenges. Initially, during the idea initiation phase, we faced the challenge of juggling post-college responsibilities and other life activities that demanded our time and attention. This made it difficult to fully dedicate ourselves into development.

Even after refining the idea, we had other challenges. Each member of our team has full time job that requires our presence during regular workdays. We had to work on Flexbeats during night times and weekends which also hindered the progress.

Despite all these challenges, we remained committed to our vision and we finally launched the product.

Despite our progress, Flexbeats remains a work in progress, with many exciting features yet to be implemented. The company's dedication to continuous improvement and listening to our community's feedback positions us for further growth and success in the dynamic world of music production and distribution.

So, if you're a music producer looking to showcase your stuff or a beat lover searching for the perfect sound, hop onto Flexbeats. Let's rock this musical adventure together! 🎶😊

Create and deploy react components with bit.dev

Benedict Steven — Mon, 08 May 2023 06:22:59 +0000

React is one of the most popular JavaScript libraries for building user interfaces. One of the key benefits of React is its component-based architecture, which allows developers to create reusable UI components that can be shared across different projects.

Bit.dev is a platform that makes it easy to create and share React components.

There are several reasons why someone might need to use Bit.dev for their React components:

Reusability: Bit.dev allows developers to create and share reusable components across different projects and teams. This can greatly reduce development time and ensure consistency across projects.
Collaboration: Bit.dev provides tools for testing, versioning, and collaboration, making it easy for teams to work together on component development. This can help to improve code quality and reduce errors.
Scalability: Bit.dev is a distributed and scalable platform that can handle large-scale component-based development workflows. It provides a flexible and customizable workflow that can be adapted to the specific needs of different projects and teams.
Open-source community: Bit.dev has a thriving open-source community that contributes to the platform and creates new components. This can be a great resource for developers looking for inspiration or looking to contribute to open-source projects.
Integration: Bit.dev can integrate with other tools and platforms, such as Git and CI/CD pipelines, to create a seamless development workflow. This can help to streamline development processes and improve overall efficiency.

In this article, I'll walk you through the steps to create and deploy React components with Bit.dev.

To start creating components using bit, first we need to create accounts on bit.cloud.

Step 1: From the bit.cloud dashboard, create a scope, a place where you will be deploying your components.

Step 2: Install bit on your machine by following this set of commands

First install bvm



npm i -g @teambit/bvm

To verify that bvm is installed, run



bvm --version

if no bvm command is not found, follow this instructions

Step 3: Initialize your components project
Create new workspace by running



bit new react tasks-workspace --default-scope my-org.tasks-scope

Where:-
tasks-workspace: Workspace name
my-org: Organization / username
tasks-scope: default scope for the new components.

This by default will create a new workspace with components as a default scope.

Step 4: Create your first component.
To create your first component, cd tasks-workspace run



bit create react button

This will create a button component within components folder.
The created component will have a the following files

index.ts: Entry component file.
button.sx: Boiler plate for creating component.
button.spec.tsx: A file to write tests.
button.docs.mdx: A documentation file.
button.composition.tsx: A file for testing different variations of the component per creator's choice.

Run bit start to start the development server. Once the server is ready, on the browser, we should see this UI.
click on button component to open live preview of the created component.

Start editing the button component and preview changes on the browser.

In the component folder you can create multiple files such as stylesheet files, components files to support the main component. For now lets just make a button component work.



import React, { ReactNode } from 'react';

export type ButtonProps = {
  /**
   * a node to be rendered in the special component.
   */
  children?: ReactNode;
  /**
   * Onclick event
   */
  onClick?: () => void
};

export function Button({ children, onClick }: ButtonProps) {
  return (
    <button onClick={onClick}>
      {children}
    </button>
  );
}

Let's create two more components, title and input to complete a form with title, inputs and a button.

run



bit create react input

and



bit create react title

On title.tsx file in title folder add this code



import React, { ReactNode } from 'react';

export type TitleProps = {
  /**
   * a node to be rendered in the special component.
   */
  children?: ReactNode;
};

export function Title({ children }: TitleProps) {
  return <h1>{children}</h1>;
}

and on input.tsx in input folder add this code



import React, { CSSProperties, ChangeEvent } from 'react';

export type InputProps = {
  /**
   * label text
   */
  label: string;
  /**
   * input id
   */
  id?: string;
  /**
   * input type
   */
  type?: string;
  /**
   * on input change
   */
  onChange: (value: ChangeEvent<HTMLInputElement>) => void;
  /**
   * input value
   */
  value: string;
  /**
   * input style style
   */
  style?: CSSProperties;
};

export function Input({ label, id, type, onChange, value, style }: InputProps) {
  return (
    <label>
      <div>{label}</div>
      <input
        id={id}
        style={style}
        onChange={onChange}
        value={value}
        type={type}
      />
    </label>
  );
}

and on the input.composition.tsx add



import React, { useState } from 'react';
import { Input } from './input';

export const BasicInput = () => {
  const [value, setValue] = useState('');
  return (
    <Input
      label="Email"
      type="email"
      onChange={(e) => setValue(e.target.value)}
      value={value}
    />
  );
};

Update the docs and test on the live preview.

Step 5: Add test on the components.
bit uses jest under the hood to run react tests. Learn more about react testing here

Step 5: Use created components within your components project before deployment.

With bit, we can import other components within our components without deploying the library. how?
From the above created components, let's create a form component, call it login component which will include email and password inputs, submit button and title.

Run



bit create react login

and on login.tsx



import React, { useState } from 'react';
import { Input } from '@tasks-scope/components.input';
import { Title } from '@tasks-scope/components.title';
import { Button } from '@tasks-scope/components.button';

export type LoginProps = {
  onSubmit: (data: { email: string; password: string }) => void;
};

export function Login({ onSubmit }: LoginProps) {
  const [data, setData] = useState({
    email: '',
    password: '',
  });
  return (
    <form
      onSubmit={(e) => {
        e.preventDefault();
        onSubmit(data);
      }}
    >
      <Title>Welcome Back</Title>
      <Input
        value={data.email}
        onChange={(e) =>
          setData({
            ...data,
            email: e.target.value,
          })
        }
        label="Email"
      />
      <Input
        value={data.password}
        onChange={(e) =>
          setData({
            ...data,
            password: e.target.value,
          })
        }
        label="Password"
      />
      <Button>Submit</Button>
    </form>
  );
}

Now we have a working form component built with three other components.

Step 6: Install packages
There will be times that you will want to create a component but that component will need an external package to work, for instance one might need a styled-components package to create a component.
Run



bit install styled-components

This way one can use this package in any component they are creating

Step 7: Deploy your components

To deploy your library you need to login to bit cli,

run



bit login

This will open the browser and give you access to deploy your library.

Before deploying we need to tag all our components. Tagging components assigns new versions to our components.
run



bit tag

In .bitmap, we should see the new versions assigned to our new components.

To deploy the components, run



bit export

This will deploy your new component library.

To view your fresh components visit https://bit.cloud/your-username/tasks-workspace.

For an existing workspace when you want to edit your components or creating new components, first you will need to import all deployed components by running



bit import

And after making all changes, use the same process as we did while deploying components.

Step 8: Install and use your deployed components on your react project.

In your react project, install your components and start using them.

the first time you are installing your components in your project, you will need to configure your bit organization or username first by running



npm config set '@your-username:registry' https://node.bit.cloud

After the configuration you won't need to do that again in your projects.

Then run



npm i @your-username/components.login

Then you can start using your components as you used them in the composition files in your bit components.

Congratulations!!

Creating and deploying React components with Bit.dev is a powerful way to streamline your development workflow and make your components reusable across different projects. By following the steps outlined in this article, you can easily create, test, and share React components with other developers using the Bit.dev platform.

If you like this article, there are more like this in our blogs, follow us on dev.to/clickpesa, medium.com/clickpesa-engineering-blog and clickpesa.hashnode.dev

Happy Hacking!!

Why should you learn ReactJs in 2023?

Benedict Steven — Wed, 12 Apr 2023 11:50:01 +0000

Why should you learn ReactJs in 2023?

React is a library for creating web and native user interfaces. With react you can build your application by creating small pieces / components and combine them into page / screen or app.

React is a powerful JavaScript library that allows developers to build complex user interfaces with ease.

If you're a front-end developer looking to keep up with the latest trends and stay relevant in the industry or a newbie aspiring to become a developer, learning React is a must. In this article, we'll take a closer look at why React is such an important skill for front-end developers in 2023, and why you should consider adding it to your skills.

Technical benefits.

High Performance: React's virtual DOM allows for efficient rendering of changes, resulting in fast and responsive user interfaces.

React's virtual DOM allows for efficient rendering of changes, making it ideal for building fast and responsive user interfaces. This can lead to better user experiences, which can be a key differentiator in today's competitive market.
Reusable Components: React's component-based architecture encourages code reusability and maintainability, making it easier to build and maintain large-scale applications. This can save developers time and effort, allowing them to focus on more important aspects of their projects.
Versatile: React's ability to be used in a variety of contexts, including web applications, mobile apps, and desktop applications, makes it a valuable skill to have in today's diverse and constantly evolving tech landscape. This can give developers more flexibility and opportunities to work on a wider range of projects.
Strong Ecosystem: React has a large and active community, with a plethora of libraries and tools available to help developers build and maintain their projects.
Compatibility: React is compatible with a wide range of platforms and frameworks, making it easier to integrate with existing codebases. This can save developers time and effort, as well as make it easier to work on projects that use different technologies.
Future-Proofing: React is constantly evolving and improving, ensuring that developers who invest in learning it will be equipped to tackle the challenges of web development for years to come. This can give developers confidence in their skills and help them stay relevant in a rapidly changing industry.

General benefits.

Increased job opportunities: React is a widely used technology, so learning it can open up many job opportunities for developers.
Higher earning potential: Due to the high demand for React developers, they often earn higher salaries compared to developers who work with other technologies.
Improved collaboration: React's component-based architecture makes it easier for developers to collaborate on projects. This can lead to more efficient teamwork, as well as better communication and coordination between team members. This can be especially important for large-scale projects or remote teams.
Faster development: React's virtual DOM and reusable components can help developers build applications faster, since they can reuse existing code and easily make changes without having to rebuild the entire application.
Better user experiences: React's performance and ability to render changes quickly can lead to better user experiences, which is increasingly important in today's market. Applications that provide a seamless user experience are more likely to be successful and gain traction with users.
Enhanced problem-solving skills: Learning React requires developers to think creatively and solve problems in new ways. This can improve their problem-solving skills and help them become better developers overall. These skills can be applied to other areas of development and can help developers stay competitive in the ever-evolving tech industry.
Access to a strong community: React has a large and active community, which can provide developers with support, resources, and opportunities for collaboration and networking. This community can be valuable for developers at all stages of their careers, from beginners who are just starting out to experienced professionals who want to stay up-to-date with the latest developments in React development.

Learning React in 2023 is a smart investment for developers looking to stay ahead of the curve in the tech industry. With its wide range of benefits, React is a versatile and powerful technology that can help developers achieve their goals. Moreover, the technical benefits of React make it an ideal choice for building high-quality applications across multiple platforms. By investing time and effort into learning React, developers can enhance their skills and advance their careers. So, if you're looking to take your career to the next level in 2023 and beyond, learning React is definitely worth considering.

If you like this article there are more like this in our blogs, follow us on dev.to/clickpesa, medium.com/clickpesa-engineering-blog and clickpesa.hashnode.dev

Happy Hacking!!

Why should you use react query for your react app - part 2

Benedict Steven — Fri, 03 Mar 2023 08:33:42 +0000

...For the introduction to react-query and useQuery hooks, Read my previous post Part one

In my previous post we explored the introduction to react query and useQuery hook.

In this post we explore useMutation hook in data creation, edition and deletion.

We will use Free API for creating user, editing user info, viewing and deleting user. In order to use the free api above, you will need to login to get your access token for authorization.

Lets create a form that to create user info.
The required user info are name, gender, email and status.

const App = () => {
  const handleSubmit = (e) => {
    e.preventDefault();
    // submit user data
    const dataToSubmit = {
      name: e.target[0].value,
      email: e.target[1].value,
      gender: e.target[2].value,
      status: e.target[3].value,
    };
  };

  return (
    <div className="App">
      <form onSubmit={handleSubmit}>
        <label>
          Name:
          <input type="text" name="name" required placeholder="Name" />
        </label>
        <br />
        <label>
          Email:
          <input type="email" name="email" required placeholder="Email" />
        </label>
        <br />
        <label>
          Gender:
          <select
            name="gender"
            defaultValue=""
            required
            placeholder="Select gender"
          >
            <option disabled value="">
              -- select an option --
            </option>
            <option value="male">Male</option>
            <option value="female">Female</option>
          </select>
        </label>
        <br />
        <label>
          Status:
          <select
            name="status"
            defaultValue=""
            required
            placeholder="Select status"
          >
            <option disabled value="">
              -- select an option --
            </option>
            <option value="active">Active</option>
            <option value="inactive">Inactive</option>
          </select>
        </label>
        <br />
        <button>Create user</button>
      </form>
    </div>
  );
};

export default App;

Now that we can collect info, lets create our first user,
import useMutation from react-query

useMutation provides data and methods/callbacks to run and get data.

import { useMutation } from "react-query"

const App = () => {
 const {
   // responses and functions to call mutation
   data,
   error,
   isError,
   isIdle,
   isLoading,
   isPaused,
   isSuccess,
   mutate,
   mutateAsync,
   reset,
   status,
 } = useMutation(
   // the function to call an api (accepts variables)
   mutationFn, 
   // options and methods/callbacks
   {
     mutationKey,
     onError,
     onMutate,
     onSettled,
     onSuccess,
     retry,
     retryDelay,
     useErrorBoundary,
     meta,
   }
)

// this will run synchronous
 mutate(variables, {
   onError,
   onSettled,
   onSuccess,
 })

// this will return a promise
mutateAsync(variables, {
   onError,
   onSettled,
   onSuccess,
 })
}

Learn More

From the sample above, lets create our first user.

import axios from "axios";
import { useMutation } from "react-query";

const App = () => {
  const { data, error, isLoading, mutate } = useMutation(
    async (dataToSubmit) => {
      // call axios request
      const { data } = await axios.post(
        "https://gorest.co.in/public/v2/users?access-token=89945d7d4cea090a8135a824fa3100f5a057ee2c4bdf9c3b8ab01f7a20b16784",
        dataToSubmit,
        {
          headers: {
            "Content-Type": "application/json",
          },
        }
      );
      return data;
    }
  );

  const handleSubmit = (e) => {
    e.preventDefault();
    // submit user data
    const dataToSubmit = {
      name: e.target[0].value,
      email: e.target[1].value,
      gender: e.target[2].value,
      status: e.target[3].value,
    };
    mutate(dataToSubmit);
  };

  console.log(data, error);

  return (
    <div className="App">
      <form onSubmit={handleSubmit}>
        <label>
          Name:
          <input
            type="text"
            name="name"
            required
            disabled={isLoading}
            placeholder="Name"
          />
        </label>
        <br />
        <label>
          Email:
          <input
            type="email"
            name="email"
            required
            disabled={isLoading}
            placeholder="Email"
          />
        </label>
        <br />
        <label>
          Gender:
          <select
            name="gender"
            defaultValue=""
            required
            disabled={isLoading}
            placeholder="Select gender"
          >
            <option disabled value="">
              -- select an option --
            </option>
            <option value="male">Male</option>
            <option value="female">Female</option>
          </select>
        </label>
        <br />
        <label>
          Status:
          <select
            name="status"
            defaultValue=""
            required
            disabled={isLoading}
            placeholder="Select status"
          >
            <option disabled value="">
              -- select an option --
            </option>
            <option value="active">Active</option>
            <option value="inactive">Inactive</option>
          </select>
        </label>
        <br />
        <button disabled={isLoading}>
          {isLoading ? "Creating user" : "Create user"}
        </button>
      </form>
    </div>
  );
};

export default App;

Run the code above to create your first user. Congratulations on creating your first user 🎉.

Lets create a formal way to represent the flow, from creating a new user to viewing all users to viewing single user to editing single user and finally deleting single user. We will have mainly three screens,
First the screen for viewing all users - it will include a button to create new user and a list of all users.
Second is a screen we just created, for creating a single user ( we can make it available for editing user as well. )
Third is a screen for viewing single user with buttons to edit and delete user.

First install react-router-dom for easy routing. run

npm install react-router-dom

Then wrap your application in Browser router.
in main.jsx or index.jsx
with vite it will look like this

import React from "react";
import ReactDOM from "react-dom/client";
import { QueryClient, QueryClientProvider } from "react-query";
import { BrowserRouter as Router } from "react-router-dom";
import App from "./App";

const queryClient = new QueryClient();

ReactDOM.createRoot(document.getElementById("root")).render(
  <React.StrictMode>
    <QueryClientProvider client={queryClient}>
      <Router>
        <App />
      </Router>
    </QueryClientProvider>
  </React.StrictMode>
);

Lets create our pages

users.jsx page

import axios from "axios";
import React from "react";
import { useQuery } from "react-query";
import { Link } from "react-router-dom";

const Users = () => {
  const { data, isLoading, error, refetch } = useQuery({
    queryKey: ["FETCH_USERS"],
    queryFn: async () => {
      const { data } = await axios.get("https://gorest.co.in/public/v2/users", {
        headers: {
          Authorization:
            "Bearer 89945d7d4cea090a8135a824fa3100f5a057ee2c4bdf9c3b8ab01f7a20b16784",
        },
      });
      return data;
    },
  });

  if (isLoading) {
    return <p>Please Wait...</p>;
  }
  if (error) {
    return (
      <div>
        <p>{error?.message}</p>
        <button onClick={() => refetch()}>Retry</button>
      </div>
    );
  }

  return (
    <div>
      <div
        style={{
          marginBottom: "1rem",
        }}
      >
        <Link to={"/mutate-user"}>Create New User</Link>
      </div>
      <ul>
        {data?.map((user) => (
          <li key={user?.id}>
            <Link to={`/user/${user?.id}`}>{user?.name}</Link>
          </li>
        ))}
      </ul>
    </div>
  );
};

export default Users;

user.jsx

import axios from "axios";
import React from "react";
import { useMutation, useQuery } from "react-query";
import { Link, useNavigate, useParams } from "react-router-dom";

const User = () => {
  // navigation hook
  const navigate = useNavigate();

  // get url params
  const params = useParams();
  const id = params?.id;

  const { data, isLoading, error, refetch } = useQuery({
    queryKey: ["FETCH_USER", id],
    queryFn: async () => {
      const { data } = await axios.get(
        `https://gorest.co.in/public/v2/users/${id}`,
        {
          headers: {
            Authorization:
              "Bearer 89945d7d4cea090a8135a824fa3100f5a057ee2c4bdf9c3b8ab01f7a20b16784",
          },
        }
      );
      return data;
    },
  });

  //   delete mutation
  const {
    error: mutateError,
    isLoading: mutateLoading,
    mutateAsync,
  } = useMutation(async () => {
    // call axios request
    const { data } = await axios.delete(
      `https://gorest.co.in/public/v2/users/${id}?access-token=89945d7d4cea090a8135a824fa3100f5a057ee2c4bdf9c3b8ab01f7a20b16784`,
      {
        headers: {
          "Content-Type": "application/json",
        },
      }
    );
    return data;
  });

  if (isLoading) {
    return <p>Please Wait...</p>;
  }
  if (error) {
    return (
      <div>
        <p>{error?.message}</p>
        <button onClick={() => refetch()}>Retry</button>
      </div>
    );
  }

  return (
    <div>
      <div
        style={{
          display: "flex",
          gap: "1rem",
          marginBottom: "1rem",
        }}
      >
        <Link to={`/mutate-user?id=${id}`}>Edit User</Link>
        <button
          onClick={async () => {
            await mutateAsync();
            // if success delete redirect to all users page
            navigate("/");
          }}
        >
          {mutateLoading ? "Deleting user" : "Delete User"}
        </button>
      </div>
      {mutateError && (
        <p
          style={{
            color: "red",
          }}
        >
          {mutateError?.message}
        </p>
      )}
      <div>
        <p>Name: {data?.name}</p>
        <p>Email: {data?.email}</p>
        <p>Gender: {data?.gender}</p>
        <p>Status: {data?.status}</p>
      </div>
    </div>
  );
};

export default User;

mutate-user.jsx

import axios from "axios";
import { useEffect } from "react";
import { useMutation, useQuery } from "react-query";
import { useNavigate, useSearchParams } from "react-router-dom";

const MutateUser = () => {
  // navigate hook
  const navigate = useNavigate();
  // find ID if present
  const [searchParams] = useSearchParams();
  const id = searchParams.get("id");

  //   get user if there is an ID
  const {
    data: userData,
    isLoading: userLoading,
    error: userError,
    refetch,
  } = useQuery({
    queryKey: ["FETCH_USER", id],
    queryFn: async () => {
      const { data } = await axios.get(
        `https://gorest.co.in/public/v2/users/${id}?access-token=89945d7d4cea090a8135a824fa3100f5a057ee2c4bdf9c3b8ab01f7a20b16784`,
        {
          headers: {
            Authorization:
              "Bearer 89945d7d4cea090a8135a824fa3100f5a057ee2c4bdf9c3b8ab01f7a20b16784",
          },
        }
      );
      return data;
    },
    enabled: !!id,
  });

  const { data, error, isLoading, mutateAsync } = useMutation(
    async (dataToSubmit) => {
      // call axios request
      // call post if its user creation and put if its user editing
      const { data } = await axios[id ? "put" : "post"](
        `https://gorest.co.in/public/v2/users${
          // pass id if editing user
          id ? "/" + id : ""
        }?access-token=89945d7d4cea090a8135a824fa3100f5a057ee2c4bdf9c3b8ab01f7a20b16784`,
        dataToSubmit,
        {
          headers: {
            "Content-Type": "application/json",
          },
        }
      );
      return data;
    }
  );

  // navigate to user page when request was successfully
  useEffect(() => {
    if (data) {
      // redirect to user page
      navigate(`/user/${data?.id}`);
    }
  }, [data]);

  if (userLoading) {
    return <p>Please Wait...</p>;
  }

  if (userError) {
    return (
      <div>
        <p>{userError?.message}</p>
        <button onClick={() => refetch()}>Retry</button>
      </div>
    );
  }

  const handleSubmit = async (e) => {
    e.preventDefault();
    // submit user data
    const dataToSubmit = {
      name: e.target[0].value,
      email: e.target[1].value,
      gender: e.target[2].value,
      status: e.target[3].value,
    };
    await mutateAsync(dataToSubmit);
  };

  return (
    <div className="App">
      <form onSubmit={handleSubmit}>
        <label>
          Name:
          <input
            type="text"
            name="name"
            // prefill data if exists
            defaultValue={userData?.name ?? ""}
            required
            disabled={isLoading}
            placeholder="Name"
          />
        </label>
        <br />
        <label>
          Email:
          <input
            type="email"
            name="email"
            // prefill data if exists
            defaultValue={userData?.email ?? ""}
            required
            disabled={isLoading}
            placeholder="Email"
          />
        </label>
        <br />
        <label>
          Gender:
          <select
            name="gender"
            // prefill data if exists
            defaultValue={userData?.gender ?? ""}
            required
            disabled={isLoading}
            placeholder="Select gender"
          >
            <option disabled value="">
              -- select an option --
            </option>
            <option value="male">Male</option>
            <option value="female">Female</option>
          </select>
        </label>
        <br />
        <label>
          Status:
          <select
            name="status"
            // prefill data if exists
            defaultValue={userData?.status ?? ""}
            required
            disabled={isLoading}
            placeholder="Select status"
          >
            <option disabled value="">
              -- select an option --
            </option>
            <option value="active">Active</option>
            <option value="inactive">Inactive</option>
          </select>
        </label>
        <br />
        {error && (
          <p
            style={{
              color: "red",
            }}
          >
            {error?.message}
          </p>
        )}
        <br />
        <button disabled={isLoading}>
          {!id && <>{isLoading ? "Creating user..." : "Create user"}</>}
          {id && <>{isLoading ? "Editing user..." : "Edit user"}</>}
        </button>
      </form>
    </div>
  );
};

export default MutateUser;

Then lets setup our routing system

in the App.jsx

import React from "react";
import { Route, Routes } from "react-router-dom";
import MutateUser from "./pages/mutate-user";
import User from "./pages/user";
import Users from "./pages/users";

const App = () => {
  return (
    <div>
      <Routes>
        <Route element={<Users />} path="/" />
        <Route element={<User />} path="/user/:id" />
        <Route element={<MutateUser />} path="/mutate-user" />
      </Routes>
    </div>
  );
};

export default App;

Congratulations 🎉, we have created CRUD application with react-query Without managing any state ourselves Phew.

If you missed the introduction part and useQuery part, read my previous post

If you like this article there are more like this in our blogs, follow us on dev.to/clickpesa, medium.com/clickpesa-engineering-blog and clickpesa.hashnode.dev

Happy Hacking!!

Why should you use react query for your react app

Benedict Steven — Sat, 18 Feb 2023 20:47:10 +0000

React query provides hooks for managing server data in react application.

Imagine you are creating an application that receives data from an API and displays that data. How will you handle that data? State management yes!

With normal flow you will have to write logic to fetch data, write reducers, caching logic, retry (it could be more… depending on the application).

You will be surprised with the number of codes you will need using react query.

Among-st many things, react-query offers server data management, caching, re-fetching, mutation. Learn more.

To get a glimpse of react query lets create a simple blog application using react query and react.

Install react-query and axios in your react app.

npm install react-query axios

Then wrap your entire provider in react query provider

in index.jsx

import React from "react";
import ReactDOM from "react-dom/client";
import { QueryClient, QueryClientProvider } from "react-query";
import App from "./App";

const queryClient = new QueryClient();

ReactDOM.createRoot(document.getElementById("root")).render(
  <React.StrictMode>
    <QueryClientProvider client={queryClient}>
      <App />
    </QueryClientProvider>
  </React.StrictMode>
);

Lets do the fetching first

in App.jsx
import useQuery from react-query

import { useQuery } from "react-query";

Create a first api request to fetch sample blog posts.

import { useQuery } from "react-query";

const App = () => {
  const { data, isLoading, error } = useQuery({
    queryKey: ["FETCH_POSTS"],
    queryFn: async () => {
      const { data } = await axios.get(
        "https://jsonplaceholder.typicode.com/posts"
      );
      return data;
    },
  });
  console.log(data);
  return <div className="App">Hello world</div>;
};

export const App

NB: useQuery is a hook and can only be called inside the react function component

from the simple example above, data will hold any data success response from the api call, error will hold error data, isLoading will hold the loading status (true/ false). The returned data will be cached after initial success request, whenever you call the same api via use query in another component, the data will persist that you won't need to store them in any state.

QueryKey keeps track of the memory required to handle data caching, When useQuery is used, it checks the cache first using query key and if none is found, then it makes actual API request, if cache is present, it returns the existing data. Its can be array of a simple string to array of complex data depending on application complexity.

Lets display the fetched data and allow user to view single post.

const App = () => {
  return (
    <div className="App">
      {/* display data */}
      <Posts />
    </div>
  );
};

// all posts
const Posts = () => {
  const { data, isLoading, error, status } = useQuery({
    queryKey: ["FETCH_POSTS"],
    queryFn: async () => {
      const { data } = await axios.get(
        "https://jsonplaceholder.typicode.com/posts"
      );
      return data;
    },
  });
  return (
    <div>
      {isLoading && <div>Please wait...</div>}
      {data &&
        data.map((post) => (
          <PostCard
            key={post.id}
            post={post}
          />
        ))}
    </div>
  );
};

// Post Card
const PostCard = ({ post }) => {
  return (
    <a href="#">
      <p>{post.title}</p>
    </a>
  );
};

This will display all the data from the, lets set a way to view single post in the same screen. React router can be used but for this case we can use state to render all posts and single post on post clicking.

const App = () => {
  const [selectedPost, setSelectedPost] = useState(-1);
  return (
    <div className="App">
      {/* display data */}
      {selectedPost === -1 && <Posts selectPost={(id) => setSelectedPost(id)} />}
      {/* add a back button on viewing single post */}
      {selectedPost && (
        <a href="#" onClick={() => setSelectedPost(-1)}>
          Back
        </a>
      )}
      {/* viewing single post details */}
      {selectedPost > -1 && <Post id={selectedPost} />}
    </div>
  );
};

// all posts
const Posts = ({selectPost) => {
  const { data, isLoading, error, status } = useQuery({
    queryKey: ["FETCH_POSTS"],
    queryFn: async () => {
      const { data } = await axios.get(
        "https://jsonplaceholder.typicode.com/posts"
      );
      return data;
    },
  });
  return (
    <div>
      {isLoading && <div>Please wait...</div>}
      {data &&
        data.map((post) => (
          <PostCard
            key={post.id}
            post={post}
            onClick={() => selectPost(post.id)}
          />
        ))}
    </div>
  );
};


// Post Card
const PostCard = ({ post, onClick }) => {
  return (
    <a href="#" onClick={onClick}>
      <p>{post.title}</p>
    </a>
  );
};

const Post = ({ id }) => {
  return <div>Hello post</div>;
};

Now we should be able to click and view a single post and go back to viewing all posts.

Lets fetch data on a <Post /> component.

const Post = ({ id }) => {
  const { data, isLoading, error, status } = useQuery({
    queryKey: ["FETCH_POST", id],
    queryFn: async () => {
      const { data } = await axios.get(
        `https://jsonplaceholder.typicode.com/posts/${id}`
      );
      return data;
    },
  });

  return (
    <div>
      {isLoading && <div>Fetching post...</div>}
      {data && (
        <div>
          <h3>{data.title}</h3>
          <p>{data.body}</p>
        </div>
      )}
    </div>
  );
};

Note that in query key, We added id, id is unique for each post and helps to keep memory in the cache for that particular post we just viewed, clicking the same post again won't make an API call, instead will return the cached data.

For a case where we don't need cache, and every time user visits the component or page, we want to make an actual request, we can prevent cache by adding an cacheTime as an option in useQuery params.

const Post = ({ id }) => {
  const { data, isLoading, error, status } = useQuery({
    queryKey: ["FETCH_POST", id],
    queryFn: async () => {
      const { data } = await axios.get(
        `https://jsonplaceholder.typicode.com/posts/${id}`
      );
      return data;
    },
    cacheTime: 0,
  });

  return (
    <div>
      {isLoading && <div>Fetching post...</div>}
      {data && (
        <div>
          <h3>{data.title}</h3>
          <p>{data.body}</p>
        </div>
      )}
    </div>
  );
};

This will run every time a post is visited, even the one which was already visited before.

Another cool thing we can do is adding refetch button. Assume you visit a page which returns an error that data fetching failed, you have no choice but to refresh the page. Well you can add a refetch button and use refetch provided by react query out of the box, lets see how we can utilize that

const Post = ({ id }) => {
  const { data, isLoading, error, status, isRefetching, refetch } = useQuery({
    queryKey: ["FETCH_POST", id],
    queryFn: async () => {
      const { data } = await axios.get(
        `https://jsonplaceholder.typicode.com/posts/${id}`
      );
      return data;
    },
    cacheTime: 0,
  });

  return (
    <div>
      {(isLoading || isRefetching) && <div>Fetching post...</div>}
      {data && (
        <div>
          <h3>{data.title}</h3>
          <p>{data.body}</p>
        </div>
      )}
      {error && <p>{error.message}</p>}
      {error && <button onClick={refetch}>Refetch</button>}
    </div>
  );
};

We can also enable or disable data fetching using enable option. When the query is disabled no fetching will be done until it is enabled, this feature can be used when implementing lazy query (queries that are triggered by user action.
Lets see an example of this. In the post component, lets say we want user to trigger initial fetching by clicking something.

const Post = ({ id }) => {
  const [enabled, setEnabled] = useState(false);
  const { data, isLoading, error, status, isRefetching, refetch } = useQuery({
    queryKey: ["FETCH_POST", id],
    queryFn: async () => {
      const { data } = await axios.get(
        `https://jsonplaceholder.typicode.com/posts/${id}`
      );
      return data;
    },
    cacheTime: 0,
    enabled,
  });

  return (
    <div>
      {!data && !error && (
        <button onClick={() => setEnabled(true)}>Fetch Post</button>
      )}
      {(isLoading || isRefetching) && <div>Fetching post...</div>}
      {data && (
        <div>
          <h3>{data.title}</h3>
          <p>{data.body}</p>
        </div>
      )}
      {error && <p>{error.message}</p>}
      {error && <button onClick={refetch}>Refetch</button>}
    </div>
  );
};

Now every time user clicks to view a single post, they will have to click Fetch button to load post details. This is useful especially on search screen where you only allow fetching when user search something.

There are more options on useQuery hook that might help in your project such as refetchOnWindowFocus, refetchOnMount (By default these two are true).

Other options include refetchInterval specifies at with interval you want to be pooling your data (in milliseconds).
React-query works best with pagination as well as fetching and re-fetching data on background.

React query provides useMutation hook that provides data creation, edition and deletion. In my next post we'll cover how to mutate data with useMutation hook.

If you are using GraphQL API, the best alternative to react-query is Apollo Client although react-query can also be used with GraphQL.

If you like this article there are more like this in our blogs, follow us on dev.to/clickpesa, medium.com/clickpesa-engineering-blog and clickpesa.hashnode.dev

Happy Hacking!!

Software Development: Why should you learn by building?

Benedict Steven — Thu, 22 Dec 2022 07:01:58 +0000

Software Development: Why should you learn by building?

--- “Tutorials are cool, but did you know learning by building is the coolest and best way to learn?!”

Learning by building is a learning method/technique which focuses on building real-world projects

Building projects is the best way to learn — but you don’t have to dive straight into creating a project that feels impossible to start, let alone finish. It is best if you get enough knowledge about a particular technology to get you somewhere on the project you are building.

Advantages of learning by building

Problem-solving skills - Problem-solving is a skill of its own and learning it requires facing real problems. As a developer, building projects challenge you and you will face a lot of problems that will sharpen your skills. Plus these skills can be applied not only in development but in real-life problems as well, well except undo and redo actions (Just Joking)
Creative and critical thinking - While building projects, stuff like thinking about adding new features, making existing features more awesome, thinking about how the user is gonna use your application, and more stuff always come up and sharpen critical and creative thinking.
Project management skills - Creating a project from start to somewhere/finish whether with a team or alone is a skill of its own. Knowing which features to ship, and which features should wait (prioritization) etc.
Self-confidence - Knowing that you can create a certain feature using a certain technology usually makes you feel like you can learn anything and build with it. That is self-confidence.
In-depth knowledge - Being critical, and solving problems usually leads to getting better knowledge about something you are learning.
Portfolio building - The more projects you build, the better the portfolio. Most of the projects that got me a job were built when I was learning.
A sense of satisfaction - When coding, we face a lot of issues ( bugs ) all the time, but when you manage to make a feature work there is usually a sense of satisfaction and this is what we can call small wins; In my previous article I mentioned that one of the best ways to learn is to celebrate small wins, these don’t come if you follow a tutorial step by step ( tutorial hell ) without building

How can you learn by building as a beginner?

As a beginner, how can I start building? One might ask,...

Most people who learn to code have a project idea in mind that they can’t wait to start building once they finish learning or after grasping several useful coding concepts while learning.

Here are several ways that worked for me;

In every step you are learning, there is something you can build as a beginner in your project idea, can be a full feature or part of it and it doesn’t have to be perfect.

I started learning React and while learning I started building my first portfolio, I had no experience with React and I just learned HTML, CSS and javascript. I was building one feature at a time after learning something in react that I could use. By that time I was still a student, but one year after I finished college I got my first job as a frontend developer. Today React pays my bills.
If you are following a simple project-building tutorial, instead of following every step, you can improvise and add your own features, or functionalities.

When I started seriously learning to code I had one big idea. I didn't have enough skills. I had to buy a course on Udemy which was a tutorial for building a similar project to my idea. I bought it and while following along I twisted several features to match my ideas.
Building projects with teams, Teams can include all beginners or beginners and mid/senior developers. Either way, it's a great way to learn development. Having a senior in a team helps a lot to speed up the process because they usually act like mentors but usually beginners end up learning less.

All beginner's team projects usually have slow progress and most of the time they end up neglected by the team members. But when conducted well, beginners usually end up learning more than normal.

One of the problems that arise during the learn by building stage is finding project ideas. Most of the ideas we usually come up with when we start coding are way too complex for beginners. To begin with, don’t worry, there are varieties of ideas for beginners out there, you can use a project from the tutorial you are following, or a simple google search on project ideas for beginner learning technology.name will provide you with several ideas that you may find useful in your journey.

If you like this article there are more like this in our blogs, follow us on dev.to/clickpesa, medium.com/clickpesa-engineering-blog and clickpesa.hashnode.dev

Happy Hacking!!

Start your journey as a software engineer - My experience from studying water resources and irrigation to software engineering

Benedict Steven — Fri, 25 Nov 2022 08:53:10 +0000

Start your journey as a software engineer - My experience from studying water resources and irrigation engineering to software engineering

Introduction

Software development is one of the highly in-demand as well as high-paying jobs in the world. If you search in-demand jobs or high-paying jobs in the world you should be able to see software programming ( or related terms in the results ). That's one of the advantages of being a software engineer.

Software engineer is a person who applies the principles of software engineering to design, develop, maintain, test, and evaluate computer software.

Software engineering is the process of analyzing user needs and designing, constructing, and testing end-user applications that will satisfy these needs through the use of software programming languages.

Why software engineering

Requires only access to the internet and a computer to learn ( free of charge ), there are a lot of resources online to learn about software development and you can start from zero computer knowledge to being a senior engineer.
A software engineer can work from anywhere around the world ( work from home )

If you love to work from anywhere this is a career for you, but it usually involves less time on the field and more time on the desk.
Higher Pay is one of the greatest advantages of Software Engineering.

In US the software engineer average annual salary is around $70k.
Most of big company founders were / are developers.

Elon Musk, Mark Zuckerburg, Bill Gates, Larry Page and many more billionaires started as developers and through software knowledge they created products and founded the biggest companies in the world. Most of the startups in today's market are being founded by software developers.

Why? Because in software engineering, sky's the limit, you can create small to biggest software which not only solves day to day problems, but also can make you a lot of money.

How to become a software engineer? From my experience.

Here is a short story of how I became a software engineer.

I studied water resources and irrigation engineering. I first started to use a computer when I joined college in my first year so I didn’t have a lot of experience in anything computer.

I bought my first computer the same year.

In the second year I was inspired by a friend of mine who was studying computer engineering to start learning programming. I started with C++ and I finished a certain online course and I wasn’t able to create any program from what I learned and gave up until when I was in third year when I was going through online articles and resumed to learning well, this time I started by choosing what my future will look like in this field, and what I wanted to create or be. So I picked HTML language and now I do software for a living. Am not there yet but I’m still learning to become better everyday.

From my journey I picked these steps to become a software engineer.

Be inspired

There is a lot of inspiration out there, for any field usually people are inspired by a certain factor such as money, hobby, people etc. Uninspired professionals usually tend to get bored since they don’t have any interest in the field they are in and end up underperforming.

Pick a field / what you want to achieve

Where do you want to see yourself working? What are you passionate about?

These are very important questions to ask yourself before you join any field.

Learn how to learn

After I restarted learning programming, one of the courses I learned was Learn how to learn from OpenClassrooms. From this course I learned a lot about how to learn anything with ease. One of the very important subjects is how you are learning, that defines whether you will make it or lose.

Start learning

Choose a mentor, or go solo, I went solo and I tell you that it was kinda a long way than having a mentor to guide you during the learning phase.

Choose a language - There are a lot of languages out there but select a language based on the field you chose, for instance if you choose a web development field then the language that you will need will be HTML, CSS, JavaScript.

Choose a platform or course which you will be following in your early days. Having a lot of courses in the same language as a beginner will cause a lot of mix ups and it's hard to know your progress.

Consistency and patience

Consistency is carrying out something the same way, or something staying the same as it's achieved in a particular way.

Being a good software engineer doesn’t happen overnight, there is a lot of hours , failures, struggles that you will go through to get there, it's easy to give up and you will never know if you would\d have made it if you gave up, you need to keep the same attitude, throughout your learning process

Speaking of keeping the same attitude you also need to be patient, Success doesn't come overnight. You don’t learn html today and create a perfect website like facebook tomorrow. Take small steps, don’t skip.

Don’t be afraid to ask for help, don't be stuck and stay silent, this is one of the reasons to have a mentor so you don't get stuck.

You already learned how to learn, you should know your learning style, don’t compare yourself to anyone, everyone has their own learning style, learn at your own pace and you will get there in the best way possible.

Every developer/engineer at one time doubted themselves on whether they are good enough. You are not alone. This is what is called imposter syndrome

There are multiple ways to deal with it such as

a. Talk about it with your mentor or anyone close to you
b. Don’t try to be perfect
c. Celebrate small wins
d. Be kind to yourself
e. Never compare yourself with other people

Every now and then you will be experiencing burnouts, burnout is a state of physical and emotional exhaustion. This reduces productivity and achievements. Several symptoms of burnout include feeling tired or drained most of the time, feeling helpless, trapped and/or defeated, feeling detached/alone in the world, having a cynical/negative outlook, self-doubt, procrastinating and taking longer to get things done and feeling overwhelmed.

How to deal with burnout?

a. Spending some time away from screen and blend in the real world,
b. Find a hobby
c. Try relaxing activities
d. Get some sleep
e. Seek support

Don’t stuck in tutorial hell (Learn by building and keep on building)

Most learners end up stuck in tutorial hell where they just follow one tutorial after another and they never get anywhere.

During my learning journey on each step that I learned something I would use that knowledge to add up on what I have already built and apart from gaining more knowledge I also got to have several projects under my name.

Celebrate small wins

Whenever you achieve something no matter how small it is, celebrate it, it's a win, celebrating wins. Don't get discouraged by failures and never be afraid to fail, you will only get better.

Don’t let others discourage you in any way nor should you compare yourself with anyone else. You should only compare your today’s self to your yesterday’s self. That should matter.

Starting a journey in any field is not easy but if done right it is worth it, I believe anyone can be a software engineer regardless of what they are or do now.

If you like this article there are more like this in our blogs, follow us on dev.to/clickpesa, medium.com/clickpesa-engineering-blog and clickpesa.hashnode.dev

Happy Hacking!!

Create a react app that uses stellar blockchain to send and receive funds.

Benedict Steven — Tue, 11 Oct 2022 20:17:25 +0000

Introduction

What is blockchain?

Blockchain is a distributed database or ledger that is shared among the nodes of a computer network.

What is stellar blockchain?

Stellar is a payment protocol based on the distributed ledger technology. It allows quick, cross-border transactions between any pair of currencies.
It is among the top 10 most popular blockchains and it is performing well in the cryptocurrency market.

According to their website, Stellar blockchain “is a platform that connects banks, payment systems, and people” and is intended to “move money quickly, reliably, and at almost no cost.”

Stellar was made to support digital representations of any currency,
Native cryptocurrency for stellar is Stellar lumen (XLM) that powers the entire range of operations on the blockchain network.

Lumen is considered a stable coin since it can’t be minted and nearly 20 Billion lumens are out in the open market and is only increased by 1% annually.

Introduction to Stellar sdk

Stellar Software Development Kit is a library that lets you interact with stellar blockchain in your preferred language.
Currently stellar maintains JavaScript, Java, and Go SDK, the rest of SDKs are maintained by a community of developers. In this article we will look into Javascript Stellar SDK
Javascript Stellar SDK is a Javascript library for communicating with a Stellar Horizon server. It is used for building Stellar apps either on Node.js or in the browser.

Integrating Stellar SDK with reactjs

Create react app using

npx create-react-app stellar

Navigate to project folder and install stellar sdk package, run

npm install stellar-sdk

Now we have everything we need, let’s create magic.
What does our end product do?
A- Create new stellar wallets (non-custodial wallet)
B- Allow user to enter wallet keys (public and secret keys)
C- Fetch wallet details and balances
D- Send funds to any blockchain
E- Receive funds from any blockchain

Wallet creation

Stellar wallets, just like other wallets, contain addresses (public key) and secret key.
Public key is the key that can be shared to anyone and can be used by anyone to verify your account and your transactions. Secret key is like a password, only the wallet owner uses it to perform different wallet operations such as sending funds to other wallets.

Before account creating we need to create wallet keys

import StellarSdk from "stellar-sdk";

// create new and unique key pair
const pair = StellarSdk.Keypair.random();

// public key
pair.publicKey();

// private key
pair.secret();

A valid keypair, however, does not make an account: in order to prevent unused accounts from bloating the ledger, Stellar requires accounts to hold a minimum balance of 1 XLM before they actually exist. Until it gets a bit of funding, your keypair doesn't warrant space on the ledger.
In a live environment the next step should be acquiring XLM to activate it. On the test network, we can run the following function with the public key we created and get 10,000 XLM.

export async function createWallet() {
  try {
    const response = await fetch(
      `https://friendbot.stellar.org?addr=${encodeURIComponent(publicKey)}`
    );
    const data = await response.json();
        return {
          …data,
          secretKey: pair.secret()
        }
    } catch (e) {
        return e;
  }
}

Congratulations, you have created your first wallet.
Lets integrate this with react,
In the src folder create a file, call it stellar.js where we will put all our stellar operations.
In the stellar.js file put all the codes above. In App.jsx import createWallet function, create a button that calls createWallet onClick ie.

import { useState } from "react";
import { createWallet } from "./stellar";

const App = () => {
  const [wallet, setWallet] = useState({
    publicKey: "",
    secretKey: "",
  });

  return (
    <div>
      {/* Conditional rendering */}
      {!wallet.publicKey ? (
        <button
          onClick={async () => {
            const data = await createWallet();
            if (data?.source_account) {
              setWallet({
                ...wallet,
                publicKey: data.source_account,
                secretKey: data.secretKey,
              });
            }
          }}
        >
          Create wallet
        </button>
      ) : (
        <div>{wallet.publicKey}</div>
      )}
    </div>
  );
};

export default App;

When a user clicks the button after a moment they should see the wallet public key displaying on their browser.

Lets allow users to enter their wallet details as well if they already have stellar accounts.

import { useState } from "react";
import { createWallet } from "./stellar";

const App = () => {
  const [loading, setLoading] = useState(false);
  const [wallet, setWallet] = useState({
    publicKey: "",
    secretKey: "",
  });
  return (
    <div>
      {/* Conditional rendering */}
      {!wallet.publicKey ? (
        <>
          {/* new user */}
          <button
            onClick={async () => {
              const data = await createWallet();
              setLoading(true);
              if (data?.source_account) {
                setWallet({
                  ...wallet,
                  publicKey: data.source_account,
                  secretKey: data.secretKey,
                });
              }
              setLoading(false);
            }}
            disabled={loading}
          >
            Create wallet
          </button>

          {/* existing user */}
          <h2>Or do you already have an account?</h2>
          <form
            onSubmit={async (e) => {
              e.preventDefault();
              setLoading(true);
              if (walletKeys.privateKey && walletKeys.publicKey) {
                if (newAccount?.balances) {
                  setWallet({
                    ...wallet,
                  });
                }
              }
              setLoading(false);
            }}
          >
            <div>
              <label htmlFor="publicKey">Public Key</label>
              <br />
              <input
                type="text"
                name="publicKey"
                onChange={(e) =>
                  setWallet({
                    ...wallet,
                    publicKey: e.target.value,
                  })
                }
              />
            </div>
            <div>
              <label htmlFor="publicKey">
                Private Key "Enter at your own risk"
              </label>
              <br />
              <input
                type="password"
                name="privateKey"
                onChange={(e) =>
                  setWallet({
                    ...wallet,
                    secretKey: e.target.value,
                  })
                }
              />
            </div>
            <button disabled={loading}>Submit</button>
          </form>
        </>
      ) : (
        <div>{wallet.publicKey}</div>
      )}
    </div>
  );
};

export default App;

Now that we have wallet details by creating a new wallet / allowing users to enter their details, lets load wallet balances and display it on the app.

In stellar.js, use stellar sdk to load stellar horizon server, and create a function that loads account details ie.

const server = new StellarSdk.Server("https://horizon-testnet.stellar.org");

// get wallet details
export async function getAccount(publicKey) {
  try {
    const account = await server.accounts().accountId(publicKey).call();
    return account;
  } catch (error) {
    return error;
  }
}

Create another, call it Account in Account.jsx, this will be used to load and display wallet details when the wallet exists.
In this file, import getAccount from stellar.js

import { useEffect } from "react";
import { useState } from "react";
import { getAccount } from "./stellar";

const Account = ({ wallet }) => {
  const [loading, setLoading] = useState(false);
  const [walletDetails, setWalletDetails] = useState(null);

  const fetchDetails = async () => {
    setLoading(true);
    const data = await getAccount(wallet?.publicKey);
    if (data?.balances) {
      setWalletDetails(data);
    }
    setLoading(false);
  };

  // fetch wallet details
  useEffect(() => {
    fetchDetails();
  }, [wallet]);

  return (
    <div>
      {loading ? (
        <p>Please Wait</p>
      ) : (
        <div>
          {/* display wallet balances */}
          <p>Your Balance: {walletDetails?.[0]?.balance} XLM</p>
          <p>Wallet Address: {wallet?.publicKey}</p>
        </div>
      )}
    </div>
  );
};

export default Account;

In App.jsx, import Account and

…
<Account wallet={wallet} />
…

Now that we can display wallet balance and public key, you can use the displayed address to deposit funds to your wallet from other accounts or blockchains. For testing we can use Stellar Laboratory to get free lumens.

For the final part of this article let's look at how we can use our wallets to send funds from the app we created.
For this we’ll need a destination wallet, and a secret key from the sending wallet which we already have.

In the stellar.js file, create another function that runs when user sends funds

export async function sendFunds(destinationID, secretKey, amount) {
  try {
    const sourceKeys = StellarSdk.Keypair.fromSecret(secretKey);
    let transaction;
    server
      // checks if destination account exists
      .loadAccount(destinationID)
      // If the account is not found, surface a nicer error message for logging.
      .catch(function (error) {
        if (error instanceof StellarSdk.NotFoundError) {
          throw new Error("The destination account does not exist!");
        } else return error;
      })
      // If there was no error, load up-to-date information on your account.
      .then(function () {
        return server.loadAccount(sourceKeys.publicKey());
      })
      .then(function (sourceAccount) {
        // Start building the transaction.
        transaction = new StellarSdk.TransactionBuilder(sourceAccount, {
          fee: StellarSdk.BASE_FEE,
          networkPassphrase: StellarSdk.Networks.TESTNET,
        })
          .addOperation(
            StellarSdk.Operation.payment({
              destination: destinationID,
              // Because Stellar allows transaction in many currencies, you must
              // specify the asset type. The special "native" asset represents Lumens.
              asset: StellarSdk.Asset.native(),
              amount: amount.toString(),
            })
          )
          // A memo allows you to add your own metadata to a transaction. It's
          // optional and does not affect how Stellar treats the transaction.
          .addMemo(StellarSdk.Memo.text("Test Transaction"))
          // Wait a maximum of three minutes for the transaction
          .setTimeout(180)
          .build();
        // Sign the transaction to prove you are actually the person sending it.
        transaction.sign(sourceKeys);
        // And finally, send it off to Stellar!
        return server.submitTransaction(transaction);
      })
      .then(function (result) {
        return result;
      })
      .catch(function (error) {
        // If the result is unknown (no response body, timeout etc.) we simply resubmit
        // already built transaction:
        // server.submitTransaction(transaction);
        return error;
      });
  } catch (error) {
    return error;
  }
}

In Account.tsx, import sendFunds function and create a form that submits destination public key and amount

…
import { getAccount, sendFunds } from "./stellar";
…

…
const [destination, setDestination] = useState({
    publicKey: "",
    amount: 0,
  });
…

…
<p>Send Funds</p>
<form
    onSubmit={async (e) => {
      e.preventDefault();
      setLoading(true);
      const sent = await sendFunds(
        destination?.publicKey,
        wallet?.secretKey,
        destination?.amount
      );
      // unless an error, transactions always take few seconds / minutes to be completely done
      setLoading(false);
      console.log(sending);
    }}
  >
    <input
      type="text"
      name="publicKey"
      onChange={(e) =>
        setDestination({
          ...destination,
          publicKey: e.target.value,
        })
      }
    />
    <input
      type="number"
      name="amount"
      onChange={(e) =>
        setDestination({
          ...destination,
          amount: e.target.value,
        })
      }
    />
    <button disabled={loading}>Send Payments</button>
  </form>
…

If you click on Send Funds after few minutes the destination address should receive funds

Combining the Account.tsx codes we have

import { useEffect } from "react";
import { useState } from "react";
import { getAccount, sendFunds } from "./stellar";

const Account = ({ wallet }) => {
  const [loading, setLoading] = useState(false);
  const [walletDetails, setWalletDetails] = useState(null);

  const [destination, setDestination] = useState({
    publicKey: "",
    amount: 0,
  });

  const fetchDetails = async () => {
    setLoading(true);
    const data = await getAccount(wallet?.publicKey);
    if (data?.balances) {
      setWalletDetails(data);
    }
    setLoading(false);
  };

  // fetch wallet details
  useEffect(() => {
    fetchDetails();
  }, [wallet]);

  return (
    <div>
      {loading ? (
        <p>Please Wait</p>
      ) : (
        <div>
          {/* display wallet balances */}
          <p>Your Balance: {walletDetails?.[0]?.balance} XLM</p>
          <p>Wallet Address: {wallet?.publicKey}</p>
          <p>Send Funds</p>
          <form
            onSubmit={async (e) => {
              e.preventDefault();
              setLoading(true);
              const sent = await sendFunds(
                destination?.publicKey,
                wallet?.secretKey,
                destination?.amount
              );
              // unless an error, transactions always take few seconds / minutes to be completely done
              setLoading(false);
              console.log(sending);
            }}
          >
            <input
              type="text"
              name="publicKey"
              onChange={(e) =>
                setDestination({
                  ...destination,
                  publicKey: e.target.value,
                })
              }
            />
            <input
              type="number"
              name="amount"
              onChange={(e) =>
                setDestination({
                  ...destination,
                  amount: e.target.value,
                })
              }
            />
            <button disabled={loading}>Send Payments</button>
          </form>
        </div>
      )}
    </div>
  );
};

export default Account;

The adding some css, the final product may look like this:-

If you like this article there are more like this in our blogs, follow us on dev.to/clickpesa, medium.com/clickpesa-engineering-blog and clickpesa.hashnode.dev

Happy Hacking!!

React: Write end to end test using cypress

Benedict Steven — Sat, 10 Sep 2022 13:15:31 +0000

Write end to end test using react cypress

What is cypress?

Cypress is a simple to use testing framework. It has many built-in features to make your life easier and it's easy to learn and use.

Cypress is very powerful, you can create unit tests without any configuration or scaffolding. You just write your code and then run tests in parallel with zero dependencies!. You can use cypress with other frameworks like Angular, Vue or React Native too!

It is a more developer-friendly tool that uses a unique DOM manipulation technique and operates directly in the browser.

What is the e-2-e test?

E-2-E testing is a type of test that tests the entire application. It can be also known as an integration test, because it tests the interaction between different components and modules.

It is not a unit test (as it does not have any dependency on individual modules or components), but rather an end to end one.

Why choose cypress?

Cypress is a great tool to use when you want to write end to end tests. It’s easy to use and fast, so you don’t need to worry about it being slow or complicated. Cypress also has many plugins that allow you to do more advanced testing on your app.

Setup cypress with react

React app

To set up cypress first create your react app, in this example we will be using a simple todo app using a create-react-app.

First create react app in your project folder

npx create-react-app todo

Clean all the unwanted files in the src folder and codes and create a folder structure like this or you can use your own structure

in app.jsx add

import { useEffect, useState } from "react";
import Addtodo from "./addtodo";
import "./app.css";
import Todo from "./todo";

const App = () => {
  const [todos, setTodos] = useState([]);
  const [keyword, setKeyword] = useState("All");
  const [filteredTodos, setFilteredTodos] = useState(todos);
  const addTodo = (todo) => {
    setTodos([todo, ...todos]);
    setKeyword("All");
  };

  const updateTodo = (id) => {
    let todosCopy = todos;
    const todoIndex = todosCopy.findIndex((el) => el.id === id);
    const todo = todosCopy.find((el) => el.id === id);
    todosCopy[todoIndex] = {
      ...todo,
      isActive: !todo.isActive,
    };
    setTodos([...todosCopy]);
  };

  const deleteTodo = (id) => {
    const newTodos = todos.filter((el) => el.id !== id);
    setTodos(newTodos);
  };

  useEffect(() => {
    filterTodos(keyword);
  }, [todos, keyword]);

  const filterTodos = (key) => {
    if (key === "All") {
      setFilteredTodos(todos);
      setKeyword("All");
      return;
    }
    if (key === "Active") {
      setFilteredTodos(todos.filter((el) => el.isActive === true));
      setKeyword("Active");
      return;
    }
    if (key === "Completed") {
      setFilteredTodos(todos.filter((el) => el.isActive === false));
      setKeyword("Completed");
      return;
    }
    if (key === "Clear") {
      setTodos(todos.filter((el) => el.isActive === true));
      setKeyword("All");
    }
  };

  return (
    <div className="App">
      <div className="container">
        <Addtodo addTodo={addTodo} />
        <ul>
          {filteredTodos.map((todo) => (
            <Todo
              todo={todo}
              key={todo.id}
              updateTodo={updateTodo}
              deleteTodo={deleteTodo}
            />
          ))}
        </ul>
        <div className="actions">
          <span>
            {todos.filter((el) => el.isActive === true).length} Active items
            left
          </span>
          &nbsp;
          <div>
            <button
              className="filter-all"
              onClick={() => {
                filterTodos("All");
              }}
            >
              All
            </button>
            &nbsp;
            <button
              className="filter-active"
              onClick={() => {
                filterTodos("Active");
              }}
            >
              Active
            </button>
            &nbsp;
            <button
              className="filter-completed"
              onClick={() => {
                filterTodos("Completed");
              }}
            >
              Completed
            </button>
            &nbsp;
            <button
              className="delete-all"
              onClick={() => {
                filterTodos("Clear");
              }}
            >
              Clear Completed
            </button>
          </div>
        </div>
      </div>
    </div>
  );
};

export default App;

In addTodo.jsx

import { useState } from "react";

const Addtodo = ({ addTodo }) => {
  const [todo, setTodo] = useState({
    id: "",
    title: "",
    isActive: true,
  });
  const { title } = todo;
  return (
    <div>
      <form
        onSubmit={(e) => {
          e.preventDefault();
          todo?.title?.trim()?.length > 0 && addTodo(todo);
          setTodo({
            id: "",
            title: "",
            isActive: true,
          });
        }}
      >
        <input
          placeholder="New todo"
          value={title}
          onChange={(e) => {
            let id = new Date();
            id = id.getTime();
            if (e.target.value?.trim().length > 0)
              setTodo({
                ...todo,
                id,
                title: e.target.value,
              });
          }}
        />
        <button className="submit-button" title="Add Todo">
          <svg
            width="12"
            height="12"
            viewBox="0 0 12 12"
            fill="none"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path
              d="M6.75 5.25V0H5.25V5.25H0V6.75H5.25V12H6.75V6.75H12V5.25H6.75Z"
              fill="white"
            />
          </svg>
        </button>
      </form>
    </div>
  );
};

export default Addtodo;

in todo.tsx add

const Todo = ({ todo, deleteTodo, updateTodo }) => {
  const { title, id, isActive } = todo;
  return (
    <li className={isActive ? "incomplete" : "complete"}>
      <div>
        <button
          className={isActive ? "mark mark-complete" : "mark mark-incomplete"}
          onClick={() => {
            updateTodo(id);
          }}
          title={isActive ? "Mark complete" : "Mark incomplete"}
        >
          <svg
            width="13"
            height="10"
            viewBox="0 0 13 10"
            fill="none"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path
              d="M10.455 0.45498C10.6663 0.253813 10.9475 0.1426 11.2392 0.144808C11.531 0.147015 11.8104 0.262471 12.0187 0.466812C12.2269 0.671152 12.3476 0.948396 12.3553 1.24004C12.363 1.53169 12.2571 1.81492 12.06 2.02998L6.07499 9.51498C5.97208 9.62583 5.84787 9.71478 5.70979 9.77653C5.57171 9.83828 5.4226 9.87155 5.27137 9.87435C5.12014 9.87715 4.9699 9.84942 4.82963 9.79283C4.68936 9.73624 4.56194 9.65194 4.45499 9.54498L0.485992 5.57598C0.375462 5.47299 0.286809 5.34879 0.225321 5.21079C0.163833 5.07279 0.13077 4.92382 0.128105 4.77276C0.12544 4.62171 0.153227 4.47167 0.209808 4.33158C0.26639 4.1915 0.350607 4.06425 0.457435 3.95742C0.564263 3.85059 0.691514 3.76638 0.831596 3.7098C0.971678 3.65321 1.12172 3.62543 1.27278 3.62809C1.42383 3.63076 1.5728 3.66382 1.7108 3.72531C1.8488 3.7868 1.973 3.87545 2.07599 3.98598L5.21699 7.12548L10.4265 0.48798C10.4359 0.476432 10.4459 0.465414 10.4565 0.45498H10.455Z"
              fill="green"
            />
          </svg>
        </button>
        &nbsp;
        {title}&nbsp;
      </div>
      <button
        onClick={() => {
          deleteTodo(id);
        }}
        className="delete"
        title="Delete todo"
      >
        <svg
          width="16"
          height="16"
          viewBox="0 0 20 20"
          fill="none"
          xmlns="http://www.w3.org/2000/svg"
        >
          <path
            d="M8 4H12C12 3.46957 11.7893 2.96086 11.4142 2.58579C11.0391 2.21071 10.5304 2 10 2C9.46957 2 8.96086 2.21071 8.58579 2.58579C8.21071 2.96086 8 3.46957 8 4V4ZM6 4C6 2.93913 6.42143 1.92172 7.17157 1.17157C7.92172 0.421427 8.93913 0 10 0C11.0609 0 12.0783 0.421427 12.8284 1.17157C13.5786 1.92172 14 2.93913 14 4H19C19.2652 4 19.5196 4.10536 19.7071 4.29289C19.8946 4.48043 20 4.73478 20 5C20 5.26522 19.8946 5.51957 19.7071 5.70711C19.5196 5.89464 19.2652 6 19 6H18.118L17.232 16.34C17.1468 17.3385 16.69 18.2686 15.9519 18.9463C15.2137 19.6241 14.2481 20.0001 13.246 20H6.754C5.75191 20.0001 4.78628 19.6241 4.04815 18.9463C3.31002 18.2686 2.85318 17.3385 2.768 16.34L1.882 6H1C0.734784 6 0.48043 5.89464 0.292893 5.70711C0.105357 5.51957 0 5.26522 0 5C0 4.73478 0.105357 4.48043 0.292893 4.29289C0.48043 4.10536 0.734784 4 1 4H6ZM13 10C13 9.73478 12.8946 9.48043 12.7071 9.29289C12.5196 9.10536 12.2652 9 12 9C11.7348 9 11.4804 9.10536 11.2929 9.29289C11.1054 9.48043 11 9.73478 11 10V14C11 14.2652 11.1054 14.5196 11.2929 14.7071C11.4804 14.8946 11.7348 15 12 15C12.2652 15 12.5196 14.8946 12.7071 14.7071C12.8946 14.5196 13 14.2652 13 14V10ZM8 9C8.26522 9 8.51957 9.10536 8.70711 9.29289C8.89464 9.48043 9 9.73478 9 10V14C9 14.2652 8.89464 14.5196 8.70711 14.7071C8.51957 14.8946 8.26522 15 8 15C7.73478 15 7.48043 14.8946 7.29289 14.7071C7.10536 14.5196 7 14.2652 7 14V10C7 9.73478 7.10536 9.48043 7.29289 9.29289C7.48043 9.10536 7.73478 9 8 9V9ZM4.76 16.17C4.8026 16.6694 5.03117 17.1346 5.40044 17.4735C5.76972 17.8124 6.25278 18.0003 6.754 18H13.246C13.7469 17.9998 14.2294 17.8117 14.5983 17.4728C14.9671 17.134 15.1954 16.6691 15.238 16.17L16.11 6H3.89L4.762 16.17H4.76Z"
            fill="red"
          />
        </svg>
      </button>
    </li>
  );
};

export default Todo;

in app.css add the following codes for UI

body {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 90vh;
  background-color: #1e272e;
  color: white;
}

.container {
  background-color: #2b343b;
  padding: 2rem;
  max-width: 450px;
  width: 90%;
  min-width: 250px;
  margin: auto;
}

form {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 1.5rem;
}

input {
  height: 40px;
  width: calc(100% - 80px);
  background-color: #1e272e;
  border: none;
  border-bottom: 1px solid #1e272e;
  padding: 0 1rem;
  transition: 0.25s ease-out;
  color: white;
}

button {
  background: none;
  color: white;
  border: none;
}

button.submit-button {
  width: 80px;
  height: 40px;
  background-color: cadetblue;
  color: white;
  border: none;
}

input:focus {
  border: none;
  background-color: #2b343b;
  border-bottom: 1px solid grey;
}

input:focus,
button:focus {
  outline: none !important;
}

ul {
  list-style: none;
  color: white;
  padding-inline-start: 0;
  max-height: calc(100vh - 200px);
  overflow-y: auto;
}

ul::-webkit-scrollbar {
  width: 0.3rem;
}
ul::-webkit-scrollbar-track {
  background: gray;
}
ul::-webkit-scrollbar-thumb {
  background: darkgrey;
  border-radius: 0.5em;
}

ul li {
  display: flex;
  justify-content: space-between;
  background-color: #1e272e;
  padding: 0.5rem;
  margin: 0.5rem 0;
  transition: 0.22s;
}

ul li.complete {
  text-decoration: line-through;
  opacity: 0.5;
}

.actions {
  display: flex;
  justify-content: space-between;
  margin-top: 2rem;
}

.actions button {
  color: lightgray;
}

.actions button.delete-all {
  color: red;
}

Run npm start and this is how it should look

From this simple app, user should be able to;

Create a new todo and preview the new todo on the list
Mark a todo as complete or incomplete
Delete a single todo
Filter all, complete and incomplete todos
Delete all complete todos

These are what we'll be testing using cypress

Cypress setup

install cypress in your project

npm install cypress -D

Run cypress open to configure cypress in your project

npx cypress open

This will open a window with two options, e2e testing and component testing, select e2e testing

This will open configure files page, scroll to the bottom and continue, cypress will generate all those price in your project folder

This will open browser selection page, select your preferable browser

The following folder structure will be created in your project after configuring files

Create e2e folder inside cypress folder and create todo.cy.js inside e2e folder and start writing the tests.
Once you create this file, in cypress window you should see a file you created in e2e test list like this

to run a specific test file, click on the file and it should run.

Write your first e2e tests

Before writing test on any scenario first we need to learn cypress commands, there are basic custom commands. basic commands are the built in cypress commands while custom commands are the commands you can create. For this post we'll learn about basic commands since we won't need any custom command.

The following is the list of some basic commands


cy.visit("url") // this launches url

cy.wait(300) // Wait for a certain time in milliseconds or for an aliased element prior to moving the following step.

cy.get("selector") // this returns single or multiple elements with provided selector i.e classname, tagname, id or title
// class selector can be written as cy.get(".classname")

cy.contains("text") // returns a single or multiple elements that contains text

cy.click() // clicks the selected element

cy.dblclick() // double clicks the selected element

cy.document() // It obtains window.document on the active page.

cy.type("text") // type text on a selected input

cy.get(".classname").eq(0) // for multiple elements you can select a specific element depending on the position of such element using eq command with element index

cy.should("exist") // checks if a selected element exists or not, there are multiple parameters thet can be used inside should for varios checks 
// i.e not.exist, be.visible, be.enabled
// it can be used with an alias .and for multiple checks ie
// cy.get(".classname").should("exist).and("be.visible")

For more basic commands visit here.

Writing cypress tests works almost the same as writing any other tests.
Before all start the app by running

npm start

Assuming the app runs on http://localhost:3000, before any testing any scenario first launch a url using visit command.

describe("create todo spec", () => {
  before(() => {
    // this will launch the page in cypress browser
    cy.visit("http://localhost:3000");
  });
})

Lets write tests in todo.cy.js by scenarios listed before.

describe("create todo spec", () => {
  before(() => {
    // this will launch the page in cypress browser
    cy.visit("http://localhost:3000");
  });

  // 1. Create a todo scenario
  it("successfully create a todo", () => {
    // find an input by tagname
    cy.get("input").type("Sprint meeting");

    // submit form by title of submit button
    cy.get("[title='Add Todo']").click();

    // create another todo
    cy.get("input").type("Coding");

    // submit form by classname of submit button
    cy.get(".submit-button").click();

    // check if new todos exist
    cy.contains("Sprint meeting").should("exist");
    cy.contains("Coding").should("exist");
  });

  // 2. Mark todo as complete / incomplete
  it("Should mark todo", () => {
    // mark a first todo as complete
    cy.get("button.mark-complete").eq(0).click();

    // select using css selector
    cy.get("li:nth-child(2) button.mark").click();
  });

  // 3. Delete a todo
  it("Should delete a todo", () => {
    cy.get("li:nth-child(2) button.delete").click();
  }) 

  // 4. Filter all, complete and incomplete todos
  it("should filter between all, complete and incomplete todos", () => {
    // create multiple todos
    cy.get("input").type("Sprint meeting");
    cy.get("[title='Add Todo']").click();
    cy.get("input").type("Code");
    cy.get("[title='Add Todo']").click();
    cy.get("input").type("Exercising");
    cy.get("[title='Add Todo']").click();
    cy.get("input").type("Read");
    cy.get("[title='Add Todo']").click();
    cy.get("input").type("Eat");
    cy.get("[title='Add Todo']").click();
    cy.get("input").type("Code");
    cy.get("[title='Add Todo']").click();

    // mark some as complete
    cy.get("li:nth-child(2) button.mark").click();
    cy.get("li:nth-child(4) button.mark").click();
    cy.get("li:nth-child(6) button.mark").click();

    // filter complete only
    cy.get("button.filter-completed").click();

    // check if only complete exists
    cy.get(".complete").should("exist");
    cy.get(".incomplete").should("not.exist");

    // filter incomplete only
    cy.get("button.filter-active").click();
    cy.get(".complete").should("not.exist");
    cy.get(".incomplete").should("exist");

    // filter all
    cy.get("button.filter-all").click();
    cy.get(".complete").should("exist");
    cy.get(".incomplete").should("exist");
  }); 

  // 5. Delete all complete todos
  it("should delete all completed todos", () => {
    // find and click delete all completed todos
    cy.get("button.delete-all").click();
    cy.get(".complete").should("not.exist");
  });

})

Running cypress run command should show a video of all actions written on the test.

These tests can run using electron browser, this means that you can run these tests on terminal ie

npx cypress run

Cypress can do multiple types tests using basic commands and different plugins such as file uploader. At clickpesa we use cypress to do the e2e tests making sure we have

The following are limitations of cypress

One cannot use Cypress to drive two browsers at the same time.
It doesn't provide support for multi-tabs.
Cypress only supports JavaScript for creating test cases.
Cypress doesn't provide support for browsers like Safari and IE at the moment.
Limited support for iFrames.

The most popular alternative to cypress is Selenium

If you like this article there are more like this in our blogs, follow us on dev.to/clickpesa, medium.com/clickpesa-engineering-blog and clickpesa.hashnode.dev

Happy Hacking!!

React - Manage state using context API with useState or useReducer hooks

Benedict Steven — Mon, 08 Aug 2022 17:53:00 +0000

React - Manage state using context API with useState or useReducer hooks

State Management

In any react application there are different parts of the UI that are separated in different components. Some components may need to use a state declared or updated on another component. Traditional way to do this was to create a state in the parent component and pass state as props to the child component. This works but for the applications with multiple levels of the nested children will require to pass props to each nested child. This process is called props drilling.

What is prop drilling?

Prop drilling refers to the passing of the data from the parent to all the nested children in the React Tree.

This works until when we need to change the code

Updating the prop value for instance children components called <Child1 state=”data” /> and <Child2 state=”data” />, when we need to update this component for instance changing state from string value to array value like state=[“data1”, “data2”] will require updating all the child component props.
Let assume that in the state of application there comes a time to rename the prop as you are removing some data or passing more. It has to be changed at all the places down the hierarchy.

To solve this problem, one needs to have a proper tool to handle state across the application, there are multiple options such as redux, MobX, Flux and context API. In this article you will learn how to use context api with usestate and usereducer, simple to use and lightweight solution.

Context API

“Context provides a way to pass data through the component tree without having to pass props down manually at every level.” — React

Context api is a built-in react hook.

When to Use Context

Context is designed to share data that can be considered global for a tree of React components, such as the current authenticated user, theme, or preferred language.

Context Api uses two main hooks (createContext and useContext), along with one hook to set and update state{this hook isn't a must but it is important for state updates}.

Let's use both useState hook and useReducer hook just to get a general idea on what context is capable of. We’ll use a light/dark mode toggle component for all our examples.

Context Api with useState

Create a jsx file context.jsx and start editing,

Create the context and give it a name, context name can be any name, for this example we’ll use StateContext.
Create a state provider passing children as props (children can be anything you pass, and in our case it is the whole app, this also means this is a react component and we gonna wrap it on our application
Lastly declare a method to use our context

import React, { createContext, useContext, useState } from "react"

// create toggle context
const ToggleContext = createContext()

// create context provider
export const ToggleProvider = ({ children }) => {
    const [data, setData] = useState({
       darkMode: false,
    })
    // the value passed in here will be accessible anywhere in our application 
    // you can pass any value, in our case we pass our state and it's update method 
    return (
        <ToggleContext.Provider value={{data, setData}}>
            {children}
        </ToggleContext.Provider>
    )
}

// useToggleContext will be used to use and update state accross the app
// we can access to data and setData using this method 
// anywhere in any component that's inside ToggleProvider
export const useToggleContext = () => useContext(ToggleContext)

Let's use it now, In your root file ie App.jsx import StateProvider and wrap your app in it.

Wrapping our components inside the provider will give all children access to the state declared in that provider. Any component outside the wrapper won’t have access to the global state.

// import provider from context jsx
import { ToggleProvider } from "./context"
import Home from "./Home"

function App() {
    // Wrap the all components inside provider
    return (
        <ToggleProvider>
            {/* every other component */}
            <Home />
        </ToggleProvider>
    )
}

export default App

Now that state is global, let's use it. \ Create any files lets say Nav.jsx and Home.jsx. In these files import useStateContext from context.jsx, lets see it in action

// Nav.jsx

import { useToggleContext } from "./context"

const Nav = () => {
    // declare state just like you did in context jsx
    // But instead of useState, use useToggleContext
    const [data, setData] = useToggleContext()
    return (
        <div>
            <button 
                onClick={() => setData({
                    ... data,
                    darkMode: !data.darkMode
                })}
            >
              {data.darkMode ? "Change to Light Mode" : "Change To Dark Mode"}
            </button>
        </div>
    )
}

// Home.jsx

import { useToggleContext } from "./context"
import Nav from "./Nav"

const Home = () => {
    // declare state just like you did in context jsx
    // But instead of useState, use useToggleContext
    const [data, setData] = useToggleContext()
    return (
        <div
          style={{
            // update mode between dark and light
            backgroundColor: data.darkMode ? "#000000" : "#ffffff",
            color: data.darkMode ? "#ffffff" : "#000000" 
          }}
        >
          <Nav />
        </div>
    )
}

On toggle button click state will be changed as well as web styles.

Now we have our state. You can use this state in any component, data can be used as a value and setData to update data.

Context API with useReducer

useReducer

useReducer is one of the hooks that helps in managing states. You can use this hook as a replacement for useState, doesn't necessarily require context api, it's a standalone hook.

How does it work?

For react reducer to work we need an initial state, reducer function and dispatch to update data.

Before diving into the context side of useReducer, let's explore it when used as a standalone hook.

import React, { useContext, createContext, useReducer } from "react"

// context for using state
const ToggleStateContext = createContext()

// context for updating state
const ToggleDispatchContext = createContext()

// reducer function
const reducer = (state, action) => {
  const { type, payload } = action
      case: "CHANGE_MODE":
        return {
          ...state,
          darkMode: payload
        }
      default:
        return state
  }
}


export const ToggleProvider = ({ children }) => {
    const [state, dispatch] = useReducer(reducer, {
      darkMode: false
    })

    return (
      <ToggleDispatchContext.Provider value={dispatch}>
          <ToggleStateContext.Provider value={state}>
             {children}
          </ToggleStateContext.Provider>
      </ToggleDispatchContext.Provider>
    )
}

// use them context we've created
export const useToggleStateContext = () => useContext(ToggleStateContext)
export const useToggleDispatchContext = () => useContext(ToggleDispatchContext)

useReducer with Context API

Now that we have managed to use the useReducer hook in a component, let's use it for context api, shall we? As I said earlier, context api required a hook to set and update state, so as we implemented useState, we are going to implement useReducer the same, let's get into it.

For this we gonna create two context, one for dispatch and another for state in order to pass state and dispatch values differently

Create a context provider in context.jsx

Here reducer function is the same to the one we used in Nav.jsx

// import provider from context jsx
import { ToggleProvider } from "./context"
import Home from "./Home"

function App() {
    // Wrap the all components inside provider
    return (
        <ToggleProvider>
            {/* every other component */}
            <Home />
        </ToggleProvider>
    )
}

export default App

So we have our context api with useReducer, lets go to the next step, wrapping our app in Context provider

// import provider from context jsx
import { ToggleProvider } from "./context"
import Home from "./Home"

function App() {
    // Wrap the all components inside provider
    return (
        <ToggleProvider>
            {/* every other component */}
            <Home />
        </ToggleProvider>
    )
}

export default App

Now we have our state globally available, lets go and use or update it somewhere, say Nav page as we did on useState example.

// Nav.jsx
import React from "react"
import { useToggleDispatchContext, useToggleStateContext } from "./context"

const Nav = () => {
    const { darkMode } = useToggleStateContext()
    const dispatch = useToggleDispatchContext()

    return (
        <div>
        {/* this will update the specific state by checking the type */}
        <button onclick={() => dispatch({
            type: "CHANGE_MODE",
            payload: !darkMode
          })}>
            {darkMode ? "Change To Light Mode" : "Change to Dark Mode"}
        </button>
        </div>
    )
}

And in Home file

// Home.jsx
import { useToggleStateContext } from "./context"
import Nav from "./Nav"

const Home = () => {
    const { darkMode } = useToggleStateContext()
    return (
        <div
          style={{
            // update mode between dark and light
            backgroundColor: data.darkMode ? "#000000" : "#ffffff",
            color: data.darkMode ? "#ffffff" : "#000000" 
          }}
        >
          <Nav />
        </div>
    )
}

And things should work as expected but now with global state which you can use anywhere

useState VS useReducer in Context API

As much as useState looks cleaner and simpler to implement, for large applications with a lot of state change, useReducer will give you more control on your state.

When not to use Context API

When an application requires a lot of state updates, when state changes, all the children using the same provider will rerender whether they use the updated state or not.

Redux and other third party state management libraries solve this issue. It's a matter of deciding whether you really need to use an extra library or not depending on how large your application is and how much state will be updating that will require global state management.

If you like this article there are more like this in our blogs, follow us on dev.to/clickpesa, medium.com/clickpesa-engineering-blog and clickpesa.hashnode.dev

Happy Hacking!!

Ultimate GET Endpoint

Benedict Steven — Tue, 12 Jul 2022 18:47:18 +0000

The Ultimate GET Endpoint

There are several API types ie REST, Grapghql and SOAP. REST and Graphql APIs are widely used.

The main difference between the two is that Rest API requires different API endpoints for individual action i.e https://api_url/login and https://api-url/register meanwhile graphql API can use only one endpoint for both actions.

Rest API uses different methods for its CRUD operations such as:-

GET - for fetching data
POST - for creating data
PUT - for updating data
DELETE - for deleting data

Graphql uses mainly two resolvers:

Query - for fetching data
Mutation - for creating, updating or deleting data

There are other differences but one similarity is that while rest API uses get method to fetch data, graphql uses query to fetch data. This blog is mainly focused on get/query an API endpoint.

The GET http method is a powerful method for getting data from your server. It’s an easy way to get information from the server, and it’s one of the most common endpoints used in APIs. GET allows you to make any number of calls.

Issues that might be a result of ill-formed GET endpoints

There are multiple data formats that can be transferred via http requests such as JSON, XML and HTML. Some of these formats such as XML are outdated and andpoints that return those formats may cause extra work while decoding/encoding the response.
In most applications there are different access levels, Ill-formatted endpoint will cause any user to access data that are meant to be accessed by a special group of users such as admins
For endpoints without pagination a single request could return a thousands or millions of data that may cause some traffic issues and/or issues on the browser ie loading time for request to complete and large amount of data used in a single request
A single response can have multiple fields whether data is returned as an object or array of objects. These fields count can vary from 1 any number. Fetching these data if there are many explicit filters can cause issues similar to the issues mentioned in the previous item. Graphql was made to solve this problem as the client will be required to pass the fields they want to fetch. REST endpoint doesn’t have this feature out of the box, it's up to an API creator to integrate this in their code.
An API without filtering and sorting will force users to view all data and scroll to view what they want where users might want to fetch only the latest/oldest data or data with a certain value in a certain.

Qualities that will make your GET endpoints better.

JSON format response

JSON format is the standard data format that is accepted by any technology. Most technologies have built-in methods to decode and encode JSON data.
This can easily be achieved by setting Content-Type application/json in the headers request headers.
Roles Accessed (Used by admin & normal users)

Most applications have normal user views and admin views for the same kind of data. While normal users should be able to view data related to them, admins should be able to view all data. Get endpoint should have guards for details that will be viewed by an admin so they won't be available to normal users
Pagination

Pagination is a sequence of pages which are connected and have similar content ( Learn more )
Pagination is widely used when there is a large amount of data that can not be presented on a single page.
Pagination improves user experience and solves issues including traffic issues and loading time for a large amount of data.

There are different pagination implementations. Here I will cover two types.

3.1. Offset pagination using limit/page-size and skip/page

Limit or page-size defines the number of data that will be returned on every request meanwhile skip/page defines where should the fetching begin.

Let's assume we have 30 items in our database, and query data with page-size of 5 items. When skip/page = 0 i.e /users?limit=5&skip=0, it will fetch from first data to 5th data, on another query data will be fetched from 6th to 10th data i.e /users?limit=5&skip=5 and so on. This is well formatted and changing the page size affects the whole flow of data. It’s easier to use number pagination on the frontend using this type

3.2. Seek pagination using a certain unique value and limit/page-size

The unique value defines the value of the last item fetched so that we can fetch the next item as a starting point and the limit defines the number of items that will be returned on every request.

As long as we have our last fetched item we can change the limit and still it won't affect the way the data are queried.
This isn’t suitable for number pagination on the client side of the app, rather the infinite scroll.

For instance /users?limit=5&lastQueriedId={userId}, this will allow users to pass any page size without affecting the data that are coming in.
Backend (Explicitly) Filter

The GET should allow users to filter and select the data they want to see. You can use this endpoint to fetch specific fields, or all fields in a single request. Here are some examples of how we’ve used this feature:
/users?fields=first_name,last_name - this should return data with only first_name and last_name fields.
Latest Sorted

For the array-like response response will make much sense if ordered from latest data to oldest data except for some scenarios such as getting data in a certain pattern i.e twitter feeds.
Allow filtering data by fields

Filtering data by fields is a common practice which allows users to filter their results based on the values of any of the fields in their requests. The GetEndpoint should allow filtering by any field. For example filtering data with date, name and email fields:
/users?filter=date:eq:12-10-2021,name:eq:ben,email:eq:mailto:email@example .com,
This should return users with either of the field values passed as parameters.
Allow sorting by date, number or alphabetical order

Sort by date: an endpoint should allow sorting data by the date they were created. This is especially helpful if there is a large amount of data and want to scan through them easily.

Sort by number: If there is a large amount of data, it might be helpful to allow sorting the data based on their number fields such as amount field/column on the database so that they're easier to find in the list.

Sort alphabetically: an endpoint should allow sorting data fields/columns by alphabetical order ascending/descending.
Logical nesting on endpoints name

The first step is to create a logical nesting on your endpoints. This will allow you to organize your endpoint names in a way that makes sense and makes it easier for users to find the information they need when working with them.

For instance you have an endpoint called /users which is used to fetch all users, an endpoint for fetching a single user should be /users/{userId} and if there is another endpoint to get a specific detail about that user for instance messages you can name your endpoint as /users/{userId}/messages

Hope you will find this article helpful. Follow our tech blog ClickPesa blog, where the team shares stories about our development process improvement journey, tips, among other things. Happy Hacking!!