DEV Community: Ajay Jarhad

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.

Scheduled exports from Shopify to Google sheets

Ajay Jarhad — Sat, 18 Dec 2021 02:50:57 +0000

Next on our list to Integrate and optimize the daily workflow, we have got a detailed guide on how to get scheduled exports from Shopify to Google sheets.

By the end of this guide, you will be able to create a trigger that updates the inventory on Shopify whenever a new row is added to the inventory sheet. So let's begin, shall we!

Let's get started! 🚀

Step 1: Create necessary sheets to hold our inventory data

First thing first, let's create an empty google sheet to hold our inventory data.

Step 2: Let’s now work on those integrations!

Go to this sample project and click on the top right corner to clone it. This project already has YouTube integration for metrics set up. So all we have to do is clone it and get started.

Step 3: Explore API tab

In the same project, from the left-hand navigation bar, move to the API tab.

There, in the left-hand panel, you’ll find different divisions like - Endpoints, Scheduled triggers, DB triggers, Integration triggers, etc. In the scheduled triggers, you should find it already set up.

Step 4: The dailyInventoryReporting flow

Let's now build the integration scheduled trigger that gets triggered every evening at 8 pm.

Click on the dailyInventoryReporting trigger and it’ll open up the graph for it. Our flow looks something like this
👇

Step 5: Updating configuration of integrations

Let's start inspecting and correcting any integration settings should we have to. Click on the left most trigger will reveal its settings.

As you can check we've set it up to execute every day around 8:00PM. You can change this schedule should you want to by clicking on the trigger.

Similarly in Shopify integration, you will have to enter your API key to authenticate. You will then need the product ID for which you want to fetch the inventory of, once you input product ID in required fields, you are all set.

And, the last is the Google Sheets API, after authenticating, in required fields you will need to input your Google Sheet's ID and Range.

Once you've reached here, you've successfully scheduled exports from Shopify to Google sheets. 🥳

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.

Write to us for any support requests at support@canonic.dev. Check out our website to know more about Canonic.

A Github PR Dashboard with ReactJS and Material UI

Ajay Jarhad — Wed, 08 Dec 2021 22:31:47 +0000

Dashboards are great for visualization and keeping track of what's going on. Managing a repository for a team can be cumbersome and keeping a track of all the pull requests even so. One potential solution could be the dashboard, dashboards are great for visualization and keeping track of what's going on.

In this article, we will discuss how to create a Github Pull Requests Dashboard using ReactJS and Material UI.

Let's get started

Setting up React

Let's begin by creating a boilerplate using the create-react-app
```
npx create-react-app github-pr-dashboard
```
Install Material UI

We will be using Material UI as a UI library. It boosts up the speed of development as we won't have to manually write CSS.
```
yarn add @mui/material @emotion/react @emotion/styled
```

Creating a Container component

We will be using a Container component to display the columns corresponding to different stages to the PR. Create a directory inside src called components, then create another directory inside of it called Container. Create an index.js file that will contain our display logic.

import React from "react";

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

import "./style.css";

const Container = () => {
  return (
    <>
      <Box sx={{ flexGrow: 1 }}>
        <AppBar position="static">
          <Toolbar variant="dense">
            <Typography
              variant="h6"
              color="inherit"
              component="div"
              textAlign="center"
              width="100%"
            >
              Github PR Dashboard
            </Typography>
          </Toolbar>
        </AppBar>
      </Box>
      <div className="container">
        <Card className="card">
          <Stack
            direction="row"
            alignItems="center"
            justifyContent="space-between"
          >
            <Typography gutterBottom variant="h5">
              Merged
            </Typography>
          </Stack>
          <CardContent className="cardContent">
            {/* PRs to be displayed here */}
          </CardContent>
        </Card>
        <Card className="card">
          <Stack
            direction="row"
            alignItems="center"
            justifyContent="space-between"
          >
            <Typography gutterBottom variant="h5">
              In Review
            </Typography>
          </Stack>
          <CardContent className="cardContent">
            {/* PRs to be displayed here */}
          </CardContent>
        </Card>
        <Card className="card">
          <Stack
            direction="row"
            alignItems="center"
            justifyContent="space-between"
          >
            <Typography gutterBottom variant="h5">
              Assigned
            </Typography>
          </Stack>
          <CardContent className="cardContent">
            {/* PRs to be displayed here */}
          </CardContent>
        </Card>
        <Card className="card">
          <Stack
            direction="row"
            alignItems="center"
            justifyContent="space-between"
          >
            <Typography gutterBottom variant="h5">
              Open
            </Typography>
          </Stack>
          <CardContent className="cardContent">
            {/* PRs to be displayed here */}
          </CardContent>
        </Card>
      </div>
    </>
  );
};

export default Container;

src/components/Container/Container.js

Create a CSS file as well and name it style.css. We will write some custom CSS to display the columns in a 2*2 grid.

.container {
  width: 100%;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-evenly;
  margin: 2rem auto;
}

.card {
  width: calc(100% * (1 / 2) - 5rem);
  height: 400px;
  margin: 1.3rem;
  padding: 1rem;
}
@media only screen and (max-width: 600px) {
  .card {
    width: 100%;
  }
}
.cardContent {
  height: 80%;
  overflow: auto;
}

src/components/Container/style.css

Simply import this component in src/index.js removing App.js in the process.

Create a List component

This component will display the PR details such as title, username etc. Create another component named List and create an index.js file inside of it. We will set it up for displaying the desired details.

import React from "react";
import { Avatar, Paper, Typography, Fab } from "@mui/material";

import "./style.css";

const List = () => {
  return (
    <Paper elevation={3} sx={{ padding: 2, margin: 2 }}>
      <Typography variant="body1" color="text.secondary">
        Pull Request 1
      </Typography>
      <Fab variant="extended" size="small">
        Bug
      </Fab>
      <div className="avatar">
        {/* Profile picture will be displayed here */}
        <Avatar sx={{ width: 24, height: 24 }} />
        <Typography variant="body2" sx={{ ml: 1 }}>
          John Doe
        </Typography>
      </div>
    </Paper>
  );
};

export default List;

src/components/List/List.js

We will add a bit of custom CSS to align Profile picture and username. Let's create style.css.

.avatar {
  display: flex;
  align-items: center;
  margin: 0.4rem 0;
}

src/components/List/style.css

We will then import the List component into Container and call it in CardContent.

Import List component into Container component and replace it at every /* PRs to be displayed here */ comment.

<CardContent className="cardContent">
    <List /> //Calling the List component
</CardContent>

src/components/Container/Container.js

Create a Modal component

Let's create a modal component to display more details about the PR when clicked on.

import React from "react";
import {
  Avatar,
  Typography,
  Button,
  Fade,
  Modal,
  Box,
  Backdrop,
} from "@mui/material";

export default function Modals() {
  const [open, setOpen] = React.useState(false);
  const handleOpen = () => setOpen(true);
  const handleClose = () => setOpen(false);
  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}>
          <Box className="box">
            <div className="avatar">
              {/* Profile picture will be displayed here */}
              <Avatar sx={{ width: 24, height: 24 }} />
              <Typography variant="body2" style={{ marginLeft: 10 }}>
                John Doe
              </Typography>
            </div>
            <Typography id="transition-modal-title" variant="h4" component="h2">
              Pull Request 1
            </Typography>
            <Typography id="transition-modal-description" sx={{ mt: 2, mb: 2 }}>
              Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
              eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
              enim ad minim veniam, quis nostrud exercitation ullamco laboris
              nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
              reprehenderit in voluptate velit esse cillum dolore eu fugiat
              nulla pariatur. Excepteur sint occaecat cupidatat non proident,
              sunt in culpa qui officia deserunt mollit anim id est laborum.
            </Typography>
            {/* This will be displayed only if the PR has an assignee assigned */}
            {
              <>
                <Typography variant="h6">Assigned to</Typography>
                <div style={{ display: "flex", alignItems: "center" }}>
                  {/* Assignee's profile picture will be displayed here */}
                  <Avatar sx={{ width: 24, height: 24 }} />
                  <Typography variant="body2" style={{ marginLeft: 10 }}>
                    Jane Doe
                  </Typography>
                </div>
              </>
            }
            <Typography id="transition-modal-description" sx={{ mt: 2 }}>
              <Button
                variant="contained"
                href="#"
                target="_blank"
                rel="noreferrer"
                sx={{ mt: 2 }}
              >
                Open PR
              </Button>
            </Typography>
          </Box>
        </Fade>
      </Modal>
    </div>
  );
}

src/components/Modal/Modal.js

Let's import this component inside the List component and define a onClick for handling PR click. We will use props to pass the value for open and close inside modal component.

...
...
import Modals from "../Modal";
...
const List = () => {
  const [isOpen, setIsOpen] = React.useState();
  const handleClick = React.useCallback((pr, identifier) => {
    setIsOpen(true);
  }, []);
  return (
    <>
      <Paper
        elevation={3}
        sx={{ padding: 2, margin: 2 }}
        onClick={() => handleClick()}
      >
        ...
      </Paper>
      {/* we are passing isOpen and setIsOpen states to Modal, to manage open and close modal on click */}
      <Modals open={isOpen} setOpen={setIsOpen} /> 
    </>
  );
};

export default List;

src/components/List/List.js

We have to go back to Modal, to accept the new props.

...
...

export default function Modals({ setOpen, open }) {    
  const handleClose = React.useCallback(() => {
    setOpen(!open);
  }, [open, setOpen]);
  return (
    <div>
      ...
    </div>
  );
}

src/components/Modal/Modal.js

We will also need CSS to correctly display the Modal, create a style.css file inside Modal directory and then import in the component.

.box {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 50%;
  height: 40%;
  overflow: auto;
  background: #fff;
  border: 2px solid #000;
  box-shadow: 24px;
  padding: 4rem;
}

.avatars {
  display: flex;
  align-items: center;
  margin: 1rem 0 2rem 0;
}

src/components/Modal/style.css

˳˳˳Now all the components that will display the data is ready. It's time to integrate the backend.

Time to get your APIs ready!

Getting your APIs for Github Dashboard 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 Github's credentials (You don't need to enter the credentials if you are fetching open-source repository)

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
```
yarn add @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 Container from "./components/Container";
import "./index.css";

const client = new ApolloClient({
  uri: "https://github-pr-dashboard-d3d.can.canonic.dev/graphql",
  cache: new InMemoryCache(),
});
ReactDOM.render(
  <ApolloProvider client={client}>
    <Container></Container>
  </ApolloProvider>,
  document.getElementById("root")
);

src/index.js

Query the data

Let's define our queries inside src/gql directory in a file called query.js.

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

export const GET_CONTAINERS = gql`
  query {
    containers {
      #Container is on the the table on the Canonic backend
      title #Title contains the title of the container
      identifier #Using the identifier to associate the PR with the container.
    }
  }
`;

export const GET_PR = gql`
  query {
    pullRequests {
      #Pull Requests is another table on the Canonic backend
      github {
        #Github is the name of our Github integration.
        title #title will contain PR's title
        state #state will contain PR's state (etiher 'open' or 'closed')
        body #body contains the description of the PR
        draft #draft contains a boolean value indicating if the PR is a draft or not
        html_url #html_url contains the link to PR on github.com
        user {
          #user will hold user's data, here we are only fetching their profile picture link and their username
          avatar_url #avatar_url has the profile picture link of the user
          login #login has user's username
        }
        assignee {
          #assignee contains either null means PR has no assignee or return a user's data, here as well we are fetching their profile picture link and their username.
          avatar_url #avatar_url has the assignee's profile picture link of the user
          login #login has assignee's username
        }
        labels {
          #labels contains the array of labels. Here we will be just needing name and color
          name #name has title of the label
          color #color contains the hexadecimal value of color without a '#'
        }
      }
    }
  }
`;

src/gql/query.js

Fetching data from the API

Inside our Container component, we execute the query.

import { React, useEffect, useState, useCallback } from "react";
import { useQuery } from "@apollo/client";

...

//Local dependencies
import { GET_CONTAINERS } from "../../gql/query";
...

const Container = () => {
  const { data: containerData } = useQuery(GET_CONTAINERS); // Fetching all 4 of our containers from graphQL

  const [containers, setContainers] = useState(); //Using this state to populate the containers.

  useEffect(() => {
    if (containerData) {
      setContainers(containerData.containers); //Setting up the container state
    }
  }, [containerData]); //Re-rendering state whenever  Container data changes

  // We are using this util function to assign a background color based on the column's identifier.
  const setColor = useCallback((identifier) => {
    let color = "";
    switch (identifier) {
      case "merge":
        color = "#6fbf73";
        break;
      case "pending":
        color = "#4dabf5";
        break;
      case "assigned":
        color = "#ffcd38";
        break;
      case "review":
        color = "#ffa733";
        break;
      default:
        color = "";
    }
    return color;
  }, []);

  return (
    <>
      {/* The Box component by the MaterialUI is responsible for display the header */}
      <Box sx={{ flexGrow: 1 }}>
        ...
      </Box>
      <div className="container">
        {/* Mapping over the container data to display each container and display its corresponding PRs */}
        {containers &&
          containers.map((containerName, i) => (
            <Card className="card" key={i}>
              {/* The Stack is a Material UI component, it will display a content inside a square box */}
              <Stack
                direction="row"
                alignItems="center"
                justifyContent="space-between"
                sx={{
                  px: 2,
                  py: 1,
                  mb: 2,
                  bgcolor: setColor(containerName.identifier), //Here we are calling the setColor function to dynamically assigning a background color based on name/identifier of the container.
                  color: "#FFFFFF",
                  borderRadius: "4px",
                }}
              >
                <Typography
                  gutterBottom
                  variant="h5"
                  sx={{
                    width: "100%",
                    paddingTop: "0.5rem",
                    textAlign: "center",
                  }}
                >
                  {containerName.title}
                </Typography>
              </Stack>

              <CardContent className="cardContent">
                {/* There are in total 4 identifier created on the backend (merge,review,assigned,draft) based on that associating the PRs */}
              </CardContent>
            </Card>
          ))}
      </div>
    </>
  );
};

export default Container;

src/components/Container/Container.js

Passing data as props

We will be passing the data for the PRs from Container component.

...

//Local dependencies
import List from "../List";
import { GET_CONTAINERS, GET_PR } from "../../gql/query";
...

const Container = () => {
  ...
  const { loading, data: prData } = useQuery(GET_PR);
  ...
  ...

  const pullRequests = useMemo(
    () => prData?.pullRequests?.map((item) => item.github)?.[0] || [],
    [prData?.pullRequests] //Mapping over the data and assigning it to 'pullRequests' variable
  );
  const opened = useMemo(
    () => pullRequests.filter((item) => item.state === "open"),
    [pullRequests] // Filtering and populating all the PRs with 'open' status
  );
  const closed = useMemo(
    () => pullRequests.filter((item) => item.state === "closed").slice(0, 15),
    [pullRequests] // Filtering and populating all the PRs with 'closed' status
  );
  const draft = useMemo(
    () => pullRequests.filter((item) => item.draft === true),
    [pullRequests] // Filtering and populating all the draft PRs
  );
  const assigned = useMemo(
    () =>
      pullRequests.filter(
        (item) => item.assignee !== null && item.assignee.login.length > 1
      ),
    [pullRequests] // Filtering and populating all the PRs who has assignee.
  );

  ...
  return (
    <>
      <Box sx={{ flexGrow: 1 }}>
        <AppBar position="static">
          <Toolbar variant="dense">
            <Typography
              variant="h6"
              color="inherit"
              component="div"
              textAlign="center"
              width="100%"
            >
              Github PR Dashboard
            </Typography>
          </Toolbar>
        </AppBar>
      </Box>
      <div className="container">
        {loading && (
          <Typography
            gutterBottom
            variant="h5"
            component="div"
            marginBottom="5rem"
          >
            Loading......
          </Typography>
        )}
        {!loading &&
          containers &&
          containers.map((containerName, i) => (
            <Card className="card" key={i}>
                ...
              </Stack>

              <CardContent className="cardContent">
                {/* There are in total 4 identifier created on the backend (merge,review,assigned,draft) based on that associating the PRs */}
                {containerName.identifier === "merge" && closed && (
                  <List
                    data={closed}
                    key={i}
                    identifier={containerName.identifier}
                  />
                )}
                {containerName.identifier === "review" && draft && (
                  <List
                    data={draft}
                    key={i}
                    identifier={containerName.identifier}
                  />
                )}
                {containerName.identifier === "assigned" && assigned && (
                  <List
                    data={assigned}
                    key={i}
                    identifier={containerName.identifier}
                  />
                )}
                {containerName.identifier === "pending" && opened && (
                  <List
                    data={opened}
                    key={i}
                    identifier={containerName.identifier}
                  />
                )}
              </CardContent>
            </Card>
          ))}
      </div>
    </>
  );
};

export default Container;

src/components/Container/Container.js

Now we have received the data as a prop, we will map over the data in order to fetch username,profile picture, the labels associated with the PR. Modify List component for that.

import React, { useState, useCallback } from "react";
...
...

const List = ({ data, identifier }) => {
  const [isOpen, setIsOpen] = useState(); 
  const [modalData, setModalData] = useState();
  const [containersName, setContainersName] = useState(); 
  const handleClick = useCallback((pr, identifier) => {
    setIsOpen(true);
    setModalData(pr); 
    setContainersName(identifier);
  }, []);

  return (
    <>
      {data.map((item, i) => (
        <Paper
          elevation={3}
          sx={{ padding: 2, margin: 2, cursor: "pointer" }}
          key={i}
          onClick={() => handleClick(item, identifier)}
        >
          ...
        </Paper>
      ))}
      <Modals
        open={isOpen}
        setOpen={setIsOpen}
        pr={modalData}
        containerName={containersName}
      />
    </>
...

We are receiving the PR body text in markdown format, we will use ReactMarkdown along with remarkGfm which helps to render Github flavoured markdown.

yarn add react-markdown remark-gfm

Let's edit Modal component to account for props data.

...
import { ..., Fab } from "@mui/material";
import ReactMarkdown from "react-markdown";
import remarkGfm from "remark-gfm";

...

export default function Modals({ pr, containerName, open, setOpen }) {
  ...
  return (
    <div>
      <Modal
        ...
      >
        {pr && (
          <Fade in={open}>
            <Box className="box">
              <Fab variant="extended" size="small" sx={{ mb: 2 }}>
                {containerName}
              </Fab>
              <div className="avatars">
                {/* Displays user's profile picture */}
                <Avatar
                  alt={pr.user.login}
                  src={pr.user.avatar_url}
                  sx={{ width: 24, height: 24 }}
                />
                <Typography variant="body2" style={{ marginLeft: 10 }}>
                  {/* Displays user's username */}
                  {pr.user.login}
                </Typography>
              </div>
              <Typography
                id="transition-modal-title"
                variant="h4"
                component="h2"
              >
                {/* Displays the title of the PR */}
                {pr.title}
              </Typography>
              <Typography
                id="transition-modal-description"
                sx={{ mt: 2, mb: 2 }}
              >
                {/* Displays the PR's body content. Using react-markdown to display markdown */}

                <ReactMarkdown children={pr.body} remarkPlugins={[remarkGfm]} />
              </Typography>
              {/* This will be displayed only if the PR has an assignee assigned */}
              {pr.assignee && pr.assignee.login.length > 1 && (
                <>
                  <Typography variant="h6">Assigned to</Typography>
                  <div style={{ display: "flex", alignItems: "center" }}>
                    {/* Displays assignee's profile picture */}
                    <Avatar
                      alt={pr.assignee.login}
                      src={pr.assignee.avatar_url}
                      sx={{ width: 24, height: 24 }}
                    />
                    <Typography variant="body2" style={{ marginLeft: 10 }}>
                      {/* Displays assignee's username */}
                      {pr.assignee.login}
                    </Typography>
                  </div>
                </>
              )}
              <Typography id="transition-modal-description" sx={{ mt: 2 }}>
                {
                  // Displays the hyperlink of PR

                  <Button
                    variant="contained"
                    href={pr.html_url}
                    target="_blank"
                    rel="noreferrer"
                    sx={{ mt: 2 }}
                  >
                    Open PR
                  </Button>
                }
              </Typography>
            </Box>
          </Fade>
        )}
...

src/components/Modal/Modal.js

Voila! we are done.

Live Demo
Sample Code on Github.

Conclusion:

This dashboard helps you gain visibility into PRs for a particular repository.

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 here.

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.

Publish release notes for your product using React and Tailwind

Ajay Jarhad — Wed, 01 Dec 2021 20:26:25 +0000

Release notes come into play when the release cycle is about to conclude and it's time to inform your users about the changes. Changelogs and Release notes help users understand how your product has changed since the last release.

In this article, we will discuss how you can create the release note tools using ReactJS.

Let's get started

Step 1: Installing React
First thing first, let's begin with creating a react project using create-react-app.

npx create-react-app release-notes-app

Step 2: Installing Tailwind

In this project, we'll be using Tailwind - CSS framework, that'll help us in rapidly building the interface for release notes.

Next, by using npm, we install all the tailwind dependencies and set up its configuration file.

All you have to do is follow the simple instructions at tailwind CSS documentation.

Step 3: Creating wrapper component

To create a wrapper component - Create a file called UI.js inside the src/components directory. This file is the wrapper for our Header, Sidebar - which will hold all our versions for users to directly click and jump. And Main will hold our version description.

    const UI = () => {
      return (
        <>
          //Header will come here
          <div className="min-h-screen flex flex-row">
            <div className="flex flex-col bg-gray-100   text-white w-6/12 mobile:hidden">
              <ul className="flex flex-col py-4 sticky top-0  divide-y divide-y divide-gray-400">
                //Sidebar will come here
              </ul>
            </div>
            <div>//Main component should come here</div>
          </div>
        </>
      );
    };

    export default UI;

src/component/UI.js

Step 4: Creating Header component

To create a Header component, create a file named Header.js *inside src/components directory.* It is styled with CSS properties with a basic header.

const Header = () => {
  return (
    <nav className="flex items-center justify-between flex-wrap bg-blue-600  p-6">
      <div className="flex items-center flex-no-shrink text-white mr-6 w-full justify-start">
        <span className="font-semibold text-xl tracking-tight">
          Release Notes
        </span>
      </div>
    </nav>
  );
};

export default Header;

src/components/Header.js

Step 5: Creating Sidebar component

The sidebar component will hold all of the version numbers with hyperlinks so that you can directly click and jump to that version's release notes. Create another file Sidebar.js inside the same components directory.

const Sidebar = () => {
  return (
    <li className={"m-2 ml-4"}>
      <a className={"flex flex-col items-left h-12 cursor-pointer"}>
        <div className="text-sm font-medium text-gray-900">Version 1.0</div>
        <div className="text-sm font-medium text-gray-900">Monday 1/1/21</div>
      </a>
    </li>
  );
};

export default Sidebar;

Step 6: Creating the Main component

The next step is to create the Main component - Create a file called Main.js inside components directory.

This component will display all of the version descriptions with infinite scroll.

const Main = () => {
  return (
    <div className="tab-content tab-space w-5/6 divide-y divide-light-blue-400">
      <div className={"text-gray-900 text-2xl p-2 mt-16 w-40 my-4 ml-8"}>
        Version 1.0
      </div>
      <div className={"block"}>
        <div>
          <section className="flex flex-col  mb-10">
            <div className="w-36 h-auto leading-8 ml-10 text-left font-bold shadow-lg mt-10 mb-3 text-white rounded-md">
              <span className="ml-4">Bug Fixes</span>
            </div>
            <div className="text-left ml-20 mt-4 text-gray-900">
              Bug fix 1
            </div>
          </section>
        </div>
      </div>
    </div>
  );
};

export default Main;

src/component/Main.js

Now that all of our display components are created, let's connect them all to App and check how our frontend looks.

Step 7: Stitching frontend together

Let's import all of our components in UI.js at the respective comments and import UI.js inside our App.js.

import UI from "./components/UI";

function App() {
  return (
    <div className="App" style={{ height: "100vh" }}>
      <UI />
    </div>
  );
}

export default App;

src/components/App.js

Once you run yarn start, It'll probably look like this! I know! It's not perfect (yet!).

It's time to integrate this with a backend! This will fetch our release notes and display them.

Time to get your APIs ready!

Getting your APIs for release notes comes at real ease. All you have to do is clone a production-ready template on Canonic and you're done. It will provide you with the backend, APIs, and documentation you need for integration, without writing any code.

Step 8: Cloning the project

Head over to Canonic and clone the project by clicking on the top right corner.

Step 9: Deploy and get your APIs

After cloning it should open up your cloned project. We hit deploy on the top right corner if it's already not deployed. That should provide us with a URI and our other sections like docs.

Backend integration with GraphQL

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

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

npm i @apollo/client graphql

Step 11: Configure GraphQL to communicate with backend

Configure the Apollo Client in the project directory, inside App.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 { ApolloProvider, InMemoryCache, ApolloClient } from "@apollo/client";

import UI from "./components/UI";

//Connecting with the Canonic API
const client = new ApolloClient({
  uri: "https://release-notes-app.can.canonic.dev/graphql",
  cache: new InMemoryCache(),
});

function App() {
  return (
    <ApolloProvider client={client}>
      <div className="App" style={{ height: "100vh" }}>
        <UI />
      </div>
    </ApolloProvider>
  );
}

export default App;

src/App.js

Step 12: Query the data

To query the data, we'll create a directory gql inside the src folder to contain our GraphQL queries. Inside, we will create a file and name it query.js.

This is where we will write the GraphQL query for querying the data.

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

export const GET_VERSIONS = gql`
  query {
    versions {
      version
      date
      description {
        details
        types {
          label
          value
        }
      }
    }
  }
`;

Step 13: Using query in UI

We then use this query to get the data for changelog and get the versions. Let's modify UI.js to query our backend and pass it onto our components.

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

....

const UI = () => {
  const { data = {}, loading } = useQuery(GET_VERSIONS);
  return (
    <>
      <Header />
      ....
        ....
            <Sidebar versions={data.versions} loading={loading} />
         ....
         ....
         ....
          <Main versions={data.versions} loading={loading} />
        </div>
      </div>
    </>
  );
};

export default UI;

src/components/UI.js

Step 14: Using props in display components

Next, we modify our display components - Sidebar.js and Main.js to iterate over the versions that we received in props and display the actual content.

import { useCallback } from "react";

const Sidebar = ({ versions, loading }) => {
  //This useCallback function taken a string argument of date and converts it into formatted date, e.g Day Month Date Year(Monday 1 Jan 1999)
  const date = useCallback((data) => {
    let dateString;
    dateString = new Date(data);
    return dateString.toDateString();
  }, []);

  const ready = versions && !loading; // This variable checks if data is present is versions and not in loading

  const handleNav = useCallback(
    (version) => window.location.replace(`/#version${version}`),
    []
  ); // This function helps in navigation between versions

  return (
    <>
      {loading && <h1 className="text-gray-900">Loading...</h1>}
      {ready &&
        versions
          .map((data, index) => {
            return (
              <li key={index} className={"m-2 ml-4 pb-4 border-b-2"}>
                <a
                  className={"flex flex-col items-left h-14  cursor-pointer "}
                  onClick={() => handleNav(data.version)} // This onClick function will act as navigation between different section we have
                >
                  <div className="text-gray-900 text-2xl font-bold  ">
                    {data.version} <br />
                  </div>
                  <div className="text-sm font-medium text-gray-500">
                    {date(data.date)}
                  </div>
                </a>
              </li>
            );
          })
          .reverse()}
    </>
  );
};

export default Sidebar;

src/components/Sidebar.js

and we also modify our Main.js component which will display each version's content.

//This component render Description as per the version name.
const Main = ({ versions, loading }) => {
  const setColor = (label) => {
    // We are using this util function to assign a color the label.
    let color = "bg-red-600";
    switch (label) {
      case "Security fixes":
        color = "bg-pink-600";
        break;
      case "Bug fixes":
        color = "bg-yellow-600";
        break;
      case "Changes":
        color = "bg-green-500";
        break;
      case "Known issue":
        color = "bg-blue-600";
        break;
      default:
        color = "";
    }
    return color;
  };

  return (
    <>
      {versions &&
        !loading &&
        versions
          .map((data, index) => {
            return (
              <div
                className="tab-content tab-space w-5/6 divide-y divide-light-blue-400"
                key={index}
              >
                <div
                  className={
                    "text-gray-900 text-2xl p-2 mt-16 w-40 my-4 ml-8 font-bold"
                  }
                >
                  Version {data.version}
                </div>
                <div className={"block"}>
                  <div>
                    {data.description
                      .map((item) => {
                        // The Description in our API is a 'field set' and it two fields, 1. Details and  2. Label
                        const details = item.details; // Here we are accessing the details, details contains all the text.
                        const label = item.types.label; // Here we are accessing picker option's label. There are total 4 labels. 1. Security Fixes 2. Bug fixes, 3. Changes and 4. Know issue
                        return (
                          <section
                            className="flex flex-col  mb-10"
                            id={`version${data.version}`}
                          >
                            <div
                              className={`${setColor(
                                label
                              )} w-36 h-auto leading-8 ml-10 text-left font-bold shadow-lg mt-10 mb-3 text-white rounded-md`}
                            >
                              <span className="ml-4">{label}</span>
                            </div>
                            <div // Here we are using dangerouslySetInnerHTML because we receive the html code from API, we parse it using dangerouslySetInnerHTML
                              className="text-left ml-20 mt-4 text-gray-900"
                              dangerouslySetInnerHTML={{
                                __html: details,
                              }}
                            ></div>
                          </section>
                        );
                      })
                      .reverse()}
                  </div>
                </div>
              </div>
            );
          })
          .reverse()}
    </>
  );
};

export default Main;

Phew! Those were some long snippets. Now let's run the app if not already running and check out what we just built!

Bonus! - Sending release notes to Slack/communities

In addition, we can also attach a slack integration in our backend. This integration will send the release notes directly to slack every time someone adds them.

All you have to do is:

Using Canonic, open your project and navigate to the API tab from the sidebar. Click on the + icon in the Database Triggers section and name the trigger. At checkout, check 'Create'.

In the graph, click on + created next to Trigger to create a webhook. Select Message as the input type, Slack as the provider, and trigger URL (enter your trigger URL) and message body as the value.

You can find the final code here

and the live demo here

Conclusion

You can find several online tools that let you publish release notes, but most of them are usually paid. As you scale, you'll realize there are many 'extra' tools like release notes, that you'll need, such as a roadmap, admin panel, etc., and paying for them all may not be feasible.

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 here.

You can also check out our other guides about SaaS tools. 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.