Muhamad Aziz

.gitignore

@@ -0,0 +1,23 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# production
+/build
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*

README.md

@@ -1,46 +1,44 @@
-# Aplikasi Kasir (Mini Project React) 
+# Aplikasi Kasir (Mini Project React)
 
 Sebuah toko kelontong, memerlukan sistem kasir sederhana.
 Buatlah sebuah Form pemesanan sederhana yang bisa membantu kasir toko mencatat pesanan pelanggan dan menghitung total item dan total harga.
 
-Release 1
--------------------------------------------------------------------
+## Release 1
+
 1. Install react application.
 
 2. Buat 1 buah page component dengan nama OrderPage.
 
 3. Buat 1 buah form order component dengan nama FormOrder, element yang harus ada :
 
-    ```
-    ~ `input nama barang
-    `~ input quantity barang
-    `~ input harga barang
-    `~ button submit
-    ```
-
-
+   ```
+   ~ `input nama barang
+   `~ input quantity barang
+   `~ input harga barang
+   `~ button submit
+   ```
 
 4. Masukan form kedalam page OrderPage
 
 5. Buat fungsi untuk handle FormOrder, action yang diinginkan seperti ini:
 
 6. ketika button submit di klik, maka akan menyimpan data dalam bentuk object dengan format sebagai berikut :
 
-    ```
-    {
-        nama: "Minyak Nonoli 2L",
-        harga: 25000,
-        quantity: 3
-    } 
-    ```
+   ```
+   {
+       nama: "Minyak Nonoli 2L",
+       harga: 25000,
+       quantity: 3
+   }
+   ```
 
-    tampilkan data kedalam console dengan console.log, dan bersihkan semua field inputan pada FormOrder sehingga user bisa menginput orderan baru tanpa perlu menghapus data didalam field inputan secara manual.
+   tampilkan data kedalam console dengan console.log, dan bersihkan semua field inputan pada FormOrder sehingga user bisa menginput orderan baru tanpa perlu menghapus data didalam field inputan secara manual.
 
-    tampilkan data kedalam console dengan console.log, dan bersihkan semua field inputan pada FormOrder sehingga user bisa menginput orderan baru tanpa perlu menghapus data didalam field inputan secara manual.
+   tampilkan data kedalam console dengan console.log, dan bersihkan semua field inputan pada FormOrder sehingga user bisa menginput orderan baru tanpa perlu menghapus data didalam field inputan secara manual.
 
 ## Release 2
 
-	Setelah component FormOrder berfungsi, selanjutnya kita akan menyimpan datanya di dalam OrderPage Component.
+    Setelah component FormOrder berfungsi, selanjutnya kita akan menyimpan datanya di dalam OrderPage Component.
 
 1. Import hooks useState, dan useEffect di dalam OrderPage component.
 
@@ -58,35 +56,53 @@ Release 1
 
 8. Lakukan uji coba, apakah form berhasil menambahkan data kedalam state orderItems ? Jika belum, coba di lihat lagi instruksi dan pastikan kamu sudah mengikuti semua instruksinya. Jika sudah, maka selamat kamu sudah berhasil menyelesaikan release 2
 
-
-
 ## Release 3
 
-	Setelah kita sukses menyimpan data dari FormOrder, maka saatnya kita menampilkan data tersebut kedalam user interface applikasi. 
+    Setelah kita sukses menyimpan data dari FormOrder, maka saatnya kita menampilkan data tersebut kedalam user interface applikasi.
 
 1. Buat sebuah component untuk menampilkan semua data dari state orderItems, beri nama component ini dengan nama DisplayListItems. Component ini akan menerima data dari OderPage dengan menggunakan props. **berikan nama props yang meaningfull !!**
-3. Buat sebuah component (**buat nama component yang meaningfull !!**) untuk menampilkan detail item, di dalam komponen ini harus menampilkan nama, harga dan quantity.
+2. Buat sebuah component (**buat nama component yang meaningfull !!**) untuk menampilkan detail item, di dalam komponen ini harus menampilkan nama, harga dan quantity.
 3. Masukan component yang bertugas menampilkan detail item kedalam komponen DisplayListItems, kemudian kirim props kedalam component tersebut (**gunakan function .map()**)
 4. Lakukan Uji coba, setiap submit form, apakah DisplayListItem bertambah ? Jika belum, coba di lihat lagi instruksi dan pastikan kamu sudah mengikuti semua instruksinya. Jika sudah, maka selamat kamu sudah berhasil menyelesaikan release 3
 
 ## Release 4
 
-	Detail dari tem-item belanja sudah ditampilkan pada aplikasi, saatnya kita menambahkan perhitungan pada detail item tersebut agar kasir tidak perlu repot menghitung harga total dari setiap detail item.
+    Detail dari tem-item belanja sudah ditampilkan pada aplikasi, saatnya kita menambahkan perhitungan pada detail item tersebut agar kasir tidak perlu repot menghitung harga total dari setiap detail item.
 
-1. Di dalam component yang bertugas menampilkan detail item, tambahkan sebuah HTML tag pada JSX untuk menampilkan total harga item tersebut.
+1.  Di dalam component yang bertugas menampilkan detail item, tambahkan sebuah HTML tag pada JSX untuk menampilkan total harga item tersebut.
 
-2. Tampilkan total harga pada HTML tag yg baru tersebut dengan formula sebagai berikut :
-> 	 	 quantity X harga
-3. Lakukan uji coba, setiap submit form, apakah total harga peritem yang tampil sudah benar ? Jika belum, coba perhatikan lagi tipe data yang kamu gunakan didalam form dan state, pastikan tipe data yang digunakan pada form dan state bisa digunakan untuk perhitungan matematika. Jika sudah, maka selamat kamu sudah berhasil menyelesaikan release 4
-
-
+2.  Tampilkan total harga pada HTML tag yg baru tersebut dengan formula sebagai berikut :
+    >      	 quantity X harga
+3.  Lakukan uji coba, setiap submit form, apakah total harga peritem yang tampil sudah benar ? Jika belum, coba perhatikan lagi tipe data yang kamu gunakan didalam form dan state, pastikan tipe data yang digunakan pada form dan state bisa digunakan untuk perhitungan matematika. Jika sudah, maka selamat kamu sudah berhasil menyelesaikan release 4
 
 ## Release 5
 
-	Kita sudah menampilkan total harga per-item. Selanjutnya kita perlu menghitung nominal total dari semua item yang ada.
+    Kita sudah menampilkan total harga per-item. Selanjutnya kita perlu menghitung nominal total dari semua item yang ada.
 
 1. Buatlah 1 buah component untuk menampilkan nominal total dari semua item yang ada.
-2. Masukan component ini kedalam OrderPage, Kirimkan data state orderItems dengan menggunakan props dalam component ini. gunakan meaningfull props name. 
+2. Masukan component ini kedalam OrderPage, Kirimkan data state orderItems dengan menggunakan props dalam component ini. gunakan meaningfull props name.
 3. Lakukan buatlah sebuah function yang dapat melakukan pengolahan data props yang diterima, sehingga bisa mendapatkan nominal total harga yang harus dibayarkan oleh customer.
 4. Tampilkan hasil pengolahan data tersebut kedalam JSX.
 5. Lakukan uji coba, setiap submit form, apakah nominal total sudah sesuai ? Jika belum, periksa kembali function pengolahan data, pastikan bisa menghasilkan output yang sesuai. Jika sudah, maka selamat kamu sudah berhasil menyelesaikan release 5
+
+## Release 6
+
+​ Aplikasi sudah jadi dan bisa digunakan oleh kasir toko. Namun tugas kita belum selesai, kita harus memperbaiki kode kita agar bisa lebih rapih serta penggunaan state lebih bisa di prediksi menggunakan redux dan react-redux.
+
+1. Install redux & react redux
+2. Buatlah sebuah reducer, pastikan initial state dan action.type yang di daftarkan pada reducer ini sesuai dengan aplikasi yang kita punya. Setelah reducernya jadi, lanjutkan dengan membuat Store.
+3. Pastikan data dari store bisa di akses oleh semua component pada aplikasi ini.
+4. Ubah cara kita menyimpan data aplikasi, yang semulanya kita menyimpan state di dalam component OrderPage menjadi menggunakan Redux.
+5. Pastikan semua component yang menerima props, diubah menjadi subscribe data dari store.
+6. Pastikan juga action pada FormOrder akan menyimpan data kedalam Redux.
+7. Lakukan uji coba, apakah aplikasi masih bisa berjalan sesuai dengan yang di harapkan ? Juka belum, ayo kita evaluasi kembali penggunaan redux dan react-redux dalam aplikasi kita. Jika sudah, maka selamat kamu sudah berhasil menyelesaikan release 6.
+
+## Release 7
+
+​ Well done, aplikasi kita sudah berjalan sesuai dengan yang diharapkan, serta sudah menggunakan state management redux sehingga bisa lebih preictable perubahan data yang terjadi. Selanjutnya kita akan mempercantik layout aplikasi kita, sehingga bagus untuk dilihat.
+
+1. install styled-components agar kamu bisa lebih leluasa menggunakan fitur yang disediakan oleh CSS
+2. Styling components yang menurutmu perlu dilakukan styling (**Wajib menggunakan styled-components**)
+3. Gunakan CSS framework untuk mempermudah pekerjaan styling, bisa menggunakan bootstrap, tailwind, MaterialUI, dsb.....
+4. Untuk mempermudah pemilihan warna yang digunakan (Jika menggunakan warna), bisa menggunakan bantuan color palettes dari https://flatuicolors.com/
+5. Review kembali tampilan yang sudah kamu styling, pastikan owner toko kelontong suka dengan design aplikasi yang sudah kamu buat.

craco.config.js

@@ -0,0 +1,7 @@
+module.exports = {
+  style: {
+    postcss: {
+      plugins: [require("tailwindcss"), require("autoprefixer")],
+    },
+  },
+};

package.json

@@ -0,0 +1,44 @@
+{
+  "name": "custom-form",
+  "version": "0.1.0",
+  "private": true,
+  "dependencies": {
+    "@craco/craco": "^6.1.1",
+    "@tailwindcss/postcss7-compat": "^2.1.0",
+    "@testing-library/jest-dom": "^5.11.4",
+    "@testing-library/react": "^11.1.0",
+    "@testing-library/user-event": "^12.1.10",
+    "autoprefixer": "^9",
+    "postcss": "^7",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
+    "react-scripts": "4.0.3",
+    "sweetalert2": "^10.15.7",
+    "tailwindcss": "npm:@tailwindcss/postcss7-compat",
+    "web-vitals": "^1.0.1"
+  },
+  "scripts": {
+    "start": "craco start",
+    "build": "craco build",
+    "test": "craco test",
+    "eject": "react-scripts eject"
+  },
+  "eslintConfig": {
+    "extends": [
+      "react-app",
+      "react-app/jest"
+    ]
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  }
+}

public/index.html

@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="theme-color" content="#000000" />
+    <meta
+      name="description"
+      content="Web site created using create-react-app"
+    />
+    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
+    <!--
+      manifest.json provides metadata used when your web app is installed on a
+      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
+    -->
+    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+    <!--
+      Notice the use of %PUBLIC_URL% in the tags above.
+      It will be replaced with the URL of the `public` folder during the build.
+      Only files inside the `public` folder can be referenced from the HTML.
+
+      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
+      work correctly both with client-side routing and a non-root public URL.
+      Learn how to configure a non-root public URL by running `npm run build`.
+    -->
+    <title>React App</title>
+  </head>
+  <body>
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <div id="root"></div>
+    <!--
+      This HTML file is a template.
+      If you open it directly in the browser, you will see an empty page.
+
+      You can add webfonts, meta tags, or analytics to this file.
+      The build step will place the bundled scripts into the <body> tag.
+
+      To begin the development, run `npm start` or `yarn start`.
+      To create a production bundle, use `npm run build` or `yarn build`.
+    -->
+  </body>
+</html>

public/manifest.json

@@ -0,0 +1,25 @@
+{
+  "short_name": "React App",
+  "name": "Create React App Sample",
+  "icons": [
+    {
+      "src": "favicon.ico",
+      "sizes": "64x64 32x32 24x24 16x16",
+      "type": "image/x-icon"
+    },
+    {
+      "src": "logo192.png",
+      "type": "image/png",
+      "sizes": "192x192"
+    },
+    {
+      "src": "logo512.png",
+      "type": "image/png",
+      "sizes": "512x512"
+    }
+  ],
+  "start_url": ".",
+  "display": "standalone",
+  "theme_color": "#000000",
+  "background_color": "#ffffff"
+}

public/robots.txt

@@ -0,0 +1,3 @@
+# https://www.robotstxt.org/robotstxt.html
+User-agent: *
+Disallow:

src/App.css

@@ -0,0 +1,38 @@
+.App {
+  text-align: center;
+}
+
+.App-logo {
+  height: 40vmin;
+  pointer-events: none;
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  .App-logo {
+    animation: App-logo-spin infinite 20s linear;
+  }
+}
+
+.App-header {
+  background-color: #282c34;
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  font-size: calc(10px + 2vmin);
+  color: white;
+}
+
+.App-link {
+  color: #61dafb;
+}
+
+@keyframes App-logo-spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}

src/App.js

@@ -0,0 +1,15 @@
+import "./App.css";
+
+// components
+import OrderPage from "./components/OrderPage";
+
+function App() {
+  return (
+    <div className="App">
+      <h3>Order Barang</h3>
+      <OrderPage />
+    </div>
+  );
+}
+
+export default App;

src/App.test.js

@@ -0,0 +1,8 @@
+import { render, screen } from '@testing-library/react';
+import App from './App';
+
+test('renders learn react link', () => {
+  render(<App />);
+  const linkElement = screen.getByText(/learn react/i);
+  expect(linkElement).toBeInTheDocument();
+});

src/components/DisplayListItems.js

@@ -0,0 +1,22 @@
+import React from "react";
+
+function DisplayListItems({ orderItems }) {
+  return (
+    <div className="bg-yellow-100">
+      <hr />
+      <p className="text-xl">Display Items</p>
+      <div>
+        {orderItems.map((item, index) => (
+          <div key={index}>
+            <p>Barang : {item.barang}</p>
+            <p>Harga : {item.harga}</p>
+            <p>Kuantitas : {item.quantity}</p>
+            <h3>Total Harga : {item.quantity * item.harga}</h3>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}
+
+export default DisplayListItems;