Forem: Ridho C Pamungkas

Custom image handler React-Quill

Ridho C Pamungkas — Sat, 31 Dec 2022 09:24:34 +0000

Pada kali ini saya akan sharing cara mengubah handler module image bawaan dari react-quill. Karena handler module image react-quill mengahasilkan data base64, yang mana datanya akan panjang sendiri untuk 1 image dan membuat memory membengkak saat data html tagnya akan disimpan ke database. Dan disini saya akan mengubah alur upload image dengan mengirim imagenya ke upload service yang disediakan BE untuk disimpan ke dalam local file system dan mengahasilkan response url string.

Kita mulai dengan menginstall react-quill

npm i react-quill
npm i quill

Berikut sample react-quill menggunakan handlers defaultnya

import ReactQuill from "react-quill";
import Quill from "quill";
import "react-quill/dist/quill.snow.css";

const RichContentEditor = () => {
    const modules = React.useMemo(
    () => ({
      toolbar: {
        container: [
          [{ font: [] }],
          [{ header: [2, 3, false] }],
          [{ align: [] }],
          ["bold", "italic", "underline"],
          [{ list: "ordered" }, { list: "bullet" }],
          ["link", "image", "video"],
          ["clean"],
        ],
      },
      history: {
        delay: 500,
        maxStack: 100,
        userOnly: true,
      },
    }),
    []
  );

return (
    <>
      <ReactQuill
        id={"richContent"}
        modules={modules}
        formats={[
          "header",
          "font",
          "bold",
          "italic",
          "underline",
          "list",
          "bullet",
          "align",
          "link",
          "image",
          "video",
        ]}
        placeholder={""}
        onChange={(e) => setContentValue(e)}
        value={contentValue}
        theme="snow"
      />
    </>
  );
}

dibawah ini contoh yang sudah menggunakan custom image handlersnya, untuk fungsi-fungsinya saya cantumkan dalam comment saja, saya hanya menjelaskan custom image handlers disini untuk membuka modal yang berisikan upload image dan form input property image yang dibutuhkan untuk dikirimkan ke upload service dan meng-embed url imagenya.

import React, { useRef, useState } from "react";
import ReactQuill from "react-quill";
import { Button, Form, Input, Modal } from "tunggal";
import { UploadPreview } from "pages/product/detail/detail.styles";
import Quill from "quill";
import "react-quill/dist/quill.snow.css";
import IPayloadAPI from "interfaces/iapi";
import upload from "libraries/api/upload";
import { callAPI } from "utils/fetchData";
import { errorNotification, formatBytes } from "utils/commonFunction";
import { ListStyled } from "pages/product/variant/variant.styles";
import { initialImage } from "helpers/constants";
import { default as UploadDrag } from "rc-upload";
import ImageBlot from "./image-blot";

const RichContentEditor = () => {
  let reactQuillRef = useRef(null); // ReactQuill component
  let quillRef = useRef(null); // Quill instance

  const [showModalImage, setShowModalImage] = useState(false);
  const [contentValue, setContentValue] = useState("");
  const [isFetchingUpload, setIsFetchingUpload] = useState(false);
  const [titleImage, setTitleImage] = useState("");
  const [altImage, setAltImage] = useState("");
  const [selectedImage, setSelectedImage] = useState(initialImage);

  // show / close modal
  const handleShowModal = () => {
    setShowModalImage(!showModalImage);
    handleReset();
  };

  const handleReset = () => {
    setAltImage("");
    setTitleImage("");
    setSelectedImage(initialImage);
  };

  // function onchange property image
  const onChangeInput = (key: string, e: string) => {
    const valueRegex = e.replace(/[^\w\s]/gi, "");
    if (key === "title") {
      setTitleImage(valueRegex);
    } else {
      setAltImage(valueRegex);
    }
  };

  // simpan fileImage ke dalam state
  const onUpload = async (e) => {
    const file = e;
    if (file) {
      setSelectedImage({
        image: file,
        size: file.size,
        fileName: file.name,
      });
    }
    e.target.value = null;
  };

  // function cek fokus index terakhir element input react-quill
  const handleSetQuillRef = () => {
    if (typeof reactQuillRef.current.getEditor !== "function") {
      return;
    }
    const temp = reactQuillRef.current.getEditor();
    quillRef.current = temp;
  };

  // function Request ke upload Service yang menghasilkan url image
  const uploadImage = async () => {
    if (selectedImage.image) {
      handleSetQuillRef();

      const range = quillRef.current.getSelection(true);
      const titles = titleImage ? titleImage : selectedImage.fileName;

      const fileData = new FormData();
      fileData.append("file", selectedImage.image);
      fileData.append("type", "richcontent");
      fileData.append("uploadType", "image");
      fileData.append("filename", titles);
      let params: IPayloadAPI = upload.uploadFile(fileData);
      setIsFetchingUpload(true);
      try {
        const response = await callAPI(params);
        const { data } = response.data;

        // proses mengembed image pada range index terakhir
        quillRef.current.insertEmbed(
          range.index,
          "image",
          {
            alt: altImage, // untuk memasukkan property ALT image
            title: titles, // untuk memasukkan property title image
            url: data.original, // untuk memasukkan properti src image
          },
          "user"
        );

        set fokus element input lompat 2 index agar tidak bertabrakan dengan image yang sudah di embed
        quillRef.current.setSelection(range.index + 2, "silent");
        quillRef.current.focus();
        handleShowModal();
      } catch (error) {
        errorNotification(`Upload File`, error);
      }
    }
  };

  // Penggunaan useMemo disini untuk memoize hasil function custom handlers yang dipanggil berulang kali agar tidak bentrok

  const modules = React.useMemo(
    () => ({
      toolbar: {
        container: [
          [{ font: [] }],
          [{ header: [2, 3, false] }],
          [{ align: [] }],
          ["bold", "italic", "underline"],
          [{ list: "ordered" }, { list: "bullet" }],
          ["link", "image", "video"],
          ["clean"],
        ],
      },
      history: {
        delay: 500,
        maxStack: 100,
        userOnly: true,
      },
      handlers: {
        image: handleShowModal, // customs handlers image untuk memanggil function handleShowModal
      },
    }),
    []
  );
  // daftarkan Quill instance module image
  Quill.register({ "formats/imageBlot": ImageBlot });

  return (
    <>
      <ReactQuill
        id={"richContent"}
        modules={modules}
        formats={[
          "header",
          "font",
          "bold",
          "italic",
          "underline",
          "list",
          "bullet",
          "align",
          "link",
          "image",
          "video",
        ]}
        placeholder={""}
        onChange={(e) => setContentValue(e)}
        value={contentValue}
        theme="snow"
      />
      <Modal
        size="sm"
        show={showModalImage}
        onClose={handleShowModal}
        title="Tambah Image"
        variant="clean"
      >
        <Modal.Body>
          <Form>
            <Form.Item
              label="Upload Image"
              extra={
                <>
                  Atau seret file ke area di atas <br />
                  Format .jpg or .jpeg
                </>
              }
            >
              <UploadPreview>
                <UploadDrag
                  name="upload"
                  beforeUpload={(e) => onUpload(e)}
                  accept="image/jpeg"
                  type="drag"
                >
                  <Button icon="plus">Upload Image</Button>
                </UploadDrag>
              </UploadPreview>
              {selectedImage.image && (
                <ListStyled isModal>
                  <li>
                    <div>
                      <strong>{selectedImage.fileName}</strong>
                      <span>{formatBytes(selectedImage.size)}</span>
                    </div>

                    <Button
                      iconOnly
                      icon="trash"
                      onClick={() => setSelectedImage(initialImage)}
                    />
                  </li>
                </ListStyled>
              )}
            </Form.Item>
            <Form.Item label="Image Title">
              <Input
                placeholder="Input Image Title"
                value={titleImage}
                onChange={(e) => onChangeInput("title", e)}
              />
            </Form.Item>
            <Form.Item label="Image ALT Title">
              <Input
                placeholder="Input Image ALT Title"
                value={altImage}
                onChange={(e) => onChangeInput("alt", e)}
              />
            </Form.Item>
          </Form>
        </Modal.Body>
        <Modal.Footer>
          <Button disabled={isFetchingUpload} onClick={handleShowModal}>
            Cancel
          </Button>
          <Button
            color="primary"
            loading={isFetchingUpload}
            onClick={uploadImage}
          >
            Upload
          </Button>
        </Modal.Footer>
      </Modal>
    </>
  );
};

export default RichContentEditor;

Buat File image.blot.tsx untuk mendaftarkan custom property image (alt, title, src)

import Quill from 'quill';

const BlockEmbed = Quill.import('formats/image');

class ImageBlot extends BlockEmbed {
  static create(val) {
    const node = super.create();
    node.setAttribute('alt', val.alt);
    node.setAttribute('title', val.title);
    node.setAttribute('src', val.url);
    return node;
  }

  static value(node) {
    return {
      alt: node.getAttribute('alt'),
      title: node.getAttribute('title'),
      url: node.getAttribute('src'),
    };
  }
}
ImageBlot.blotName = 'image';
ImageBlot.tagName = 'img';

export default ImageBlot;

seperti ini output yang dihasilkan

Membuat debounce function

Ridho C Pamungkas — Fri, 09 Sep 2022 08:08:24 +0000

Kasus dibawah ini melakukan efisiensi pada live search data, dengan menggunakan debounce function ini kita bisa mendebounce karakter yang diinput user yang berubah dengan cepat dan mengeksekusinya saat waktu yang kita tentukan. dengan melakukan ini kode tidak melakukan pencarian setiap karakter berubah, ini membuat lebih efisien dan tidak mengganggu performance saat melakukan request ke suatu API.

function useDebounce

import { useState, useEffect } from "react";

const useDebounce = (val: any, delay: number) => {
  const [debounceVal, setDebounceVal] = useState(val);

  useEffect(() => {
    const handler = setTimeout(() => {
      setDebounceVal(val);
    }, delay);

    return () => {
      clearTimeout(handler);
    };
  }, [val]);

  return debounceVal;
};

export default useDebounce;

Contoh sederhana

import { useEffect, useState } from "react";
import useDebounce from "./use-debounce";

const listData = ["sabun", "minyak", "gula", "garam", "kopi"];

function App() {
  const [results, setResults] = useState<string[]>([]);
  const [text, setText] = useState("");

  const debounce = useDebounce(text, 500);

  useEffect(() => {
    const filterData = listData.filter((obj) =>
      obj.toLowerCase().includes(debounce)
    );
    setResults(filterData);
  }, [debounce]);

  return (
    <div className="App">
      <input
        type="text"
        value={text}
        onChange={(e) => setText(e.target.value)}
      />
      {results.length > 0 ? (
        results.map((el: string, i: number) => <div key={i}>{el}</div>)
      ) : (
        <div>no results</div>
      )}
    </div>
  );
}

export default App;

Contoh menggunakan fetching data

import { useState } from "react";
import useDebounce from "./use-debounce";
import useFetch from "./use-fetch";


function App() {
  const [text, setText] = useState("");

  const debounce = useDebounce(text, 500);
  const url = `http://www.omdbapi.com/?t=${debounce}`;
  const {data, isLoading, error} = useFetch(url);

  if(isLoading){
    return <div>loading...</div>
  }

  if(error) {
    return <div>{error}</div>
  }


  return (
    <div className="App">
      <input
        type="text"
        value={text}
        onChange={(e) => setText(e.target.value)}
      />
      {data.length > 0 ? (
        data.map((el: string, i: number) => <div key={i}>{el}</div>)
      ) : (
        <div>no results</div>
      )}
    </div>
  );
}

export default App;

Testing Async Redux Actions menggunakan Jest

Ridho C Pamungkas — Fri, 07 Jan 2022 02:01:31 +0000

Pada artikel ini saya akan sharing contoh kasus saya membuat unit testing pada ReactJS, spesifiknya pada async redux action. Hal ini merupakan hal baru bagi saya dan harus membuatnya karena mendapat legacy code yang masih kosongan unit testingnya dan banyak menggunakan async redux action.

Berikut contoh kasus untuk memanggil master data employee menggunakan redux action

const setEmployee = (data: any) => ({
  dataEmployee: data,
  type: ActionTypes.SET_MASTER_EMPLOYEE,
});

export const fetchMasterEmployee = () => (dispatch: any) => {
  return axios.get('v1/master/employee').then((response: any) => {
    if (response.status === 200) {
      const data: [] = response.data.data;
      dispatch(setEmployee(data));
    } else {
      dispatch(setEmployee([]));
    }
  })
};

Setup

jalankan perintah dibawah ini untuk menginstall package

npm i redux-mock-store
npm i axios-mock-adapter
npm i redux-thunk

lalu import packagenya

// untuk membuat mock store yang akan kita kirimkan action
import configureMockStore from 'redux-mock-store';
// import thunk middle untuk membuat action asynchronous
import thunk from 'redux-thunk';
// untuk mocking pemanggilan axios
import MockAdapter from 'axios-mock-adapter';
// import axios dependency
import axios from 'axios';
// inisialisasi middlewares
const middlewares = [thunk];
// inisialisasi mockstore sebagai metode configureStore yang menggunakan middlewares sebagai parameternya
const mockStore = configureMockStore(middlewares);
// membuat mock instance dari MockAdapter axios
const mock = new MockAdapter(axios);
const store = mockStore();

Mari kita buat unit testnya

 describe('Testing Action fetchMasterEmployee', () => {
        beforeEach(() => { 
             // Untuk membersihkan semua action yang sedang berjalan dalam store
             store.clearActions();
        });
        it('should get MASTER_EMPLOYEE', () => {
             // lakukan pemanggilan urlnya, set status dan set value yang akan dibaca
             mock.onGet('v1/master/employee').reply(200, {
                data: [
                   { id: 1, name: 'Ridho' }
                ]
             });
             return store.dispatch(fetchMasterEmployee as any).then(() => {
                   const expectedValueOne = [{
                       data: [{
                           id: 1,
                           name: "Ridho",
                       }],
                       type: ActionTypes.SET_MASTER_EMPLOYEE,
                   }]

             expect(store.getActions()).toEqual(expectedValueOne)
        });
});

untuk method update bisa gunakan mock.onPut, method insert mock.onPost, dan method delete mock.onDelete

Sekian sharing kali ini, jika ada perlu ditanyakan atau ada cara lebih baik bisa diskusi ya

Export data ke Excel menggunakan exceljs dari sisi Front End (ReactJs)

Ridho C Pamungkas — Thu, 06 Jan 2022 07:12:31 +0000

Pertama-tama kita kenalan dulu dengan exceljs, exceljs ini sebuah package javascript yang mendukung untuk membaca, memanipulasi, menulis data dan syle spreadsheet ke XLSX dan JSON.

Alasan Memakai exceljs

Package ini menjadi andalan saya untuk membuat excel dari sisi backend (NodeJs) maupun frontend (ReactJS). Dari segi fitur package ini cukup lengkap support untuk membuat csv dan membuat formula salah satunya, untuk styling juga sudah memadai, exceljs juga sudah support typescript, dan yang paling penting exceljs ini masih ada update untuk fitur-fitur yang baru.

selanjutnya mari kita coba

Setup

jalankan perintah dibawah ini untuk menginstall package

npm i exceljs
npm i file-server

file-server ini untuk mendownload file dari browser, lalu tinggal import seperti ini

import ExcelJS from 'exceljs';
import { saveAs } from 'file-saver';

langsung kita coba yang simple saja

// Create WorkBook
const wb = new ExcelJS.Workbook();

//properties excel    
wb.creator = 'Ridho';
wb.lastModifiedBy = 'Pamungkas';
wb.created = new Date(2022, 1, 5);
wb.modified = new Date();
wb.lastPrinted = new Date(2022, 1, 5);

// Create Sheet
const ws = wb.addWorksheet();

// Set lebar Column menggunakan key bisa dengan huruf bisa dengan index angka
ws.columns = [
    { key: 'A', width: 10, },
    { key: 'B', width: 40, },
    { key: 'C', width: 40, },
];

// Set value cell untuk title
ws.getRow(1).getCell('A').value = 'Export data ke Excel menggunakan exceljs dari sisi Front End (ReactJs)';

// Set font Style
ws.getRow(1).getCell('A').font = {
     bold: true,
     size: 16
}

// merge cell dari A1 sampai C1
ws.mergeCells('A1', 'C1')

// inisiasi pada baris ke 3 jadi Header table
const rowHeader = ws.getRow(3);

// Buat styling cell header menggunakan perulangan agar tidak per cell kita bikinnya
for (let i = 1; i <= 3; i++) {
      // Untuk border table
      rowHeader.getCell(i).border = {
         top: { style: 'thin' },
         left: { style: 'thin' },
         bottom: { style: 'thin' },
         right: { style: 'thin' }
      }
      // Untuk fill color cell
      rowHeader.getCell(i).fill = {
         type: 'pattern',
         pattern: 'solid',
         fgColor: { argb: '191970' },
      }
      // Untuk alignment text dalam cell
      rowHeader.getCell(i).alignment = {
         vertical: 'middle', horizontal: 'center'
      }
      // Untuk set font
      rowHeader.getCell(i).font = {
         bold: true,
         size: 11,
         color: { argb: 'FFFFFF' },
      }
}

// Isi data Header 
rowHeader.getCell(1).value = 'No';
rowHeader.getCell(2).value = 'First Name';
rowHeader.getCell(3).value = 'Last Name';

// Buat datanya menggunakan perulangan
for (let i = 1; i <= 5; i++) {
    const row = ws.getRow(3 + i)
    for (let index = 1; index <= 3; index++) {
         row.getCell(index).border = {
             top: { style: 'thin' },
             left: { style: 'thin' },
             bottom: { style: 'thin' },
             right: { style: 'thin' }
          }
     }
     row.getCell(1).value = i;
     row.getCell(2).value = `first name ${i}`;
     row.getCell(3).value = `last name ${i}`;
}

//membuat buffer file
const buf = await wb.xlsx.writeBuffer();

//download file dari browser dan menamai filenya
saveAs(new Blob([buf]), 'Sample Excel.xlsx')

Hasilnya akan seperti ini

Untuk lebih kompleks cara menggunakan properties exceljs bisa dibaca di https://github.com/exceljs/exceljs