report-developer-client

Report Developer Client

Report Developer Client is a report developer's client side package that provides you with UI components.

Features

• Report Developer: used to create and save reports (for developers)
• Saved Reports: Displays all saved reports (for client)

Installation

To install the package, use npm:

npm i report-developer-client

Usage

Report Developer Screen

import { useState } from "react";
import { CreateReport } from "report-developer-client";
import axios from "axios";

const ReportDeveloperScreen = () => {
  const [query, setQuery] = useState("");
  const [data, setData] = useState(null);
  const [isLoading, setIsLoading] = useState(false);
  const [reportName, setReportName] = useState("");

  const handleReportBuilder = async () => {
    if (query.length === 0) return;

    try {
      setIsLoading(true);
      const response = await axios({
        method: "post",
        url: "http://localhost:3000/reportDeveloper",
        data: { query },
      });

      setData(response.data.data);
    } catch (error) {
      console.log(error.message);
    } finally {
      setIsLoading(false);
    }
  };
  const handleSaveReport = async () => {
    if (reportName.length === 0 || query.length === 0) return;

    try {
      const response = await axios({
        method: "post",
        url: "http://localhost:3000/saveReport",
        data: { name: reportName, query },
      });
      alert("Report Saved !!");
    } catch (error) {
      console.log(error.message);
    }
  };
  return (
    <div>
      <CreateReport
        query={query}
        setQuery={setQuery}
        handleReportBuilder={handleReportBuilder}
        handleSaveReport={handleSaveReport}
        data={data}
        isLoading={isLoading}
        reportName={reportName}
        setReportName={setReportName}
      />
    </div>
  );
};

export default ReportDeveloperScreen;

Saved Reports Screen

import axios from "axios";
import { useEffect, useState } from "react";
import { SavedReports } from "report-developer-client";

const SavedReportsScreen = () => {
  const [savedReports, setSavedReports] = useState(null);
  const [data, setData] = useState(null);
  const [isLoading, setIsLoading] = useState(false);
  const [selectedQuery, setSelectedQuery] = useState(null);

  useEffect(function () {
    const fetchSavedReports = async () => {
      try {
        const response = await axios({
          method: "get",
          url: "http://localhost:3000/savedReports",
        });
        setSavedReports(response.data.data);
        setSelectedQuery(response.data.data[0].query);
      } catch (err) {
        console.log(err);
      }
    };

    fetchSavedReports();
  }, []);

  const handleGetReports = async () => {
    try {
      setIsLoading(true);
      setData(null);
      const response = await axios({
        method: "post",
        url: "http://localhost:3000/reportDeveloper",
        data: { query: selectedQuery },
      });

      setData(response.data.data);
    } catch (error) {
      console.log(error.message);
    } finally {
      setIsLoading(false);
    }
  };
  return (
    <div>
      <SavedReports
        savedReports={savedReports}
        handleGetReports={handleGetReports}
        data={data}
        isLoading={isLoading}
        selectedQuery={selectedQuery}
        setSelectedQuery={setSelectedQuery}
      />
    </div>
  );
};

export default SavedReportsScreen;