Terbang-Tinggi-App · aroyan · Jan 6, 2023 · Jan 6, 2023
diff --git a/public/index.html → index.html b/public/index.html → index.html
@@ -2,19 +2,20 @@
 <html lang="en">
   <head>
     <meta charset="utf-8" />
-    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
+    <link rel="icon" href="/favicon.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="theme-color" content="#000000" />
     <meta
       name="description"
       content="Terbang tinggi is a platfrom for booking flights with best price you can get"
     />
-    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
-    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+    <link rel="apple-touch-icon" href="/logo192.png" />
+    <link rel="manifest" href="/manifest.json" />
     <title>Terbang Tinggi | Best Price for Flights</title>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>
     <div id="root"></div>
+    <script type="module" src="/src/main.jsx"></script>
   </body>
 </html>
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -2,6 +2,7 @@
   "name": "terbangtinggi-client",
   "version": "1.0.0",
   "private": true,
+  "type": "module",
   "dependencies": {
     "@hookform/resolvers": "^2.9.10",
     "@react-oauth/google": "^0.5.0",
@@ -20,41 +21,24 @@
     "react-paginate": "^8.1.4",
     "react-redux": "^8.0.5",
     "react-router-dom": "^6.4.5",
-    "react-scripts": "5.0.1",
     "react-select": "^5.6.1",
     "react-toastify": "^9.1.1",
-    "web-vitals": "^2.1.4",
     "yup": "^0.32.11"
   },
   "scripts": {
-    "start": "react-scripts start",
-    "build": "react-scripts build",
-    "test": "react-scripts test",
-    "eject": "react-scripts eject",
+    "start": "",
+    "dev": "vite --port 3000",
+    "build": "vite build",
+    "preview": "vite preview",
     "lint": "eslint src/**/*.jsx",
     "lint:fix": "eslint src/**/*.jsx --fix",
     "format": "prettier --write './**/*.{js,jsx,ts,tsx,css,md,json}' --config ./.prettierrc"
   },
-  "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"
-    ]
-  },
   "devDependencies": {
     "@tailwindcss/forms": "^0.5.3",
+    "@types/react": "^18.0.26",
+    "@types/react-dom": "^18.0.9",
+    "@vitejs/plugin-react": "^3.0.0",
     "autoprefixer": "^10.4.13",
     "eslint": "^8.29.0",
     "eslint-config-airbnb": "^19.0.4",
@@ -65,6 +49,7 @@
     "eslint-plugin-react-hooks": "^4.6.0",
     "postcss": "^8.4.19",
     "prettier": "^2.8.1",
-    "tailwindcss": "^3.2.4"
+    "tailwindcss": "^3.2.4",
+    "vite": "^4.0.0"
   }
 }
diff --git a/postcss.config.js → postcss.config.cjs b/postcss.config.js → postcss.config.cjs
diff --git a/src/components/Layout/Navbar.jsx b/src/components/Layout/Navbar.jsx
@@ -13,6 +13,8 @@ import Logo from '../Icons/Logo';
 import CustomModal from '../Modal/CustomModal';
 import { getTransactionsData } from '../../redux/transactions/transactions.actions';
 
+const API_URL = import.meta.env.VITE_BASE_URL;
+
 function Navbar() {
   const [isOpen, setIsOpen] = useState(false);
   const [refresh, setRefresh] = useState(false);
@@ -28,7 +30,6 @@ function Navbar() {
 
   const isAdmin = role === 'Admin';
   const isUser = role === 'User';
-  const API_URL = process.env.REACT_APP_AUTH_API;
 
   const dispatch = useDispatch();
   const isValidUser = useValidUser();

diff --git a/src/index.jsx → src/main.jsx b/src/index.jsx → src/main.jsx
diff --git a/src/pages/Admin page/Pageuser.jsx b/src/pages/Admin page/Pageuser.jsx
@@ -7,7 +7,7 @@ import { useNavigate } from 'react-router-dom';
 import Spinner from '../../components/Layout/Spinner';
 
 export default function Pageuser() {
-  const API_URL = process.env.REACT_APP_AUTH_API;
+  const API_URL = import.meta.env.VITE_BASE_URL;
 
   const [user, setUser] = useState(null);
   const [page, setPage] = useState(1);

diff --git a/src/pages/Admin page/Ticket/CreateTicket.jsx b/src/pages/Admin page/Ticket/CreateTicket.jsx
@@ -79,7 +79,7 @@ export default function CreateTicket() {
     e.preventDefault();
     try {
       const response = await axios.post(
-        `${process.env.REACT_APP_AUTH_API}/flight/data`,
+        `${import.meta.env.VITE_BASE_URL}/flight/data`,
         {
           ...body
         },

diff --git a/src/pages/Admin page/Ticket/ListTicket.jsx b/src/pages/Admin page/Ticket/ListTicket.jsx
@@ -13,7 +13,7 @@ import CustomModal from '../../../components/Modal/CustomModal';
 import Spinner from '../../../components/Layout/Spinner';
 import { FormControl, Label } from '../../../components/Input';
 
-const BASE_URL = process.env.REACT_APP_AUTH_API;
+const BASE_URL = import.meta.env.VITE_BASE_URL;
 
 function ListTicket() {
   const [refetch, setRefetch] = useState(false);

diff --git a/src/pages/Admin page/Ticket/UpdateTicket.jsx b/src/pages/Admin page/Ticket/UpdateTicket.jsx
@@ -14,7 +14,7 @@ import {
 import { VStack } from '../../../components/Container';
 import Spinner from '../../../components/Layout/Spinner';
 
-const API_URL = process.env.REACT_APP_AUTH_API;
+const API_URL = import.meta.env.VITE_BASE_URL;
 
 export default function UpdateTicket() {
   const [data, setData] = useState(null);

diff --git a/src/pages/Booking/Booking.jsx b/src/pages/Booking/Booking.jsx
@@ -12,7 +12,7 @@ import { Layout } from '../../components/Layout';
 import TextSkeleton from '../../components/Layout/TextSkeleton';
 import CustomModal from '../../components/Modal/CustomModal';
 
-const API_URL = process.env.REACT_APP_AUTH_API;
+const API_URL = import.meta.env.VITE_BASE_URL;
 
 export function Booking() {
   const [data, setData] = useState([]);

diff --git a/src/pages/Booking/ETicket.jsx b/src/pages/Booking/ETicket.jsx
@@ -13,7 +13,7 @@ import Logo from '../../components/Icons/Logo';
 import TextSkeleton from '../../components/Layout/TextSkeleton';
 import Protected from '../../components/Routes/Protected';
 
-const API_URL = process.env.REACT_APP_AUTH_API;
+const API_URL = import.meta.env.VITE_BASE_URL;
 
 function ETicket() {
   const [ticketData, setTicketData] = useState(null);

diff --git a/src/pages/Booking/Payment.jsx b/src/pages/Booking/Payment.jsx
@@ -13,7 +13,7 @@ import Protected from '../../components/Routes/Protected';
 import TextSkeleton from '../../components/Layout/TextSkeleton';
 import ImageSkeleton from '../../components/Layout/ImageSkeleton';
 
-const API_URL = process.env.REACT_APP_AUTH_API;
+const API_URL = import.meta.env.VITE_BASE_URL;
 
 function Payment() {
   const [ticketData, setTicketData] = useState(null);

diff --git a/src/pages/Notifications/Notifications.jsx b/src/pages/Notifications/Notifications.jsx
@@ -9,9 +9,10 @@ import { Layout } from '../../components/Layout';
 import Protected from '../../components/Routes/Protected';
 import Spinner from '../../components/Layout/Spinner';
 
+const API_URL = import.meta.env.VITE_BASE_URL;
+
 export function Notifications() {
   const [notif, setNotif] = useState(null);
-  const API_URL = process.env.REACT_APP_AUTH_API;
   const [refresh, setRefresh] = useState(false);
 
   const unread = notif && notif.filter((x) => !x.is_read);

diff --git a/src/pages/Profile/User.jsx b/src/pages/Profile/User.jsx
@@ -10,9 +10,9 @@ import { Layout } from '../../components/Layout';
 import Spinner from '../../components/Layout/Spinner';
 import Protected from '../../components/Routes/Protected';
 
-function User() {
-  const API_URL = process.env.REACT_APP_AUTH_API;
+const API_URL = import.meta.env.VITE_BASE_URL;
 
+function User() {
   const [formData, setFormData] = useState(null);
 
   const save = (e) => {

diff --git a/src/pages/SearchResult/SearchResult.jsx b/src/pages/SearchResult/SearchResult.jsx
@@ -9,7 +9,7 @@ import { getSortedTicket } from '../../utils/tickets';
 import CustomModal from '../../components/Modal/CustomModal';
 import SearchFlightsForm from '../../components/Input/SearchFlightsForm';
 
-const BASE_URL = process.env.REACT_APP_AUTH_API;
+const BASE_URL = import.meta.env.VITE_BASE_URL;
 
 export function SearchResult() {
   const [resultData, setResultData] = useState(null);

diff --git a/src/pages/Transaction/Transaction.jsx b/src/pages/Transaction/Transaction.jsx
@@ -9,7 +9,7 @@ import { Layout } from '../../components/Layout';
 import Spinner from '../../components/Layout/Spinner';
 import Protected from '../../components/Routes/Protected';
 
-const API_URL = process.env.REACT_APP_AUTH_API;
+const API_URL = import.meta.env.VITE_BASE_URL;
 
 export default function Transaction() {
   const [data, setData] = useState(null);

diff --git a/src/pages/detail/Detail.jsx b/src/pages/detail/Detail.jsx
@@ -13,9 +13,10 @@ import { BsFillPinMapFill, BsTelephonePlusFill } from 'react-icons/bs';
 import Protected from '../../components/Routes/Protected';
 import Spinner from '../../components/Layout/Spinner';
 
+const API_URL = import.meta.env.VITE_BASE_URL;
+
 export default function Detail() {
   const [detail, setDetail] = useState(null);
-  const API_URL = process.env.REACT_APP_AUTH_API;
   const { id } = useParams();
 
   useEffect(() => {

diff --git a/src/redux/airport/airport.actions.js b/src/redux/airport/airport.actions.js
@@ -2,7 +2,7 @@ import axios from 'axios';
 
 import { _setAirport } from './airport.slice';
 
-const BASE_URL = process.env.REACT_APP_AUTH_API;
+const BASE_URL = import.meta.env.VITE_BASE_URL;
 
 export const setAirport = () => async (dispatch) => {
   const response = await axios.get(`${BASE_URL}/airport/indonesia`);

diff --git a/src/redux/ticket/ticket.actions.js b/src/redux/ticket/ticket.actions.js
@@ -2,7 +2,7 @@ import axios from 'axios';
 
 import { _setTicketData, _resetData, _getAllTickets } from './ticket.slice';
 
-const BASE_URL = process.env.REACT_APP_AUTH_API;
+const BASE_URL = import.meta.env.VITE_BASE_URL;
 
 export const setTicketData =
   ({

diff --git a/src/redux/transactions/transactions.actions.js b/src/redux/transactions/transactions.actions.js
@@ -2,7 +2,7 @@ import axios from 'axios';
 
 import { _getTransactionsData } from './transactions.slice';
 
-const API_URL = process.env.REACT_APP_AUTH_API;
+const API_URL = import.meta.env.VITE_BASE_URL;
 
 export const getTransactionsData = () => async (dispatch) => {
   const { data } = await axios.get(`${API_URL}/transaction`, {

diff --git a/src/redux/user/user.actions.js b/src/redux/user/user.actions.js
@@ -3,7 +3,7 @@ import { toast } from 'react-toastify';
 
 import { _login, _register, _logout, whoami, setError, _myprofile } from './user.slice';
 
-const API_URL = process.env.REACT_APP_AUTH_API;
+const API_URL = import.meta.env.VITE_BASE_URL;
 const token = localStorage.getItem('token');
 
 export const login =

diff --git a/tailwind.config.cjs b/tailwind.config.cjs
@@ -0,0 +1,38 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: ['./index.html', './src/**/*.{js,jsx,ts,tsx}'],
+  theme: {
+    extend: {
+      colors: {
+        brand: '#512bd4',
+        'brand-lighter': {
+          100: '#EEEAFB',
+          200: '#DCD5F6',
+          300: '#CBBFF2',
+          400: '#B9AAEE',
+          500: '#A895EA',
+          600: '#9780E5',
+          700: '#856BE1',
+          800: '#7455DD',
+          900: '#6240D8'
+        },
+        'brand-darker': {
+          100: '#080415',
+          200: '#10092A',
+          300: '#180D40',
+          400: '#201155',
+          500: '#29166A',
+          600: '#311A7F',
+          700: '#391E94',
+          800: '#4122AA',
+          900: '#4927BF'
+        }
+      }
+    }
+  },
+  plugins: [require('daisyui')],
+  daisyui: {
+    darkTheme: 'light',
+    themes: false
+  }
+};
diff --git a/tailwind.config.js b/tailwind.config.js
diff --git a/vite.config.js b/vite.config.js
@@ -0,0 +1,8 @@
+/* eslint-disable import/no-extraneous-dependencies */
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [react()]
+});