## Authentication

Authentication adalah proses memverifikasi pengguna dengan membuktikan identitasnya sebelum mengizinkannya mengakses suatu sistem. Pengguna membuktikan identitasnya dengan memberikan authentication factor.

Authentication factor biasanya dibagi menjadi 3 kategori:

- Sesuatu yang Anda tahu (something what you know)
- Sesuatu yang Anda miliki (something what you have)
- Sesuatu yang ada pada diri Anda (something who you are)

**Sesuatu yang Anda Tahu:** Ini mengharuskan pengguna memberikan apa yang mereka ketahui. Biasanya, ini berupa kredensial yang merupakan kombinasi dari email/username dan kata sandinya.

**Sesuatu yang Anda Miliki:** Ini mengharuskan pengguna membuktikan apa yang mereka miliki. Misalnya, pengguna perlu memberikan OTP yang sudah dikirimkan oleh sistem ke nomor ponsel pengguna untuk membuktikan bahwa nomor ponsel tersebut valid dimiliki oleh pengguna itu sendiri.

**Sesuatu yang ada pada diri Anda:** Ini mengharuskan pengguna memberikan karakteristik fisiknya, misalnya sidik jari, wajah, dan suara.

### Multi-Factor Authentication

Ketika pengguna melakukan authentication hanya dengan menggunakan satu factor (misalnya menggunakan email dan kata sandi), ini disebut dengan single-factor authentication. Namun, pengguna juga dapat melakukan authentication dengan beberapa factor untuk meningkatkan keamanan. Ini disebut dengan multi-factor authentication.

Sebagai contoh, ketika seorang pengguna ingin melakukan authentication:

- Dia perlu memberikan email dan kata sandinya (*sesuatu yang Anda tahu*).
- Setelah itu, dia perlu memberikan OTP yang sudah dikirimkan ke emailnya (*sesuatu yang Anda miliki*).

Ini akan mencegah penyerang untuk melakukan authentication dengan mudah. Jadi meskipun dia bisa melewati factor pertama dengan mengetahui email dan kata sandi pengguna, dia tidak bisa melewati factor kedua karena dia tidak bisa mengakses email pengguna untuk mendapatkan OTP.

## Authorization

Authorization adalah proses memverifikasi izin (permission) pengguna sebelum mengizinkannya untuk mengakses resource tertentu di dalam suatu sistem. Ini berguna untuk memastikan hanya pengguna yang diizinkan yang diperbolehkan untuk mengakses dan mengoperasikan resource tersebut. Selain itu, ini juga berguna untuk melindungi resource dari tindakan-tindakan yang tidak baik yang dapat merusak bisnis perusahaan. Biasanya, proses authorization terjadi setelah proses authentication.

Dalam proses authorization, biasanya terdapat 3 bagian yang terlibat:

- Resource
- Permissions Giver
- Authorized User

Resource adalah sesuatu di dalam sistem yang ingin diakses dan dioperasikan oleh pengguna. Permissions Giver adalah pengguna yang dapat memberikan izin kepada pengguna lain untuk mengakses dan mengoperasikan resource tertentu. Authorized User adalah pengguna yang diizinkan untuk mengakses dan mengoperasikan resource tersebut.

Sebagai contoh, dalam kasus ini:

Pengguna A memberikan izin kepada Pengguna B untuk mengizinkannya membuat, memperbarui, dan menghapus data produk. Pengguna C yang tidak memiliki izin tersebut tidak dapat membuat, memperbarui, dan menghapus data produk.

- Resource: Data produk.
- Permissions Giver: Pengguna A, dia memiliki izin untuk memberikan izin kepada pengguna lain untuk mengakses dan mengoperasikan resource.
- Authorized User: Pengguna B, dia memiliki izin untuk mengakses dan mengoperasikan resource.

## Bagaimana Ini Bisa Berbeda

Authentication dan authorization memiliki tujuan yang berbeda. Authentication digunakan untuk memverifikasi pengguna yang ingin mengakses suatu sistem, sedangkan authorization digunakan untuk memverifikasi jenis resource apa yang diizinkan untuk diakses dan dioperasikan oleh pengguna yang telah berhasil melakukan authentication.

Jadi, authorization biasanya diterapkan bersama dengan authentication. Setelah pengguna memberikan kredensialnya dan kemudian dianggap telah berhasil melakukan authentication, sistem biasanya hanya akan menampilkan resource yang bisa diakses dan dioperasikan oleh pengguna tersebut.

## Kesimpulan

Singkatnya, authentication dan authorization adalah proses yang berbeda namun saling melengkapi yang sangat penting untuk mengamankan akses ke sistem dan resource. Memahami perbedaan antara authentication dan authorization cukup penting untuk menerapkan praktik keamanan yang baik.

Memahami perbedaan antara authentication dan authorization cukup penting untuk menerapkan praktik keamanan yang baik.

Perbedaan Antara Authentication dan Authorization

React pada dasarnya memiliki dua jenis komponen yang dapat dibuat yaitu komponen class dan komponen function. Fitur-fitur seperti state, lifecycle dan sebagainya hanya dapat diterapkan di komponen class dan tidak memungkinkan untuk diterapkan di komponen function. Namun semenjak React v16.8.0, komponen function dapat melakukan banyak hal yang dapat dilakukan oleh komponen class dengan bantuan Hooks.

Hooks adalah suatu function khusus yang dapat kita terapkan di dalam komponen function untuk mengakses beberapa fitur-fitur lain yang dimiliki oleh React. Jika di komponen class kita menggunakan beberapa method seperti componentDidMount dan lain sebagainya untuk mengakses lifecycle, di komponen function kita dapat menggunakan Hooks untuk mengakses lifecycle dari sebuah komponen. Untuk menerapkan local state di komponen juga kita perlu menggunakan Hooks. Hooks umumnya diawali dengan kata “use” pada nama function nya.

Ada beberapa Hooks yang disediakan oleh React secara bawaan, beberapa diantaranya yaitu:

- useState
- useEffect
- useRef
- useMemo
- useCallback
- useContext

## Aturan Saat Menggunakan Hooks

Ada beberapa aturan yang wajib kita patuhi ketika menggunakan Hooks untuk menghindari hal-hal yang tidak diinginkan.

**Hooks hanya dapat digunakan di dalam komponen function ataupun custom hooks yang kita buat sendiri.** Kita tidak dapat menerapkan Hooks di dalam function secara umum ataupun komponen class.

**Hooks hanya dapat digunakan secara top-level didalam komponen function.** Maka dari itu Hooks tidak boleh berada di dalam conditional statement, loop statement, ataupun nested function. Dengan mematuhi aturan ini kamu memastikan kalau Hooks akan dipanggil di urutan yang sama setiap kali komponen di-render dan ini membuat React dapat mempertahankan state dari Hooks saat useState dan useEffect dipanggil.

```tsx
import { useState } from 'react';

const Menu = ({ title }) => {
	// Hooks diterapkan secara top-level seperti ini
  const [theme, setTheme] = useState('light');

	if (true) {
		// Ini tidak boleh
		// Karena diterapkan di dalam conditional statement
		const [value1, setValue1] = useState("Tekken");
	}

  const toggleTheme = () => {
    setTheme(theme === 'dark' ? 'light' : 'dark');

		// Ini tidak boleh
		// Karena diterapkan di nested function
		const [value2, setValue2] = useState("Final Fantasy");

		while (true) {
			// Ini tidak boleh
			// Karena diterapkan di dalam loop statement
			const [value3, setValue3] = useState("Monster Hunter");
		}
  };

	**// Ini boleh, karena masih top-level.
	const [value4, setValue4] = useState("Fire Emblem");**

	if (!title) {
		return null
	}

	// Ini tidak boleh
	// Karena diterapkan di dalam conditional statement
	const [value5, setValue5] = useState("Persona");

  return (
    <div>
      <h1>{title}</h1>

      <button
        style={{ backgroundColor: theme === 'dark' ? 'black' : 'white' }}
        type="button"
        onClick={toggleTheme}
      >
        Toggle Theme
      </button>
    </div>
  );
};

export default Menu;
```

Aturan diatas wajib dipatuhi karena React bergantung pada urutan Hooks yang dipanggil setiap saat komponen di-render.

## Kesimpulan

Dengan memahami apa itu Hooks, Anda dapat menggunakan berbagai macam fitur esensial yang React sediakan langsung dari dalam komponen function. Selain itu, aturan penggunaan Hooks wajib diikuti untuk menghindari terjadinya bug-bug yang tidak diinginkan.

Hooks adalah suatu function khusus yang dapat kita terapkan di dalam komponen function untuk mengakses beberapa fitur-fitur lain yang dimiliki oleh React.

Memahami React Hooks

Katakanlah kita lagi menghandle sebuah project website yang memiliki tampilan putih dengan warna-warna aksen yang cukup cerah. Namun suatu saat client minta kita agar website tersebut mendukung fitur Dark Theme, dimana ketika pengunjung website mengklik suatu tombol pada menu maka warna website yang tadinya dominan cerah tadi menjadi cenderung gelap agar lebih nyaman dimata.

```tsx
import { useState } from 'react';

const Menu = () => {
  const [theme, setTheme] = useState('light');

  const toggleTheme = () => {
    setTheme(theme === 'dark' ? 'light' : 'dark');
  };

  return (
    <div>
      <h1>Menu</h1>

      <button
        style={{ backgroundColor: theme === 'dark' ? 'black' : 'white' }}
        type="button"
        onClick={toggleTheme}
      >
        Toggle Theme
      </button>
    </div>
  );
};

export default Menu;
```

Pada implementasi komponen diatas, kita bisa lihat kalau tombol “Toggle Theme” diklik, maka warna tombol tersebut akan berubah berdasarkan value dari state “theme”. Namun disini ada masalah, state “theme” hanya dapat diakses oleh komponen Menu itu sendiri sedangkan value dari state “theme” perlu diakses oleh komponen lainnya.

Pada dasarnya state memiliki dua jenis, yaitu local state dan global state. Local state adalah sebuah state yang diterapkan didalam suatu komponen dan dapat diakses oleh komponen itu sendiri beserta komponen-komponen child yang ada didalamnya melalui props. Sedangkan global state adalah state yang dapat diakses oleh semua komponen yang ada.

Dalam kasus ini, kita perlu mengubah state “theme” dari local state menjadi global state dengan menggunakan bantuan sebuah state management library bernama Zustand.

## Apa itu Zustand

Zustand adalah sebuah state management library untuk React yang dapat kita gunakan untuk menyimpan state secara global. Zustand lebih mudah untuk digunakan dan dikonfigurasi dibanding state management library lainnya seperti Redux dan memiliki dokumentasi yang cukup bagus.

Selain itu, Zustand juga memiliki beberapa middleware yang cukup berguna seperti persist middleware yang dapat kita gunakan untuk mensinkronisasi state di Zustand dengan storage seperti LocalStorage dan lain sebagainya. Menurut saya, Zustand juga lebih nyaman untuk digunakan dibandingkan Context API. Karena kemudahanya, saya sering menggunakannya di project-project saya.

## Cara Menerapkan Zustand

Pertama, kita perlu install Zustand melalui npm di project React kita.

```bash
npm install zustand
```

Lalu buat file slice untuk menyimpan state “theme” kita pada directory store/slices/theme.slice.ts. Slice merupakan bagian dari store yang biasanya berisikan state yang kita buat beserta function yang digunakan untuk mengubah value dari state yang bersangkutan. Disini kita buat Light Theme sebagai default theme.

```tsx
import { StateCreator } from 'zustand';

type Theme = 'dark' | 'light';

export type ThemeSlice = {
  theme: Theme;
  setTheme: (value: Theme) => void;
};

export const createThemeSlice: StateCreator<
  ThemeSlice,
  [],
  [],
  ThemeSlice
> = (set) => ({
  theme: 'light',
  setTheme: (theme) => set({ theme }),
});
```

Kemudian, kita perlu juga untuk menambahkan slice yang telah kita buat tersebut kedalam file store pada directory store/store.ts.

```tsx
import { create } from 'zustand';

import { ThemeSlice, createThemeSlice } from './slices/theme.slice';

export const useStore = create<ThemeSlice>()(
  (...a) => ({
    ...createThemeSlice(...a),
  })
);
```

Setelah itu baru kita dapat menggunakan global state yang telah kita buat dengan Zustand.

```tsx
// Kita import store yang telah kita buat tadi.
import { useStore } from "../../store"; 

const Menu = () => {
  const theme = useStore((state) => state.theme);
  const setTheme = useStore((state) => state.setTheme);

  const toggleTheme = () => {
    setTheme(theme === 'dark' ? 'light' : 'dark');
  };

  return (
    <div>
      <h1>Menu</h1>

      <button
        style={{ backgroundColor: theme === 'dark' ? 'black' : 'white' }}
        type="button"
        onClick={toggleTheme}
      >
        Toggle Theme
      </button>
    </div>
  );
};

export default Menu;
```

Kita bisa juga terapkan di komponen lainnya. Dengan ini, state “theme” yang tadinya local state sekarang menjadi global state.

```tsx
import { useStore } from "../../store"; 

const Header = () => {
  const theme = useStore((state) => state.theme);

  return (
    <div>
      <h1
				style={{
					backgroundColor: theme === 'dark' ? 'white' : 'black'
				}}
			>
				My Website
			</h1>
    </div>
  );
};

export default Header;
```

## Penerapan State Yang Persisten

Global state telah berjalan dengan baik, namun ketika kita refresh website kita di browser, maka state akan kembali ke initial value yaitu “light” dan membuat Light Theme kembali aktif. Seharusnya ketika pengunjung website memilih Dark Theme dan merefresh websitenya, maka Dark Theme harusnya otomatis aktif. Disini kita dapat membuat Zustand untuk menyimpan statenya ke dalam LocalStorage di browser jadi sehingga ketika website direfresh, maka Zustand akan mengecek statenya yang telah disimpan di LocalStorage lalu mengambilnya untuk ditaruh ke dalam store. Kita hanya perlu menggunakan persist middleware pada store yang kita buat tadi.

```tsx
import { create } from "zustand";
import { persist } from "zustand/middleware";

import { ThemeSlice, createThemeSlice } from "./slices/theme.slice";

export const useStore = create<ThemeSlice>()(
  persist(
    (...a) => ({
      ...createThemeSlice(...a),
    }),
    {
      name: "main-storage",
    }
  )
);
```

Secara default, persist middleware menggunakan LocalStorage sebagai storagenya, namun kita dapat membuat persist middleware untuk menggunakan storage lain seperti SessionStorage bila kita menginginkannya.

## Kesimpulan

Dengan menggunakan Zustand, penerapan global state menjadi jauh lebih mudah dibandingkan dengan menggunakan Redux. Selain itu Zustand memiliki banyak fitur yang dapat kita gunakan untuk menunjang pengembangan suatu project.

Zustand adalah sebuah state management library untuk React yang dapat kita gunakan untuk menyimpan state secara global.

Membuat Global State Dengan Zustand

Internationalization (i18n) adalah proses dimana membuat sebuah website atau aplikasi agar bisa diadaptasi ke berbagai macam bahasa yang berbeda. 

Di setiap belahan dunia, orang-orang memahami dan menggunakan bahasa yang berbeda dalam keseharian mereka. Orang Amerika belum tentu paham dengan Bahasa Indonesia, dan juga sebaliknya, orang Indonesia belum tentu paham dengan English.

Maka dari itu dengan adanya internationalization, kita dapat membuat sebuah website atau aplikasi yang mendukung bahasa yang mereka pahami, sehingga mereka dapat menggunakannya dengan baik sesuai kebutuhan mereka.

## Cara Implementasi

Untuk mengimplementasi internationalization di project React, kita dapat menggunakan sebuah library yang bernama LinguiJS.

Library ini memiliki beberapa kelebihan diantaranya:

- Bisa digunakan di project JavaScript secara umum.
- Bisa digunakan di project framework selain React.
- Memiliki tools pendukung yang cukup bagus untuk menunjang penerapan i18n.
- Mudah untuk digunakan.

Ok, kita langsung saja untuk implementasi pada framework NextJS 14 (kita pakai App Router). Pertama kita perlu install library tersebut menggunakan *npm* melalui terminal.

```bash
npm install --save-dev @lingui/cli
npm install --save-dev @lingui/macro @lingui/swc-plugin
npm install --save @lingui/react
```

Tambahkan npm scripts baru pada file package.json. Selain itu, disini kita juga mengupdate script “build” untuk menjalankan perintah untuk compile message catalog sebelum proses build NextJS dijalankan. Hal ini dilakukan untuk menghindari error ketika melakukan deployment ke Vercel.

```json
{
	"scripts": {
		"build": "npm run lingui:compile && next build",
		"lingui:extract": "lingui extract",
	  "lingui:compile": "lingui compile"
	}
}
```

Tambahkan @lingui/swc-plugin ke dalam file next.config.js sebagai berikut.

```jsx
/** @type {import('next').NextConfig} */
const nextConfig = {
  // ...Config lain yang kamu punya

  experimental: {
    swcPlugins: [["@lingui/swc-plugin", {}]],
  },
};

module.exports = nextConfig;
```

Kemudian buat file lingui.config.js di root project. File ini merupakan file berisi konfigurasi LinguiJS untuk project mu.

```jsx
/** @type {import('@lingui/conf').LinguiConfig} */
module.exports = {
  locales: ["en", "id"],
  sourceLocale: "en",
  catalogs: [
    {
      path: "<rootDir>/app/locales/{locale}/messages",
      include: ["app"],
    },
  ],
  format: "po",
};
```

Penjelasan terkait setiap property pada konfigurasi:

- **locales** merupakan bahasa-bahasa yang akan kita terapkan pada projectmu. Disini kita menggunakan “en” untuk English dan “id” untuk Bahasa Indonesia.
- **sourceLocale** merupakan bahasa yang akan kita gunakan sebagai message ID, sehingga kita tidak perlu mendefinisikan message ID secara manual. Disini kita menggunakan kalimat English sebagai message ID.
- **catalogs** merupakan tempat dimana kita akan menaruh file-file message catalog.
- **format** merupakan jenis format yang akan digunakan untuk message catalog. Disini kita menggunakan format “po” dan format ini sangat direkomendasikan.

Opsional, jika kalian menggunakan ESLint, kalian dapat install plugin LinguiJS untuk ESLint dan menambahkan konfigurasi berikut pada file konfigurasi eslint yang ada di project kalian, misalnya .eslintrc.json.

```bash
npm install --save-dev eslint-plugin-lingui
```

```json
{
  "plugins": ["lingui"]
}
```

Kemudian tambahkan path berikut pada file .gitignore untuk tidak mengikutkan hasil translasi ke dalam git commit.

```
app/locales/**/messages.js
```

Lalu kita perlu membuat sebuah Provider component pada app/components/Provider.tsx.

```jsx
"use client";

import { FC } from "react";
import { I18nProvider } from "@lingui/react";
import { i18n } from "@lingui/core";

// Import message catalog yang telah di-compile
import { messages as enMessages } from "../locales/en/messages";
import { messages as idMessages } from "../locales/id/messages";

// Muat semua message catalog
i18n.load({
  en: enMessages,
  id: idMessages,
});

// Aktifkan English sebagai bahasa secara default
i18n.activate("en");

type Props = {
  children: JSX.Element;
};

const Provider: FC<Props> = ({ children }) => {
  return (
    <I18nProvider i18n={i18n}>
	    {children}
    </I18nProvider>
  );
};

export default Provider;
```

Gunakan Provider component pada app/layout.tsx.

```jsx

import { FC } from "react";

import Provider from "./components/Provider";

type Props = {
  children: JSX.Element;
};

const RootLayout: FC<Props> = ({ children }) => {
  return (
    <html>
      <body>
	      <Provider>{children}</Provider>
      </body>
    </html>
  );
};

export default RootLayout;
```

Setelah melakukan beberapa konfigurasi diatas, selanjutnya kita dapat menerapkan nya pada komponen yang membutuhkan. Misalnya kita memiliki komponen sebagai berikut.

```jsx
"use client"

import { FC } from "react";

import ContentBody from "./ContentBody";

const Content: FC = () => {
  return (
    <div>
			<h1>Learning LinguiJS</h1>

			<ContentBody value="LinguiJS is really good" />
    </div>
  );
};

export default Content;
```

Kita dapat mengubahnya menjadi seperti ini untuk menggunakan LinguiJS.

```jsx
"use client"

import { FC } from "react";
import { Trans, msg } from "@lingui/macro";
import { useLingui } from "@lingui/react";

import ContentBody from "./ContentBody";

const Content: FC = () => {
	const { _ } = useLingui();

  return (
    <div>
			<h1>
				<Trans>Learning LinguiJS</Trans>
			</h1>

			<ContentBody value={_(msg`LinguiJS is really good`)} />
    </div>
  );
};

export default Content;
```

Setelah itu perlu kita jalankan perintah berikut untuk mengekstrak kalimat-kalimat yang akan ditranslasikan.

```jsx
npm run lingui:extract
```

Perintah tersebut juga menghasilkan output berupa table yang memiliki kolom “Language”, “Total Count”, dan “Missing”. Language merupakan bahasa yang kita dukung untuk project ini, yaitu English dan Bahasa Indonesia. Total Count merupakan jumlah kalimat yang ingin kita translasikan. Missing merupakan jumlah kalimat yang belum kita translasikan.

![Output dari perintah lingui extract](//images.ctfassets.net/m14gyryibp3h/3LSY9vEbaMmYEpQs6Pg1SX/09c3a965326bc9690b30df83cad1f773/Screenshot_from_2024-01-31_18-44-46.png)

Perintah tersebut akan menghasilkan beberapa file message catalog dengan format “po” pada directory yang kita atur pada konfigurasi lingui.config.js, yaitu pada directory app/locales/en dan app/locales/id.

Berikut contoh pada file app/locales/en/messages.po

```
#: app/components/Content.tsx:15
msgid "Learning LinguiJS"
msgstr "Learning LinguiJS"

#: app/components/Content.tsx:18
msgid "LinguiJS is really good"
msgstr "LinguiJS is really good"
```

Berikut contoh pada file app/locales/id/messages.po

```
#: app/components/Content.tsx:15
msgid "Learning LinguiJS"
msgstr ""

#: app/components/Content.tsx:18
msgid "LinguiJS is really good"
msgstr ""
```

Bagian yang kosong pada file app/locales/id/messages.po bisa kita isi translasinya.

```
#: app/components/Content.tsx:15
msgid "Learning LinguiJS"
msgstr "Belajar LinguiJS"

#: app/components/Content.tsx:18
msgid "LinguiJS is really good"
msgstr "LinguiJS sangat bagus"
```

Setelah itu kita perlu compile file-file message catalog tersebut dengan perintah berikut.

```
npm run lingui:compile
```

Perintah tersebut akan menghasilkan file messages.js pada directory app/locales/en dan app/locales/id. File-file ini yang nantinya akan kita muat pada Provider yang telah kita buat sebelumnya.

![Output dari perintah lingui:compile](//images.ctfassets.net/m14gyryibp3h/1R9XGKrreGZBPROXRSTTkj/3d5e5ba122dbf8698b0c0440a1251545/Screenshot_from_2024-01-31_18-49-23.png)

Dengan ini kita sudah dapat membuat website dengan dukungan beberapa bahasa.

Untuk mengganti bahasa, kita dapat menggunakan contoh sebagai berikut. Kalau perlu, kombinasikan dengan zustand + persist middleware untuk menyimpan bahasa yang dipilih ke localStorage agar ketika halaman web di-refresh, maka bahasa yang digunakan tetap bahasa yang terpilih sebelumnya.

```jsx
"use client"

import { FC } from "react";
import { useLingui } from "@lingui/react";

const LanguageSwitcher: FC = () => {
	const { i18n } = useLingui();

  return (
    <div>
			<button 
				type="button"
				onClick={() => i18n.activate("en")}
			>
				EN
			</button>
			<button
				type="button"
				onClick={() => i18n.activate("id")}
			>
				ID
			</button>
    </div>
  );
};

export default LanguageSwitcher;
```

Disini dapat kita lihat jika workflownya secara garis besar adalah sebagai berikut.

- Tentukan kalimat-kalimat yang akan ditranslasikan dengan menggunakan Trans macro atau macro lainnya.
- Jalankan perintah untuk mengekstrak kalimat-kalimat tersebut.
- Buka file messages.po pada directory app/locales/id.
- Isi translasi pada bagian tanda kutip yang kosong.
- Jalankan perintah untuk meng-compile message catalog.

Banyak sekali fitur yang LinguiJS berikan, untuk itu kalian bisa langsung saja baca dari dokumentasi resmi nya di https://lingui.dev/introduction.

## Kesimpulan

Internationalization sangat bermanfaat agar website atau aplikasi dapat digunakan dengan baik oleh pengguna dari berbagai negara di dunia. Dengan LinguiJS, implementasi terkait internationalization menjadi lebih mudah.

Internationalization (i18n) adalah proses dimana membuat sebuah website atau aplikasi agar bisa diadaptasi ke berbagai macam bahasa yang berbeda. 

Implementasi I18n pada React

Sebuah halaman web tidak hanya mampu untuk menampilkan data yang diambil dari server, tapi juga mampu untuk melakukan penambahan data baru (create), mengubah data (update), dan juga menghapus data yang ada (delete). Contohnya adalah menambahkan produk ke dalam keranjang di website e-commerce.

```javascript
const ProductDetailPage = () => {
  const [isLoading, setIsLoading] = useState(false)

  const buy = async (productId) => {
    try {
      setIsLoading(true)

      const response = await axios.post('/orders', {
        product_id: productId,
      })

      alert('Produk berhasil ditambahkan ke dalam keranjang.')
    } catch (error) {
      alert('Produk gagal ditambahkan ke dalam keranjang.')
    } finally {
      setIsLoading(false)
    }
  }

  return (
    <div>
      {/* Kode untuk menampilkan detail produk disini. */}

      {!isLoading && (
        <button type="button" onClick={() => buy(10)}>
          Tambahkan
        </button>
      )}
      {isLoading && (
        // Tampilkan loading disini.
      )}
    </div>
  )
}

```

Bisa dilihat kalo implementasi tersebut memiliki banyak baris kode apalagi jika kita membutuhkan logic yang sama untuk halaman lain dari sebuah website. Belum lagi kalo kita perlu menerapkan sebuah teknik bernama optimistic update. Pasti bakal ribet implementasi nya.

## Solusi

Selain untuk proses [mengambil data](https://gattigaga.com/id/articles/fetching-data-dengan-react-query), React Query juga berguna untuk melakukan penambahan data baru (create), mengubah data (update), dan juga menghapus data yang ada (delete). Pertama kita buat sebuah custom hook di sebuah file, misalnya use-buy-product-mutation.js.

```javascript
const action = async (payload) => {
  const response = await axios.post('/orders', {
    product_id: payload.productId,
  })

  return response
}

const useBuyProductMutation = () => useMutation(action)
```

Kemudian kita gunakan custom hook yang udah kita buat tadi pada sebuah entah itu halaman ataupun komponen manapun yang membutuhkannya.

```javascript
const ProductDetailPage = () => {
  const buyProductMutation = useBuyProductMutation()

  return (
    <div>
      {/* Kode untuk menampilkan detail produk disini. */}

      {!buyProductMutation.isLoading && (
        <button
          type="button"
          onClick={() => {
            buyProductMutation.mutate(
              {
                productId: 10
              },
              {
                onSuccess: () => {
                  alert('Produk berhasil ditambahkan ke dalam keranjang.')
                },
                onError: () => {
                  alert('Produk gagal ditambahkan ke dalam keranjang.')
                },
              }
            )
          }}>
          Tambahkan
        </button>
      )}
      {buyProductMutation.isLoading && (
        // Tampilkan loading disini.
      )}
    </div>
  )
}
```

Kemudian kita bisa juga menerapkan teknik yang disebut dengan optimistic update seperti berikut jika dibutuhkan. Optimistic update tidak hanya untuk penambahan data (create) saja, tapi juga bisa untuk mengubah data (update) ataupun untuk menghapus data yang ada (delete). Implementasi untuk optimistic update memang sedikit ribet, tapi jauh lebih ribet lagi jika tidak menggunakan React Query.

```javascript
const action = async (payload) => {
  const response = await axios.post('/orders', {
    product_id: payload.productId,
  })

  return response
}

const useBuyProductMutation = () => {
  const queryClient = useQueryClient()

  return useMutation(action, {
    onMutate: async (payload) => {
      // Batalkan query yang untuk mendapatkan data daftar pesanan.
      await queryClient.cancelQueries(['orders'])

      // Dapatkan data daftar pesanan yang sudah di-fetch
      // dan masuk ke cache sebelumnya.
      // Anggap aja kalian udah implementasi query untuk mendapatkan
      // daftar pesanan: useOrdersQuery.
      const previousOrders = queryClient.getQueryData(['orders'])
      // Dapatkan data account diri sendiri yang sedang login
      // yang sudah di-fetch dan masuk ke cache sebelumnya.
      // Anggap aja kalian udah implementasi query untuk mendapatkan
      // account diri sendiri yang login: useMeQuery.
      const previousMe = queryClient.getQueryData(["me"])

      // Dapatkan value yang di passing sebagai argumen
      // ke .mutate() method waktu digunakan
      // pada sebuah halaman atau komponen.
      const {
        productId,
        slug,
        title,
        price,
        thumbnail
      } = payload

      // Perlu menambahkan data palsu (dummy) ke cache milik
      // query dengan query key ['orders'] yaitu useOrdersQuery
      // selagi proses request ke /orders berjalan.
      if (previousOrders && previousMe) {
        const newOrder = {
          id: Date.now(),
          user_id: previousMe.id,
          product_id: productId,
          title,
          price,
          thumbnail,
        }

        const data = [
          ...previousOrders,
          newOrder,
        ]

        queryClient.setQueryData(['orders'], data)
      }

      return { previousOrders }
    },
    onError: (error, payload, context?: Context) => {
      // Jika terjadi error saat melakukan request ke /orders,
      // data daftar pesanan yang ada di cache kembali seperti semula
      // untuk menghapus data palsu tadi.
      if (context?.previousOrders) {
        queryClient.setQueryData(['orders'], context.previousOrders)
      }
    },
    onSettled: () => {
      // Setelah berhasil maupun error, perlu melakukan sinkronisasi
      // untuk mendapatkan data daftar pesanan terkini.
      // Query dengan query key ['orders'] yaitu useOrdersQuery
      // akan melakukan fetching data di background.
      queryClient.invalidateQueries(['orders'])
    },
  })
}
```

Kemudian dapat kita gunakan seperti berikut.

```javascript
const ProductDetailPage = () => {
  const buyProductMutation = useBuyProductMutation();

  return (
    <div>
      {/* Kode untuk menampilkan detail produk disini. */}

      <button
        type="button"
        disabled={buyProductMutation.isLoading}
        onClick={() => {
          buyProductMutation.mutate(
            {
              productId: 10,
              title: "Product A",
              price: 500,
              thumbnail: "IMAGE_URL_HERE",
            },
            {
              onSuccess: () => {
                alert("Produk berhasil ditambahkan ke dalam keranjang.");
              },
              onError: () => {
                alert("Produk gagal ditambahkan ke dalam keranjang.");
              },
            }
          );
        }}
      >
        Tambahkan
      </button>
    </div>
  );
};
```

Untuk memahami terkait teknik optimistic update, bisa membaca [artikel ini](https://gattigaga.com/id/articles/apa-itu-optimistic-update).

## Kesimpulan

Disini bisa kita lihat bahwa React Query tidak hanya bermanfaat untuk fetching data saja, melainkan juga bisa membantu kita untuk melakukan penambahan data baru (create), mengubah data (update), dan juga menghapus data yang ada (delete). Diatas hanya memjelaskan sebagian kecil hal yang React Query bisa lakukan, karena fitur yang disuguhkan oleh React Query itu cukup banyak. Sekali lagi saya bilang kalau memang diawal terasa menyulitkan, tapi percayalah, React Query sangat berguna dan layak kalian pertimbangkan untuk dipelajari.


Selain untuk proses mengambil data, React Query juga berguna untuk melakukan penambahan data baru (create), mengubah data (update), dan juga menghapus data yang ada (delete).

Menggunakan React Query untuk Olah Data ke Server

Pada sebuah website, umumnya perlu untuk mendapatkan suatu data dari server yang kemudian nantinya akan ditampilkan pada halaman web, daftar produk misalnya. Data yang berasal dari server bisa kita sebut sebagai server state. Di React, biasanya kita menggunakan axios untuk melakukan request ke server untuk mendapatkan data dalam bentuk response dan kemudian data yang kita dapatkan tadi akan kita simpan ke state sebagai berikut.

```javascript
const ProductListPage = () => {
  const [products, setProducts] = useState([])
  const [isLoading, setIsLoading] = useState(false)

  useEffect(() => {
    const fetchProducts = async () => {
      try {
        setIsLoading(true)

        const response = await axios.get('/products')

        setProducts(response)
      } catch (error) {
        console.log(error)
      } finally {
        setIsLoading(false)
      }
    }

    fetchProducts()
  }, [])

  return (
    <div>
      {!isLoading && (
        // Tampilkan daftar produk disini.
      )}
      {isLoading && (
        // Tampilkan loading disini.
      )}
    </div>
  )
}
```

Kode diatas digunakan untuk mendapatkan semua daftar produk yang kemudian untuk ditampilkan. Namun ada beberapa kasus lain terkait fetching data yang perlu diperhatikan.

- **Bagaimana jika data produk terlalu banyak, ada 100,000 item misalnya?** Kita bisa menerapkan pagination pada data produk dengan menampilkan 20 item per halaman.
- **Apa yang harus dilakukan jika terjadi error ketika melakukan fetching data produk?** Kita bisa menampilkan error pada bagian daftar produk di halaman web tersebut.
- **Bagaimana cara kita bisa pulih dari error tersebut?** Kita bisa mencoba melakukan fetching data ulang jika error di server sudah diperbaiki.
- **Bagaimana cara kita bisa melakukan fetching data produk dari halaman A untuk kemudian ditampilkan di halaman B?** Kita bisa coba fetching data produk dari halaman A kemudian hasil response akan kita simpan ke global state, dan kemudian kita tampikan di halaman B.
- **Bagaimana cara kita bisa mendapatkan data terbaru dari server?** Kita dapat melakukan fetching data ulang ketika dibutuhkan dari halaman web manapun.

Itu adalah sebagian dari sekian banyak kasus yang bisa terjadi terkait dengan fetching data. Untuk menerapkan hal tersebut pasti tidak mudah dan diperlukan banyak effort. Kita perlu memikirkan dimana state akan didefinisikan, memikirkan bagaimana data dari pagination akan disimpan, dan memikirkan hal-hal yang merepotkan lainnya. Belum lagi jika dalam satu website, ada banyak macam data yang harus diminta ke server untuk ditampilkan bukan hanya data terkait daftar produk saja. Benar-benar merepotkan bukan.

## Solusi

Dengan menggunakan React Query, kita dapat melakukan fetching data dengan lebih baik dan menyelesaikan masalah-masalah diatas. Berikut adalah contoh sederhana untuk melakukan fetching data dengan menggunakan React Query.

Pertama kita buat sebuah custom hook di sebuah file, misalnya _use-products-query.js_. Disini _['products', payload]_ adalah sebuah query key, semacam identitas unik untuk sebuah query, jadi jika query key berubah maka query akan melakukan fetching data dan ketika data berhasil di-fetch maka isLoading akan berubah dari true menjadi false. Dan jika query dari suatu query key sudah pernah melakukan fetching data atau sudah memiliki initial data, maka isLoading akan selalu false karena React Query selanjutnya akan mencoba melakukan fetching data di belakang layar untuk query key tersebut. Untuk itu kalian bisa menggunakan isFetching.

```javascript
const action = (payload) => {
  const response = await axios.get('/products', {
    params: payload
  })

  return response
}

const useProductsQuery = (payload) => {
  return useQuery(['products', payload], () => action(payload))
}
```

Kemudian kita gunakan custom hook yang udah kita buat tadi pada sebuah entah itu halaman ataupun komponen manapun yang membutuhkannya.

```javascript
const ProductListPage = () => {
  const productsQuery = useProductsQuery()

  return (
    <div>
      {productsQuery.isSuccess && (
        // Tampilkan daftar produk disini.
      )}
      {productsQuery.isError && (
        // Tampilkan error disini.
      )}
      {productsQuery.isLoading && (
        // Tampilkan loading disini.
      )}
    </div>
  )
}

```

Bisa juga untuk menerapkan filter pada data produk yang akan ditampilkan. Jadi setiap kali kategori diubah, maka akan melakukan fetching data untuk mem-filter data produk.

```javascript
const ProductListPage = () => {
  const [category, setCategory] = useState("gadget");
  const productsQuery = useProductsQuery({ category });

  // Kode lainnya disini.
};
```

Misalnya terjadi error sewaktu fetching data dilakukan, maka akan menampilkan pesan error dan juga sebuah tombol yang dapat digunakan untuk pulih dari error ketikan error pada server sudah diperbaiki.Jadi ketika tombol tersebut diklik, maka akan melakukan fetching data ulang dan menampilkan loading.

```javascript
const ProductListPage = () => {
  // Kode lainnya disini.

  return (
    <div>
      {productsQuery.isSuccess && (
        // Tampilkan daftar produk disini.
      )}
      {productsQuery.isError && (
        <div>
          <p>Produk tidak dapat ditampilkan.</p>
          <button
            type="button"
            onClick={() => productsQuery.refetch()}
          >
            Coba Lagi
          </button>
        </div>
      )}
      {productsQuery.isLoading && (
        // Tampilkan loading disini.
      )}
    </div>
  )
}

```

Bisa juga ketika kita perlu untuk melakukan fetching data untuk halaman B dari halaman A misalnya. Halaman B akan menampilkan daftar produk yang sudah di-fetch pada halaman A (cached data), namun halaman B tetap akan melakukan fetching daftar produk di belakang layar untuk memastikan data yang didapatkan adalah data terbaru. Disini loading bisa jadi tidak ditampilkan pada halaman B karena daftar produk sudah di-fetch di halaman A.

```javascript
const APage = () => {
  const productsQuery = useProductsQuery()

  return (
    <div>
      <button
        type="button"
        onClick={() => productsQuery.refetch()}
      >
        Fetch daftar produk.
      </button>
    </div>
  )
}

const BPage = () => {
  const productsQuery = useProductsQuery()

  return (
    <div>
      {productsQuery.isSuccess && (
        // Tampilkan daftar produk disini.
      )}
      {productsQuery.isError && (
        // Tampilkan error disini.
      )}
      {productsQuery.isLoading && (
        // Tampilkan loading disini.
      )}
    </div>
  )
}

```

Kita juga dapat menerapkan pagination dengan mudah. Sebelumnya, pastikan REST API /products untuk mendukung pagination juga. Kode dibawah akan mengambil daftar produk dengan kategori gadget pada halaman 1.

```javascript
const ProductListPage = () => {
  const [category, setCategory] = useState("gadget");
  const [page, setPage] = useState(1);
  const productsQuery = useProductsQuery({ category, page });

  return (
    <div>
      {productsQuery.isSuccess && (
        <>
          {/* Tampilkan daftar produk disini. */}

          <Pagination
            currentPage={page}
            totalPages={productsQuery.data.last_page}
            onPageChange={(pageIndex) => {
              setPage(pageIndex)
            }}
          />
        </>
      )}
      {productsQuery.isError && (
        // Tampilkan error disini.
      )}
      {productsQuery.isLoading && (
        // Tampilkan loading disini.
      )}
    </div>
  )
};
```

## Kesimpulan

Dengan adanya React Query, implementasi terkait fetching data menjadi lebih mudah, lebih minim effort, kodingan lebih rapi dan mudah dibaca, dan pastinya bakal membuat kita menjadi lebih produktif. Memang diawal terasa menyulitkan, tapi percayalah, React Query sangat berguna dan layak kalian pertimbangkan untuk dipelajari.


Dengan adanya React Query, implementasi terkait fetching data menjadi lebih mudah, lebih minim effort, kodingan lebih rapi dan mudah dibaca, dan pastinya bakal membuat kita menjadi lebih produktif.

Fetching Data dengan React Query

Saat kita mengerjakan form pada halaman web, kita perlu mendefinisikan value-value yang akan dikirim oleh form nanti, misalnya Email dan Password.

```html
<form>
  <div>
    <label>Email</label>
    <input type="email" name="email" />
  </div>

  <div>
    <label>Password</label>
    <input type="password" name="password" />
  </div>

  <button type="submit">
    Submit
  </button>
</form>
```

Di React, kita bisa melakukannya seperti ini. Kita bisa menggunakan useState hook untuk menyimpan value yang diperlukan untuk dikirim oleh form.

```javascript
const [email, setEmail] = useState("");
const [password, setPassword] = useState("");

const submit = () => {
  // Akses ke email dan password diperlukan disini
  // untuk kemudian dikirim ke server melalui REST API.
  // Selain itu perlu juga untuk menampilkan semacam alert
  // saat kita berhasil atau error.
};

return (
  <form>
    <div>
      <label>Email</label>
      <input
        type="email"
        name="email"
        value={email}
        onChange={(event) => setEmail(event.target.value)}
      />
    </div>

    <div>
      <label>Password</label>
      <input
        type="password"
        name="password"
        value={password}
        onChange={(event) => setPassword(event.target.value)}
      />
    </div>

    <button type="submit" onClick={submit}>
      Submit
    </button>
  </form>
);
```

Tapi ada masalah disini. Jika ada banyak value yang perlu didefinisikan, maka kode akan jadi seperti ini.

```javascript
const [email, setEmail] = useState("");
const [password, setPassword] = useState("");
const [address, setAddress] = useState("");
const [province, setProvince] = useState("");
const [district, setDistrict] = useState("");
const [subdistrict, setSubdistrict] = useState("");
const [postalCode, setPostalCode] = useState("");
// Kode value-value lainnya disini misalnya.

return (
  <form>
    <div>
      <label>Email</label>
      <input
        type="email"
        name="email"
        value={email}
        onChange={(event) => setEmail(event.target.value)}
      />
    </div>

    <div>
      <label>Password</label>
      <input
        type="password"
        name="password"
        value={password}
        onChange={(event) => setPassword(event.target.value)}
      />
    </div>

    

    <button type="submit" onClick={submit}>
      Submit
    </button>
  </form>
);
```

Belum lagi kita perlu untuk melakukan validasi terhadap value-value yang dimasukan kedalam form untuk mencegah value-value yang tidak valid bisa terkirim ke backend dan juga perlu menampilkan pesan error dibawah input yang bersangkutan ketika value nya tidak valid. Dan mungkin perlu juga untuk me-reset form ketika form berhasil dikirim. Jadi banyak sekali memang hal yang harus diurus ketika membuat sebuah form.

## Solusi

Disini Formik memberikan solusi untuk urusan pembuatan form di React. Mulai dari mendefinisikan value untuk form, validasi value, dan lain sebagainya dan form tidak akan dikirim jika masih ada value yang tidak valid.

```javascript
const form = useFormik({
  initialValues: {
    email: "",
    password: "",
  },
  validate: (values) => {
    const { email, password } = values;
    const errors = {};

    if (!email) {
      errors.email = "Email wajib ada";
    } else if (
      !/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i.test(values.email)
    ) {
      errors.email = "Format email tidak valid";
    }

    // Validasi value lainnya disini.

    return errors;
  },
  onSubmit: async (values, actions) => {
    try {
      const { email, password } = values;

      actions.setSubmitting(true);

      // Ini cuman function dummy.
      await submitToServer({
        email,
        password,
      });

      actions.resetForm();
      // Tampilkan alert berhasil disini.
    } catch (error) {
      // Tampilkan alert error disini.
    } finally {
      actions.setSubmitting(false);
    }
  },
});

return (
  <form>
    <div>
      <label>Email</label>
      <input
        type="email"
        name="email"
        value={form.values.email}
        onChange={form.handleChange}
      />
      {!!form.errors.email && <p>{form.errors.email}</p>}
    </div>

    <div>
      <label>Password</label>
      <input
        type="password"
        name="password"
        value={form.values.password}
        onChange={form.handleChange}
      />
      {!!form.errors.password && <p>{form.errors.password}</p>}
    </div>

    <button type="submit" onClick={() => form.handleSubmit()}>
      Submit
    </button>
  </form>
);
```

Untuk validasi yang lebih baik, bisa kita kombinasikan Formik dengan validation schema seperti Yup atau Zod untuk menggantikan validate function.

```javascript
import { useFormik } from "formik";
import { z } from "zod";
import { toFormikValidationSchema } from "zod-formik-adapter";

const signInSchema = z.object({
  email: z
    .string({
      required_error: "Email wajib ada",
    })
    .email("Format email tidak valid"),
  password: z.string({
    required_error: "Password wajib ada",
  }),
});

const form = useFormik({
  initialValues: {
    email: "",
    password: "",
  },
  validationSchema: toFormikValidationSchema(signInSchema),
  onSubmit: async (values, actions) => {
    try {
      const { email, password } = values;

      actions.setSubmitting(true);

      // Ini cuman function dummy.
      await submitToServer({
        email,
        password,
      });

      actions.resetForm();
      // Tampilkan alert berhasil disini.
    } catch (error) {
      // Tampilkan alert error disini.
    } finally {
      actions.setSubmitting(false);
    }
  },
});

return (
  <form>
    <div>
      <label>Email</label>
      <input
        type="email"
        name="email"
        value={form.values.email}
        onChange={form.handleChange}
      />
      {!!form.errors.email && <p>{form.errors.email}</p>}
    </div>

    <div>
      <label>Password</label>
      <input
        type="password"
        name="password"
        value={form.values.password}
        onChange={form.handleChange}
      />
      {!!form.errors.password && <p>{form.errors.password}</p>}
    </div>

    <button type="submit" onClick={() => form.handleSubmit()}>
      Submit
    </button>
  </form>
);
```

## Kesimpulan

Di artikel ini kita telah mempelajari bagaimana kombinasi Formik dan Zod dapat membuat struktur kode terkait pembuatan form menjadi lebih rapi, lebih sedikit kode, dan lebih mudah untuk diimplementasikan untuk membuat form yang baik.

Disini Formik memberikan solusi untuk urusan pembuatan form di React. Mulai dari mendefinisikan value untuk form, validasi value, dan lain sebagainya.

Menangani Form dengan Formik

Saat membuat komponen menggunakan React, kalian mungkin pernah menemui kasus dimana dibutuhkan untuk mengakses DOM element dari website tersebut dengan JavaScript.

Berikut adalah kode yang biasa kalian gunakan saat mencoba mengakses DOM element dengan plain JavaScript tanpa mengunakan React.

```javascript
const sidebarElement = document.querySelector("#sidebar");
const footerElement = document.querySelector("#footer");
```

Atau mungkin kalian ingin menyimpan sebuah value internal untuk sebuah komponen tapi tidak ingin melakukan render ulang ketika value tersebut di-assign, salah satu contohnya saat kita ingin menggunakan interval pada suatu komponen. Menggunakan useState hook untuk kasus ini kurang tepat karena ketika value di-assign maka akan men-trigger komponen untuk melakukan render ulang.

```javascript
const [isPhoneVisible, setIsPhoneVisible] = useState(false);

// Ini akan men-trigger render ulang untuk komponen tersebut.
setIsPhoneVisible(true)
```

Tidak bisa pula menggunakan variabel biasa seperti *let* untuk menyimpan value tanpa perlu render ulang. Hanya menggunakan *let* memang tidak men-trigger komponen untuk render ulang. Namun jika render ulang terjadi pada komponen parent misalnya, maka yang terjadi value nya akan di-reset seperti value awal.

```javascript
let isPhoneVisible = false;

// Mengubah value pada variabel tidak men-trigger render ulang.
isPhoneVisible = true;

// Tiba-tiba terjadi render ulang pada komponen parent.
// isPhoneVisible di-reset ke value awal yaitu false.
// Padahal kita tidak menginginkan value kita di-reset ke awal.
```

Untuk mengatasi kasus-kasus diatas kita dapat menggunakan useRef hook. Pada dasarnya, useRef hook digunakan untuk menyimpan value yang tidak membutuhkan rendering saat value tersebut di-assign.

```javascript
const refIsPhoneVisible = useRef(false);

// Mengubah value pada useRef tidak men-trigger render ulang.
refIsPhoneVisible.current = true;

// Tiba-tiba terjadi render ulang pada komponen parent.
// refIsPhoneVisible tetap memiliki value nya yaitu true.
```

Bisa pula digunakan untuk mengakses DOM element sebagai berikut.

```javascript
const refSidebarElement = useRef(null);
const refFooterElement = useRef(null);

useEffect(() => {
  refSidebarElement.current?.innerText = "This is Sidebar";
  refFooterElement.current?.innerText = "This is Footer";
}, []);

return (
  <div>
    <div ref={refSidebarElement}>
      <p>Sidebar</p>
    </div>
    <footer ref={refFooterElement}>
      <p>Footer</p>  
    </footer>
  </div>
)
```

Atau misalkan ingin menggunakan interval pada sebuah komponen.

```javascript
const refTimer = useRef(null)

useEffect(() => {
  refTimer.current = setInterval(() => {
    console.log("Hello World");
  }, 1000);

  return () => {
    if (refTimer.current) {
      clearInterval(refTimer.current)
    }
  };
}, []);
```


useRef hook digunakan untuk menyimpan value yang tidak membutuhkan rendering saat value tersebut di-assign.

Menggunakan useRef di React

Pada sebuah aplikasi, biasanya ada sebuah fitur yang digunakan untuk menyimpan sebuah data beserta waktunya (biasa disebut DateTime atau Timestamp), entah itu waktu saat data disimpan atau waktu untuk kegunaan lainnya, misalnya waktu saat data tersebut akan dipublikasi. Salah satu contoh fitur adalah fitur untuk membuat artikel pada sebuah blog yang nantinya artikel tersebut akan dipublikasikan kepada para pembaca.

Ketika penulis menggunakan fitur tersebut, penulis mengisi form untuk membuat sebuah artikel dan juga mengatur waktu publikasi dari artikel tersebut sebelum akhirnya penulis mengklik tombol "Simpan" untuk menyimpan artikel itu di database.

![Fitur Membuat Artikel](//images.ctfassets.net/m14gyryibp3h/6QSOSgcadTto2GSNcq3i0j/e8f7d96b0272f7074ce63ab54c0bf167/Untitled_Diagram-Page-6.png)

Katakanlah disini penulis adalah orang Indonesia jadi disini dia membuat sebuah artikel dan waktu publikasi artikel disimpan menggunakan zona waktu Indonesia (GMT+7), misalnya 21 Feb 2023 10:00.

Kemudian artikel tersebut tampil kepada para pembaca. Karena artikel disimpan dengan zona waktu Indonesia (GMT+7), pembaca dari Indonesia tidak akan merasa ada masalah saat melihat waktu publikasi dari artikel tersebut. 

Namun apa jadinya ketika pembaca dari negara lain yang bisa jadi memiliki zona waktu yang berbeda melihat waktu publikasi artikel tidak sesuai dengan zona waktu mereka? misalnya mereka melihat daftar artikel namun tidak ditemukan artikel tersebut dipublikasikan pada 21 Feb 2023 10:00 di zona waktu mereka dan tentu saja hal ini akan membuat mereka kebingungan.

## Solusi

Solusinya adalah semua waktu yang berkaitan dengan data tersebut harus disimpan ke dalam database dalam format UTC. Kemudian ketika waktu tersebut akan ditampilkan pada aplikasi, maka waktu tersebut harus diformat sesuai zona waktu dimana pengguna aplikasi tersebut berada.

Dalam kasus diatas, ketika penulis membuat sebuah artikel, waktu publikasi artikel walau diatur sesuai dengan zona waktu Indonesia (GMT+7) dari antarmuka aplikasi, namun saat akan disimpan ke database harus diformat ke UTC. Jadi dari 21 Feb 2023 10:00 (GMT+7) menjadi 21 Feb 2023 03:00 (UTC).

Setelah itu ketika akan ditampilkan ke antarmuka aplikasi, waktu publikasi artikel harus diformat dari UTC ke zona waktu masing-masing pengguna aplikasi.

Misal pengguna dari Indonesia mengakses aplikasi, maka waktu publikasi artikel harus diformat dari UTC ke GMT+7. Kemudian ada pengguna dari Jepang mengakses aplikasi, maka waktu publikasi artikel harus diformat dari UTC ke GMT+9. Proses format bisa dilakukan dibagian frontend nya.

![Alur Formatting Timestamp](//images.ctfassets.net/m14gyryibp3h/1Tqss4n5TkvEMvcMd39n08/2f4fb72d4aea9a15fec7cd9fd07c6f61/Untitled_Diagram-Page-3__3_.png)

## Kesimpulan

Dengan adanya proses format dari zona waktu pengguna ke UTC dan sebaliknya, hal ini dapat menghindarkan pengguna dari berbagai zona waktu yang berbeda dari kebingungan akan waktu dari sebuah data yang tampil pada antarmuka aplikasi. Dan alangkah baiknya kalian menerapkan hal ini diawal kalian membuat aplikasi.

Dengan adanya proses format dari zona waktu pengguna ke UTC dan sebaliknya, hal ini dapat menghindarkan pengguna dari berbagai zona waktu yang berbeda dari kebingungan akan waktu dari sebuah data yang tampil pada antarmuka aplikasi.

Mengapa Harus Menyimpan Timestamp dengan Format UTC

## Contoh Kasus

Ada contoh kasus, misalkan ada sebuah aplikasi Point of Sales. Aplikasi tersebut memiliki fitur untuk menambah quantity produk di dalam cart. Ketika kasir menambah quantity produk di dalam cart, maka proses yang umum terjadi adalah:
- Sebuah produk di dalam cart memiliki 1 quantity.
- Kasir mengklik tombol "+" yang ada pada produk tersebut.
- Loading akan muncul dan aplikasi akan mengirim request ke server via API untuk menambah 1 quantity pada produk tersebut.
- Jika berhasil, maka server akan mengembalikan response ke aplikasi berupa data produk tersebut beserta quantity terbaru yaitu 2.
- Data tersebut disimpan oleh aplikasi dan akan ditampilkan sebagai produk dengan 2 quantity di dalam cart.

![User Interface POS](//images.ctfassets.net/m14gyryibp3h/6JMLrTgLZor1Q5xky379Ws/bbeda4666e93104e37f8fd552b249d69/pos-overview-id.png)

![Product di dalam Cart](//images.ctfassets.net/m14gyryibp3h/6LvM8VHB7MvcHeWpxrXEba/485cd26d74e1128224d5da0a0798baee/product-in-the-cart-id.png)

![POS menampilkan Loading](//images.ctfassets.net/m14gyryibp3h/4vkDf3d2yhcEmz2vHfDLio/8c02792707c2499a6f55f05077f9e5b4/pos-with-loading-id.png)

Dalam alur tersebut, dapat kita lihat kalau setiap kali kasir menambahkan quantity produk, maka akan muncul loading saat komunikasi antara aplikasi dengan server terjadi dan hal ini buruk untuk user experience. Pasti akan menjengkelkan kalau setiap kali menambahkan quantity akan muncul loading.

![Alur Reguler](//images.ctfassets.net/m14gyryibp3h/ZUmtR9jZzjdbyU5u4cJGk/32cf9e44057c3f208bec132268ffe769/regular-flow-id.png)

Bagaimana kalau loading tidak perlu dimunculkan saat proses komunikasi aplikasi dengan server terjadi? Hal ini juga buruk untuk user experience karena ketika kasir mengklik tombol "+", quantity produk tidak langsung berubah karena perlu menunggu proses komunikasi antara aplikasi dengan server berhasil terlebih dahulu. Pasti akan menjengkelkan kalau tidak ada feedback yang langsung muncul setiap kali menambahkan quantity.

## Peran Optimistic Update

Disinilah peran metode Optimistic Update sebagai solusi untuk mengatasi masalah tersebut. Dengan Optimistic Update, kita menggunakan data palsu untuk ditampilkan ketika proses komunikasi antara aplikasi dengan server terjadi. Lebih jelasnya sebagai berikut:
- Sebuah produk di dalam cart memiliki 1 quantity.
- Kasir mengklik tombol "+" yang ada pada produk tersebut.
- Aplikasi akan mengirim request ke server via API untuk menambah 1 quantity pada produk tersebut.
- Selagi proses komunikasi berlangsung, aplikasi membuat dan menyimpan data palsu berupa produk tersebut dengan 2 quantity dan langsung ditampilkan di dalam cart.
- Saat komunikasi selesai dan berhasil, maka server akan mengembalikan response ke aplikasi berupa data produk tersebut beserta quantity terbaru yaitu 2.
- Data dari response tersebut akan digunakan untuk menggantikan data palsu tadi.
- Namun jika komunikasi selesai dan gagal, maka aplikasi akan mengembalikan kondisi produk tersebut seperti sebelumnya yaitu quantity kembali ke 1.

Dalam alur tersebut bisa kita lihat kalau setiap kali kasir mencoba untuk menambahkan quantity produk, quantity terbaru akan langsung tampil di dalam cart tanpa perlu menampilkan loading walaupun proses komunikasi antara aplikasi dengan server sedang berjalan. Kalaupun proses tambah quantity di server gagal, nilai quantity pun akan kembali seperti sebelumnya. Hal ini membuat user experience menjadi lebih terkesan responsif.

![Flow Optimistic Update](//images.ctfassets.net/m14gyryibp3h/5EOq5UG7OygSeyWkX5n9mX/abf8be41b3d4843e714ae63075d4f3dc/optimistic-update-flow-id.png)

## Kesimpulan

Optimistic Update dapat menjadi solusi untuk user experience yang lebih responsif saat berhadapan dengan proses tukar data antara aplikasi dengan server. Memang metode ini kelihatannya cukup sulit untuk diterapkan. Namun dengan bantuan React Query, metode ini bisa menjadi lebih mudah untuk diterapkan. [React Query](https://tanstack.com/query/latest) sendiri adalah sebuah library yang diperuntukan untuk melakukan data-fetching di environment React dan memiliki fitur untuk penerapan [Optimistic Update](https://tanstack.com/query/v4/docs/react/guides/optimistic-updates).

Dengan Optimistic Update, kita menggunakan data palsu untuk ditampilkan ketika proses komunikasi antara aplikasi dengan server terjadi.

Apa itu Optimistic Update

## Apa itu Tailwind CSS

[Tailwind CSS](https://tailwindcss.com) merupakan sebuah CSS framework yang berisikan kumpulan dari class-class CSS siap pakai yang dapat kita gunakan langsung untuk melakukan styling pada elemen-elemen HTML.

## Alasan menggunakan Tailwind CSS

Tailwind CSS berbeda dengan Boostrap yang menyediakan beragam macam komponen. Tailwind CSS bersifat low-level karena hanya berisikan kumpulan utility class.

Dengan Tailwind CSS, kita dapat menggunakan class-class CSS siap pakai yang disediakan untuk menghindari penggunaan arbitrary values yang umum kita gunakan saat menulis kode CSS sehingga kita dapat membuat style yang lebih konsisten.

Jadi pada dasarnya kita bisa langsung menerapkan class pada elemen-elemen HTML tanpa perlu untuk menulis kode CSS pada file terpisah. Kita pun bisa juga menerapkan media query untuk responsive design, interaksi seperti hover dan focus, dan juga dark mode langsung dengan memberikan class CSS pada elemen-elemen HTML yang diinginkan.

Saat production, Tailwind CSS otomatis akan menghapus semua class-class CSS nya yang tidak kita gunakan dan akan menghasilkan sekitar kurang dari 10kb CSS sehingga CSS akan lebih cepat dimuat oleh browser pengguna.

Tailwind CSS juga dapat kita customize sesuai kebutuhan kita. Misalnya kita ingin menggunakan font-family, warna, dan ukuran margin pilihan kita, kita dapat melakukannya pada file konfigurasi yang sudah disediakan yaitu *tailwind.config.js*.

Selain itu untuk menunjang proses development, secara resmi Tailwind CSS menyediakan extension-nya untuk Visual Studio Code. Dengan ini kita bisa memiliki autocomplete suggestion saat menerapkan class-class Tailwind CSS pada elemen HTML.

## Menggunakan Tailwind CSS

Setelah kita melakukan instalasi dan konfigurasi Tailwind CSS, kita bisa langsung menggunakan class-class yang disediakan untuk diterapkan pada elemen-elemen HTML.

Apa dengan Tailwind CSS kita tidak perlu belajar CSS dasar? tentu tidak. Alangkah baiknya kita belajar CSS dasar dulu sebelum belajar Tailwind CSS. Dengan begitu kita bisa paham style apa yang harus kita terapkan saat mengeksekusi UI design.

Walau kita bisa menerapkan style hanya dengan menggunakan class-class yang disediakan Tailwind CSS, adakalanya kita masih harus menerapkan inline-style atau custom class saat berhadapan dengan UI design yang tidak konsisten.

## Kesimpulan

Saya selalu menggunakan Tailwind CSS saat menerapkan style pada project di pekerjaan. Karena saya merasa produktifitas saya meningkat. Saya nggak perlu pusing mikirin bikin nama class baru dan juga terlalu pusing mikirin optimasi. Beri kesempatan pada diri kalian untuk mencoba Tailwind CSS dan rasakan manfaatnya.

Tailwind CSS merupakan sebuah CSS framework yang berisikan kumpulan dari class-class CSS siap pakai yang dapat kita gunakan langsung untuk melakukan styling pada elemen-elemen HTML.

Tailwind CSS dan Manfaatnya

Di versi Javascript sebelumnya (ES5) kita biasa menggunakan **var** untuk mendeklarasikan variable, tapi setelah ES6 dirilis, Kita dapat menggunakan **let** dan **const**.

Terus apa perbedaan antara **var**, **let**, dan **const** ? Mari saya jelaskan dibawah.

## Var

**var** biasa digunakan untuk mendeklarasikan variable sebelum Javascript ES6 dirilis. Di scope terluar kita deklarasikan variable **a** dengan nilai **0**, lalu di scope terdalam kita deklarasi ulang variable **a** dan nilainya akan berubah dari **0** menjadi **1**.

Variable **b** telah dideklarasikan di scope terluar dan nilainya berubah dari **1** menjadi **3**. Variable **c** telah dideklarasikan di scope terdalam dan masih bisa diakses dari scope terluar.

```javascript
var a = 0;
var b = 1;

if (true) {
  var a = 1; // nilainya berubah
  var c = 2; // variable baru
  b = 3; // nilainya berubah

  console.log("a", a); // a = 1
  console.log("b", b); // b = 3
  console.log("c", c); // c = 2
}

console.log("a", a); // a = 1
console.log("b", b); // b = 3
console.log("c", c); // masih dapat diakses disini (c = 2)
```

## Let

**let** merupakan bagian dari Javascript ES6. Di scope terluar kita deklarasikan variable **a** dengan nilai **0**, lalu discope terdalam kita coba deklarasi ulang variable **a** tapi nilai dari variable **a** di scope terluar tak akan berubah, melainkan variable **a** baru akan dibuat dan hanya dapat diakses di scope terdalam.

Variable **b** telah dideklarasikan di scope terluar dan nilainya berubah dari **1** menjadi **3**. Variable **c** telah dideklarasikan di scope terdalam tapi tak dapat diakses dari scope terluar.

**let** mirip dengan **var** tapi tak merubah nilai saat dideklarasi ulang, melainkan variable baru akan dibuat untuk scope terkait. Jika dideklarasikan di scope terdalam, maka tak dapat diakses dari scope terluar.

```javascript
let a = 0;
let b = 1;

if (true) {
  let a = 1; // variable baru
  let c = 2; // variable baru
  b = 3; // nilainya berubah

  console.log("a", a); // a = 1
  console.log("b", b); // b = 3
  console.log("c", c); // c = 2
}

console.log("a", a); // a = 0
console.log("b", b); // b = 3
console.log("c", c); // error (variable belum dideklarasikan)
```

## Const

**const** merupakan bagian dari Javascript ES6 seperti **let**, tapi hannya saja nilainya tak dapat diubah. Di scope terluar kita deklarasikan variable **a** dengan nilai **0**, lalu discope terdalam kita coba deklarasi ulang variable **a** tapi nilai dari variable **a** di scope terluar tak akan berubah, melainkan variable **a** baru akan dibuat dan hanya dapat diakses di scope terdalam.

Variable **b** telah dideklarasikan di scope terluar tapi nilainya tak dapat diubah. Variable **c** telah dideklarasikan di scope terdalam tapi tak dapat diakses dari scope terluar.

**const** mirip dengan **let** tapi nilainya tak dapat diubah.

```javascript
const a = 0;
const b = 1;

if (true) {
  const a = 1; // variable baru
  const c = 2; // variable baru
  b = 3; // error (konstan tak dapat diubah)

  console.log("a", a); // a = 1
  console.log("b", b); // b = 1
  console.log("c", c); // c = 2
}

console.log("a", a); // a = 0
console.log("b", b); // b = 1
console.log("c", c); // error (variable belum dideklarasikan)
```

Perbedaan terbesar adalah nilai dari **var** dan **let** masih dapat diubah sedangkan **const** tidak. Sekarang kamu dapat menggunakan **let** sebagai pengganti **var** untuk variable yang nilainya dapat diubah di kode barumu. 

Kalau begitu bolehkah saya mengganti semua **var** ke **let** di kode lama saya ? Ya, kamu bisa menggantinya tapi jangan dilakukan dengan asal. Karena **var** dan **let** memiliki cara kerja yang berbeda seperti yang saya bilang sebelumnya.

Saya sendiri lebih sering menggunakan **const** karena saya jarang butuh variable yang perlu diubah nilainya.

Mengenal berbagai cara deklarasi variabel dalam Javascript

Antara Var, Let dan Const

Pure Function adalah sebuah function yang jika diberi argumen yang sama maka akan menghasilkan output yang sama. Lebih simple, mudah diprediksi, dan mudah untuk di test daripada impure function. Kamu tidak boleh mengacu pada variable di luar scope function untuk melakukan kalkulasi didalam pure function. Lebih baik mengacu pada argumen dan variable didalam scope function tersebut.

Ini adalah contoh pure function :

```javascript
function sum(a, b) {
  return a + b;
}

sum(1, 2); // Selalu menghasilkan 3 (1 + 2 = 3)
sum(5, 1); // Selalu menghasilkan 6 (5 + 1 = 6)
```

Kriteria dari pure function adalah :

1. Jika diberi argument yang sama, maka akan menghasilkan output yang sama.
2. Tanpa side effects.

Side effects itu seperti :

1. Mengubah dan mengacu pada variable diluar scope function bersangkutan
2. Melakukan network request
3. Menampilkan sesuatu di console
4. Memanipulasi DOM

Jika tidak memenuhi kriteria diatas, Itu bisa dipastikan sebagai impure function. Impure function tidak mudah diprediksi, Kamu tidak bisa memperkirakan output nya secara pasti. Jika kamu memanggil impure function didalam sebuah function, function tersebut menjadi impure.

Ini adalah contoh dari impure function :

```javascript
// Bisakah kamu menebak output dari function ini ?
Math.random();

let i = 0;

// Function ini mengubah dan mengacu pada variable
// diluar scope untuk melakukan kalkulasi
function add(a) {
  i += 2;
  return i + a;
}

// Argumentnya sama, tapi menghasilkan output berbeda
add(2); // Menghasilkan 4 (i = 2)
add(2); // Menghasilkan 6 (i = 4)
```

## Kesimpulan

Kamu wajib menggunakan pure function daripada impure function jika memungkinkan. Lebih simple untuk diimplementasikan dan mengurangi penyebab terjadinya error pada kodemu.


Mari menulis function sederhana yang lebih mudah didebug

Memahami Pure Function

Aplikasimu semakin lama semakin kompleks, tapi tapi kamu tidak tahu bagaimana mengaturnya. State dipassing ke beberapa component terkadang sulit untuk dilacak. Jika itu terjadi padamu, berarti kamu membutuhkan Redux. Dan ini adalah contoh alur state yang rumit.

![State yag rumit](//images.ctfassets.net/m14gyryibp3h/7EvnnC9WoNOrcpY6v7MArF/ac830efd4e4fa8b1141767d0084d524b/complicated-states.png)![State yang rumit](https://ucarecdn.com/402c3c5f-7257-4932-b2da-9ba32ac77dd6/)

Redux adalah library Javascript yang dapat membantumu untuk mengatur state secara global. Dapat diintegrasikan dengan framework atau library lain seperti Angular dan React. Ini adalah contoh alur state jika kamu menggunakan Redux.

![State pada redux](//images.ctfassets.net/m14gyryibp3h/D0QuzGZHJEU6WMaYtlOph/eadbc0cd29ebdf57653ef15011063f26/redux-states.png)![State pada redux](https://ucarecdn.com/19711034-b1a3-4f71-9f5f-dd6fa701c4f7/)

Yeah, kamu seperti saya. Saya tidak menemukan tutorial Redux yang bagus dan jelas dari internet. Tapi sekarang saya akan menjelaskannya padamu semudah mungkin.

## Penjelasan

Redux memiliki tiga bagian utama:

* Action
* Reducer
* Store

**Action** adalah pengangkut informasi yang mengirimkan data dari aplikasimu kepada store. Action hanya berbentuk javascript object pada umumnya. Dan membutuhkan properti bernama **type** untuk mengindikasikan hal yang akan terjadi (valuenya bebas) dan properti bernama apapun dan berapapun jumlahnya sesuai data yang akan dikirim ke store.

```javascript
// Mengandung semua data yang dibutuhkan
// untuk membuat kontak baru
{
  type: 'ADD_CONTACT',
  contactID: 1,
  name: 'Gattigaga Hayyuta Dewa',
  phone: '+62 777 777 777'
}

// Mengandung contactID sebagai referensi
// untuk menghapus kontak
{
  type: 'REMOVE_CONTACT',
  contactID: 1
}
```

**Reducer** adalah function yang mendefinisikan bagaimana state aplikasi diubah setelah melakukan dispatch. Nama function akan mejadi nama state nya dan membutuhkan dua argument, **state** dan **action**. Argument state wajib memiliki default value dan argument action adalah action yang akan kamu dispatch.

```javascript
function contacts(state = [], action) {
  switch (action.type) {
    case "ADD_CONTACT":
      const { contactID, name, phone } = action;

      return [
        ...state,
        {
          contactID,
          name,
          phone
        }
      ];
    default:
      return state;
  }
}
```

**Store** adalah tempat untuk menyimpan state aplikasimu. Hanya satu store saja yang wajib dimiliki dalam aplikasimu.

## Praktek

Oke, sekarang waktunya praktek. Kita akan membuat Contact App menggunakan React, dan memiliki fitur seperti menambah dan menghapus kontak. Pertama, buat React project menggunakan **create-react-app** dari Terminal.

```bash
create-react-app learn-redux
```

Lalu install **redux** and **react-redux**.

```bash
npm install --save redux react-redux
```

Buat beberapa Action Creator di **src/states/actions.js**. Oh ya, aku lupa untuk menjelaskan apa itu Action Creator. Action Creator adalah sebuah function yang menghasilkan action.

```javascript
// Nilai awal contactID
let currentID = 0;

export function addContact(contact) {
  const { name, phone } = contact;
  currentID += 1;

  return {
    type: "ADD_CONTACT",
    id: currentID,
    name,
    phone
  };
}

export function removeContact(id) {
  return {
    type: "REMOVE_CONTACT",
    id
  };
}
```

Selanjutnya, buat reducer di **src/states/reducers.js**.

```javascript
import { combineReducers } from "redux";

function contacts(state = [], action) {
  switch (action.type) {
    case "ADD_CONTACT":
      // Menambahkan kontak baru kedalam daftar
      return [
        ...state,
        {
          id: action.id,
          name: action.name,
          phone: action.phone
        }
      ];
    case "REMOVE_CONTACT":
      // Menghapus kontak dari daftar
      return state.filter(contact => contact.id !== action.id);
    default:
      return state;
  }
}

const Reducers = combineReducers({
  contacts
  // Reducer lain yang mungkin kamu butuhkan
});

export default Reducers;
```

Sekarang buat store di **src/index.js**.

```javascript
import React from "react";
import ReactDOM from "react-dom";
import { Provider } from "react-redux";
import { createStore } from "redux";

import App from "./App";
import Reducers from "./states/reducers";

// Buat store dari reducer
const store = createStore(Reducers);

ReactDOM.render(
  // Buat store ada untuk semua container component
  // tanpa mem-passing-nya secara langsung
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById("root")
);
```

Lalu buat sebuah component sebagai container dari ContactItem di **src/components/ContactList.js**.

```javascript
import React from "react";

const ContactList = ({ children }) => (
  <div className="ContactList">{children}</div>
);

export default ContactList;
```

Dan buat component ContactItem itu sendiri di **src/components/ContactItem.js**.

```javascript
import React from "react";

const ContactItem = ({ name, phone, onClickDelete }) => (
  <div className="ContactItem">
    <p className="ContactItem__name">{name}</p>
    <p className="ContactItem__phone">{phone}</p>
    <button
      type="button"
      className="ContactItem__button"
      onClick={onClickDelete}
    >
      Delete
    </button>
  </div>
);

export default ContactItem;
```

Lalu kita memasukan fungsional nya di **src/App.js**.

```javascript
import React, { Component } from "react";
import { connect } from "react-redux";

import ContactList from "./components/ContactList";
import ContactItem from "./components/ContactItem";
import { addContact, removeContact } from "./states/actions";

class App extends Component {
  constructor(props) {
    super(props);

    this.state = {
      name: "",
      phone: ""
    };
  }

  render() {
    const { name, phone } = this.state;
    const { contacts, addNewContact, removeExistingContact } = this.props;

    return (
      <div className="App">
        <div className="App__form">
          <input
            type="text"
            value={name}
            onChange={event => this.setState({ name: event.target.value })}
            className="App__input"
            placeholder="Name"
          />
          <br />
          <input
            type="text"
            value={phone}
            onChange={event => this.setState({ phone: event.target.value })}
            className="App__input"
            placeholder="Phone"
          />
          <br />
          <button
            type="button"
            onClick={() => {
              if (!name || !phone) {
                alert("Field cannot be empty !");
                return;
              }

              this.setState({ name: "", phone: "" });
              addNewContact({ name, phone });
            }}
            className="App__button"
          >
            Add New Contact
          </button>
        </div>
        <ContactList>
          {contacts.map(contact => {
            return (
              <ContactItem
                key={contact.id}
                name={contact.name}
                phone={contact.phone}
                onClickDelete={() => removeExistingContact(contact.id)}
              />
            );
          })}
        </ContactList>
      </div>
    );
  }
}

// Mengambil state dari store dan mempassing nya
// kedalam component App sebagai props
const mapStateToProps = ({ contacts }) => ({
  contacts
});

// Membuat fungsional yang membutuhkan fungsi dispatch
const mapDispatchToProps = dispatch => ({
  addNewContact: contact => {
    dispatch(addContact(contact));
  },
  removeExistingContact: contactID => {
    dispatch(removeContact(contactID));
  }
});

export default connect(mapStateToProps, mapDispatchToProps)(App);
```

Inilah hasilnya. Kamu berhasil membuat aplikasi Kontak dengan beberapa fitur sederhana.

![Hasil Belajar](//images.ctfassets.net/m14gyryibp3h/44IR4421dVi3SihEcaCVuI/8c275b22b22b0a40fc3b5e1e7c50eb8a/learning-result.png)![Hasil Belajar](https://ucarecdn.com/a10da796-a0fe-4831-bf37-4d31482be744/)

## Kesimpulan

Aplikasi yang lebih besar pada umumnya memiliki state yang lebih rumit dan sulit untuk diatur. Tapi dengan Redux, kamu dapat membuat aplikasi dengan state yang lebih mudah diatur. Kamu dapat mengatur state aplikasi secara global. Maka dari itu, jangan ragu untuk menggunakan Redux jika state aplikasimu dirasa sudah mulai kompleks dan susah untuk diatur. Akhir kata, kamu dapat meng-clone contoh kode dengan tambahan style dari [repo](https://github.com/gattigaga/basic-redux) ini.

Cheers !


Penjelasan sederhana mengenai Redux dan bagaimana kamu dapat menggunakannya di proyekmu

Cara Mudah Menggunakan Redux

Terkadang kamu dipusingkan oleh bug dalam kode mu dikarenakan lupa memberi tanda semicolon di akhir baris atau mengimport package yang tidak ada. Kamu bisa-bisa menghabiskan banyak waktu bermenit-menit hingga berjam-jam hanya untuk menemukan kesalahan sepele itu. Apalagi jika kode mu memiliki style yang buruk dan bikin mata sakit. Jika itu terjadi, ada baiknya kamu mulai menggunakan ESLint dan Prettier.

ESLint adalah tools yang membantu developer untuk menemukan masalah pada kode Javascript mereka tanpa harus mengeksekusinya terlebih dahulu. Contoh masalahnya yaitu lupa menaruh semicolon di akhir baris, terlalu banyak indentasi, mengimport package yang tidak ada, menuliskan variable yang tidak akan digunakan, dan lain sebagainya. Masalah yang ada akan ditandai dengan garis bawah berwarna merah.

ESLint sangat fleksibel untuk dikustomisasi. Kamu dapat memilih dan menggunakan rules yang sudah ada, memilih style populer buatan komunitas atau perusahaan, atau bikin punyamu sendiri. Style ESLint yang sangat populer untuk digunakan antara lain yaitu Standard, Google, dan AirBnB.

Dan disisi lain, Prettier adalah code formatter yang dapat membuat kode mu terlihat rapi dan indah. Prettier akan menghapus style asli kode mu dan merubahnya menjadi bentuk yang mudah dipahami. Beberapa syntax yang disupport yaitu Javascript, JSX, Flow, Typescript, CSS, LESS, SCSS, JSON, GraphQL dan Markdown.

## Setup

Segera install ESLint dan Prettier melalui command line.

```bash
npm install --save-dev eslint prettier
```

Dan untuk ini akan kita gunakan style milik AirBnB.

```bash
./node_modules/.bin/eslint --init
```

![Menginstall ESLint dan Prettier](//images.ctfassets.net/m14gyryibp3h/3eHNHR0caTlnd2OmbcZb5R/1eb8843b74dddd2c98bef7f1b3d630c0/installing-eslint-and-prettier.png)

Setelah itu, kita harus mengintegrasikan Prettier dengan ESLint.

```bash
npm install --save-dev eslint-plugin-prettier
```

Terkadang akan ditemukan konflik formatting antara ESLint dan Prettier yang memiliki preferensi yang berbeda. Kamu harus menonaktifkan rules yang konflik dan tetap membiarkan rules lain yang tidak mempengaruhi Prettier.

Segera install **eslint-config-prettier** untuk menyelesaikannya.

```bash
npm install --save-dev eslint-config-prettier
```

Ubah file **.eslintrc.json** sebagai berikut.

```json
{
  "extends": [
    "airbnb-base",
    "prettier"
  ],
  "plugins": ["prettier"],
  "rules": {
    "prettier/prettier": "error"
  }
}
```

Okay, Kita akan menggunakan Visual Studio Code sebagai Text Editor dan akan menginterasikannya dengan tools diatas. Kamu dapat mendownloadnya [disini](https://code.visualstudio.com) lalu install ekstensi ESLint dan Prettier dari Marketplace.

![ESLint extension di VSCode](//images.ctfassets.net/m14gyryibp3h/4HXynN5Xwl1dwoTkYGtnnQ/55dae17321b48bb1bd80f6a62535302f/extension-eslint.png)

![Prettier extension di VSCode](//images.ctfassets.net/m14gyryibp3h/7hLiVrJNSB01kkuwBYAMfg/9fbf1d2d6e0ff5a551ad2800cf16f756/extension-prettier.png)

## Penggunaan

Dan sekarang kita akan mencobanya. Pertama, ada beberapa kesalahan pada contoh kode dibawah ini.

![Variable tak terpakai](//images.ctfassets.net/m14gyryibp3h/6tKfKs6r5Z6P64gqRVwZjv/bc0503a2c04a105def91289dddec0736/unused-variables.png)

![Menggunakan single quotes](//images.ctfassets.net/m14gyryibp3h/5xmcCMH8v4gPcBExi2APZv/37821f6317f87074cb01049a8898d365/using-single-quotes.png)

Sekarang kamu dapat menekan tombol **Ctrl + Shift + I**, dan Voila ! kode mu sekarang terlihat lebih rapi dari sebelumnya. (Garis bawah berwarna merah masih muncul karena ada variable yang tidak terpakai dan telah mengimport package yang tidak ada).

![Diformat dengan Prettier](//images.ctfassets.net/m14gyryibp3h/3WLlS7Sq89KoFh5p471g23/612b9e3b58f52ae0fbca2d7994a0bc6a/formatted-with-prettier.png)

## Kesimpulan

Seperti yang kita ketahui, ESLint dan Prettier adalah tools terbaik yang membuat developer lebih bahagia dan tidak khawatir lagi terhadap style kode dan terhindar dari lupa install package. Sekian.

Lihat bagaimana ESLint dan Prettier bisa membuat kode mu terlihat lebih baik

PerbedaanAntaraAuthenticationdanAuthorization

MemahamiReactHooks

MembuatGlobalStateDenganZustand

ImplementasiI18npadaReact

MenggunakanReactQueryuntukOlahDatakeServer

FetchingDatadenganReactQuery

MenanganiFormdenganFormik

MenggunakanuseRefdiReact

MengapaHarusMenyimpanTimestampdenganFormatUTC

ApaituOptimisticUpdate

TailwindCSSdanManfaatnya

AntaraVar,LetdanConst

MemahamiPureFunction

CaraMudahMenggunakanRedux

ESLintdanPrettieradalahKombinasiTerbaik

Perbedaan
Antara
Authentication
dan
Authorization

Memahami
React
Hooks

Membuat
Global
State
Dengan
Zustand

Implementasi
I18n
pada
React

Menggunakan
React
Query
untuk
Olah
Data
ke
Server

Fetching
Data
dengan
React
Query

Menangani
Form
dengan
Formik

Menggunakan
useRef
di
React

Mengapa
Harus
Menyimpan
Timestamp
dengan
Format
UTC

Apa
itu
Optimistic
Update

Tailwind
CSS
dan
Manfaatnya

Antara
Var,
Let
dan
Const

Memahami
Pure
Function

Cara
Mudah
Menggunakan
Redux

ESLint
dan
Prettier
adalah
Kombinasi
Terbaik