DEV Community: Canonic Inc.

How to add Role Based Access Control (RBAC)

Tanisha — Mon, 17 Jul 2023 06:19:56 +0000

Introduction

Canonic is a low-code platform for building tools and automation. You can create tools end-to-end without writing any or very little code. This helps you save countless hours and allows you to focus on the more critical tasks at hand.

Internal tools are often tightly secured with role-based access control and different users might have access to additional features and pages. It becomes essential to have an easy way to maintain access to the tools that you build.

In this tutorial, we will go over adding access control to your internal tools on Canonic. We will use the user authentication addon to enable role-based access control in a few short steps.

Let's begin! 🚀


## Adding login workflows and pages

We will use the login addon to add authentication. It comes bundled with all the pages, workflows, and tables required to add role-based access control.

**Create a project**
First, let's create a project. If you already have an existing project you would like to add auth to, you can safely skip this step.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xnv1t5ki3mg0ntunixfv.gif)

- Login to Canonic
- Click on +Project to create a new project
- Select Start from scratch, and don't add anything else.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cc9gleqw91ra330k1niu.gif)

``
**Add the Login addon**
To add the login addon, press ⌥ + A to open the addon browser and select the login addon. Hit + Add to add the addon to your project.

If the addon was added correctly, you will see a couple of new pages, endpoints, and tables. The login addon should now be configured.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4gll2x63tcfrfjam2lb7.gif)

**Creating a user**
It's time to create a test user! Before we can create a user, we need to deploy the project. Once that's done, you can create a new user using the Create user page. This page is only available to builders and can be used to create new users on demand.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2nneyhwqawc066h83msg.gif)

- Go to the create user page.
- Add a dummy email and password and click on the create button.
- A success alert should indicate that the user has been created successfully.

Configuring Roles
Roles allow you to determine different access levels. Roles and their names differ based on tools so Canonic allows you to define your own roles.

For example, a user with a read-only role should not be allowed to edit any data on the tool. This role might be called viewer or read-only.

Add roles
To add a role, navigate to the newly created user table. This table should be under the data sources section in the left-hand navigation.

Click on the roles field in the user table. This is the field that stores what role each user is assigned. Let's add a few roles. We can also set the default role for each user.

**Assign roles to users**
When a new user is created, the default role is assigned unless manually specified. You can always change the role for a user by navigating to the CMS.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zl2tibt80rq9yzouwbwg.gif)

``



**Adding Access Control**
At this stage, you should have a fully working login page. However, how do you implement access control?

> Access control allows users to have access to only certain pages and functionalities based on their role.

**Make login your default page**
Let's make login the default page to open when loading the app. It should redirect to the actual homepage if the user is already logged in. Let's configure that:

- Right-click on the login page and select Mark as homepage
- Open the page settings for the login page. Under Access Control, add a new rule to redirect to the homepage once logged in. (This should already be configured if you've used the addon)


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5zclt5778lo93bw8jq8w.gif)

``
**Configure access to pages**
By default all pages that you create are public. Let's use access control to redirect users to the login page if they don't have the right permissions.

- Open the page settings for the page you want to add access control to.
- Add a role check in the condition endpoints.authenticate.role.value === "ADMIN"
- This will check to make sure the user's role is admin.
- Trigger a redirect to the login page if the check fails.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ff1zu8xrwcp7in82n8ci.gif)

``

**Configure access to components**
Sometimes you want to show certain components based on the user's access. For example, you might want to show the Refund button next to orders only if they have refund access.

- Open configuration for the component you want to access control
- Scroll down to the hidden field, and add your role check there.
endpoints.authenticate.role.value === "ADMIN"

That's it, you should have access control working for all the pages you configured.

``
**Test the implementation**
Let's quickly test the implementation.

- Deploy the project.
- Open the link to your deployed app. It should open the login page by default
- Enter the credentials you created in the earlier step. It should log you in and take you to the homepage.
- Try opening this URL in incognito, since you're not signed in there, you should be taken to the login page

``

Conclusion
That's all folks. As you can see, role-based access control is incredibly easy on Canonic despite being a complex feature. It's always important to maintain access control rules for all your internal tools and dashboards to ensure that only authorized users have access to your data.

Canonic never stores your data and all authentication data is encrypted at rest for maximum security.

As usual, let us know your feedback in the comments, and feel free to reach out to us at hello@canonic.dev

Onwards & upwards 🚀

``

How to build Email/Password Signup with Canonic

Shivang Bhandari — Thu, 16 Jun 2022 06:19:43 +0000

In Canonic, we now support projects with a username and password authentication system and in this blog, I'll walk you through how to create one such project and the moving parts around it.

Authentication is identifying a user with the credentials passed to the backend.

A prevalent method of managing authentication on any product/project is using the username and password system instead of integrations for third-party authentication.

In Canonic, we now support projects with a username and password authentication system and in this blog, I'll walk you through how to create one such project and the moving parts around it.

Starting a new Project

To get started with understanding the workflow of login and signup authentication for your application, let us start a new project to better understand how the entire thing works on canonic.

When you go to your canonic dashboard, you will see a create project button similar to the one shown in the below screenshot. Let's click on "Create Project" and get to the next steps.
Now, let us select a template for our project, since we want to build a signup and login app, let's select that template and proceed with the next steps.
On the second screen of your project setup, you can then select from multiple options which provider you want to select for login. In this, the username/password method is preselected for you, so let's proceed to the next steps.
In the next step, add your project name and the region where you want to deploy it, and click on the create button to finalize the project setup.
When you click on create you will see a progress screen for the deployment of your project.
Finally, when the project is deployed, you'll see the below popup on your project home and you can open up a code sandbox when you click on the Frontend Option in this popup.

In this playground, you can then play around with a dummy frontend code consuming the project's APIs to help users signup and log in using username and password.

Once you make a few entries from the code sandbox project, you can then check this data in your CMS for the project as shown below.

Exploring the project graph

When we go to the project's graph, we can see that there is a user table already created for us. This is to enable the username password feature for login. When we click on the user table, we see the settings as shown in the screenshot below.

As you can see, in the settings, in generating endpoints section, there are two endpoints that have been marked as true i.e. LOGIN WITH PASSWORD and SIGNUP WITH PASSWORD

Understanding the new APIs

As you have already seen above, there are a couple of APIs which are new in the settings section for the user table. The APIs being LOGIN WITH PASSWORD and SIGNUP WITH PASSWORD .

These APIs are what enable user generation and login using a username/password system.

Let us go through some basic documentation for these APIs to understand their usage better.

loginWithPasswordForUser

Login with password for user API as the name suggests carries out the function of logging an existing user in the system. To process the user login, we need a unique identifier (username in this case) and a password for the account. If the password and username combination matches, then the API returns a JWT token which can be used for future authentication and the users' details.

signupWithPasswordForUser

Signup with password for user API as the name suggests helps us make a new user in our project and sign them up for it. To process user signup, usually, a couple of data points are mandatory, and they are a username, (or email) and, password.

This API takes username and password as request payload and returns a JWT token which can be used for future authentication of the user. We also get the details of the generated user in the API response.

You can read more about both these APIs in your project's documentation section.

Using the JWT token in APIs

We now know that both the loginWithPasswordForUser and signupWithPasswordForUser APIs return a JWT token which as mentioned above can be used for authorization for the user.

This can be done in a very simple manner

Let us assume we have a function that acts as a wrapper for a fetch call and passes on some parameters to it.

function makeApiCall(url, params = {}) {
  return fetch(url, {
    method: "POST",
    body: JSON.stringify(params),
    headers: {
      Authorization: TOKEN,
      "Content-Type": "application/json",
    },
  }).then((res) => res.json());
}

In this function, as you can see, we pass an Authorization token, the value being passed to it can be the token that has been returned after a signup/login call to the project's endpoint.

And That's it for this post! I hope this walkthrough helped you understand the flow of this setup better and if you have any questions please feel free to comment or reach out!

How to Create a Database Tables in Canonic

Tanisha — Tue, 31 May 2022 12:53:33 +0000

Canonic:The simplest way for agile teams to build internal tools.

You can model your database in form of tables. The Graph tab is the default page that will pop up once you are inside your project. Working on a graph with Canonic comes at super ease with a mindmap-like interface.

Let's look into the various aspects of building a table, the required setting, and more.

→ Once you are inside your project in Canonic, you will see something like this:

Step 1: Create a table for your database

Click on the + icon on the left-hand side panel. It will give you the following three options to choose from:

+TABLE
+ENDPOINT
+TRIGGER

While we will look into each of them in our upcoming articles, in this one we will explore the table section of the graph.

Select the first option - TABLE to create a table to hold all your fields.

Name the table and select the type:

Individual Tables: Stores a single piece of content for the graph that you define.
List Tables: Stores an array or a list of content entries for the graph that you define.
Identity Tables: A unique type of User table that enables you to manage and store your users' data as well as support multiple login providers.

You'll also have to define the KEY, a unique identifier that is used in APIs

Step 2: Explore the Table settings

This is what the setting section looks like on the right-hand side panel:

The first option you get is to select the Type that fits best the data requirements, within which you've three options:

LIST
STANDALONE
IDENTITY

→ Use LIST: If multiple data points can be defined

→ Use STANDALONE: If there's only a single data point per project

Next, you've to give the NAME & KEY for your project:

NAME - Choose a name that best describes the table
KEY - The unique identifier (used in APIs)

How to Modify your generated Tables:
If you wish to edit your created tables:

-> Editing Table - The table can be edited by clicking on the table and an editing panel will appear on the right side. There is a properties panel at the bottom of the table where all the necessary fields can be edited.

-> Deleting a Table - You can delete a table by right-clicking on it and selecting delete. All fields and fieldsets within the table will be deleted permanently.

Generating Endpoints for your database table
The last option in the table setting is 'GENERATE ENDPOINTS'. Here, you can select the endpoint that you require. In Canonic, you can generate default CRUD endpoints for the table:

CREATE, UPDATE, DELETE, GETALL, GETONE

Choose the one you require and hit 'Generate'. These endpoints can also be generated later on as you move ahead with your product development.

Step 3: Create Fields for your database table

When you'll click the + button next to the table node on the graph, you'll get three options:

Field - Choose when you want to create an individual field.
FieldSet - Choose when you want to group the fields.
Integrations - Choose when you wish to create an external integration.

Set 4: Exploring Fields and FieldSets

Fields define what data your table will contain and can be of different types such as text, image, file, date, time, etc. They directly impact how the CMS and the APIs work.

Click the + button next to a table or fieldset node on the graph to create a field. A new field will appear on the graph with the properties panel visible below it. Fill in the fields as needed and close the properties panel to save your changes.

When a table entry is created, all fields support setting default values that will be used if no value is provided for the field.

Field Validation:
By adding validations to the field, we ensure the correct data is being saved corresponding to the field.

FieldSets:
You can either use FieldSets to group together some fields based on semantics or to store a list of entries for that group of data. When you create a FieldSet, you'll see a section on the right that lets you select the type of FieldSet you're looking for:
List - To define multiple datapoints
Standalone - To define a single data point

Other than the type, you will have to give a 'Name' that describes the fieldset and the KEY as the unique identifier used in APIs.

FAQs:

1. How to link a database table to other tables?
Tables in databases are often linked together using foreign keys; in Canonic, this is done using Resource Fields, allowing the field to contain the information that's populated from your other tables.

How to create a link:

Make sure the table you're linking has been created.
Create a new Resource field that will act as the foreign key.
Now to create a Resource field - In the type properties of that field, select the table you wish to link to from the dropdown list.
Publish your graph.
You can now create CMS entries. Dropdown options for the field will be synced with entries for the table you linked to and will be presented as a drop-down in the CMS.

2. What are computed fields?
A computed field is the one that is computed whenever you request it. You can create a computed field by marking the input type as Computed while creating a new field. This computed field will always return an object and one can't directly set a value to these fields.

Learn more about computed fields here

And with that, you've modeled your database table 💃

Thanks for reading! We hope you're able to build the tables for your projects at ease.

You can also integrate your external databases with Canonic, know-how 👇
Integrating external databases with Canonic

If you have any suggestions, or feedback for us please feel free to reach out, it's always great to hear back from you.👯‍♀️
Give Canonic a try? 🚀

How to integrate external API endpoints in AppGyver

Tanisha — Tue, 26 Apr 2022 09:43:36 +0000

With the advent of low-code/no-code platforms, building applications has become much easier. The AppGyver platform is one such no-code platform where you can develop applications without having to code.

Now that we have a clear understanding of the platform, let’s dive into the functioning and step-by-step guide to integrate external API endpoints in the platform.

How to integrate external API endpoints in AppGyver

Step 1: Open your Project in AppGyver & Go to the Data button
Once you are inside your project, go to the Data button at the top of the toolbar, to create new external data resources or to edit the existing ones.

Step 2: Add Data Resources
Once you’re into the data tab go to the Add Data Resources by clicking on plus sign in the top right corner, which will have a dropdown of 5 different options from which we will select — Rest API direct Integration to integrate external API endpoint.

Step 3: Base Configuration
The resource configuration is split into base configuration and method configurations for GET collection, GET record, POST, PUT/PATCH and DELETE.

Base Configuration:

Here, you define the base configuration:

Resource ID: unique ID for the resource in your app
Base URL: URL shared between all methods
Path variables: Use to make parts of the URL dynamic
Headers: HTTP headers to be included in every API call made to this external resource
Query parameters: Parameters to be included in every API call made to this external resource

Canonic for the Backend

Here, we will be using Canonic to generate all the required APIs endpoints that we need to integrate with AppGyver.

Canonic is the simplest way for agile teams to build internal tools.

In Canonic, you can directly get your Base Configuration by:
Going to your project in Canonic → Docs section → Copy the URL

Once you have your URLs ready, get back on AppGyver and place them at the required spot as shown in the picture below.
With that, you have your base configuration ready! 💃

Exploring the API methods

Now that we have our base config in place, let’s see how can we integrate all these different methods in our project.

Get Collection (GET):

The base URL will automatically reflect in all other tabs. So, all you now have to do is fill in the Relative path/ Response key and Test API call response.

For Get Collection, there’s no specific id required because we are retrieving the collection of data from a server.

Thus, will go in with the Relative path and Response key.
Response key — The JSON response from an API might include the actual data we are interested in inside a key of the main response object.

Which in Canonic’s case is data:

If you’ve correctly followed and tested, you’ll get something like this:

Similarly, all you have to do is copy the required URL which you get readily available with Canonic, put them in dedicated fields.

GET RECORD (GET):

GET method is used to retrieve data from a server at the specified resource.

Now to retrieve some data, we need to specify which data we are required to fetch, and hence we’ll need to pass the id and Access Tokens (represent the authorization of a specific application to access specific parts of a user’s data).

Go to Canonic — Select Product (GET) — Copy the URL from the endpoint section.

As the base URL is already set we will just paste /products/:_id on AppGyver’s Relative path section.

Now, we need to pass the id, which you can get by following:
Canonic → Project → CMS section → Under the CMS entry title you can see the id (shown in the image below).

Copy the id and pass in the Relative path of Appygyver

Access Tokens: This broadly has two steps
1. Creating Access Token in the backend:
As we are using Canonic as our backend, the access tokens can be created within minutes.

Go to settings→ AccessTokens → Create A New Token → Give it a name and provide access → click on create → copy the value.

2. Embedding access Token in AppGyver:
In AppGyver, the access tokens need to be embedded in the HTTP Header section, where you’ll require the below fields:

In the config tab of AppGyver → Http Header → On the right-hand side panel fill all the required details:

Key: The exact key name of the authorization Label: Name this as per your understanding Value type: Text Description: Description of the token

Go to the Test tab to run a test and in the URL placeholder, mention the id of the product that we copied earlier.

Once the access token is in place, run a test (here you need to mention the id as well) and that’s it!

You’ve successfully retrieved data from a server ✅

CREATE RECORD (POST):

A POST is used to create or update a resource on a server. POST data is sent to the server in the request body of the HTTP request.

Here, we will require to specify the data that we want to store in the server.

Let’s see how to do that 👇
Go to Canonic — Docs Section — Select Create product (post)- Copy the URL from the endpoint section.
Go to AppGyver -> CREATE RECORD (POST) → paste the relative path ****
As the base URL is already set we will just paste the required specific field on the Relative path’s section.

Sending the Payload
Now as additional steps to send the payload, go to the schema tab → Create record (POST) request schema
Here, we will specify our data requirements which are name and description with the input object.

Go to add Property → mention key as input and value type as object. Within which we will add the rest of the values, in our example’s case, name and description with key as name and description and value type as text.

Once done, Go to the test tab and custom object and mention the required name and description which will get updated in your backend, in this case — Canonic.

DELETE RECORD (DELETE):

Similarly to delete the record, we will need to pass a specific id (which we want to delete).

Go to Canonic — Docs Section — Select Delete product (delete)- Copy the URL from the endpoint section.

Go to AppGyver -> DELETE RECORD (DELETE)→ In the config section tab, paste /products/:_id on the Relative path’s section.

Follow the same pattern of updating id and custom object
(Ref above to get Product id from Canonic)

One all the fields are set, run Test API call response

UPDATE RECORD (PUT):

The same process will apply to PUT in which the method will search for the input if found will update it or will create a new record, quite similar to the steps we did in the POST method.

If you will follow the steps right, you will be able to external API endpoints in AppGyver with ease! 🚀

Voila, you’re done!✨

Yes, that was it. Here are all the links you’ll require:

AppGyver — A no-code platform, enabling you to build apps for all form factors, including mobile, desktop, browser, TV, and others.

How to Test Low Code APIs using Canonic?

Tanisha — Thu, 21 Apr 2022 07:19:56 +0000

Low-code programming represents underlying code and functionality visually in a graphical user interface. In a low-code API integration tool, users manipulate the visual elements in the graphical user interface to specify the functionality they want the integration to achieve. In the case of Canonic, the user interacts with the graph interface and builds a backend setup that they can deploy.

Why is it tough to test low code APIs?

Usually, with low-code APIs, the problem comes when changes are required in the API. Whenever any changes are made to the graphical user interface, in order for them to be tested they need to be deployed. When these APIs are deployed, all the frontend applications relying on them become vulnerable to any bugs that could've been shipped with the changes to the API. This could potentially result in downtime and is not ideal for a production setup.
To solve this problem of not being able to test changes before they are deployed, Canonic came up with the environment set up on their platform.

What is an environment setup?

Environments in terms of software engineering can be simply explained with the example of an isolated sandbox. Each environment is an isolated instance where you can run your software and consume APIs.
Here are some of the keywords about environment setup and what they usually mean:

Deployment : All the activities that make software available for use
Environment : The Operating System, API calls, and databases used by the software
Development Environment : The environment catering to developers for building software
Staging Environment : A replica of production environment where changes are tested before production deployment.
Production Environment : The environment catering to the end-user of your software

For now, we know we only have one environment available to us where if we deploy any new changes they are reflected in the APIs. Let's call this environment "production" (as seen in canonic).

How will an environment setup help me?

To solve the problem of not having a medium to test APIs for the project, Canonic allows you to set up multiple environments for your project.
Setting up an additional environment gives us a lot of leverage in terms of experimentation and pushing code changes to APIs without actually worrying about the side effects on production APIs and their consumers.

How to set up environments in my Canonic project?

To add an environment, you simply need to go to your project's settings and go to the environments tab. As you can see we only have one environment existing in our current setup which is production

Now we click on the + sign right next to environments, and we will see a new environment popup. As seen below, you can name this env staging or you can also name it development alternatively based on your preference.

Once you are done with the naming, click on + CREATE button as you can see in the attached screenshot.

Once the env creation is successful you will see a popup saying "Environment Created" as shown in the screenshot below.

This means now our project has a new environment that we can use to test our changes.

Till this point, we have created a new env, but we have not deployed it yet. To deploy it, we need to go to the Deploy button on the top right of the page and deploy the project again. As you can see in the below screenshot, we now have Staging in our list of environments, and it is not deployed, so we simply select staging and then click on the deploy CTA.

When the new env is deployed, you will see a deployment successful message along with the URL for your new environment.

And Voila! we have a staging environment setup to test our changes before they go live on production.

Thanks for reading! If you find this story helpful, please click the 👏 button and share it to help others find it! Feel free to leave a comment 💬 below.

Build Google Login with Canonic

Shivang Bhandari — Mon, 11 Apr 2022 06:40:40 +0000

A key aspect of frontend development and products is the authentication and security of users. Adding Login flows to a project is usually the easiest way to get comfortable with authentication.

Adding Login flows to a project is usually the easiest way to get comfortable with authentication. As developers get started there are a few questions that come to mind:

How to handle passwords
How to handle reset passwords
How to encrypt and store them

Why use Third-Party Providers?

Third-party sign-on has proven to be a widely adopted and secure alternative to username/password authentication.

It’s easier to retrospect on the complexities of having an in-house authentication and managing everything. This would mean all the user data including their passwords will have to be stored on internal servers and it needs to be properly salted and hashed. Managing all the complexity and solving a problem that Google, Facebook, etc. have already solved on a mammoth scale is not the most efficient solution for this problem. Third-party sign-on takes care of all of this for us as we are never dealing with the user credentials. This is done for us by the oAuth provider we have integrated.

While third-party oAuth service sounds great, when implemented it involves a fair amount of code, getting familiar with provider APIs, and integrating multiple login services is still isn't that straightforward.

Then came Canonic!

Simplified Authentication using Canonic

At Canonic, we help reduce all this complexity by providing a single API endpoint that can be used for multiple providers. The process stays the same on a high level for all the different logins. In this article, we’ll walk you through integrating Google Login with ReactJS, powered by Canonic.

So let's get started!

Setting up the backend

To set up the backend for our authentication, first, let’s head over to canonic.dev. After this, you can log in to canonic, or create a new account if you do not already have one! We provide a free plan to enable developers to try out the product.

After this, we need to set up a new project and we can name it “Test Login App” or anything else that you would want to name it 😄. Select the “Create” option which would mean we need a new DB Instance for this project (provided by canonic).

Now we need to create a table that will handle the data which will flow in. We enter the name of our table, let’s name this one “Users”. There are 3 types of tables we can create:

List - This means we’ll be storing multiple records in this table.
Standalone - means we can store only one record in this table.
Identity - creates a user table where we can enable different login providers.

For the next step, We’ll select identity as the type. We’re provided with a bunch of predefined system field that covers most of the user information. You can also add more fields to this table as required.

Now that our table and fields are ready, we need to enable login providers on this table. To open settings, we click on the table and select identity settings from the tabs. You’ll find a list of all the service providers on your left. For our project, we enable Google login.

There are 3 fields that are needed in this setup:

Redirect URI → The URL where users will be redirected after logging in to google. (for our app purposes, http://localhost:3000/ will be our redirect URL)
Client ID → Client ID (provided by google)
Secret → Secret (provided by google) Once all the settings are filled, close the panel and hit deploy on the top right corner.

And VOILA! Our APIs are ready for consumption. Now let’s start with the front end. We’ll use react with GraphQL.

Need Help in getting the client id and secret from google? Read more about it here

Setting up the Frontend

Here's what the flow will look like on frontend:

Step 1 - Frontend calls Canonic to get the google URL where the user needs to be redirected for sign in.
Step 2 - After logging in, google will redirect back to our app with a code.
Step 3 - We send this code back to Canonic to get the authorization token and user data.

To start the react app, we can go with CRA since it's easy to set up the project using it.

npx create-react-app my-test-frontend
cd my-app
npm start

Next, we install GraphQl in our app

# You can use either yarn or npm
yarn add @apollo/client graphql

After GraphQL is installed, we head over to Canonic, to get our GraphQL connection URL. Go to project documentation via the vertical navigation bar, at the bottom left, click on the button named API Playground.

You'll see the connection URL in the tab. It'll end in /graphql

Now that we have our connection URL ready,

In order to consume our GraphQL APIs, we need to establish a client using Apollo. We open the index.js file and wrap our App in ApolloProvider and create our client.

import { ApolloClient, InMemoryCache, ApolloProvider } from "@apollo/client";

const client = new ApolloClient({
  uri: "<COPIED-URI-FROM-CANONIC>",
  cache: new InMemoryCache(),
});

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

This will now enable our frontend application to connect with the backend.

Now we need a component for logging in. Let's create LoginComponent. On the screen, the user can interact with a CTA that lets them sign in using google. Once the user is logged in, We'll have to fetch our google login redirect URL (the URL we need to redirect users to. when they click on the button). For that, we need to call getLoginUrlsForUser query with the following parameters:

query Login {
  getLoginUrlsForUser {
    GOOGLE
  }
}

In order to call our API and get the login URL, we call useQuery method from apollo/client

We create login.js inside the components directory.

import React from "react";
import { useQuery, gql } from "@apollo/client";

const LOGIN_URLS_QUERY = gql`
  query Login {
    getLoginUrlsForUser {
      GOOGLE
    }
  }
`;

function Login() {
  const { loading, error, data } = useQuery(LOGIN_URLS_QUERY);

  if (loading) return <p>Loading...</p>;
  if (error) return <p>Error :(</p>;


  return <a href={data?.getLoginUrlsForUser?.GOOGLE}>LOGIN with Google</a>;
}

export default Login;

So far we have got a working setup for the google redirection URL.

Next Steps:
Now we need to grab the token from the URL when google redirects back to our application. Then we have to send this token to Canonic, call login API, and get the authorization token along with the user object.

So we add a few lines of code to App.js.

Remember, we are running the project on http://localhost:3000/ so google will redirect back to this URL - with code in the URL (It'll look something like this http://localhost:3000/?code=.......

Now in our frontend, We want to check if there's a code in the URL when the component mounts (when the web app loads), so we use useEffect to check this.

useEffect(() => {
    const urlCode = new URLSearchParams(window.location.search).get("code");
    if (urlCode) {
      <CALL-LOGIN-API-HERE>
    }
  }, []);

So we call our login mutation - our mutation would involve two parameters - Code (Google passes it back) and Service (which will be "GOOGLE" in our case).

mutation Login($code: String!, $service: String!) {
  loginForUser(code: $code, service: $service) {
    token
    user {
      _id
      createdAt
      updatedAt
      email
      firstName
      lastName
      avatar {
        url
        name
      }
    }
  }
}

💡 NOTE: Since this is a write operation, we'll need to generate a secret key for our Canonic APIs with appropriate permissions. Go back to Canonic --- Go to your project --- project settings located in the left vertical menu --- Access Tokens --- Create a new access token. Be sure to select write permission. Read more about it here.

When we combine our mutation and useEffect in App.js will look something like this. We import Login Component in our App and depending on whether we have a token or not, we show the login component.

import { useEffect } from "react";
import { gql, useMutation } from "@apollo/client";

import Login from "./components/Login";

import "./App.css";

const LOGIN_MUTATION = gql`
  mutation Login($code: String!, $service: String!) {
    loginForUser(code: $code, service: $service) {
      token
      user {
        _id
        createdAt
        updatedAt
        email
        firstName
        lastName
        avatar {
          url
          name
        }
      }
    }
  }
`;

function App() {
  const [loginMutation, { data }] = useMutation(LOGIN_MUTATION);

  useEffect(() => {
    const urlCode = new URLSearchParams(window.location.search).get("code");
    if (urlCode) {
      loginMutation({ variables: { code: urlCode, service: "GOOGLE" } });
    }
  }, []);

  return (
    <>
      {!data?.loginForUser?.token ? (
        <Login />
      ) : (
                <div>Hi, you're logged in! You're email is {data?.loginForUser?.user?.email}</div>
      )}
    </>
  );
}

export default App;

Stitching all this together will get the App working and it’ll look something like this:

To add more login providers (Github, Facebook), now you simply enable the login provider on Canonic, fill in the required secret, id, and you're good to go!

We already have the code mentioned in this blog hosted on Github, Feel free to clone this project, add your own project URL and give it a spin!

Building your blog in 2022

Kartik Grewal — Mon, 14 Feb 2022 14:33:21 +0000

In today’s time, blogging has become synonymous with tech. While there are some platforms out there that are amazing for publishing one’s blogs, a lot of people working in the tech industry prefer having their blog and take pride in it.

The blog author could be a grad school student trying to get their first project up and running and they chose a blog or could be an engineer trying to build their brand with exclusive content they want to publish on their blog.

The problem arises when the complexity of the project starts increasing multi-fold as and when the author decides to add more features or updates to their blog website. Similar to this, we at canonic too faced this exact problem.

When it comes to blog spaces, the requirements have a wide spectrum over industries/companies.

Basic requirements for a blog

Extremely SEO Friendly
It should be extremely SEO-friendly. All the different tags for the OG images and other meta tags should be present. Also, it should be a static website rendered as HTML, instead of a dynamically loading react bundle as that might not load in the time web crawlers are crawling your website.
Customizable Designs and Frontend
Users should have the ability to customize the design to match the brand we want. You may want to add your styling, brand, and customize it according to your requirement. Users should also be able to experiment with different features/or add more features going forward as the requirement comes in.
Publishing Experience
Users should be able to add draft posts, schedule them to get published. Along with that, we should be able to add team members with different permission levels. Rich text highlighting, code snippets, and other required markdown should be supported.

After gathering the above-mentioned requirements, our search for the combination that suited our MERN stack began. We compared different combinations to see which one worked best for us.

Strategies

Self Hosted Fullstack Platform (Ex. Ghost/WordPress)
Pro: They’re catering to this very use-case, hence very easy to use and manage. You can quickly get started with your blog.
Con: Customizability will be limited, we’ll have to use their choice of templating library. As we scale, we’ll also have to take into the cost consideration.
Headless Self Hosted Backend + static React App (Ex. WordPress + Gatsby / Ghost + NextJS)
Pro: Using React for the frontend fits right in our stack and allows us customizability. We’ll statically build the react and serve the pages as HTML.
Con: Frontend needs to be built with scratch/or we have to take react template already out there and customize it. We also need to set up some sort of trigger that builds the app on publishing content.
Headless Hosted CMS + React App (Ex. Contentful + Gatsby / WordPress cloud + NextJS / etc.)
Pro: We’ll be able to manage the backend quite extensively. It gives us the ability to customize and change if anything is required, currently or in the future.
Con: It requires a lot of effort across the board. It might not be the most cost-friendly.

What we chose:

In the end, we at Canonic decided to go with the middle option. We’ll use Ghost as the backend for our blog and React app for the frontend. Ghost already has the support for the requirements of a blog with features like scheduled publishing, adding drafts, customizable SEO tags, etc. It also provides you with APIs and Integrations so that integrating with a new frontend or different services becomes incredibly simple. Ghost is also built on the MERN stack - making it a good fit for our infrastructure.

The first option makes good sense if you’re not looking for high customizability. You can directly use ghost or WordPress and get started within minutes. They also provide basic customization tools to change color schemes or logos. The last option is good if you’re looking to build your blog structure connected to your other data services.

In the end, you should choose the option that best suits your needs. Consider which option is budget-friendly, least time-consuming, and checks all the boxes.

We would love to know in the comments what are you using for your blog?

Building a restaurant iOS App

Simranjot — Wed, 29 Dec 2021 11:36:34 +0000

We are building a simple food ordering iOS Application with Swift 5! It would look something like this after we build it:

Let's quickly go through a rough architecture of the application. We'll have two ViewControllers in our application:

RestaurantListingsViewController

This will be the home viewController of the app. This is where the user will land after opening the app. It will fetch the restaurants data from our backend and display it in a simple TableViewController. When the user will click on any one of them, we'll take him to the menu screen of the restaurant.
RestaurantMenuViewController
After clicking on any one of the restaurants from our home scene, this viewController will fetch the menu items for it, let the user add them to his cart and place an order!

We'll be using Alamofire networking library to help us communicate with our Backend easily and help us focus on building the actual app.

Step 1: Create & Setup a new Project

Open Xcode and click on Create a new Xcode Project.

Select the App option
Enter the name: Restaurant App
We'll be using Swift as our language and Storyboard as our Interface
Click Next and create your project!

To add Alamofire, we'll be using Swift Package Manager. Xcode comes with built-in support for it and we'll not have to use external package managers like Cocoapods or Carthage. Click on File → Add Packages...

Enter the following Package URLs in the search bar and add: Alamofire & AlamofireImage

https://github.com/Alamofire/AlamofireImage.git
https://github.com/Alamofire/Alamofire.git

Our project is set and ready to be built, let's dive in 🏃‍♂️

Step 2: Setup Data Modals and Helpers

Before creating any of our views and controllers, we'll set up our data modals that will hold the data that will be used inside our viewControllers. We'll create three modal files:

Restaurant.swift

This will a struct confirming to Codable protocol that will hold the data for our restaurants. When we'll fetch all the restaurants, the data coming in from the backend will be decoded into this struct.

//
//  Restaurant.swift
//  Restaurant App
//

import Foundation

struct Restaurants: Codable {
    let restaurants: [Restaurant]

    enum CodingKeys: String, CodingKey {
        case restaurants = "data"
    }
}

struct Restaurant: Codable {
    var id, name, description: String
    let brandImage: BrandImage?

    enum CodingKeys: String, CodingKey {
        case id = "_id"
        case name, description, brandImage
    }

    init() {

        id = ""
        name = ""
        description = ""
        brandImage = BrandImage()
    }

    init(from decoder: Decoder) throws {
        let container = try decoder.container(keyedBy: CodingKeys.self)
        id = try container.decode(String.self, forKey: .id)
        name = try container.decode(String.self, forKey: .name)
        description = try container.decode(String.self, forKey: .description)
        brandImage = try container.decodeIfPresent(BrandImage.self, forKey: .brandImage)
    }
}

struct BrandImage: Codable {
    let url, alt, name: String?

    enum CodingKeys: String, CodingKey {
        case url, alt, name
    }

    init() {
        url = ""
        alt = ""
        name = ""
    }

    init(from decoder: Decoder) throws {
        let container = try decoder.container(keyedBy: CodingKeys.self)
        url = try container.decodeIfPresent(String.self, forKey: .url)
        alt = try container.decodeIfPresent(String.self, forKey: .alt)
        name = try container.decodeIfPresent(String.self, forKey: .name)
    }
}

Menu.swift

This will a struct confirming to Codable protocol that will hold the data for our menu items. When we'll fetch the menu items for any particular restaurant, the data coming in from the backend will be decoded into this struct.

//
//  Menu.swift
//  Restaurant App
//

import Foundation

struct Menus: Codable {
    let menus: [Menu]

    enum CodingKeys: String, CodingKey {
        case menus = "data"
    }
}

struct Menu: Codable {
    var id, itemName, description, price: String
    let itemImage: ItemImage?

    enum CodingKeys: String, CodingKey {
        case id = "_id"
        case itemName, description, itemImage, price
    }

    init() {
        itemName = ""
        description = ""
        price = ""
        id = ""
        itemImage = ItemImage()
    }

    init(from decoder: Decoder) throws {
        let container = try decoder.container(keyedBy: CodingKeys.self)
        id = try container.decode(String.self, forKey: .id)
        itemName = try container.decode(String.self, forKey: .itemName)
        description = try container.decode(String.self, forKey: .description)
        itemImage = try container.decodeIfPresent(ItemImage.self, forKey: .itemImage)
        price = try container.decode(String.self, forKey: .price)
    }
}

struct ItemImage: Codable {
    let url, alt, name: String?

    enum CodingKeys: String, CodingKey {
        case url, alt, name
    }

    init() {
        url = ""
        alt = ""
        name = ""
    }

    init(from decoder: Decoder) throws {
        let container = try decoder.container(keyedBy: CodingKeys.self)
        url = try container.decodeIfPresent(String.self, forKey: .url)
        alt = try container.decodeIfPresent(String.self, forKey: .alt)
        name = try container.decodeIfPresent(String.self, forKey: .name)
    }
}

Order.swift

This will a struct confirming to Codable protocol that will hold the details of the order the user is placing. We'll send this data to our backend when the user places his confirmed order.

//
//  Order.swift
//  Restaurant App

import Foundation

struct Order: Codable {
    var restaurant: String
    var totalAmount: String
    var orderItems: [OrderItems]

    init() {
        restaurant = ""
        totalAmount = ""
        orderItems = []
    }
}

struct OrderItems: Codable {
    var item: String
    var quantity: String
}

Constants & Extensions

UIViewController+Extensions.swift

We'll be using a helper function to display alerts. We'll place it the UIViewController+Extensions.swift file.

//
//  UIViewController+Extensions.swift
//  Restaurant App
//

import UIKit

extension UIViewController {

  func presentAlert(withTitle title: String, message : String) {
    let alertController = UIAlertController(title: title, message: message, preferredStyle: .alert)
    let OKAction = UIAlertAction(title: "OK", style: .default) { action in
        print("You've pressed OK Button")
    }
    alertController.addAction(OKAction)
    self.present(alertController, animated: true, completion: nil)
  }
}

Constants.swift

This will hold StoryboardIdentifiers for our ViewControllers, ReuseIdentifiers for our UITableView Cells and some helper enums!

//
//  Constants.swift
//  Restaurant App
//

import Foundation

struct StoryBoardID {
    static let RestaurantListingsViewController = "RestaurantListingsViewController"
    static let RestaurantMenuViewController = "RestaurantMenuViewController"
}

struct CellIdentifiers {
    static let RestaurantTableViewCell = "RestaurantTableViewCell"
    static let RestaurantMenuTableViewCell = "RestaurantMenuTableViewCell"
}

enum NetworkState {
    case success
    case loading
    case failure
}

Our folder structure would look something like this after the setup:

Step 3: Setup Restaurant Listings

Create a two new Cocoa Touch Classes:

RestaurantListingsViewController of type UIViewController to hold our UI
RestaurantTableViewCell of type UITableViewCell to customise our TableCell

Head over to the Main.storyboard file where we'll create our view of our controller.

Assign RestaurantListingsViewController class we just created to a new UIViewController
Embed our RestaurantListingsViewController in an UINavigationController
Configure the UI
- Loading State UI (When the API call is in progress)
- Retry State UI (When the API call fails)
- RestaurantsTableView (When the API call succeeds and data is displayed)
- Create a prototype cell and assign it the RestaurantTableViewCell class

You can see the view setup on the interface in the sample project repository here

Head over to RestaurantListingsViewController and add the following code. We are going to:

Create the outlets and connect them with our interface
Add some variables to hold data for us

//
//  RestaurantListingsViewController.swift
//  Restaurant-App
//

import UIKit
import Alamofire

class RestaurantListingsViewController: UIViewController {

    var restaurants: [Restaurant] = [] // It'll have the array of all the restaurant items coming from the backend
    var fetchState: NetworkState = .loading // It'll have the latest network state of our view controller to control what to show

    @IBOutlet weak var retryButton: UIButton!
    @IBOutlet weak var retryStackView: UIStackView!
    @IBOutlet weak var loadingStackView: UIStackView!
    @IBOutlet weak var restaurantsTableView: UITableView!

    override func viewDidLoad() {
        super.viewDidLoad()

        title = "Restaurants"

        setupRetryButtton()
        setupTableView()

        updateViewState()
        fetchRestaurants()
    }
}

Add the following extensions below your class to setup our viewController:

// MARK: View Setup

extension RestaurantListingsViewController {

        // Sets up the retry button
    fileprivate func setupRetryButtton() {
        retryButton.layer.cornerRadius = 8
        retryButton.configuration?.contentInsets = NSDirectionalEdgeInsets(top: 10, leading: 20, bottom: 10, trailing: 20)
    }

        // Sets up the tableView
    fileprivate func setupTableView() {
        restaurantsTableView.backgroundColor = .clear
        restaurantsTableView.tableFooterView = UIView()
    }

        // Helps to show the correct UI state
    fileprivate func updateViewState() {
        switch fetchState {
        case .success:
            retryStackView.isHidden = true
            loadingStackView.isHidden = true
            restaurantsTableView.isHidden = false
            break;

        case .loading:
            retryStackView.isHidden = true
            loadingStackView.isHidden = false
            restaurantsTableView.isHidden = true

        case .failure:
            retryStackView.isHidden = false
            restaurantsTableView.isHidden = true
            loadingStackView.isHidden = true
            break

        }
    }
}

// MARK: Action Helpers

extension RestaurantListingsViewController {

        // Triggers the Restaurant Fetching API call again 
    @IBAction func retryTapped(_ sender: Any) {
        fetchRestaurants()
        updateViewState()
    }

        // Updates the TableView after the API Call
    fileprivate func postRestaurantFetchActions() {
        switch fetchState {
        case .success:
            restaurantsTableView.reloadSections(IndexSet(integer: 0), with: .bottom)
            break
        default:
            break
        }
        updateViewState()
    }

        // Shows the menu items for the selected restaurant
    fileprivate func pushToRestaurantMenuVC(for restaurant: Restaurant) {
        // Push to Menu Items
    }
}

// MARK: TableView Delegates

extension RestaurantListingsViewController: UITableViewDelegate, UITableViewDataSource {
    func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {        
        return restaurants.count
    }

    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        let cell = tableView.dequeueReusableCell(withIdentifier: CellIdentifiers.RestaurantTableViewCell, for: indexPath) as! RestaurantTableViewCell
        cell.configureCell(for: restaurants[indexPath.row])
        return cell
    }

    func tableView(_ tableView: UITableView, didSelectRowAt indexPath: IndexPath) {
        tableView.deselectRow(at: indexPath, animated: true)
        pushToRestaurantMenuVC(for: restaurants[indexPath.row])
    }
}

// MARK: Networking

extension RestaurantListingsViewController {

    fileprivate func fetchRestaurants() {
        fetchState = .loading
        AF.request("YOUR API URL")
          .validate()
          .responseDecodable(of: Restaurants.self) { [weak self] (response) in
            guard let availableRestaurants = response.value else { return }
              self?.restaurants = availableRestaurants.restaurants
              self?.fetchState = (response.error != nil) ? .failure : .success
              DispatchQueue.main.async {
                  self?.postRestaurantFetchActions()
              }
          }
    }
}

Head over to RestaurantTableViewCell and add the following code to setup our custom cell:

//
//  RestaurantTableViewCell.swift
//  Restaurant App
//

import UIKit
import Alamofire
import AlamofireImage

class RestaurantTableViewCell: UITableViewCell {

    @IBOutlet weak var brandImageView: UIImageView!
    @IBOutlet weak var titleLabel: UILabel!
    @IBOutlet weak var descriptionLabel: UILabel!

    override func awakeFromNib() {
        super.awakeFromNib()
        brandImageView.contentMode = .scaleToFill
    }

    func configureCell(for restaurant: Restaurant) {
        titleLabel.text = restaurant.name
        descriptionLabel.text = restaurant.description

        guard let image = restaurant.brandImage else { return }
        guard let urlString = image.url else { return }
        let request = URLRequest(url: URL(string: urlString)!)
        AF.request(request).responseImage { response in
            if case .success(let image) = response.result {
                self.brandImageView.image = image
                }
        }
    }
}

Step 4: Setup Backend

Let's head to Canonic and find the Restaurant App sample project from the Marketplace. You can either:

Use this sample project to and continue, or
Clone it and Deploy 🚀 . This will then use your data from your own project.

Head on to the Docs and copy the /restaurants endpoint of the Restaurant Table. This is the Get API that will fetch us the data from the database.

Replace the URL you got in our networking code (fetchRestaurants function) in our RestaurantListingsViewController file, run the app and it will show you this:

Step 4: Setup Restaurant Menu View

We'll follow a very similar pattern with this viewController also. Create a two new Cocoa Touch Classes:

RestaurantMenuViewController ****of type UIViewController to hold our UI
RestaurantMenuTableViewCell of type UITableViewCell to customise our TableCell

Our folder structure will be looking something like this:

Head over to the Main.storyboard file where we'll create our view of our controller.

Assign RestaurantMenuViewController class we just created to a new UIViewController
Configure the UI
- Loading State UI (When the API call is in progress)
- Retry State UI (When the API call fails)
- Place Order Button
- RestaurantsTableView (When the API call succeeds and data is displayed)
- Create a prototype cell and assign it the RestaurantMenuTableViewCell class

You can see the view setup on the interface in the sample project repository here

Head over to RestaurantMenuViewController and add the following code. We are going to:

Create the outlets and connect them with our interface
Add some variables to hold data for us

//
//  RestaurantMenuViewController.swift
//  Restaurant App
//

import UIKit
import Alamofire

// Protocol that our custom cell will confoirm to. It'll be triggered everytime the quantity changes of any of the items
protocol OrderUpdates {
    func updateOrder( menuItem: inout Menu, quantity: Int)
}

class RestaurantMenuViewController: UIViewController {

    var restaurant: Restaurant!
    var menuItems: [Menu] = []
    var orderSummary = Order()
    var fetchState: NetworkState = .loading


    @IBOutlet weak var retryButton: UIButton!
    @IBOutlet weak var retryStackView: UIStackView!
    @IBOutlet weak var loadingStackView: UIStackView!
    @IBOutlet weak var menuTableView: UITableView!
    @IBOutlet weak var placeOrderButton: UIButton!

    override func viewDidLoad() {
        super.viewDidLoad()

        title = restaurant.name
        orderSummary.restaurant = restaurant.id

        setupRetryButtton()
        setupTableView()

        updateViewState()
        updatePlaceOrderButton()
        fetchMenu()
    }
}

Add the following extensions below your class to setup our viewController:

// MARK: View Setup

extension RestaurantMenuViewController {

        // Sets up the retry button
    fileprivate func setupRetryButtton() {
        retryButton.layer.cornerRadius = 8
        retryButton.configuration?.contentInsets = NSDirectionalEdgeInsets(top: 10, leading: 20, bottom: 10, trailing: 20)
    }

// Sets up the tableView
    fileprivate func setupTableView() {
        menuTableView.backgroundColor = .clear
        menuTableView.tableFooterView = UIView()
        menuTableView.contentInset = UIEdgeInsets(top: 0, left: 0, bottom: 100, right: 0)
    }

// Helps to show the correct UI state
    fileprivate func updateViewState() {
        switch fetchState {
        case .success:
            retryStackView.isHidden = true
            loadingStackView.isHidden = true
            menuTableView.isHidden = false
            break;

        case .loading:
            retryStackView.isHidden = true
            loadingStackView.isHidden = false
            menuTableView.isHidden = true
            break;

        case .failure:
            retryStackView.isHidden = false
            menuTableView.isHidden = true
            loadingStackView.isHidden = true
            break;

        }
    }

}

// MARK: Action Helpers

extension RestaurantMenuViewController {

        // Triggers the Menu Fetching API call again
    @IBAction func retryTapped(_ sender: Any) {
        fetchMenu()
        updateViewState()
    }

        // Configures the data and makes and API to the backend to place the order
    @IBAction func placeOrderClicked(_ sender: Any) {
        let jsonData = try! JSONEncoder().encode(orderSummary)
        let json = try? JSONSerialization.jsonObject(with: jsonData, options: [.topLevelDictionaryAssumed]) as? [String: Any]
        let parameters = ["input": json]
        placeOrder(parameters: parameters as [String : Any])
    }

        // Updated the Place Order Button with correct amount after the user adds or removes any items
    fileprivate func updatePlaceOrderButton() {
        let amount = getTotalAmount()
        placeOrderButton.setTitle("Place Order: $\(amount)", for: .normal)
        placeOrderButton.setTitle("Place Order", for: .disabled)
        placeOrderButton.isHidden = !(amount > 0.0)
    }

        // Updates the TableView after the API Call
    fileprivate func postMenuFetchActions() {
        switch fetchState {
        case .success:
            menuTableView.reloadSections(IndexSet(integer: 0), with: .bottom)
            break
        default:
            break
        }
        updateViewState()
    }

        // Heleper function to get the price of an menu item
    fileprivate func getItemPrice(itemId: String) -> Double {
        let item = menuItems.first { item in
            item.id == itemId
        }

        return (Double(item!.price) ?? 0.0)
    }

        // Heleper function to get the total that amounts up after adding the items
    fileprivate func getTotalAmount() -> Double {
        return orderSummary.orderItems.reduce(0.0) { result, orderItem in
            result + (getItemPrice(itemId: orderItem.item) * (Double(orderItem.quantity) ?? 0.0))
        }
    }
}

// MARK: TableView Delegates

extension RestaurantMenuViewController: UITableViewDelegate, UITableViewDataSource {
    func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return menuItems.count
    }

    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        let cell = tableView.dequeueReusableCell(withIdentifier: CellIdentifiers.RestaurantMenuTableViewCell, for: indexPath) as! RestaurantMenuTableViewCell
        cell.delegate = self
        cell.selectionStyle = .none
        cell.configureCell(for: menuItems[indexPath.row])
        return cell
    }

    func tableView(_ tableView: UITableView, didSelectRowAt indexPath: IndexPath) {
        tableView.deselectRow(at: indexPath, animated: true)
    }
}

// MARK: Order Update Delegates

extension RestaurantMenuViewController: OrderUpdates {

    internal func updateOrder( menuItem: inout Menu, quantity: Int) {
        if let row = orderSummary.orderItems.firstIndex(where: {$0.item == menuItem.id}) {
            if (quantity == 0) {
                orderSummary.orderItems.remove(at: row)
            } else {
                orderSummary.orderItems[row].quantity = "\(quantity)"
            }
        } else {
            orderSummary.orderItems.append(OrderItems(item: menuItem.id, quantity: "\(quantity)"))
        }

        orderSummary.totalAmount = "\(getTotalAmount())"
        updatePlaceOrderButton()
    }
}

// MARK: Networking

extension RestaurantMenuViewController {

    fileprivate func fetchMenu() {
        fetchState = .loading
        AF.request("https://restaurant-app.can.canonic.dev/api/menus")
            .validate()
            .responseDecodable(of: Menus.self) { [weak self] (response) in
                guard let availableMenus = response.value else { return }
                self?.menuItems = availableMenus.menus
                self?.fetchState = (response.error != nil) ? .failure : .success
                DispatchQueue.main.async {
                    self?.postMenuFetchActions()
                }
            }
    }

    fileprivate func placeOrder(parameters: [String: Any]) {
        fetchState = .loading
        updateViewState()
        AF.request("https://restaurant-app.can.canonic.dev/api/orders", method: .post, parameters: parameters as Parameters, encoding: JSONEncoding.default)
            .responseData { [weak self] response in
                if ((response.value) != nil) {                    
                    DispatchQueue.main.async {
                        self?.presentAlert(withTitle: "Order Placed 🥳", message: "Sit Tight, your order has been received!")
                        self?.orderSummary = Order()
                        self?.orderSummary.restaurant = (self?.restaurant.id)!
                        self?.updatePlaceOrderButton()
                        self?.fetchState = .success
                        self?.updateViewState()
                        self?.menuTableView.reloadSections(IndexSet(integer: 0), with: .bottom)
                    }
                } else {
                    DispatchQueue.main.async {
                        self?.presentAlert(withTitle: "Oops!", message: "Something went wrong, try again later!")
                        self?.updateViewState()
                        self?.fetchState = .failure
                    }
                }
            }
    }
}

Head over to RestaurantMenuTableViewCell and add the following code to setup our custom cell:

//
//  RestaurantMenuTableViewCell.swift
//  Restaurant App
//

import UIKit
import Alamofire
import AlamofireImage

class RestaurantMenuTableViewCell: UITableViewCell {

    @IBOutlet weak var itemImageView: UIImageView!
    @IBOutlet weak var titleLabel: UILabel!
    @IBOutlet weak var descriptionLabel: UILabel!
    @IBOutlet weak var priceLabel: UILabel!
    @IBOutlet weak var quatityLabel: UILabel!
    @IBOutlet weak var stepper: UIStepper!

    var menuItem: Menu = Menu()
    var delegate: OrderUpdates?

    override func awakeFromNib() {
        super.awakeFromNib()
        itemImageView.contentMode = .scaleToFill
    }

    @IBAction func stepperClicked(_ sender: UIStepper) {
        quatityLabel.text = "x\(String(format: "%.0f", sender.value))"        
        delegate?.updateOrder(menuItem: &menuItem, quantity: Int(sender.value))
    }

    func configureCell(for menu: Menu) {
        menuItem = menu
        titleLabel.text = menu.itemName
        descriptionLabel.text = menu.description
        priceLabel.text = "$\(menu.price)"
        quatityLabel.text = "x\(String(format: "%.0f", stepper.value))"


        guard let image = menu.itemImage else { return }
        guard let urlString = image.url else { return }

        let request = URLRequest(url: URL(string: urlString.addingPercentEncoding(withAllowedCharacters: CharacterSet.urlQueryAllowed)!)!)
        AF.request(request).responseImage { response in
            if case .success(let image) = response.result {
                self.itemImageView.image = image
            }
        }
    }

    override func prepareForReuse() {
        super.prepareForReuse()
        itemImageView.image = nil
    }
}

Step 5: Take the user to the Menu Listing

Now both of our viewControllers are set. Let's add the code to push the user to the menu listings when the user clicks on any restaurant. Head to RestaurantListingsViewController and update the pushToRestaurantMenuVC function:

fileprivate func pushToRestaurantMenuVC(for restaurant: Restaurant) {
        let restaurantMenuVC = UIStoryboard.init(name: "Main", bundle: Bundle.main).instantiateViewController(withIdentifier: StoryBoardID.RestaurantMenuViewController) as! RestaurantMenuViewController
        restaurantMenuVC.restaurant = restaurant
        self.navigationController?.pushViewController(restaurantMenuVC, animated: true)
    }

Build and run your app to see it in action 🥳 Now when you click on the it'll fetch the menu items of the restaurant and let you place your order.

And with that, you have successfully made a basic Food Ordering iOS App for your project. 💃🕺

Congratulations! 🎉

If you want, you can also duplicate this project from Canonic's sample app and easily get started by customizing it as per your experience. Check it out app.canonic.dev.

You can also check out our other guides here.

Join us on discord to discuss or share with our community. Write to us for any support requests at support@canonic.dev. Check out our website to know more about Canonic.

CRM App with React

Ajay Jarhad — Mon, 27 Dec 2021 08:14:22 +0000

CRM or the Customer Relationship Management system is a great way to administrate the relationship with the customer. It’s a great tool to know and a pure pleasure to build.

In this article, we will discuss how to create a CRM app using React.js, Material UI, we will be also using other integrations such as Asana to create a ticket whenever a ticket is create on our app update a Google Sheet whenever a deal is added to the user.

Let's get started

Setting up React

Let's begin by creating a boilerplate using the
create-react-app



npx create-react-app crm-app

Install Material UI

We will be using Material UI as an UI library. It boosts up the speed of development as we won't have to much of CSS manually.



npm install @mui/material @emotion/react @emotion/styled @material-ui/icons @mui/icons-material

Create a ContentTable component

We are using a Table component by Material UI to quickly set up a table with pagination support, we will be using Custom pagination actions you can read more about it here.

This will give us a separate component. That handles pagination, for the sake of simplicity we will be extracting that function into another component.

To create your first component, create a directory inside src directory and call it components. Proceed by creating another directory inside ‘components’ and we will name it ContentTable, we will create a file with the same name inside of it, ContentTable.js.



    const customers = [
    {
    id: 1,
    name: "Lillian Carter",
    email: "xcollier@goodwin.com",
    phone: "+1-267-551-8666",
    company: "Larkin Group",
    label: "Marketing",
    },
    {
    id: 2,
    name: "Otto Walker",
    email: "stokes.hubert@hotmail.com",
    phone: "+1-580-977-4361",
    company: "Bednar-Sawayn",
    label: "Newsletter",
    },
    {
    id: 3,
    name: "Kaylee Taylor",
    email: "diana45@hotmail.com",
    phone: "+1-202-918-2132",
    company: "Rolfson and Sons ",
    label: "Ads",
    },
    {
    id: 4,
    name: "Aiden Houston",
    email: "ctromp@kassulke.info",
    phone: "+1-215-480-3687",
    company: "Wisoky, Windler and Nienow",
    label: "Newsletter",
    },
    {
    id: 5,
    name: "Davis Houston",
    email: "voreilly@yahoo.com",
    phone: "+1-203-883-5460",
    company: "Schmidt, Streich and Schuster",
    label: "Ads",
    },
];

src/components/ListCustomer/ListCustomer.js

And, will pretty much copy the code for Table from Material UI’s documentation, and we will loop through our static array to fill the data in the table.



import { React, useState } from "react";

import {
  Table,
  TableBody,
  TableContainer,
  TableFooter,
  TablePagination,
  TableRow,
  Paper,
  TableCell,
  TableHead,
} from "@mui/material";

const customers = [
  {
    id: 1,
    name: "Lillian Carter",
    email: "xcollier@goodwin.com",
    phone: "+1-267-551-8666",
    company: "Larkin Group",
    label: "Marketing",
  },
  {
    id: 2,
    name: "Otto Walker",
    email: "stokes.hubert@hotmail.com",
    phone: "+1-580-977-4361",
    company: "Bednar-Sawayn",
    label: "Newsletter",
  },
  {
    id: 3,
    name: "Kaylee Taylor",
    email: "diana45@hotmail.com",
    phone: "+1-202-918-2132",
    company: "Rolfson and Sons ",
    label: "Ads",
  },
  {
    id: 4,
    name: "Aiden Houston",
    email: "ctromp@kassulke.info",
    phone: "+1-215-480-3687",
    company: "Wisoky, Windler and Nienow",
    label: "Newsletter",
  },
  {
    id: 5,
    name: "Davis Houston",
    email: "voreilly@yahoo.com",
    phone: "+1-203-883-5460",
    company: "Schmidt, Streich and Schuster",
    label: "Ads",
  },
];

const ContentTable = () => {
  const [page, setPage] = useState(0);
  const [rowsPerPage, setRowsPerPage] = useState(5);
  const emptyRows =
    page > 0 ? Math.max(0, (1 + page) * rowsPerPage - customers.length) : 0;

  const handleChangePage = (event, newPage) => {
    setPage(newPage);
  };

  const handleChangeRowsPerPage = (event) => {
    setRowsPerPage(parseInt(event.target.value, 10));
    setPage(0);
  };

  return (
    <TableContainer component={Paper} sx={{ margin: "2rem", width: "95%" }}>
      <Table sx={{ minWidth: 500 }} aria-label="custom pagination table">
        <TableHead>
          <TableRow>
            <TableCell
              align="left"
              sx={{
                backgroundColor: "black",
                color: "white",
                borderRight: "1px solid white",
              }}
            >
              Name
            </TableCell>
            <TableCell
              align="left"
              sx={{
                backgroundColor: "black",
                color: "white",
                borderRight: "1px solid white",
              }}
            >
              Company
            </TableCell>
            <TableCell
              align="left"
              sx={{
                backgroundColor: "black",
                color: "white",
                borderRight: "1px solid white",
              }}
            >
              Email
            </TableCell>
            <TableCell
              align="left"
              sx={{
                backgroundColor: "black",
                color: "white",
                borderRight: "1px solid white",
              }}
            >
              Phone
            </TableCell>
          </TableRow>
        </TableHead>
        <TableBody>
          {customers &&
            (rowsPerPage > 0
              ? customers.slice(
                  page * rowsPerPage,
                  page * rowsPerPage + rowsPerPage
                )
              : customers
            ).map((row, index) => (
              <TableRow key={index}>
                <TableCell
                  component="th"
                  scope="row"
                  sx={{ width: 160, borderRight: "1px solid black" }}
                >
                  {row.name}
                </TableCell>
                <TableCell
                  sx={{ width: 160, borderRight: "1px solid black" }}
                  align="left"
                >
                  {row.company}
                </TableCell>
                <TableCell
                  sx={{ width: 160, borderRight: "1px solid black" }}
                  align="left"
                >
                  {row.email}
                </TableCell>
                <TableCell sx={{ width: 160 }} align="left">
                  {row.phone}
                </TableCell>
              </TableRow>
            ))}

          {emptyRows > 0 && (
            <TableRow style={{ height: 53 * emptyRows }}>
              <TableCell colSpan={6} />
            </TableRow>
          )}
        </TableBody>
        <TableFooter>
          <TableRow>
            <TablePagination
              rowsPerPageOptions={[5, 10, 25, { label: "All", value: -1 }]}
              colSpan={3}
              count={customers}
              rowsPerPage={rowsPerPage}
              page={page}
              SelectProps={{
                inputProps: {
                  "aria-label": "rows per page",
                },
                native: true,
              }}
              onPageChange={handleChangePage}
              onRowsPerPageChange={handleChangeRowsPerPage}
              ActionsComponent={TablePaginationActions}
            />
          </TableRow>
        </TableFooter>
      </Table>
    </TableContainer>
  );
};

export default ContentTable;

src/components/ContentTable/ContentTable.js

The above code will complain about TablePaginationActions being undefined, so let’s handle that.

Next, we will create a utility component, that will help us with Pagination, Material UI uses it on same component as a demo, but extracting it outside makes ContentTable bit more clean.

Create a directory in componenets and name it Pagination and create a index.js file inside of it.



import { React } from "react";
import PropTypes from "prop-types";
import { useTheme } from "@mui/material/styles";
import { Box, IconButton } from "@mui/material";
import FirstPageIcon from "@mui/icons-material/FirstPage";
import KeyboardArrowLeft from "@mui/icons-material/KeyboardArrowLeft";
import KeyboardArrowRight from "@mui/icons-material/KeyboardArrowRight";
import LastPageIcon from "@mui/icons-material/LastPage";

export const TablePaginationActions = (props) => {
  const theme = useTheme();
  const { count, page, rowsPerPage, onPageChange } = props;

  const handleFirstPageButtonClick = (event) => {
    onPageChange(event, 0);
  };

  const handleBackButtonClick = (event) => {
    onPageChange(event, page - 1);
  };

  const handleNextButtonClick = (event) => {
    onPageChange(event, page + 1);
  };

  const handleLastPageButtonClick = (event) => {
    onPageChange(event, Math.max(0, Math.ceil(count / rowsPerPage) - 1));
  };

  return (
    <Box sx={{ flexShrink: 0, ml: 2.5 }}>
      <IconButton
        onClick={handleFirstPageButtonClick}
        disabled={page === 0}
        aria-label="first page"
      >
        {theme.direction === "rtl" ? <LastPageIcon /> : <FirstPageIcon />}
      </IconButton>
      <IconButton
        onClick={handleBackButtonClick}
        disabled={page === 0}
        aria-label="previous page"
      >
        {theme.direction === "rtl" ? (
          <KeyboardArrowRight />
        ) : (
          <KeyboardArrowLeft />
        )}
      </IconButton>
      <IconButton
        onClick={handleNextButtonClick}
        disabled={page >= Math.ceil(count / rowsPerPage) - 1}
        aria-label="next page"
      >
        {theme.direction === "rtl" ? (
          <KeyboardArrowLeft />
        ) : (
          <KeyboardArrowRight />
        )}
      </IconButton>
      <IconButton
        onClick={handleLastPageButtonClick}
        disabled={page >= Math.ceil(count / rowsPerPage) - 1}
        aria-label="last page"
      >
        {theme.direction === "rtl" ? <FirstPageIcon /> : <LastPageIcon />}
      </IconButton>
    </Box>
  );
};

TablePaginationActions.propTypes = {
  count: PropTypes.number.isRequired,
  onPageChange: PropTypes.func.isRequired,
  page: PropTypes.number.isRequired,
  rowsPerPage: PropTypes.number.isRequired,
};

src/components/Pagination/index.js

We can now import this Pagination Component in the ContentTable component and the error will go away. The end result should look like this

Create a Modal component

Now our table is ready, let’s work Modal component, we want this modal to pop up anytime a user clicks on any of the row on the table. We will be using Material UI’s Modal component for this you can read more about it here

In a modal, we want 3 columns:

1st column would display more information about the particular customer
2nd column would accommodate the notes feature, where a user would be able to leave notes on the customer.
3rd column would a feature to add a deal to user and create a task on Asana.

It would look something like this

Let’s get to it.



import { React } from "react";
import { styled } from "@mui/material/styles";
import { Typography, Fade, Modal, Grid, Paper, Backdrop } from "@mui/material";

const Item = styled(Paper)(({ theme }) => ({
  ...theme.typography.body2,
  padding: theme.spacing(1),
  textAlign: "center",
  color: theme.palette.text.secondary,
  boxShadow: "none",
}));

export default function Modals() {
  return (
    <div>
      <Modal
        aria-labelledby="transition-modal-title"
        aria-describedby="transition-modal-description"
        open={open}
        closeAfterTransition
        BackdropComponent={Backdrop}
        BackdropProps={{
          timeout: 500,
        }}
      >
        <Fade in={open}>
          <Grid
            container
            spacing={1}
            sx={{
              width: "95%",
              height: "95%",
              backgroundColor: "white",
              position: "absolute",
              top: "4%",
              left: "3%",
            }}
          >
            <Grid item xs={3} sx={{ padding: "5px" }}>
              <Typography variant="h6" gutterBottom component="div">
                Name
              </Typography>
              <Typography variant="h6" gutterBottom component="div">
                Company
              </Typography>
              <Typography variant="h6" gutterBottom component="div">
                Phone
              </Typography>
              <Typography variant="h6" gutterBottom component="div">
                Email
              </Typography>
              <Typography variant="h6" gutterBottom component="div">
                Label
              </Typography>
            </Grid>
            <Grid
              item
              xs={6}
              sx={{ backgroundColor: "lightgray", padding: "5px" }}
            >
              <Item sx={{ backgroundColor: "inherit", marginTop: "2rem" }}>
                <Typography variant="h6" gutterBottom component="div">
                  Notes
                </Typography>
              </Item>
            </Grid>
            <Grid item xs={3} sx={{ padding: "5px", marginTop: "2rem" }}>
              <Item>
                <Typography variant="h6" gutterBottom component="div">
                  Deals
                </Typography>
                <Typography variant="p" gutterBottom component="div">
                  Track the revenue opportunities associated with this record
                </Typography>
              </Item>
              <Item sx={{ marginTop: "2rem" }}>
                <Typography variant="h6" gutterBottom component="div">
                  Tickets
                </Typography>
                <Typography variant="p" gutterBottom component="div">
                  Track the customer requests associated with this record
                </Typography>
              </Item>
            </Grid>
          </Grid>
        </Fade>
      </Modal>
    </div>
  );
}

src/components/Modal/Modal.js

We are heavily utilizing the Material UI’s Grid layout to make this column structure you can get more read on it here

The end result would look like this

But you have no way to see this, since nothing is triggering this component to open up. Let get that done.

We need to do 4 things in ContentTable component now:

Import the Modal component.
Create a state to hold the status of whether Modal is open or not.
Create a onClick trigger on the table’s row.
Feed the customer’s data to Modal component.



import Modals from "../Modal";

const [isOpen, setIsOpen] = useState();
const [customerData, setCustomerData] = useState();

const handleClick = (data) => {
    setIsOpen(true);
    setCustomerData(data);
    };

<TableRow
key={index}
onClick={() => {
    handleClick(row); //We are passing customer's information though this 'row' parameter
}}
sx={{ cursor: "pointer" }}
>

<Modals data={customerData} open={isOpen} setIsOpen={setIsOpen} />

Now our task of setting up the modal is done. This is how the ContentTable component should look like:



import { React, useState } from "react";

import {
  Table,
  TableBody,
  TableContainer,
  TableFooter,
  TablePagination,
  TableRow,
  Paper,
  TableCell,
  TableHead,
} from "@mui/material";

import { TablePaginationActions } from "../Pagination";
import Modals from "../Modal";

const customers = [
  {
    id: 1,
    name: "Lillian Carter",
    email: "xcollier@goodwin.com",
    phone: "+1-267-551-8666",
    company: "Larkin Group",
    label: "Marketing",
  },
  {
    id: 2,
    name: "Otto Walker",
    email: "stokes.hubert@hotmail.com",
    phone: "+1-580-977-4361",
    company: "Bednar-Sawayn",
    label: "Newsletter",
  },
  {
    id: 3,
    name: "Kaylee Taylor",
    email: "diana45@hotmail.com",
    phone: "+1-202-918-2132",
    company: "Rolfson and Sons ",
    label: "Ads",
  },
  {
    id: 4,
    name: "Aiden Houston",
    email: "ctromp@kassulke.info",
    phone: "+1-215-480-3687",
    company: "Wisoky, Windler and Nienow",
    label: "Newsletter",
  },
  {
    id: 5,
    name: "Davis Houston",
    email: "voreilly@yahoo.com",
    phone: "+1-203-883-5460",
    company: "Schmidt, Streich and Schuster",
    label: "Ads",
  },
];

const ContentTable = () => {
  const [page, setPage] = useState(0);
  const [rowsPerPage, setRowsPerPage] = useState(5);
  const [isOpen, setIsOpen] = useState();
  const [customerData, setCustomerData] = useState();

  const emptyRows =
    page > 0 ? Math.max(0, (1 + page) * rowsPerPage - customers.length) : 0;

  const handleChangePage = (event, newPage) => {
    setPage(newPage);
  };

  const handleChangeRowsPerPage = (event) => {
    setRowsPerPage(parseInt(event.target.value, 10));
    setPage(0);
  };
  const handleClick = (data) => {
    setIsOpen(true);
    setCustomerData(data);
  };

  return (
    <TableContainer component={Paper} sx={{ margin: "2rem", width: "95%" }}>
      <Table sx={{ minWidth: 500 }} aria-label="custom pagination table">
        <TableHead>
          <TableRow>
            <TableCell
              align="left"
              sx={{
                backgroundColor: "black",
                color: "white",
                borderRight: "1px solid white",
              }}
            >
              Name
            </TableCell>
            <TableCell
              align="left"
              sx={{
                backgroundColor: "black",
                color: "white",
                borderRight: "1px solid white",
              }}
            >
              Company
            </TableCell>
            <TableCell
              align="left"
              sx={{
                backgroundColor: "black",
                color: "white",
                borderRight: "1px solid white",
              }}
            >
              Email
            </TableCell>
            <TableCell
              align="left"
              sx={{
                backgroundColor: "black",
                color: "white",
                borderRight: "1px solid white",
              }}
            >
              Phone
            </TableCell>
          </TableRow>
        </TableHead>
        <TableBody>
          {customers &&
            (rowsPerPage > 0
              ? customers.slice(
                  page * rowsPerPage,
                  page * rowsPerPage + rowsPerPage
                )
              : customers
            ).map((row, index) => (
              <TableRow
                key={index}
                onClick={() => {
                  handleClick(row);
                }}
                sx={{ cursor: "pointer" }}
              >
                <TableCell
                  component="th"
                  scope="row"
                  sx={{ width: 160, borderRight: "1px solid black" }}
                >
                  {row.name}
                </TableCell>
                <TableCell
                  sx={{ width: 160, borderRight: "1px solid black" }}
                  align="left"
                >
                  {row.company}
                </TableCell>
                <TableCell
                  sx={{ width: 160, borderRight: "1px solid black" }}
                  align="left"
                >
                  {row.email}
                </TableCell>
                <TableCell sx={{ width: 160 }} align="left">
                  {row.phone}
                </TableCell>
              </TableRow>
            ))}

          {emptyRows > 0 && (
            <TableRow style={{ height: 53 * emptyRows }}>
              <TableCell colSpan={6} />
            </TableRow>
          )}
        </TableBody>
        <TableFooter>
          <TableRow>
            <TablePagination
              rowsPerPageOptions={[5, 10, 25, { label: "All", value: -1 }]}
              colSpan={3}
              count={customers}
              rowsPerPage={rowsPerPage}
              page={page}
              SelectProps={{
                inputProps: {
                  "aria-label": "rows per page",
                },
                native: true,
              }}
              onPageChange={handleChangePage}
              onRowsPerPageChange={handleChangeRowsPerPage}
              ActionsComponent={TablePaginationActions}
            />
          </TableRow>
        </TableFooter>
      </Table>
      <Modals data={customerData} open={isOpen} setIsOpen={setIsOpen} />
    </TableContainer>
  );
};

export default ContentTable;

src/components/ContentTable/ContentTable.js

Now if you click on any row on the table, the Modal we created should pop-up.

Now we are receiving 3 props in Modal component,

data - that contains the data of that row’s customer
open - is a state containing a boolean value of whether modal is open or not
setIsOpen - which is used to manipulate the value of ‘open’

Let’s utilize this.



export default function Modals({ data, open, setIsOpen }) 

const handleClose = () => {
    setIsOpen(!open);
    };

<Modal
aria-labelledby="transition-modal-title"
aria-describedby="transition-modal-description"
open={open}
onClose={handleClose}
closeAfterTransition
BackdropComponent={Backdrop}
BackdropProps={{
    timeout: 500,
}}
>

<Grid item xs={3} sx={{ padding: "5px" }}>
<Typography variant="h6" gutterBottom component="div">
    {data.name}
</Typography>
<Typography variant="h6" gutterBottom component="div">
    {data.company}
</Typography>
<Typography variant="h6" gutterBottom component="div">
    {data.phone}
</Typography>
<Typography variant="h6" gutterBottom component="div">
    {data.email}
</Typography>
<Typography variant="h6" gutterBottom component="div">
    {data.label}
</Typography>
</Grid>

Now our Modal component should look like this:



import { React } from "react";
import { styled } from "@mui/material/styles";
import { Typography, Fade, Modal, Grid, Paper, Backdrop } from "@mui/material";

const Item = styled(Paper)(({ theme }) => ({
  ...theme.typography.body2,
  padding: theme.spacing(1),
  textAlign: "center",
  color: theme.palette.text.secondary,
  boxShadow: "none",
}));

export default function Modals({ data, open, setIsOpen }) {
  const handleClose = () => {
    setIsOpen(!open);
  };

  return (
    <div>
      <Modal
        aria-labelledby="transition-modal-title"
        aria-describedby="transition-modal-description"
        open={open}
        onClose={handleClose}
        closeAfterTransition
        BackdropComponent={Backdrop}
        BackdropProps={{
          timeout: 500,
        }}
      >
        <Fade in={open}>
          <Grid
            container
            spacing={1}
            sx={{
              width: "95%",
              height: "95%",
              backgroundColor: "white",
              position: "absolute",
              top: "4%",
              left: "3%",
            }}
          >
            <Grid item xs={3} sx={{ padding: "5px" }}>
              <Typography variant="h6" gutterBottom component="div">
                **{data.name}**
              </Typography>
              <Typography variant="h6" gutterBottom component="div">
                **{data.company}**
              </Typography>
              <Typography variant="h6" gutterBottom component="div">
                **{data.phone}**
              </Typography>
              <Typography variant="h6" gutterBottom component="div">
                **{data.email}**
              </Typography>
              <Typography variant="h6" gutterBottom component="div">
                **{data.label}**
              </Typography>
            </Grid>
            <Grid
              item
              xs={6}
              sx={{ backgroundColor: "lightgray", padding: "5px" }}
            >
              <Item sx={{ backgroundColor: "inherit", marginTop: "2rem" }}>
                <Typography variant="h6" gutterBottom component="div">
                  Notes
                </Typography>
              </Item>
            </Grid>
            <Grid item xs={3} sx={{ padding: "5px", marginTop: "2rem" }}>
              <Item>
                <Typography variant="h6" gutterBottom component="div">
                  Deals
                </Typography>
                <Typography variant="p" gutterBottom component="div">
                  Track the revenue opportunities associated with this record
                </Typography>
              </Item>
              <Item sx={{ marginTop: "2rem" }}>
                <Typography variant="h6" gutterBottom component="div">
                  Tickets
                </Typography>
                <Typography variant="p" gutterBottom component="div">
                  Track the customer requests associated with this record
                </Typography>
              </Item>
            </Grid>
          </Grid>
        </Fade>
      </Modal>
    </div>
  );
}

src/components/Modal/Modal.js

The modal should have the dynamic data based on which row you click, and should look something like this:

Create a DetailsCard component.

Our bare-bones modal is ready, but it doesn’t look good at all, let’s extract out user’s information to a separate component, so we can enhance the looks.

Proceed by creating DetailsCard directory inside components, and create a DetailsCards.js inside it. We will be using Material UI’s Card component, you can read more about it here



import React from "react";

import { Fab, Typography, CardContent, Card } from "@mui/material";

const DetailsCard = () => {
    return (
    <>
        <Card sx={{ minWidth: 250, marginBottom: "2rem", marginTop: "2rem" }}>
        <CardContent>
            <Typography
            variant="body"
            gutterBottom
            component="div"
            sx={{ textAlign: "center", marginBottom: "1rem" }}
            >
            Personal Details
            </Typography>
            <Typography variant="h5" gutterBottom component="div">
            Name
            </Typography>
            <Typography variant="h6" gutterBottom component="div">
            Last Name
            </Typography>
        </CardContent>
        </Card>

        <Card sx={{ minWidth: 250, marginBottom: "2rem" }}>
        <CardContent>
            <Typography
            variant="body"
            gutterBottom
            component="div"
            sx={{ textAlign: "center", marginBottom: "1rem" }}
            >
            Professional Details
            </Typography>
            <Typography variant="h6" gutterBottom component="div">
            Company
            </Typography>
            <Typography variant="h6" gutterBottom component="div">
            Email
            </Typography>
        </CardContent>
        </Card>

        <Card sx={{ minWidth: 250 }}>
        <CardContent>
            <Typography
            variant="body"
            gutterBottom
            component="div"
            sx={{ textAlign: "center", marginBottom: "1rem" }}
            >
            Labels
            </Typography>
            <Fab variant="extended" size="small">
            Labels
            </Fab>
        </CardContent>
        </Card>
    </>
    );
};
export default DetailsCard;

src/components/DetailsCard/DetailsCard.js

All we have to do now is import and feed the customer data as props in Modal component

The Modal component would look like this after importing and feeding in the customer data



import { React } from "react";
import { styled } from "@mui/material/styles";
import { Typography, Fade, Modal, Grid, Paper, Backdrop } from "@mui/material";

import DetailsCard from "../DetailsCard";

const Item = styled(Paper)(({ theme }) => ({
  ...theme.typography.body2,
  padding: theme.spacing(1),
  textAlign: "center",
  color: theme.palette.text.secondary,
  boxShadow: "none",
}));

export default function Modals({ data, open, setIsOpen }) {
  const handleClose = () => {
    setIsOpen(!open);
  };

  return (
    <div>
      <Modal
        aria-labelledby="transition-modal-title"
        aria-describedby="transition-modal-description"
        open={open}
        onClose={handleClose}
        closeAfterTransition
        BackdropComponent={Backdrop}
        BackdropProps={{
          timeout: 500,
        }}
      >
        <Fade in={open}>
          <Grid
            container
            spacing={1}
            sx={{
              width: "95%",
              height: "95%",
              backgroundColor: "white",
              position: "absolute",
              top: "4%",
              left: "3%",
            }}
          >
            <Grid item xs={3} sx={{ padding: "5px" }}>
              <DetailsCard
                name={data.name}
                company={data.company}
                email={data.email}
                phone={data.phone}
                labels={data.labels}
              />
            </Grid>
            <Grid
              item
              xs={6}
              sx={{ backgroundColor: "lightgray", padding: "5px" }}
            >
              <Item sx={{ backgroundColor: "inherit", marginTop: "2rem" }}>
                <Typography variant="h6" gutterBottom component="div">
                  Notes
                </Typography>
              </Item>
            </Grid>
            <Grid item xs={3} sx={{ padding: "5px", marginTop: "2rem" }}>
              <Item>
                <Typography variant="h6" gutterBottom component="div">
                  Deals
                </Typography>
                <Typography variant="p" gutterBottom component="div">
                  Track the revenue opportunities associated with this record
                </Typography>
              </Item>
              <Item sx={{ marginTop: "2rem" }}>
                <Typography variant="h6" gutterBottom component="div">
                  Tickets
                </Typography>
                <Typography variant="p" gutterBottom component="div">
                  Track the customer requests associated with this record
                </Typography>
              </Item>
            </Grid>
          </Grid>
        </Fade>
      </Modal>
    </div>
  );
}

src/components/Modal/Modal.js

And, after utilizing the received props, the DetailsCard component should look like this



import React from "react";

import { Fab, Typography, CardContent, Card } from "@mui/material";

const DetailsCard = ({ name, company, email, phone, labels }) => {
    return (
    <>
        <Card sx={{ minWidth: 250, marginBottom: "2rem", marginTop: "2rem" }}>
        <CardContent>
            <Typography
            variant="body"
            gutterBottom
            component="div"
            sx={{ textAlign: "center", marginBottom: "1rem" }}
            >
            Personal Details
            </Typography>
            <Typography variant="h5" gutterBottom component="div">
            {name}
            </Typography>
            <Typography variant="h6" gutterBottom component="div">
            {phone}
            </Typography>
        </CardContent>
        </Card>

        <Card sx={{ minWidth: 250, marginBottom: "2rem" }}>
        <CardContent>
            <Typography
            variant="body"
            gutterBottom
            component="div"
            sx={{ textAlign: "center", marginBottom: "1rem" }}
            >
            Professional Details
            </Typography>
            <Typography variant="h6" gutterBottom component="div">
            {company}
            </Typography>
            <Typography variant="h6" gutterBottom component="div">
            {email}
            </Typography>
        </CardContent>
        </Card>

        <Card sx={{ minWidth: 250 }}>
        <CardContent>
            <Typography
            variant="body"
            gutterBottom
            component="div"
            sx={{ textAlign: "center", marginBottom: "1rem" }}
            >
            Labels
            </Typography>
            <Fab variant="extended" size="small">
            {labels}
            </Fab>
        </CardContent>
        </Card>
    </>
    );
};
export default DetailsCard;

src/components/DetailsCard/DetailsCard.js

The end result will look like this

Much better now!

Before we can proceed with Notes, we need to get our backend ready. As we will be storing the notes in database for data persistence. Thankfully, creating a backend on Canonic is a breeze

Time to get your APIs ready!

Getting your APIs for CRM app comes at real ease. All you have to do is clone this production-ready project on Canonic and you're done. It will provide you with the backend, APIs, and documentation you need for integration, without writing any code. You will need to create entries for customers on CMS, you can simply copy the contents from customer statics array we created.

Backend integration with GraphQL

Let's now integrate! Now that we have our APIs ready, let's move on by installing GraphQL packages.

Install GraphQL packages

To pull our data from the backend, we will need two packages - Apollo Client and GraphQL



npm i @apollo/client graphql

Configure GraphQL to communicate with backend

Configure the Apollo Client in the project directory, inside index.js configure your apollo client so it would communicate with the backend.

Note to replace the uri with the one you'll get from Canonic.



import React from "react";
import ReactDOM from "react-dom";
import { ApolloClient, InMemoryCache, ApolloProvider } from "@apollo/client";

import ContentTable from "./components/ContentTable";

import "./index.css";

const client = new ApolloClient({
  uri: "https://crm-app.can.canonic.dev/graphql",
  cache: new InMemoryCache(),
});
ReactDOM.render(
  <React.StrictMode>
    <ApolloProvider client={client}>
      <ContentTable />
    </ApolloProvider>
  </React.StrictMode>,
  document.getElementById("root")
);

src/index.js

Query the data

For querying the data we will create a directory inside src called gql and create a file inside it called query.js. In it will write all the data we need from the backend.



import { gql } from "@apollo/client";

export const GET_CUSTOMERS = gql`
  query {
    customers {
      name
      _id
      createdAt
      updatedAt
      email
      phone
      company
      labels
      notes {
        description
      }
    }
  }
`;

src/gql/query.js

Propagate the API’s data.

Here we are propagating the data to ContentTable component. All we have to do is replace the customer static array we had with the code we get from API and replace all the references made to the static array with dynamic data.



import { React, useState } from "react";
import { useQuery } from "@apollo/client";
import {
  Table,
  TableBody,
  TableContainer,
  TableFooter,
  TablePagination,
  TableRow,
  Paper,
  TableCell,
  TableHead,
  CircularProgress,
} from "@mui/material";

import { GET_CUSTOMERS } from "../../gql/query";
import { TablePaginationActions } from "../Pagination";
import Modals from "../Modal";

export default function ContentTable() {
  const { data, loading } = useQuery(GET_CUSTOMERS);
  const [page, setPage] = useState(0);
  const [rowsPerPage, setRowsPerPage] = useState(5);
  const [customerData, setCustomerData] = useState();
  const [isOpen, setIsOpen] = useState();
  const emptyRows =
    page > 0
      ? Math.max(0, (1 + page) * rowsPerPage - data.customers.length)
      : 0;

  const handleChangePage = (event, newPage) => {
    setPage(newPage);
  };

  const handleChangeRowsPerPage = (event) => {
    setRowsPerPage(parseInt(event.target.value, 10));
    setPage(0);
  };

  const handleClick = (data) => {
    setIsOpen(true);
    setCustomerData(data);
  };

  return (
    <>
      {loading && (
        <CircularProgress
          sx={{ position: "absolute", top: "50%", left: "50%" }}
        />
      )}
      {!loading && (
        <TableContainer component={Paper} sx={{ margin: "2rem", width: "95%" }}>
          <Table sx={{ minWidth: 500 }} aria-label="custom pagination table">
            <TableHead>
              <TableRow>
                <TableCell
                  align="left"
                  sx={{
                    backgroundColor: "black",
                    color: "white",
                    borderRight: "1px solid white",
                  }}
                >
                  Name
                </TableCell>
                <TableCell
                  align="left"
                  sx={{
                    backgroundColor: "black",
                    color: "white",
                    borderRight: "1px solid white",
                  }}
                >
                  Company
                </TableCell>
                <TableCell
                  align="left"
                  sx={{
                    backgroundColor: "black",
                    color: "white",
                    borderRight: "1px solid white",
                  }}
                >
                  Email
                </TableCell>
                <TableCell
                  align="left"
                  sx={{
                    backgroundColor: "black",
                    color: "white",
                    borderRight: "1px solid white",
                  }}
                >
                  Phone
                </TableCell>
              </TableRow>
            </TableHead>
            <TableBody>
              {data &&
                (rowsPerPage > 0
                  ? data?.customers?.slice(
                      page * rowsPerPage,
                      page * rowsPerPage + rowsPerPage
                    )
                  : data.customers
                ).map((row, index) => (
                  <TableRow
                    key={index}
                    onClick={() => {
                      handleClick(row);
                    }}
                    sx={{ cursor: "pointer" }}
                  >
                    <TableCell
                      component="th"
                      scope="row"
                      sx={{ width: 160, borderRight: "1px solid black" }}
                    >
                      {row.name}
                    </TableCell>
                    <TableCell
                      sx={{ width: 160, borderRight: "1px solid black" }}
                      align="left"
                    >
                      {row.company}
                    </TableCell>
                    <TableCell
                      sx={{ width: 160, borderRight: "1px solid black" }}
                      align="left"
                    >
                      {row.email}
                    </TableCell>
                    <TableCell sx={{ width: 160 }} align="left">
                      {row.phone}
                    </TableCell>
                  </TableRow>
                ))}

              {emptyRows > 0 && (
                <TableRow style={{ height: 53 * emptyRows }}>
                  <TableCell colSpan={6} />
                </TableRow>
              )}
            </TableBody>
            <TableFooter>
              <TableRow>
                <TablePagination
                  rowsPerPageOptions={[5, 10, 25, { label: "All", value: -1 }]}
                  colSpan={3}
                  count={data?.customers?.length}
                  rowsPerPage={rowsPerPage}
                  page={page}
                  SelectProps={{
                    inputProps: {
                      "aria-label": "rows per page",
                    },
                    native: true,
                  }}
                  onPageChange={handleChangePage}
                  onRowsPerPageChange={handleChangeRowsPerPage}
                  ActionsComponent={TablePaginationActions}
                />
              </TableRow>
            </TableFooter>
          </Table>
          <Modals data={customerData} open={isOpen} setIsOpen={setIsOpen} />
        </TableContainer>
      )}
    </>
  );
}

src/components/ContentTable/ContentTable.js

That’s all the changes we needed to integrate Canonic’s backend. Let get on to creating the Notes component.

Create Notes component

Before we create Notes component, let’s first prepare Modal component to display notes.

We will be doing these 3 things in Modal component

Creating a state to hold all our notes
Create a state to hold status on opening add a new note text box
Create a button that can switch between Displaying the notes to adding a note

We will faux import Notes component before it is created and feed in the data so when we finally create the component, we will already have a data to work with it



import Notes from "../Notes";
const [openAdd, setOpenAdd] = useState(false);
const [displayNotes, setDisplayNotes] = useState();
useEffect(() => {
    data && setDisplayNotes(data.notes);
}, [data]);

<Item sx={{ backgroundColor: "inherit", marginTop: "2rem" }}>
        {!openAdd && (
        <Box sx={{ flexGrow: 1 }}>
        <Paper
            elevation={1}
            sx={{
            padding: "2rem",
            height: "30rem",
            overflow: "auto",
            }}
        >
            {displayNotes?.map((note) => (
            <List>
                <ListItem sx={{ borderBottom: "1px solid black" }}>
                <ListItemText>{note.description}</ListItemText>
                </ListItem>
            </List>
            ))}
            {!openAdd && (
            <Button
                variant="outlined"
                startIcon={<AddIcon />}
                sx={{ marginTop: "1rem" }}
                onClick={() => setOpenAdd(true)}
                color="success"
            >
                Add a note
            </Button>
            )}
        </Paper>
        </Box>
    )}
    {openAdd && (
        <Notes
        setOpenAdd={setOpenAdd}
        _id={data._id}
        noteDescription={data?.notes?.map((item) => ({
            description: item.description,
        }))}
        setDisplayNotes={setDisplayNotes}
        />
    )}

After this, the Modal component shall look like this



import React, { useState, useEffect } from "react";
import { styled } from "@mui/material/styles";
import {
  Typography,
  Fade,
  Modal,
  Grid,
  Paper,
  Backdrop,
  Box,
  Button,
  List,
  ListItem,
  ListItemText,
} from "@mui/material";
import AddIcon from "@mui/icons-material/Add";

import DetailsCard from "../DetailsCard";
import Notes from "../Notes";

const Item = styled(Paper)(({ theme }) => ({
  ...theme.typography.body2,
  padding: theme.spacing(1),
  textAlign: "center",
  color: theme.palette.text.secondary,
  boxShadow: "none",
}));

export default function Modals({ data, open, setIsOpen }) {
  const [openAdd, setOpenAdd] = useState(false);
  const [displayNotes, setDisplayNotes] = useState();
  const handleClose = () => {
    setIsOpen(!open);
  };
  useEffect(() => {
    data && setDisplayNotes(data.notes);
  }, [data]);
  return (
    <div>
      <Modal
        aria-labelledby="transition-modal-title"
        aria-describedby="transition-modal-description"
        open={open}
        onClose={handleClose}
        closeAfterTransition
        BackdropComponent={Backdrop}
        BackdropProps={{
          timeout: 500,
        }}
      >
        <Fade in={open}>
          <Grid
            container
            spacing={1}
            sx={{
              width: "95%",
              height: "95%",
              backgroundColor: "white",
              position: "absolute",
              top: "4%",
              left: "3%",
            }}
          >
            <Grid item xs={3} sx={{ padding: "5px" }}>
              <DetailsCard
                name={data.name}
                company={data.company}
                email={data.email}
                phone={data.phone}
                labels={data.labels}
              />
            </Grid>
            <Grid
              item
              xs={6}
              sx={{ backgroundColor: "lightgray", padding: "5px" }}
            >
              <Item sx={{ backgroundColor: "inherit", marginTop: "2rem" }}>
                <Typography variant="h6" gutterBottom component="div">
                  Notes
                </Typography>
                {!openAdd && (
                  <Box sx={{ flexGrow: 1 }}>
                    <Paper
                      elevation={1}
                      sx={{
                        padding: "2rem",
                        height: "30rem",
                        overflow: "auto",
                      }}
                    >
                      {displayNotes?.map((note) => (
                        <List>
                          <ListItem sx={{ borderBottom: "1px solid black" }}>
                            <ListItemText>{note.description}</ListItemText>
                          </ListItem>
                        </List>
                      ))}
                      {!openAdd && (
                        <Button
                          variant="outlined"
                          startIcon={<AddIcon />}
                          sx={{ marginTop: "1rem" }}
                          onClick={() => setOpenAdd(true)}
                          color="success"
                        >
                          Add a note
                        </Button>
                      )}
                    </Paper>
                  </Box>
                )}
                {openAdd && (
                  <Notes
                    setOpenAdd={setOpenAdd}
                    _id={data._id}
                    noteDescription={data?.notes?.map((item) => ({
                      description: item.description,
                    }))}
                    setDisplayNotes={setDisplayNotes}
                  />
                )}
              </Item>
            </Grid>
            <Grid item xs={3} sx={{ padding: "5px", marginTop: "2rem" }}>
              <Item>
                <Typography variant="h6" gutterBottom component="div">
                  Deals
                </Typography>
                <Typography variant="p" gutterBottom component="div">
                  Track the revenue opportunities associated with this record
                </Typography>
              </Item>
              <Item sx={{ marginTop: "2rem" }}>
                <Typography variant="h6" gutterBottom component="div">
                  Tickets
                </Typography>
                <Typography variant="p" gutterBottom component="div">
                  Track the customer requests associated with this record
                </Typography>
              </Item>
            </Grid>
          </Grid>
        </Fade>
      </Modal>
    </div>
  );
}

src/components/Modal/Modal.js

We just now need to add the Mutation, that way we can send the new notes to our API

Let’s go back to GQL directory and create a file called Mutation.js



import { gql } from "@apollo/client";

export const ADD_NOTE = gql`
  mutation updateCustomerMutation($_id: ID!, $notes: [CustomerNoteInput!]!) {
    updateCustomer(_id: $_id, input: { notes: $notes }) {
      _id
      createdAt
      updatedAt
      name
      email
      phone
      company
      notes {
        description
      }
    }
  }
`;

src/gql/mutation.js

This mutations just updates the database with a new note whenever it is created.

Now we have Modal component conditioned, let’s begin creating Notes component. Create a directory inside components and name it Notes, create a file inside of it and call it Notes.js



import { useRef } from "react";
import { useMutation } from "@apollo/client";
import { Box, TextField, Grid, Paper, Stack, Button } from "@mui/material";
import LoadingButton from "@mui/lab/LoadingButton";
import SaveIcon from "@mui/icons-material/Save";
import { ADD_NOTE } from "../../gql/mutation";
const Notes = ({ _id, noteDescription, setOpenAdd, setDisplayNotes }) => {
  const descriptionRef = useRef();
  const [addNote] = useMutation(ADD_NOTE);

  const handleClick = () => {
    let description = descriptionRef.current.value;
    if (description.replace(/\s+/g, " ").length) {
      addNote({
        variables: {
          _id,
          notes: [...noteDescription, { description }],
        },
      });
      setDisplayNotes((oldList) => [...oldList, { description }]);
      setOpenAdd(false);
    }
  };
  const handleClose = () => {
    setOpenAdd(false);
  };

  return (
    <Box sx={{ flexGrow: 1 }}>
      <Paper elevation={6} sx={{ padding: "2rem" }}>
        <Stack spacing={2}>
          <Grid container sx={{ marginTop: "1rem" }}>
            <Grid item xs={12}>
              <TextField
                id="outlined-basic"
                label="Description"
                variant="outlined"
                multiline
                rows={2}
                sx={{ width: "100%" }}
                inputRef={descriptionRef}
              />
            </Grid>
          </Grid>
          <Grid sx={{ display: "flex", justifyContent: "space-between" }}>
            <LoadingButton
              loadingPosition="start"
              startIcon={<SaveIcon />}
              variant="outlined"
              sx={{ width: "25%" }}
              onClick={handleClick}
              color="success"
            >
              Save
            </LoadingButton>
            <Button
              variant="outlined"
              color="error"
              sx={{ width: "25%" }}
              onClick={handleClose}
            >
              Close
            </Button>
          </Grid>
        </Stack>
      </Paper>
    </Box>
  );
};

export default Notes;

src/components/Notes/Notes.js

In here while updating the database with mutation, we are also updating displayNotes state, so the component would refresh and new note will be visible immediately

The end result should look like this

Create Deals componenet.

We are going to have a drop here where the user could set any deal to the customer, the data will get updated the database.

Let’s begin by defining a mutation for it. Navigate back to mutation.js that resides in gql directory.



import { gql } from "@apollo/client";

export const ADD_NOTE = gql`
  mutation updateCustomerMutation($_id: ID!, $notes: [CustomerNoteInput!]!) {
    updateCustomer(_id: $_id, input: { notes: $notes }) {
      _id
      createdAt
      updatedAt
      name
      email
      phone
      company
      notes {
        description
      }
    }
  }
`;

export const ADD_DEAL = gql`
  mutation updateDealsMutation($_id: ID!, $deals: [ID!]!) {
    updateDeal(_id: $_id, input: { deals: $deals }) {
      title
      amount
      dealOwner
      deals {
        _id
        name
        company
        phone
        email
      }
    }
  }
`;

src/gql/mutation.js

We don’t need much from Modal in this case so let begin by creating Deals component, create a directory inside components name it Deals, create a file inside it and name it Deals.js

The flow is pretty much same as Notes in here, We are expecting a _id prop from Modal here.

Lets pass it



import React, { useState } from "react";
import { styled } from "@mui/material/styles";
import {
  Typography,
  Fade,
  Modal,
  Grid,
  Paper,
  Backdrop,
  Box,
  Button,
  List,
  ListItem,
  ListItemText,
} from "@mui/material";
import AddIcon from "@mui/icons-material/Add";

import DetailsCard from "../DetailsCard";
import Notes from "../Notes";
import Deals from "../Deals";

const Item = styled(Paper)(({ theme }) => ({
  ...theme.typography.body2,
  padding: theme.spacing(1),
  textAlign: "center",
  color: theme.palette.text.secondary,
  boxShadow: "none",
}));

export default function Modals({ data, open, setIsOpen }) {
  const [openAdd, setOpenAdd] = useState(false);
  const [displayNotes, setDisplayNotes] = useState();
  const handleClose = () => {
    setIsOpen(!open);
  };

  return (
    <div>
      <Modal
        aria-labelledby="transition-modal-title"
        aria-describedby="transition-modal-description"
        open={open}
        onClose={handleClose}
        closeAfterTransition
        BackdropComponent={Backdrop}
        BackdropProps={{
          timeout: 500,
        }}
      >
        <Fade in={open}>
          <Grid
            container
            spacing={1}
            sx={{
              width: "95%",
              height: "95%",
              backgroundColor: "white",
              position: "absolute",
              top: "4%",
              left: "3%",
            }}
          >
            <Grid item xs={3} sx={{ padding: "5px" }}>
              <DetailsCard
                name={data.name}
                company={data.company}
                email={data.email}
                phone={data.phone}
                labels={data.labels}
              />
            </Grid>
            <Grid
              item
              xs={6}
              sx={{ backgroundColor: "lightgray", padding: "5px" }}
            >
              <Item sx={{ backgroundColor: "inherit", marginTop: "2rem" }}>
                <Typography variant="h6" gutterBottom component="div">
                  Notes
                </Typography>
                {!openAdd && (
                  <Box sx={{ flexGrow: 1 }}>
                    <Paper
                      elevation={1}
                      sx={{
                        padding: "2rem",
                        height: "30rem",
                        overflow: "auto",
                      }}
                    >
                      {displayNotes?.map((note) => (
                        <List>
                          <ListItem sx={{ borderBottom: "1px solid black" }}>
                            <ListItemText>{note.description}</ListItemText>
                          </ListItem>
                        </List>
                      ))}
                      {!openAdd && (
                        <Button
                          variant="outlined"
                          startIcon={<AddIcon />}
                          sx={{ marginTop: "1rem" }}
                          onClick={() => setOpenAdd(true)}
                          color="success"
                        >
                          Add a note
                        </Button>
                      )}
                    </Paper>
                  </Box>
                )}
                {openAdd && (
                  <Notes
                    setOpenAdd={setOpenAdd}
                    _id={data._id}
                    noteDescription={data?.notes?.map((item) => ({
                      description: item.description,
                    }))}
                    setDisplayNotes={setDisplayNotes}
                  />
                )}
              </Item>
            </Grid>
            <Grid item xs={3} sx={{ padding: "5px", marginTop: "2rem" }}>
              <Item>
                <Typography variant="h6" gutterBottom component="div">
                  Deals
                </Typography>
                <Typography variant="p" gutterBottom component="div">
                  Track the revenue opportunities associated with this record
                </Typography>
                <Deals userId={data._id} />
              </Item>
              <Item sx={{ marginTop: "2rem" }}>
                <Typography variant="h6" gutterBottom component="div">
                  Tickets
                </Typography>
                <Typography variant="p" gutterBottom component="div">
                  Track the customer requests associated with this record
                </Typography>
              </Item>
            </Grid>
          </Grid>
        </Fade>
      </Modal>
    </div>
  );
}

src/components/Modal/Modal.js

And, our Deals component is done. It should look like this

Create a Tickets component

This component will make a POST request to Asana API whenever a user inputs a title for the ticket, we are using create a task API for this you can read more about it here

It requires Title and either workspace or projects or parent defined in order to create a task



import { useRef, useState } from "react";
import { Box, TextField, Grid, Paper, Stack, Button } from "@mui/material";
import AddIcon from "@mui/icons-material/Add";
import DoneIcon from "@mui/icons-material/Done";

const Tickets = () => {
  const [addTicket, setAddTicket] = useState(false);
  const [addedTicketStatus, setAddedTicketStatus] = useState(false);
  const ticketNameRef = useRef();
  const handleAdd = () => {
    let data = {
      data: {
        name: ticketNameRef.current.value,
        workspace: process.env.REACT_APP_ASANA_WORKSPACE,
      },
    };
    if (!addedTicketStatus)
      fetch("https://app.asana.com/api/1.0/tasks", {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
          Authorization: process.env.REACT_APP_ASANA_KEY,
        },
        body: JSON.stringify(data),
      })
        .then((res) => res.json())
        .then(() => setAddedTicketStatus(true));
  };
  const handleClose = () => {
    setAddTicket(false);
    setAddedTicketStatus(false);
  };
  return (
    <Box sx={{ flexGrow: 1 }}>
      {!addTicket && (
        <Button
          variant="outlined"
          color="success"
          onClick={() => setAddTicket(true)}
        >
          Add a ticket to Asana
        </Button>
      )}
      {addTicket && (
        <Paper elevation={6} sx={{ padding: "2rem" }}>
          <Stack spacing={2}>
            <Grid container sx={{ marginTop: "1rem" }}>
              <Grid item xs={12}>
                <TextField
                  id="outlined-basic"
                  label="Ticket name"
                  variant="outlined"
                  sx={{ width: "100%" }}
                  inputRef={ticketNameRef}
                />
              </Grid>
            </Grid>
            <Grid sx={{ display: "flex", justifyContent: "space-between" }}>
              <Button
                startIcon={addedTicketStatus ? <DoneIcon /> : <AddIcon />}
                variant="outlined"
                color="success"
                onClick={handleAdd}
                disabled={addedTicketStatus}
              >
                {addedTicketStatus ? "Added" : "Add"}
              </Button>
              <Button variant="outlined" color="error" onClick={handleClose}>
                Close
              </Button>
            </Grid>
          </Stack>
        </Paper>
      )}
    </Box>
  );
};

export default Tickets;

src/components/Tickets/Tickets.js

We don’t need any props to be passed from Modal in Ticket component, so let’s just import it



import React, { useState } from "react";
import { styled } from "@mui/material/styles";
import {
  Typography,
  Fade,
  Modal,
  Grid,
  Paper,
  Backdrop,
  Box,
  Button,
  List,
  ListItem,
  ListItemText,
} from "@mui/material";
import AddIcon from "@mui/icons-material/Add";

import DetailsCard from "../DetailsCard";
import Notes from "../Notes";
import Deals from "../Deals";
import Tickets from "../Tickets";

const Item = styled(Paper)(({ theme }) => ({
  ...theme.typography.body2,
  padding: theme.spacing(1),
  textAlign: "center",
  color: theme.palette.text.secondary,
  boxShadow: "none",
}));

export default function Modals({ data, open, setIsOpen }) {
  const [openAdd, setOpenAdd] = useState(false);
  const [displayNotes, setDisplayNotes] = useState();
  const handleClose = () => {
    setIsOpen(!open);
  };

  return (
    <div>
      <Modal
        aria-labelledby="transition-modal-title"
        aria-describedby="transition-modal-description"
        open={open}
        onClose={handleClose}
        closeAfterTransition
        BackdropComponent={Backdrop}
        BackdropProps={{
          timeout: 500,
        }}
      >
        <Fade in={open}>
          <Grid
            container
            spacing={1}
            sx={{
              width: "95%",
              height: "95%",
              backgroundColor: "white",
              position: "absolute",
              top: "4%",
              left: "3%",
            }}
          >
            <Grid item xs={3} sx={{ padding: "5px" }}>
              <DetailsCard
                name={data.name}
                company={data.company}
                email={data.email}
                phone={data.phone}
                labels={data.labels}
              />
            </Grid>
            <Grid
              item
              xs={6}
              sx={{ backgroundColor: "lightgray", padding: "5px" }}
            >
              <Item sx={{ backgroundColor: "inherit", marginTop: "2rem" }}>
                <Typography variant="h6" gutterBottom component="div">
                  Notes
                </Typography>
                {!openAdd && (
                  <Box sx={{ flexGrow: 1 }}>
                    <Paper
                      elevation={1}
                      sx={{
                        padding: "2rem",
                        height: "30rem",
                        overflow: "auto",
                      }}
                    >
                      {displayNotes?.map((note) => (
                        <List>
                          <ListItem sx={{ borderBottom: "1px solid black" }}>
                            <ListItemText>{note.description}</ListItemText>
                          </ListItem>
                        </List>
                      ))}
                      {!openAdd && (
                        <Button
                          variant="outlined"
                          startIcon={<AddIcon />}
                          sx={{ marginTop: "1rem" }}
                          onClick={() => setOpenAdd(true)}
                          color="success"
                        >
                          Add a note
                        </Button>
                      )}
                    </Paper>
                  </Box>
                )}
                {openAdd && (
                  <Notes
                    setOpenAdd={setOpenAdd}
                    _id={data._id}
                    noteDescription={data?.notes?.map((item) => ({
                      description: item.description,
                    }))}
                    setDisplayNotes={setDisplayNotes}
                  />
                )}
              </Item>
            </Grid>
            <Grid item xs={3} sx={{ padding: "5px", marginTop: "2rem" }}>
              <Item>
                <Typography variant="h6" gutterBottom component="div">
                  Deals
                </Typography>
                <Typography variant="p" gutterBottom component="div">
                  Track the revenue opportunities associated with this record
                </Typography>
                <Deals userId={data._id} />
              </Item>
              <Item sx={{ marginTop: "2rem" }}>
                <Typography variant="h6" gutterBottom component="div">
                  Tickets
                </Typography>
                <Typography variant="p" gutterBottom component="div">
                  Track the customer requests associated with this record
                </Typography>
                <Tickets />
              </Item>
            </Grid>
          </Grid>
        </Fade>
      </Modal>
    </div>
  );
}

src/component/Modal/Modal.js

Now we have Tickets component ready, it should look like this

Create a Header component.

This will be a simple App bar that will display the a bar at the top of the page with the title of our project.

Let’s create a directory inside components and name it Header and a create file inside it and name Header.js



    import React from "react";

import { AppBar, Box, Toolbar, Typography } from "@mui/material";

const Header = () => {
  return (
    <Box sx={{ flexGrow: 1 }}>
      <AppBar position="static" sx={{ backgroundColor: "#000000" }}>
        <Toolbar>
          <Typography
            variant="h6"
            noWrap
            component="div"
            sx={{
              flexGrow: 1,
              display: { xs: "none", sm: "block" },
              textAlign: "center",
            }}
          >
            CRM
          </Typography>
        </Toolbar>
      </AppBar>
    </Box>
  );
};

export default Header;

src/components/Header/Header.js

All we have to do now is to import it in index.js file



import React from "react";
import ReactDOM from "react-dom";
import { ApolloClient, InMemoryCache, ApolloProvider } from "@apollo/client";

import ContentTable from "./components/ContentTable";
import Header from "./components/Header";
import "./index.css";

const client = new ApolloClient({
  uri: "https://crm-app.can.canonic.dev/graphql",
  cache: new InMemoryCache(),
});
ReactDOM.render(
  <React.StrictMode>
    <ApolloProvider client={client}>
      <Header />
      <ContentTable />
    </ApolloProvider>
  </React.StrictMode>,
  document.getElementById("root")
);

src/index.js

Voila! we are done.

sample code link.

BONUS

You can create log all the customer deals on Google Sheet.

Canonic has Google Sheet’s integrations, so all you have to do is open your cloned project, navigate to API, there select Deals table, Click on DB Triggers, there you will find a predefined Database trigger called UpdateTheSheet Click on Google Sheets webhook. You will have to authenticate yourself with a Google account. Then go to required and change the SpreadsheetID with your spreadsheet, make sure it is associated with the Google account you authenticated yourself with. You can change the range if you want. And, that’s it, you have successfully integrated Google Sheets into your CRM app now whenever user create a deal for a customer, DB trigger will update the Google Sheet.

Conclusion: It was a long journey well, I hope it was worth it. At the end you you learned how to created a feature packed awesome app, If you want, you can also duplicate this project from Canonic's sample app and easily get started by customizing it as per your experience. Check it out app.canonic.dev.

You can also check out our other guides here.

Join us on discord to discuss or share with our community. Write to us for any support requests at support@canonic.dev. Check out our website to know more about Canonic.

ProductHunt Clone: React + Lowcode backend

Simranjot — Sat, 25 Dec 2021 07:04:56 +0000

We are going to build a very basic clone of Product Hunt today!

We'll be using:

React for building the frontend.
Material UI as our UI Library
Canonic as a Backend

📝 Step 1: Create-react-app

First thing first, create a new react project using - create-react-app

npx create-react-app product-hunt

You'll have the basic project setup with the boilerplate code.

📩 Step 2: Add the dependencies

Next, go to your project folder on the terminal and add all the required dependencies. As we disc

yarn add

We have the project setup and all the dependencies installed. On the frontend, our design will consist of:

A simple Header at the top.
A List below displaying the data we are gonna get from our backend (List of all the products).

👩‍🔧 Step 3: Build the Header

We'll create a component - Header at src/components/Header. Create the respective Header.js and index.js files.

Add following code to your index.js file

export { default } from "./Header";

Coming to our Header.js file, we'l be using the Box component from Material UI to build it. Add the following code:

import React from "react";
import { Avatar, Box, Divider } from "@mui/material";

const Header = () => {
  return (
    <Box
      sx={{
        display: "flex",
        flexDirection: "column",
      }}
    >
      <Box
        sx={{
          display: "flex",
          flexDirection: "row",
          justifyContent: "space-between",
          marginBottom: "20px",
        }}
      >
        <Avatar
          sx={{
            bgcolor: "#da552f",
            width: 50,
            height: 50,
            fontWeight: 900,
            fontSize: "1.5rem",
          }}
        >
          P
        </Avatar>
      </Box>
      <Divider variant="fullWidth" />
    </Box>
  );
};

export default Header;

Our Header component is ready, let's add it to our layout to see how it looks. Head back to App.js, import the Header component:

import "./App.css";
import { Box } from "@mui/material";
import Header from "./components/Header/Header";

function App() {
  return (
    <div className="App">
      <Box
        sx={{
          margin: "20px 30px 0px 30px",
        }}
      >
        <Header></Header>
      </Box>
    </div>
  );
}

export default App;

It should like this:

📝 Step 4: Setup Data Stream

We'll use some dummy data as a data source at first to feed into our table and then replace it with the actual data coming in from the API. This way we'll be able to build our frontend properly and just have to replace the data coming into it without changing any of our frontend code.

This is how our data is gonna come in from the backend, so we'll mock it! Let's create a javascript file to hold it dummyData.js at src/

export const ProductsList = [
  {
    _id: "61c67c2916f6d70009932190",
    createdAt: "2021-12-25T02:04:25.797Z",
    updatedAt: "2021-12-25T02:04:25.797Z",
    name: "Canonic",
    description: "Super charge the back to your frontend.",
    brandImage: { url: null, alt: null, name: null },
    tags: [
      { label: "Dev Tools", value: "DEV_TOOLS" },
      { label: "Productivity", value: "PRODUCTIVITY" },
    ],
    upvotes: "498",
  },
  {
    _id: "61c67d0616f6d7000993219e",
    createdAt: "2021-12-25T02:08:06.651Z",
    updatedAt: "2021-12-25T02:08:06.651Z",
    name: "Mockups by Glorify",
    description: "Bring your designs to life with stunning mockups",
    brandImage: { url: null, alt: null, name: null },
    tags: [
      { label: "Design Tools", value: "DESIGN_TOOLS" },
      { label: "Free", value: "FREE" },
    ],
    upvotes: "470",
  },
  {
    _id: "61c67d4716f6d700099321a3",
    createdAt: "2021-12-25T02:09:11.389Z",
    updatedAt: "2021-12-25T02:09:11.389Z",
    name: "Chatfully",
    description: "All-in-one chat tool for teams - texting, web chat, & more",
    brandImage: { url: null, alt: null, name: null },
    tags: [{ label: "iPhone", value: "IPHONE" }],
    upvotes: "455",
  },
  {
    _id: "61c67d6f16f6d700099321a7",
    createdAt: "2021-12-25T02:09:51.782Z",
    updatedAt: "2021-12-25T02:09:51.782Z",
    name: "Nitro",
    description: "Fast, professional translations by native speakers, open API",
    brandImage: { url: null, alt: null, name: null },
    tags: [{ label: "Web App", value: "WEB_APP" }],
    upvotes: "410",
  },
  {
    _id: "61c67d8e16f6d700099321ab",
    createdAt: "2021-12-25T02:10:22.184Z",
    updatedAt: "2021-12-25T02:10:22.184Z",
    name: "SelectStar",
    description: "Automated data catalog and discovery for modern data teams.",
    brandImage: { url: null, alt: null, name: null },
    tags: [{ label: "Productivity", value: "PRODUCTIVITY" }],
    upvotes: "326",
  },
  {
    _id: "61c67da816f6d700099321af",
    createdAt: "2021-12-25T02:10:48.456Z",
    updatedAt: "2021-12-25T02:10:48.456Z",
    name: "Eraser",
    description: "A whiteboard that lets you focus on ideas",
    brandImage: { url: null, alt: null, name: null },
    tags: [
      { label: "Productivity", value: "PRODUCTIVITY" },
      { label: "Free", value: "FREE" },
    ],
    upvotes: "301",
  },
  {
    _id: "61c67dd316f6d700099321b4",
    createdAt: "2021-12-25T02:11:31.860Z",
    updatedAt: "2021-12-25T02:11:31.860Z",
    name: "Image to Cartoon",
    description: "Best AI cartoonizer online for free",
    brandImage: { url: null, alt: null, name: null },
    tags: [
      { label: "Productivity", value: "PRODUCTIVITY" },
      { label: "Free", value: "FREE" },
    ],
    upvotes: "264",
  }
];

📝 Step 5: Create Products List

Create our list component - ProductList at src/components/ProductList. Create the respective ProductList.js and index.js files. Add following code to your index.js file

export { default } from "./ProductList";

Coming to our main ProductList.js file, to build this component we'll be using the List component from MaterialUI.

We import the necessary dependencies from MaterialUI
Import our DummyData
Add a header for the List using the Typography component
Iterate over the data

import React from "react";
import { Typography, Box, List, Divider } from "@mui/material";
import { ProductsList } from "../../dummyData";

const ProductList = () => {
  const products = ProductsList;

  return (
    <Box>
      <Typography
        variant="h5"
        sx={{
          marginTop: 3,
          marginBottom: 2,
          color: "#4b587c",
          "&:hover": {
            color: "#da552f",
          },
        }}
      >
        Products
      </Typography>

      <List>
        {products.map((product) => {
          return (
            <Box>
              // Show List Items Here
            </Box>
          );
        })}
      </List>
    </Box>
  );
};

export default ProductList;

We have the basic skeleton ready for our List, now we'll create our ProductItem component which will actually show the data for a particular item in the List. Create the component - ProductItem at src/components/ProductList/components/ProductItem. Create the respective ProductItem.js and index.js files. Add following code to your index.js file

export { default } from "./ProductItem";

Add the following code to the ProductItem.js file. The Item has the:

Brand Image of the Product
Name
Description
Tags Associated
The Number of Upvotes

import React from "react";
import { Avatar, Box } from "@mui/material";
import { ListItem, ListItemText, ListItemSecondaryAction } from "@mui/material";
import ArrowDropUpIcon from "@mui/icons-material/ArrowDropUp";

const ProductItem = ({
  name,
  description,
  tags,
  brandImage,
  upvotes = "0",
  isUpvoted = false,
  _id,
}) => {
  const [upvoted, setUpvoted] = React.useState(isUpvoted);

  const tagNames = tags.map((tag) => {
    return tag.label;
  });

  return (
    <ListItem disableGutters>
      <Avatar
        alt={name}
        src={brandImage.url ?? "notPresent"}
        sx={{ width: 80, height: 80, bgcolor: "#4b587c", marginRight: 2 }}
        variant="square"
      />
      <Box sx={{ display: "flex", flexDirection: "column" }}>
        <ListItemText
          primary={name}
          primaryTypographyProps={{
            fontSize: 16,
            fontWeight: "bold",
            letterSpacing: 0,
            color: "#21293c",
          }}
          secondary={description}
          secondaryTypographyProps={{ color: "#4b587c" }}
        ></ListItemText>
        <ListItemText
          primary={tagNames.join(" ・ ")}
          primaryTypographyProps={{
            fontSize: 11,
            fontWeight: 900,
            letterSpacing: 0,
            color: "#21293c",
          }}
        ></ListItemText>
      </Box>
      <ListItemSecondaryAction>
        // Add Upvote Button
      </ListItemSecondaryAction>
    </ListItem>
  );
};

export default ProductItem;

We'll create a custom Upvote Button component to and add it to our ProductItem. Create a new folder UpvoteButton at src/components/ProductList/components/ProductItem/UpvoteButton. Create the respective UpvoteButton.js and index.js files. This is how your folder structure should look like:

Add following code to your index.js & UpvoteButton.js files respectively:

export { default } from "./UpvoteButton";

import { Button } from "@mui/material";
import { styled } from "@mui/material/styles";

const UpvoteButton = styled(Button, {
  shouldForwardProp: (prop) => prop !== "upvoted",
})(({ upvoted }) => ({
  fontWeight: "bold",
  ...(upvoted && {
    color: "#da552f",
    borderColor: "#da552f",
    "&:hover": {
      backgroundColor: "#fff",
      borderColor: "#da552f",
    },
  }),
  ...(!upvoted && {
    color: "#767676",
    borderColor: "#767676",
    "&:hover": {
      backgroundColor: "#fff",
      borderColor: "#da552f",
    },
  }),
}));

export default UpvoteButton;

Head back to ProductItem.js file, import our new button component and add it:

// Import the button component
import UpvoteButton from "./Upvote Button";

...

<ListItemSecondaryAction>
    <UpvoteButton
        upvoted={upvoted}
        variant="outlined"
        disableRipple={true}
        startIcon={<ArrowDropUpIcon />}
    >
        {upvotes}
    </UpvoteButton>
</ListItemSecondaryAction>

...

Let quickly add our ProductItem to our List component to see how it looks. Head back to ProductList.js file and import our component:

import ProductItem from "./components/Product Item";

Add it to our List Component:

...

<List>
    {products.map((product) => {
        return (
        <Box>
            <ProductItem {...product}></ProductItem>
            <Divider />
        </Box>
        );
    })}
</List>

...

Our ProductList component is ready, let's add it to our layout's to see how it looks. Head back to App.js, import ProductList & update the <App> component.

import ProductList from "./components/Product List/ProductList";

...

<Box
    sx={{
        margin: "20px 30px 0px 30px",
    }}
    >
    <Header></Header>
    <ProductList></ProductList>
</Box>

...

When you refresh your page, it should look like this:

👩‍🔧 Step 6: Setup Backend

Let's head to Canonic and find the ProductHunt sample project from the Marketplace. You can either:

Use this sample project to and continue, or
Clone it and Deploy 🚀 . This will then use your data from your own project.

Once you deploy, the APIs will automatically be generated. Head on to the Docs and copy the /Products endpoint of the Products Table. This is the Get API that will fetch us the data from the database.

👩‍🔧 Step 7: Let's Integrate

Now, we need to hit the copied API endpoint to our backend and get all the products data. Head to your ProductList.js file and add the following code:

// Replace the dummy data with the data coming in from the backend
const [products, setProducts] = React.useState([]);

// Fetch the list of products and see the data
React.useEffect(() => {
  fetch(`https://product-hunt-18dcc2.can.canonic.dev/api/products`)
    .then((res) => res.json())
    .then((json) => json?.data)
    .then((products) =>
      Array.isArray(products) ? setProducts(products) : null
    );
}, []);

Now when you'll refresh your page, it'll make the API call to your backend endpoint, fetch the data and display!

🔽 Step 8: Integrate upvote functionality !

Let's Head over to your ProductItem.js file and trigger the upvote request on our backend.

Create a function handleUpvote which will make the API to our backend to record the upvote
Link the handleUpvote function to our upvote button's onClick.

Add the following code to do that:

// Add handleUpvote function inside our ProductItem component
...

  const handleUpvote = () => {
    setUpvoted(!upvoted);
    fetch(`https://product-hunt-18dcc2.can.canonic.dev/api/upvotes`, {
      method: "POST",
      headers: {
        Accept: "application/json",
        "Content-Type": "application/json",
      },
      body: JSON.stringify({
        input: {
          product: _id,
        },
      }),
    })
      .then((res) => res.json())
      .then((json) => json?.data);
  };

...

// Add the handleUpvote to the onClick of our Upvote Button

...

<ListItemSecondaryAction>
    <UpvoteButton
        upvoted={upvoted}
        variant="outlined"
        disableRipple={true}
        onClick={handleUpvote}
        startIcon={<ArrowDropUpIcon />}
    >
        {upvotes} 
    </UpvoteButton>
</ListItemSecondaryAction>

...

And with that, you have successfully made a basic Product Hunt clone for your project. 💃🕺

Congratulations! 🎉

If you want, you can also duplicate this project from Canonic's sample app and easily get started by customizing it as per your experience. Check it out app.canonic.dev.

You can also check out our other guides here.

Join us on discord to discuss or share with our community. Write to us for any support requests at support@canonic.dev. Check out our website to know more about Canonic.

Build Marketplace App with Stripe Billing

Kartik Grewal — Thu, 23 Dec 2021 01:37:54 +0000

Introduction

As a result of being home bound amidst the pandemic, public interest in marketplace apps has skyrocketed as it became the primary place for people to buy products. The marketplace model explains why online marketplaces are so popular and beneficial. It can be built for any market and niche with no initial inventory required and can grow exponentially, with benefits to all - sellers, buyers, and of course the marketplace owners.

To sell products online without a lot of marketing effort is appealing to sellers. Marketplace app is much easier and faster than creating your own e-commerce website/app and then struggling to get traffic.

It also makes it convenient for customers to buy products because of the wide selection and prices available, as well as the ability to compare products.

And owning a marketplace provides you with many effective ways to generate revenue. Advertising, charging a percentage for each deal, and a lot more. So, let’s take a deep dive and know how to build one yourself!

Let’s get started

Setting up the React

Let’s begin by creating a boilerplate using the creact-react-app

npx create-react-app marketplace

Install Material UI

We will be using Material UI to style the frontend that way we don’t end up writing the CSS

cd marketplace
npm install @mui/material @emotion/react @emotion/styled

Create a Product component

Create a directory inside src and name it components where we'll be place all the different components we are gonna build!

Create another directory inside of it and name it Product. Create a Product.js inside the Product directory. This component will display the list of products we have. At first, we will be looping through a static list of products

import React from "react";
import {
  Box,
  Card,
  CardActions,
  CardContent,
  Button,
  Typography,
  Rating,
} from "@mui/material";

const Products = [
  {
    title: "Oculus Quest All-in-one VR Gaming Headset",
    price: "11.96",
    rating: 5,
  },
  {
    title: "Nintendo Switch with Neon Blue and Neon Red Joy‑Con",
    price: "15.96",
    rating: 3,
  },
  {
    title: "Mass Effect",
    price: "23",
    rating: 5,
  },
  {
    title: "The LeanStartup2: How constant innovative creators",
    price: "9.96",
    rating: 2,
  },
  {
    title: "Dual Shock Controller",
    price: "19.96",
    rating: 5,
  },
];

function Product() {
  return (
    <Box
      sx={{
        display: "flex",
        flexDirection: "row",
        justifyContent: "space-between",
        alignItems: "start",
      }}
    >
      {Products.map((product) => (
        <Card
          sx={{
            maxHeight: 450,
            minWidth: 100,
            width: "25%",
            margin: "1.5rem",
            display: "flex",
            flexDirection: "column",
            justifyContent: "space-between",
            alignItems: "start",
          }}
        >
          <CardContent>
            <Typography gutterBottom variant="h5" component="div">
              {product.title}
            </Typography>
            <Typography gutterBottom variant="h5" component="div">
              ${product.price}
            </Typography>
            <Rating name="read-only" value={product.rating} readOnly />
          </CardContent>
          <CardActions>
            <Button variant="contained" size="small">
              Buy now
            </Button>
          </CardActions>
        </Card>
      ))}
    </Box>
  );
}

export default Product;

Create a Header component.

Create a directory inside components and name it header, and create a file inside it and name it Header.js. This file will hold the header where we will display the app’s name and later on user sign in/sign out button.

import React from "react";

import Product from "./components/product/Product";
import Header from "./components/header/Header";

function App() {
  return (
    <>
      <Header />
      <Product />
    </>
  );
}

export default App;

It should look something like this:

Time to get the API ready!

Getting your APIs for the Marketplace app comes at real ease. All you have to do is clone this production-ready project on Canonic, and you're done. It will provide you with the backend, APIs, and documentation you need for integration, without writing any code. Just make sure you add your own callback URI, client ID and secret for your 0auth provider

You will have to add CMS entries for the Products as cloning a project does not clone CMS entries.

Backend integration with GraphQL

Let's now integrate! Now that we have our APIs ready, let's move on by installing GraphQL packages.

Install GraphQL packages

To pull our data from the backend, we will need two packages - Apollo Client and GraphQL

npm i @apollo/client graphql

Configure GraphQL to communicate with the backend

Configure the Apollo Client in the project directory, inside index.js configure your apollo client so it would communicate with the backend.

Note to replace the uri with the one you'll get from Canonic.

        import React from "react";
        import ReactDOM from "react-dom";
        import { ApolloClient, InMemoryCache, ApolloProvider } from "@apollo/client";

        import App from "./App";

        const client = new ApolloClient({
          uri: "https://marketplace-app.can.canonic.dev/graphql", //You can replace this with your URI
          cache: new InMemoryCache(),
        });

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

Query the data

For querying the data, we will create a directory inside src called gql and create a file inside it called query.js. In it will write all the data we need from the backend.

        import { gql } from "@apollo/client";

        export const LOGIN_WITH_GOOGLE = gql`
          query {
            getLoginUrlsForLogin {
              GOOGLE
            }
          }
        `;

        export const GET_PRODUCTS = gql`
          query {
            products {
              title
              _id
              price
              ratings
              priceApiId
              image {
                url
                name
              }
            }
          }
        `;

Setting up login with Google 0auth

Let’s go back to the Header component, we will be importing the query we declared in previous step and holding it in data variable we get from useQuery hook by Apollo

        import { useQuery } from "@apollo/client";
        import { LOGIN_WITH_GOOGLE } from "../../gql/query";

            const { data, loading: loginDataLoading } = useQuery(LOGIN_WITH_GOOGLE)

We will add the following JSX to display the login button. data?.getLoginUrlsForLogin?.GOOGLE In here, the GOOGLE object contains login and callback links to let user login themeselves in.

        <Box sx={{ flexGrow: 0 }}>
          <Tooltip title="Account">
             {loginDataLoading && <CircularProgress color="secondary" />}
                <a href={data?.getLoginUrlsForLogin?.GOOGLE}>
                    <Button variant="contained" startIcon={<GoogleIcon />}>
                       <span sx={{ textDecoration: "none" }}>Login</span>
                    </Button>
                </a>
        </Box>

After adding these, the Header component should look something like this:

        import React from "react";
        import { useQuery } from "@apollo/client";
        import {
          AppBar,
          Box,
          Toolbar,
          Typography,
          Container,
          Button,
          Tooltip,
          CircularProgress,
        } from "@mui/material";
        import GoogleIcon from "@mui/icons-material/Google";

        import { LOGIN_WITH_GOOGLE } from "../../gql/query";

        function Header() {
          const { data, loading: loginDataLoading } = useQuery(LOGIN_WITH_GOOGLE); 
          return (
            <AppBar position="static">
              <Container maxWidth="xl">
                <Toolbar disableGutters sx={{ justifyContent: "space-between" }}>
                  <Typography
                    variant="h6"
                    noWrap
                    component="div"
                    sx={{ mr: 2, display: { xs: "none", md: "flex" } }}
                  >
                    Marketplace
                  </Typography>
                  <Box sx={{ flexGrow: 0 }}>
                    <Tooltip title="Account">
                      {loginDataLoading && <CircularProgress color="secondary" />}
                      <a href={data?.getLoginUrlsForLogin?.GOOGLE}>
                        <Button variant="contained" startIcon={<GoogleIcon />}>
                          <span sx={{ textDecoration: "none" }}>Login</span>
                        </Button>
                      </a>
                    </Tooltip>
                  </Box>
                </Toolbar>
              </Container>
            </AppBar>
          );
        }

        export default Header;

Getting logged in user’s status.

We are not yet done with the Header component, now that we have added a feature of letting the user sign themselves in on the app, we need to retrieve and store their information, so we could identify whether they are logged in or not, we can even use this persists their session, we also get some useful information such as first name, last name, email ID and all that good stuff. Let’s set up for it, first we have to create a mutation. Create a file called mutation.js inside the gql directory

        import { gql } from "@apollo/client";

        export const LOGIN_WITH_GOOGLE_MUTATION = gql`
          mutation Login($code: String!, $service: String!) {
            loginForLogin(code: $code, service: $service) {
              token
              user {
                email
                firstName
                lastName
                avatar {
                  url
                }
              }
            }
          }
        `;

Now that our mutation is ready, we can call that inside our Header component, let’s go back to it. The mutation would look like this:

        import { useMutation } from "@apollo/client";

        const [loginMutation, { data: mutationData }] = useMutation(LOGIN_WITH_GOOGLE_MUTATION);
        const urlCode = new URLSearchParams(window.location.search).get("code"); //We receive a code after a successful sign in, here pulling that code from the URL
            if (urlCode) {
              loginMutation({ variables: { code: urlCode, service: "GOOGLE" } });
                }

We receive a code from our provider be it, Google, Facebook or GitHub after the user successfully sign ins. We can get that code using this call to windows object URLSearchParams(window.location.search).get("code") and once we store that code we could just pass it in as a variable to the mutation. In service, you should write which ever service you are using, here this app just uses Google, so we added Google statically.

We will pass in this mutation inside a useEffect hook with empty array as a dependency. We’ll also need a state to hold this data we get back from mutation, so it could be used elsewhere, and while we are at it, we can store the token we receive from the mutation inside local storage, so we can persist the user login session.

        const [accessToken, setAccessToken] = useState();
        const [isLoggedIn,setIsLoggedIn] = useState()

        useEffect(() => {
            const urlCode = new URLSearchParams(window.location.search).get("code");
            if (urlCode) {
              loginMutation({ variables: { code: urlCode, service: "GOOGLE" } }); 
          }, []);

        useEffect(() => {
            setAccessToken(mutationData?.loginForLogin?.token);
            setIsLoggedIn(mutationData?.loginForLogin?.user);
            if (accessToken) localStorage.setItem("_id", accessToken);
          }, [accessToken, mutationData, setIsLoggedIn]);

But, we will need this isLoggedIn state elsewhere as well, so a better option is to move this to App.js since it is a parent to all the component, we’ll let Header component receive it as props. So the App.js will look like this:

        import React, { useState } from "react";

        import Header from "./components/header/Header";
        import Product from "./components/product/Product";

        function App() {
          const [isLoggedIn, setIsLoggedIn] = useState(); 

          return (
            <>
              {
                <div className="App">
                  <Header setIsLoggedIn={setIsLoggedIn} isLoggedIn={isLoggedIn} />
                  <Product />
                </div>
              }
            </>
          );
        }

        export default App;

We will also add a way, so user can sign out. For that we will be using Material UI’s components, after adding all that UI enhancements, the Header component will look like this

        import React, { useEffect, useState, useCallback } from "react";
        import { useQuery, useMutation } from "@apollo/client";
        import {
          AppBar,
          Box,
          Toolbar,
          IconButton,
          Typography,
          Menu,
          Container,
          Avatar,
          Button,
          Tooltip,
          MenuItem,
          CircularProgress,
        } from "@mui/material";
        import GoogleIcon from "@mui/icons-material/Google";

        import { LOGIN_WITH_GOOGLE } from "../../gql/query";
        import { LOGIN_WITH_GOOGLE_MUTATION } from "../../gql/mutation";

        function Header({ setIsLoggedIn, isLoggedIn }) {
          const [accessToken, setAccessToken] = useState();
          const { data, loading: loginDataLoading } = useQuery(LOGIN_WITH_GOOGLE);
          const [loginMutation, { data: mutationData }] = useMutation(
            LOGIN_WITH_GOOGLE_MUTATION
          );
          useEffect(() => {
            const urlCode = new URLSearchParams(window.location.search).get("code"); 
            if (urlCode) {
              loginMutation({ variables: { code: urlCode, service: "GOOGLE" } }); 
            }
          }, []);
          useEffect(() => {
            setAccessToken(mutationData?.loginForLogin?.token);
            setIsLoggedIn(mutationData?.loginForLogin?.user);
            if (accessToken) localStorage.setItem("_id", accessToken); 
          }, [accessToken, mutationData, setIsLoggedIn]);

          const [anchorElNav, setAnchorElNav] = React.useState(null);
          const [anchorElUser, setAnchorElUser] = React.useState(null);

          const handleOpenUserMenu = useCallback((event) => {
            setAnchorElUser(event.currentTarget);
          });

          const handleCloseNavMenu = useCallback(() => {
            setAnchorElNav(null);
          });

          const handleCloseUserMenu = useCallback(() => {
            setAnchorElUser(null);
          });

          const onLogout = useCallback(() => {
            localStorage.removeItem("_id"); 
          });

          return (
            <AppBar position="static">
              <Container maxWidth="xl">
                <Toolbar disableGutters sx={{ justifyContent: "space-between" }}>
                  <Typography
                    variant="h6"
                    noWrap
                    component="div"
                    sx={{ mr: 2, display: { xs: "none", md: "flex" } }}
                  >
                    Marketplace
                  </Typography>

                  <Box sx={{ flexGrow: 0 }}>
                    <Tooltip title="Account">
                      {loginDataLoading ? (
                        <CircularProgress color="secondary" />
                      ) : !isLoggedIn && !localStorage.getItem("_id") ? ( 
                        <a href={data?.getLoginUrlsForLogin?.GOOGLE}>
                          <Button variant="contained" startIcon={<GoogleIcon />}>
                            <span sx={{ textDecoration: "none" }}>Login</span>
                          </Button>
                        </a>
                      ) : (
                        <IconButton onClick={handleOpenUserMenu} sx={{ p: 0 }}>
                          {isLoggedIn?.avatar?.url ? (
                            <Avatar alt="User" src={isLoggedIn.avatar.url} />
                          ) : (
                            <Avatar src="/broken-image.jpg" />
                          )}
                        </IconButton>
                      )}
                    </Tooltip>
                    <Menu
                      sx={{ mt: "45px" }}
                      id="menu-appbar"
                      anchorEl={anchorElUser}
                      anchorOrigin={{
                        vertical: "top",
                        horizontal: "right",
                      }}
                      keepMounted
                      transformOrigin={{
                        vertical: "top",
                        horizontal: "right",
                      }}
                      open={Boolean(anchorElUser)}
                      onClose={handleCloseUserMenu}
                    >
                      <MenuItem onClick={handleCloseNavMenu}>
                        <Typography textAlign="center">
                          <a
                            onClick={onLogout}
                            href={`https://www.google.com/accounts/Logout?continue=https://appengine.google.com/_ah/logout?continue=${window.origin}`}
                          >
                            Logout
                          </a>
                        </Typography>
                      </MenuItem>
                    </Menu>
                  </Box>
                </Toolbar>
              </Container>
            </AppBar>
          );
        }

        export default Header;

Finish the Product component

We will now shift our focus to Product component. To maintain component simplicity so, one component doesn’t get too complicated, we will create a Home component that would act as a parent Product components. Let’s set that up by creating a directory inside component and calling it Home and creating a Home.js file inside it.

        import React, { useMemo } from "react";
        import { useQuery } from "@apollo/client";
        import { Box, CircularProgress } from "@mui/material";

        import Product from "../product/Product.js";
        import { GET_PRODUCTS } from "../../gql/query";

        function Home() {
          const { data, loading: productsLoading } = useQuery(GET_PRODUCTS); 
          const products = useMemo(() => data?.products || [], [data?.products]); 

          return (
            <Box
              sx={{
                display: "flex",
                flexDirection: "row",
                flexWrap: "wrap",
                gap: "4rem",
                marginTop: "4rem",
              }}
            >
              {productsLoading && (
                <CircularProgress sx={{ position: "absolute", left: "50%" }} />
              )}
              {products.map((item, i) => {
                return (
                  <Product
                    key={i}
                    id={item.id}
                    title={item.title}
                    image={item.image.url}
                    price={item.price}
                    rating={item.ratings}
                    price_api={item.priceApiId}
                  />
                );
              })}
            </Box>
          );
        }

        export default Home;

Now that we are receiving the data dynamically, we can finally toss the static array of data from Product.js, let’s get to it.

        import React from "react";
        import {
          Card,
          CardContent,
          CardMedia,
          Typography,
          Rating,
        } from "@mui/material";

        function Product({ title, price, rating, image, price_api }) {
          return (
            <Card
              sx={{
                maxHeight: 450,
                minWidth: 100,
                width: "25%",
                margin: "1.5rem",
                display: "flex",
                flexDirection: "column",
                justifyContent: "space-between",
                alignItems: "start",
              }}
            >
              <CardMedia
                component="img"
                alt="title"
                height="auto"
                image={image}
                sx={{ objectFit: "contain", maxHeight: "200px" }}
              />
              <CardContent>
                <Typography gutterBottom variant="h5" component="div">
                  {title}
                </Typography>
                <Typography gutterBottom variant="h5" component="div">
                  ${price}
                </Typography>
                <Rating name="read-only" value={rating} readOnly />
              </CardContent>
            </Card>
          );
        }

        export default Product;

We are almost the completion here, just need to Stripe’s client only checkout

For that, first you need to have an account on Stripe, after that you should have Stripe’s API key. You can get your keys here. Then we will install stripe

        npm install --save @stripe/react-stripe-js @stripe/stripe-js

Now that all these is done, let’s hop back into Home component. We will create an asynchronous function let’s name it handle click since it will be handle click from a ‘Buy now’ button.

        import { loadStripe } from "@stripe/stripe-js";

        const stripePromise = loadStripe(process.env.REACT_APP_STRIPE_API);
        const handleClick = async () => {
              setLoading(true);
              const stripe = await stripePromise;
              const { error } = await stripe.redirectToCheckout({
                lineItems: [
                  {
                    price: price_api, 
                    quantity: 1,
                  },
                ],
                mode: "payment",
                cancelUrl: "https://canonic-marketplace.netlify.app/", 
                successUrl: "https://canonic-marketplace.netlify.app/", 
              if (error) {
                setLoading(false);
                console.log("The error ", error);
              }
          };

Instead of process.env.REACT_APP_STRIPE_API you can add your own API key, you can replace cancelUrl and successUrl with your own URL as well. In here we are using price_api as a value to price key. In stripe every product has a unique product price ID I have stored all my product price ID on Canonic CMS, you thus using it as a value.

In your own project’s CMS you can add your own Product’s price ID in the price_api field.

Last bit of validation we can is to check if the user is signed in or not before proceeding, since we have isLoggedIn inside the App component, we can easily get it through pass it to Home components

        import React, { useState } from "react";

        import Header from "./components/header/Header";
        import Home from "./components/home/Home";

        function App() {
          const [isLoggedIn, setIsLoggedIn] = useState(); 

          return (
            <>
              {
                <div className="App">
                  <Header setIsLoggedIn={setIsLoggedIn} isLoggedIn={isLoggedIn} />
                  **<Home isLoggedIn={isLoggedIn} />**
                </div>
              }
            </>
          );
        }

        export default App;

We will have to pass in handleClick function along with loading state, we are using loading state to disable to ‘Buy now’ button after user click on it, so there won’t be multiple call to Stripe.

        import React, { useState, useEffect, useMemo } from "react";
        import {  useQuery } from "@apollo/client";
        import { loadStripe } from "@stripe/stripe-js";
        import { Box, CircularProgress } from "@mui/material";

        import Product from "../product/Product.js";
        import { GET_PRODUCTS } from "../../gql/query";

        function Home({ **isLoggedIn** }) {
          const { data, loading: productsLoading } = useQuery(GET_PRODUCTS); 
          const products = useMemo(() => data?.products || [], [data?.products]);
          const stripePromise = loadStripe(process.env.REACT_APP_STRIPE_API); 
          const [loading, setLoading] = useState();

          const handleClick = async (price_api, title) => {

            if (isLoggedIn) {
              setLoading(true);
              const stripe = await stripePromise;
              const { error } = await stripe.redirectToCheckout({
                lineItems: [
                  {
                    price: price_api, 
                    quantity: 1,
                  },
                ],
                mode: "payment",
                cancelUrl: window.origin,
                successUrl: window.origin + `?session_id=${title}`,
              });
              if (error) {
                setLoading(false);
              }
            } else alert("Please log in to continue");
          };

          return (
            <Box
              sx={{
                display: "flex",
                flexDirection: "row",
                flexWrap: "wrap",
                gap: "4rem",
                marginTop: "4rem",
              }}
            >
              {productsLoading && (
                <CircularProgress sx={{ position: "absolute", left: "50%" }} />
              )}
              {products.map((item, i) => {
                return (
                  <Product
                    key={i}
                    id={item.id}
                    title={item.title}
                    image={item.image.url}
                    price={item.price}
                    rating={item.ratings}
                    price_api={item.priceApiId}
                    **handleClick={handleClick}
                    loading={loading}**
                  />
                );
              })}
            </Box>
          );
        }

        export default Home;

Product component is now receiving props of handleClick and loading, we can finally create a Buy now button

        import React from "react";
        import {
          Card,
          CardActions,
          CardContent,
          CardMedia,
          Button,
          Typography,
          Rating,
        } from "@mui/material";

        function Product({
          title,
          price,
          rating,
          image,
          price_api,
          handleClick,
          loading,
        }) {
          return (
            <Card
              sx={{
                maxHeight: 450,
                minWidth: 100,
                width: "25%",
                margin: "1.5rem",
                display: "flex",
                flexDirection: "column",
                justifyContent: "space-between",
                alignItems: "start",
              }}
            >
              <CardMedia
                component="img"
                alt={title}
                height="auto"
                image={image}
                sx={{ objectFit: "contain", maxHeight: "200px" }}
              />
              <CardContent>
                <Typography gutterBottom variant="h5" component="div">
                  {title}
                </Typography>
                <Typography gutterBottom variant="h5" component="div">
                  ${price}
                </Typography>
                <Rating name="read-only" value={rating} readOnly />
              </CardContent>
              <CardActions>
                <Button
                  variant="contained"
                  size="small"
                  onClick={() => handleClick(price_api, title)} 
                  disabled={loading}
                >
                  Buy now
                </Button>
              </CardActions>
            </Card>
          );
        }

        export default Product;

And, with this we can conclude our frontend.

Bonus! - Sending email and Slack notification

We can add webhooks to perform actions such as send a Slack notification whenever a product is purchased or send an email notification. Let’s see how that done.

Configuring the webhooks

Open your cloned project on Canonic, navigate to API and choose Notify table. Click on createNotify endpoint there you can see Message webhook of Slack, you can click on it and replace trigger URL and message body with your own trigger URL and message body. Chained to that you will find email webhook of Canonic, there as well, you can replace email subject and email body with your content.

Configuring frontend

In order to trigger these webhooks, we need to make a mutation. Let’s begin by declaring a mutation in our mutation.js file

            export const NOTIFY = gql`
              mutation Notify($title: String!) {
                createNotify(input: { title: $title }) {
                  title
                }
              }
            `;

Final file would look like this:

            import { gql } from "@apollo/client";

            export const LOGIN_WITH_GOOGLE_MUTATION = gql`
              mutation Login($code: String!, $service: String!) {
                #This mutation is used to get logged in user's details
                loginForLogin(code: $code, service: $service) {
                  #We feed in code which we get after user successfully signs in, services are the 0auth services we are using such as Google,Github and Facebook.
                  token
                  user {
                    email
                    firstName
                    lastName
                    avatar {
                      url
                    }
                  }
                }
              }
            `;

            export const NOTIFY = gql`
              mutation Notify($title: String!) {
                createNotify(input: { title: $title }) {
                  title
                }
              }
            `;

We have to trigger this mutation from Home component. Let’s go back to the Home component, there we will modify successUrl in handleClick function to include the title of the product in URL whenever a product is checked out successfully

            const handleClick = async (price_api, title) => {

                if (isLoggedIn) {
                  setLoading(true);
                  const stripe = await stripePromise;
                  const { error } = await stripe.redirectToCheckout({
                    lineItems: [
                      {
                      price: price_api, 
                        quantity: 1,
                      },
                    ],
                    mode: "payment",
                    cancelUrl: window.origin,
                    successUrl: window.origin + `?session_id=${title}`,
                  });
                  if (error) {
                    setLoading(false);
                  }
                } else alert("Please log in to continue");
              };

And, add useEffect to with empty dependency array, to check if URL has the product’s title

            useEffect(() => {
                const hasSuccessUrl = new URLSearchParams(window.location.search).get(
                  "session_id"
                ); 
                if (hasSuccessUrl) {
                 //Do something
                }
              }, []);

Now that everything is set up we can trigger the mutation

            import { useMutation } from "@apollo/client";
            import { NOTIFY } from "../../gql/mutation";

            const [notify] = useMutation(NOTIFY);

            useEffect(() => {
                const hasSuccessUrl = new URLSearchParams(window.location.search).get(
                  "session_id"
                ); 
                if (hasSuccessUrl) {
                  notify({ variables: { title: hasSuccessUrl } });
                }
              }, []);

So the final file would look like this


import React, { useState, useEffect, useMemo } from "react";
import { useMutation, useQuery } from "@apollo/client";
import { NOTIFY } from "../../gql/mutation";
import { loadStripe } from "@stripe/stripe-js";
import { Box, CircularProgress } from "@mui/material";

import Product from "../product/Product.js";
import { GET_PRODUCTS } from "../../gql/query";

function Home({ isLoggedIn }) {
  const { data, loading: productsLoading } = 
  useQuery(GET_PRODUCTS); 
  const products = useMemo(() => data?.products || [], [data?.products]); 
  const stripePromise = loadStripe(process.env.REACT_APP_STRIPE_API); 
  const [loading, setLoading] = useState(); 
  const [notify] = useMutation(NOTIFY);

  const handleClick = async (price_api, title) => {
                if (isLoggedIn) {
                  setLoading(true);
                  const stripe = await stripePromise;
                  const { error } = await stripe.redirectToCheckout({
                    lineItems: [
                      {
                        price: price_api, 
                        quantity: 1,
                      },
                    ],
                    mode: "payment",
                    cancelUrl: window.origin,
                    successUrl: window.origin + `?session_id=${title}`, 
                  });

                  if (error) {
                    setLoading(false);
                  }
                } else alert("Please log in to continue");
              };

              useEffect(() => {
                const hasSuccessUrl = new URLSearchParams(window.location.search).get(
                  "session_id"
                ); 
                if (hasSuccessUrl) {
                  notify({ variables: { title: hasSuccessUrl } });
                }
              }, []);
              return (
                <Box
                  sx={{
                    display: "flex",
                    flexDirection: "row",
                    flexWrap: "wrap",
                    gap: "4rem",
                    marginTop: "4rem",
                  }}
                >
                  {productsLoading && (
                    <CircularProgress sx={{ position: "absolute", left: "50%" }} />
                  )}
                  {products.map((item, i) => {
                    return (
                      <Product
                        key={i}
                        id={item.id}
                        title={item.title}
                        image={item.image.url}
                        price={item.price}
                        rating={item.ratings}
                        price_api={item.priceApiId}
                        handleClick={handleClick}
                        loading={loading}
                      />
                    );
                  })}
                </Box>
              );
            }

  export default Home;

Once you've reached here, you've successfully completed the Marketplace project.

You can clone this sample project here. We hope this guide helped you to create your own Marketplace app; if you do, then share it with us in our Discord community.If you are not already a member, join us, and let's build together.

Connect on Discord.If you'd like to see our other guides, they're all here.For any support requests, write to us at support@canonic.dev. Check out our website to know more about Canonic.

How to create an awesome slack approval workflow

Kartik Grewal — Sat, 18 Dec 2021 23:29:44 +0000

Slack is a very popular workplace place, to a point where now it’s become a verb — “Slack me if you need something!” — and there’s good reason for it. During these pandemic times, it’s so much more than just a chat app.

Today, we’ll explore how we can do even more with Slack Approvals. We’ll bring in Canonic and use the power of slack approvals to approve or disapprove our message. We want the ability that whenever a message is added to the database, its respective slack approval message is sent, based on the response, the same gets updated in the database.

Let’s dive in! 🚀

Step 1: Create necessary slack app & generate tokens

Let’s start with getting all the slack requirements in place. We have to create an app with Slack and generate its respective tokens.

For this step, we’ll follow the slack guides linked with the respective text as they’ll be the best source to get all these requirements.

Step 2: Starting with a slack integration workflow

Jump to Canonic and clone this sample project which already has slack integration added, or create one for yourself and move to the API section to manually add the slack integration for your createMessage API.

You will be asked to authenticate and add in a token (the one that we got in step 1) Once authorized you should have a green tick to reflect that.

Step 3: Slack payload creation

Now that we have our integration set up complete and attached to our createMessage API. Whenever we trigger this API, an approval message with the trigger message should be sent to slack.

For this, we need to add our payload to slack. For using this feature, we’ll use a slightly different payload than we usually do for a simple chat message. Our payload should look something like this:

{
    "text": "New approval request",
    "blocks": [
        {
            "type": "header",
            "text": {
                "type": "plain_text",
                "text": "New request",
                "emoji": true
            }
        },
        {
            "type": "section",
            "fields": [
                {
                    "type": "mrkdwn",
                    "text": {{ title }}
                },
            ]
        },
        {
            "type": "actions",
            "elements": [
                {
                    "type": "button",
                    "text": {
                        "type": "plain_text",
                        "emoji": true,
                        "text": "Approve"
                    },
                    "style": "primary",
                    "url": "click_me_123"
                },
                {
                    "type": "button",
                    "text": {
                        "type": "plain_text",
                        "emoji": true,
                        "text": "Reject"
                    },
                    "style": "danger",
                    "url": "click_me_123"
                }
            ]
        }
    ]
}

Here, in place of click_me_123, we’ll add the URL for the respective API to get triggered when someone approves or disapproves it. For that, we’ll need to build a custom API. Let’s do that.

Step 4: Create custom API for approving/disapproving messages

We now create a custom API in Canonic to look for the query parameters and update the respective record. Create a new API by clicking on the + icon against the Endpoints tab.

Next, add details regarding the API.

Go to the Code tab and add the following code to find the id for the message and add in the approval or disapproval in the database. We use query parameters to fetch the details then do the processing.

module.exports = async function endpoint({ query }) {
  const { id, approved } = query
  return Message.findOneAndUpdate({ _id: id }, { $set: { approved: approved }}, { upsert: true })
}

Step 5: Update back the message

We deploy this project to get the API URL. Click on the top right corner saying deploy, then go to the docs to get its URL.

We replace **click_me_123** to*https://messages.can.canonic.dev/api/messages/approvalornot?id=1234&approved=false* in the danger button and replace the same with https://messages.can.canonic.dev/api/messages/approvalornot?id=1234&approved=true.

Now whenever a user will approve or disapprove, the following URL will get triggered saving the approval of the message in the database. This can be used in place of any Micro-service which is built is to handle slack integration or become a slack server for that business.

Hope this guide helps you make your day a little bit more productive!
Check out the sample project here

Conclusion

Thank you for reading this guide. If you happen to create any of these integrations, please remember to mention us on social media or drop us a line on our discord channel.

You can also check out our other guides here.

Join us on Discord to discuss or share with our community. Write to us for any support requests at support@canonic.dev. Check out our website to know more about Canonic.