Fakultas Ilmu Komputer UI

Skip to content
GitLab
Commit 1484ea96 authored by Aji Inisti Udma Wijaya's avatar Aji Inisti Udma Wijaya
Browse files

Merge branch 'staging' into 'PBI-22-Registrasi_dan_Login_Google_Auth' 

# Conflicts:
#   src/App.js
parents b4315f7f 32b7765c
Expand all Hide whitespace changes
Inline Side-by-side
package-lock.json
View file @ 1484ea96
This diff is collapsed.
src/App.js
View file @ 1484ea96
import './App.css';
import { useState } from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import Activate from './page/Aktivasi/Aktivasi';
import DaftarToko from './page/DaftarToko/DaftarToko';
import Navbar from './components/Navbar/Navbar';
import Footer from './components/Footer/Footer';
import Home from './components/Home/Home';
......@@ -9,11 +11,15 @@ import RegistrasiMitra from './page/RegistrasiMitra/RegistrasiMitra';
import Profile from './page/Profile/Profile';
import Login from './page/Login';
import Layout from './hocs/Layout';
import { fetch_user } from './util/prerender';
import { Provider } from 'react-redux';
import store from './store';
function App() {
const [loading, setLoading] = useState(true);
if (loading) fetch_user(store, setLoading);
if (loading) return <p>Loading...</p>;
return (
<Provider store={store}>
<Router>
......@@ -39,6 +45,9 @@ function App() {
</Route>
<Route path="/aktivasi/:uid/:token" component={Activate}>
</Route>
<Route path="/daftar-toko">
<DaftarToko />
</Route>
<Route exact path="/">
<Home />
</Route>
......
src/actions/auth.test.js
View file @ 1484ea96
......@@ -193,7 +193,7 @@ describe('signup mitra',() => {
})
describe('activation',() => {
it('dispatch ACTIVATION_SUCCESS ', () => {
it('dispatch ACTIVATION_SUCCESS', () => {
const expectedActions = [
{ type: types.ACTIVATION_SUCCESS }
]
......
src/components/NavProfile/NavProfile.css 0 → 100644
View file @ 1484ea96
.wkd-profile-toggle {
width: initial;
margin: 0;
}
\ No newline at end of file
src/components/NavProfile/NavProfile.js
View file @ 1484ea96
......@@ -8,6 +8,7 @@ import MenuList from '@material-ui/core/MenuList';
import { makeStyles } from '@material-ui/core/styles';
import { ChevronDown, ChevronUp } from 'react-feather';
import profile from './profile.svg';
import { Link } from 'react-router-dom'
const useStyles = makeStyles((theme) => ({
root: {
......@@ -60,8 +61,8 @@ export default function NavProfile(props) {
data-testid="nav-profile-icon"
>
<img src={profile} alt="profile icon"/>
{!open && <ChevronDown color='#146A5F'/>}
{open && <ChevronUp color='#146A5F'/>}
{!open && <ChevronDown className="wkd-profile-toggle" color='#146A5F'/>}
{open && <ChevronUp className="wkd-profile-toggle" color='#146A5F'/>}
</div>
......@@ -74,7 +75,7 @@ export default function NavProfile(props) {
<Paper>
<ClickAwayListener onClickAway={handleClose}>
<MenuList autoFocusItem={open} id="menu-list-grow" onKeyDown={handleListKeyDown} data-testid="nav-profile-menulist">
<MenuItem onClick={handleClose} data-testid='profile-menu'>Profil</MenuItem>
<MenuItem onClick={handleClose} data-testid='profile-menu'><Link to="/profile">Profil</Link></MenuItem>
<MenuItem onClick={handleClose}>Portofolio</MenuItem>
<MenuItem onClick={props.handleLogout}>Keluar</MenuItem>
</MenuList>
......
src/components/NavProfile/NavProfile.test.js
View file @ 1484ea96
......@@ -3,7 +3,7 @@ import { render, waitFor } from '@testing-library/react';
import '@testing-library/jest-dom';
import userEvent from '@testing-library/user-event';
import Navbar from '../Navbar/Navbar';
import { BrowserRouter } from 'react-router-dom';
import { BrowserRouter, MemoryRouter, Route } from 'react-router-dom';
import { Provider } from 'react-redux';
import { createStore } from 'redux';
import reducers from '../../reducer';
......@@ -15,20 +15,20 @@ const StoreProvider = (initialState = {auth: {isAuthenticated: false}}, Router =
describe('<NavProfile />', () => {
it('renders correctly', () => {
const { getByTestId, queryByTestId } = render(<NavProfile />);
const { getByTestId, queryByTestId } = render(<BrowserRouter><NavProfile /></BrowserRouter>);
expect(getByTestId('nav-profile')).toBeInTheDocument();
expect(queryByTestId('nav-profile-dropdownmenu')).not.toBeInTheDocument();
});
it('should open dropdown menu on profile icon click', () => {
const { getByTestId } = render(<NavProfile />);
const { getByTestId } = render(<BrowserRouter><NavProfile /></BrowserRouter>);
userEvent.click(getByTestId('nav-profile-icon'));
expect(getByTestId('nav-profile-dropdownmenu')).toBeInTheDocument();
});
it('should not close dropdown menu on arrow up/down event', () => {
const { getByTestId } = render(<NavProfile />);
const { getByTestId } = render(<BrowserRouter><NavProfile /></BrowserRouter>);
userEvent.click(getByTestId('nav-profile-icon'));
userEvent.type(getByTestId('nav-profile-menulist'), '{arrowup}');
......@@ -61,10 +61,31 @@ describe('<NavProfile />', () => {
it('should call handleLogout function on Keluar menu clicked', () => {
const mockFn = jest.fn();
const { getByText, getByTestId } = render(<NavProfile handleLogout={mockFn} />);
const { getByText, getByTestId } = render(<BrowserRouter><NavProfile handleLogout={mockFn} /></BrowserRouter>);
userEvent.click(getByTestId('nav-profile-icon'));
userEvent.click(getByText('Keluar'));
expect(mockFn).toBeCalled();
});
it('should redirect to Profile page on Profile menu clicked', () => {
let testLocation;
const { getByText, getByTestId } = render(
<MemoryRouter initialEntries={["/"]}>
<Navbar />
<Route
path="*"
render={({ location }) => {
testLocation = location;
return null;
}}
/>
</MemoryRouter>,
{wrapper: StoreProvider({auth: {isAuthenticated: true}}) }
);
userEvent.click(getByTestId('nav-profile-icon'));
userEvent.click(getByText('Profil'));
expect(testLocation.pathname).toBe("/profile");
});
});
src/page/Aktivasi/Aktivasi.test.js
View file @ 1484ea96
......@@ -5,7 +5,6 @@ import store from '../../store';
import '@testing-library/jest-dom';
import { BrowserRouter,Route } from 'react-router-dom'
import { Provider } from 'react-redux'
import axios from 'axios'
jest.mock('axios')
......
src/page/DaftarToko/DaftarToko.css 0 → 100644
View file @ 1484ea96
.required {
font-weight: bold;
color: #e32;
}
.required label:after {
color: #e32;
content: ' *';
display:inline;
}
.upload-button {
color :rgb(142, 142, 142);
width: 80px;
height: 80px;
margin: 10px 20px 10px 0px;
background:rgb(251, 249, 249);
border-radius: 10px;
}
.date-range-picker {
width : 40px;
height: 40px;
}
.DateInput.DateInput_1{
width: 47%;
height: 40px;
font-size: 8px;
font-weight: normal;
line-height: normal;
padding: 0px;
}
.DateInput_input.DateInput_input_1{
font-size: 16px;
}
.DateRangePickerInput.DateRangePickerInput_1.DateRangePickerInput__withBorder.DateRangePickerInput__withBorder_2{
width: 100%;
height: 45px;
border-radius: none;
border: none;
border-color: white;
padding:0px;
align-content: center;
}
.DateRangePickerInput__withBorder {
border-radius: 0px;
padding:0px;
border: none;
}
#tata-start-date, #tata-end-date{
width: 360px;
height: 35px;
margin: auto;
padding: 0px;
text-align: center;
}
.DateRangePickerInput_arrow.DateRangePickerInput_arrow_1{
margin-left: 11px;
margin-right: 11px;
}
.css-yk16xz-control,.css-tlfecz-indicatorContainer{
height: 38px;
}
.css-tj5bde-Svg{
margin-top: 0;
margin-bottom: 0;
}
\ No newline at end of file
src/page/DaftarToko/DaftarToko.js 0 → 100644
View file @ 1484ea96
import 'react-dates/initialize';
import './DaftarToko.css'
import WalkiddieGoogleMaps from './WalkiddieGoogleMaps.js'
import 'bootstrap/dist/css/bootstrap.min.css';
import { DateRangePicker } from 'react-dates';
import 'react-calendar/dist/Calendar.css';
import 'react-dates/lib/css/_datepicker.css';
import AlurPendaftaran from './daftar-toko.svg';
import React, { useState } from 'react';
import Select from 'react-select';
import { Link, Redirect } from 'react-router-dom';
import { connect } from 'react-redux';
import axios from 'axios';
const DaftarToko = ({ isAuthenticated }) => {
const [formData, setFormData] = useState({
namaToko: '',
namaCabang: '',
tipeUsaha: '',
nomorTelepon: '',
deskripsiToko: '',
lokasiToko: '',
latitude: -6.364520803098946,
longitude: 106.82922538589406,
mediaTokoList: [],
paketMainan: '',
totalBiaya: '',
periodePengadaanMulai: '',
periodePengadaanAkhir: '',
estimasiKeuangan: ''
});
const {
namaToko,
namaCabang,
tipeUsaha,
nomorTelepon,
deskripsiToko,
lokasiToko,
latitude,
longitude,
mediaTokoList,
paketMainan,
totalBiaya,
periodePengadaanMulai,
periodePengadaanAkhir,
estimasiKeuangan
} = formData;
const [startDate, setStartDate] = useState(null);
const [endDate, setEndDate] = useState(null);
const [focusedInput, setFocusedInput] = useState(null);
let file = '';
const onChange = e => setFormData({ ...formData, [e.target.name]: e.target.value });
const handleDatesChange = ({ startDate, endDate }) => {
setStartDate(startDate);
console.log("startDate");
console.log(startDate);
setEndDate(endDate);
console.log("endDate")
console.log(endDate)
if (startDate !== null && endDate !== null) {
setFormData({
...formData,
periodePengadaanMulai: startDate.format("YYYY-MM-DD"),
periodePengadaanAkhir: endDate.format("YYYY-MM-DD")
})
console.log("startDate.format(YYYY-MM-DD)");
console.log(startDate.format("YYYY-MM-DD"));
console.log(endDate.format("YYYY-MM-DD"))
}
};
const handleChangeFile = (event) => {
setFormData({ ...formData, mediaTokoList: event.target.files });
}
const dataPilihanMainan = [
{
value: "PaketA",
label: "Paket A (2 kiddie ride + 1 claw machine)"
},
{
value: "PaketB",
label: "Paket B (2 kiddie ride )"
},
{
value: "PaketC",
label: "Paket C (1 kiddie ride + 1 claw machine)"
}
];
const [selectedValue, setSelectedValue] = useState("PaketA");
const handleChange = e => {
setSelectedValue(e.value);
if (e.value === "PaketA"){
setFormData({...formData, totalBiaya:1000000, paketMainan: e.value})
}else if (e.value === "PaketB"){
setFormData({...formData, totalBiaya:900000, paketMainan: e.value})
}else {
setFormData({...formData, totalBiaya:800000, paketMainan: e.value})
}
}
const handleSubmit = e => {
// e.preventDefault();
<Redirect to="/" />
postDaftarToko();
}
const postDaftarToko = () => {
if (localStorage.getItem('access')) {
console.log("inside if");
var formDataToSend = new FormData();
const config = {
headers: {
'Content-Type': 'multipart/form-data',
'Authorization': `JWT ${localStorage.getItem('access')}`,
}
};
console.log("paketMainan " + paketMainan);
console.log("totalBiaya " + totalBiaya);
console.log("startDate " + startDate);
console.log("endDate " + endDate);
formDataToSend.append('namaToko', namaToko);
formDataToSend.append('namaCabang', namaCabang);
formDataToSend.append('tipeUsaha', tipeUsaha);
formDataToSend.append('nomorTelepon', nomorTelepon);
formDataToSend.append('deskripsiToko', deskripsiToko);
formDataToSend.append('lokasiToko', lokasiToko);
formDataToSend.append('longitude', longitude);
formDataToSend.append('latitude', latitude);
formDataToSend.append('paketMainan', paketMainan);
for (let file of mediaTokoList) {
console.log(file);
formDataToSend.append('mediaToko', file);
}
formDataToSend.append('totalBiaya', totalBiaya);
formDataToSend.append('periodePengadaanMulai', periodePengadaanMulai);
formDataToSend.append('periodePengadaanAkhir', periodePengadaanAkhir);
formDataToSend.append('estimasiKeuangan', estimasiKeuangan);
try {
axios.post(`${process.env.REACT_APP_BACKEND_API_URL}/api/toko/`, formDataToSend, config)
.then((response) => {
console.log(response);
}, (error) => {
if (error.response) {
console.log("error.response")
console.log(error.response)
} else if (error.request) {
console.log("error.request")
console.log(error.request)
} else if (error.message) {
console.log("error.message")
console.log(error.message)
}
console.log(error);
});
console.log('Success post');
} catch (err) {
console.log('Error post');
}
} else {
console.log('missing token');
}
}
if (!isAuthenticated) return <Redirect to="/masuk" />
return (
<div>
<div className="wkd-home-sect-2-bg"
style={{
height: '400px',
maxWidth: '1500px'
}}
>
<div className="wkd-home-sect-2-container"
style={{
marginBottom: '100px'
}}
>
<img src={AlurPendaftaran} alt="Walkiddie Icon"></img>
</div>
</div>
<div className="wkd-home-sect-3-container">
<div className="wkd-home-banner-card"
style={{
borderRadius: '7px'
}}
>
<div
style={{
textAlign: 'left'
}}>
<h2> Pendaftaran Toko </h2>
<p>Daftarkan toko anda dan raih keuntungannya</p>
<br></br>
<h3 className="midtext" ><span>Informasi Toko</span></h3>
<br></br>
<form className="centered" onSubmit={handleSubmit}>
<div className="justify-content-center">
<div className="form-group row">
<label for='namaToko' class="col-sm-3 col-form-label"> <span class="required"> * </span> Nama Toko </label>
<div class="col-sm-9">
<input
id='namaToko'
className='form-control'
type='text'
placeholder='Tuliskan Nama Toko'
name='namaToko'
value={namaToko}
onChange={e => onChange(e)}
required
/>
</div>
</div>
<div className="form-group row">
<label for='namaCabang' class="col-sm-3 col-form-label"> Nama Cabang (pilihan) :</label>
<div class="col-sm-9">
<input
id='namaCabang'
className='form-control'
type='text'
placeholder='Tuliskan nama cabang (jika memiliki lebih dari satu outlet)'
name='namaCabang'
value={namaCabang}
onChange={e => onChange(e)}
required
/>
</div>
</div>
<div className="form-group row">
<label for='tipeUsaha' class="col-sm-3 col-form-label"> <span class="required"> * </span> Tipe Usaha :</label>
<div class="col-sm-9">
<input
id='tipeUsaha'
className='form-control'
type='text'
placeholder='Tuliskan nama usaha (Contoh: Restoran, toko baju, dll.) '
name='tipeUsaha'
value={tipeUsaha}
onChange={e => onChange(e)}
required
/>
</div>
</div>
<div className="form-group row">
<label for='nomorTelepon' class="col-sm-3 col-form-label"> <span class="required"> * </span> Nomor Telepon :</label>
<div class="col-sm-9">
<input
id='nomorTelepon'
className='form-control'
type="number" pattern="[0-9]*" inputmode="numeric"
placeholder='Tuliskan nomor telepon toko'
name='nomorTelepon'
value={nomorTelepon}
onChange={e => onChange(e)}
required
/>
</div>
</div>
<div className="form-group row">
<label for='deskripsiToko' class="col-sm-3 col-form-label"> <span class="required"> * </span> Deskripsi Toko :</label>
<div class="col-sm-9">
<textarea
id='deskripsiToko'
className='form-control'
type='text'
rows='4'
placeholder='Tuliskan deskripsi singkat toko'
name='deskripsiToko'
value={deskripsiToko}
onChange={e => onChange(e)}
required
/>
</div>
</div>
<div className="form-group row">
<label for='lokasiToko' class="col-sm-3 col-form-label"> <span class="required"> * </span>Foto/Video Toko (tampak depan/tampak belakang/video):</label>
<div class="col-sm-9">
<input
type="file"
name="file"
accept="video/*,image/*"
onChange={e => handleChangeFile(e)}
ref={(input) => { file = input; }} multiple />
</div>