add react-router

backend/package.json

@@ -1,4 +1,9 @@
 {
+    "name": "KIKI",
+    "author": "Chankan, Technical, Dragon",
+    "licence": "MIT",
+    "version": "1.0.0",
+    "private": false,
     "browserslist": {
         "production": [
             ">0.2%",
@@ -11,7 +16,6 @@
             "last 1 safari version"
         ]
     },
-    "private": true,
     "scripts": {
         "dev": "npm run development",
         "development": "mix",
@@ -31,7 +35,7 @@
         "@material-ui/lab": "^5.0.0-alpha.40",
         "@material-ui/styles": "^5.0.0-beta.1",
         "@mui/icons-material": "^5.2.4",
-        "@mui/material": "^5.2.6",
+        "@mui/material": "^5.2.7",
         "@react-pdf-viewer/core": "^3.0.0",
         "@react-pdf-viewer/default-layout": "^3.0.0",
         "clipboard-copy": "^4.0.1",
@@ -46,13 +50,13 @@
         "react-dom": "^17.0.2",
         "react-infinite-scroll-component": "^6.1.0",
         "react-pdf": "^5.4.0",
-        "react-router": "^5.2.1",
-        "react-router-dom": "^5.3.0"
+        "react-router-dom": "^6.2.1",
+        "react-scripts": "^5.0.0"
     },
     "devDependencies": {
-        "@babel/core": "^7.15.5",
+        "@babel/core": "^7.16.7",
         "@babel/eslint-parser": "^7.14.7",
-        "@babel/preset-react": "^7.0.0",
+        "@babel/preset-react": "^7.16.7",
         "axios": "^0.21.4",
         "babel-loader": "^8.2.3",
         "babel-preset-es2015-loose": "^8.0.0",
@@ -62,7 +66,7 @@
         "eslint-config-prettier": "^8.3.0",
         "eslint-config-react-app": "^6.0.0",
         "eslint-plugin-flowtype": "^5.8.1",
-        "eslint-plugin-import": "^2.23.4",
+        "eslint-plugin-import": "^2.25.4",
         "eslint-plugin-jsx-a11y": "^6.4.1",
         "eslint-plugin-prettier": "^3.4.0",
         "eslint-plugin-react": "^7.26.1",
@@ -73,7 +77,7 @@
         "postcss": "^8.3.9",
         "prettier": "^2.3.1",
         "resolve-url-loader": "^3.1.2",
-        "sass": "^1.42.1",
+        "sass": "^1.45.2",
         "sass-loader": "^8.0.0"
     }
 }

backend/resources/js/admin/child/detail.jsx

@@ -1,5 +1,5 @@
 import React, { useRef, useEffect, useState } from 'react';
-import { useHistory, Link } from 'react-router-dom';
+import { useNavigate, Link } from 'react-router-dom';
 
 import IconButton from "@material-ui/core/IconButton";
 import PhotoCameraOutlinedIcon from '@mui/icons-material/PhotoCameraOutlined';
@@ -12,7 +12,7 @@ import ModalConfirm from '../../component/modal_confirm';
 
 const AdminChildDetail = (props) => {
 
-    const history = useHistory();
+    const navigator = useNavigate();
 
     const [image, setImage] = useState('');
     const [loaded, setLoaded] = useState(false);
@@ -22,7 +22,7 @@ const AdminChildDetail = (props) => {
 
     const [_400error, set400Error] = useState('');
     const [_422errors, set422Errors] = useState({ image: '' });
-    const [_success, setSuccess] = useState(props.history.location.state);
+    const [_success, setSuccess] = useState(props.location.state);
     const [show_confirm_modal, setShowConfirmModal] = useState(false);
 
     const isMountedRef = useRef(true);
@@ -79,7 +79,7 @@ const AdminChildDetail = (props) => {
             setSubmit(false);
             switch(response.data.status_code){
                 case 200:{
-                    history.push({pathname: "/admin/child", state: "削除に成功しました！"});
+                    navigator("/admin/child", {state: "削除に成功しました！"});
                     break;
                 }
                 case 400:  set400Error("削除に失敗しました。"); break;

backend/resources/js/admin/child/edit.jsx

@@ -1,5 +1,5 @@
 import React, { useRef, useEffect, useState } from 'react';
-import { useHistory } from 'react-router-dom';
+import { useNavigate } from 'react-router-dom';
 import { LoadingButton } from '@material-ui/lab';
 
 import Alert from '../../component/alert';
@@ -8,7 +8,7 @@ import PageLoader from '../../component/page_loader';
 
 const AdminChildEdit = (props) => {
 
-    const history = useHistory();
+    const history = useNavigate();
 
     const [first_name, setFirstName] = useState('');
     const [last_name, setLastName] = useState('');  

backend/resources/js/admin/child/password_edit.jsx

@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import { useHistory } from 'react-router-dom';
+import { useNavigate } from 'react-router-dom';
 import { LoadingButton } from '@material-ui/lab';
 
 import Alert from '../../component/alert';
@@ -7,7 +7,7 @@ import Alert from '../../component/alert';
 
 const AdminChildPasswordEdit = (props) => {
 
-    const history = useHistory();
+    const history = useNavigate();
 
     const [password, setPassword] = useState('');
     const [password_confirmation, setConfirmPassword] = useState('');

backend/resources/js/admin/login/index.jsx

@@ -113,6 +113,9 @@ const AdminLogin = () => {
 }
 
 
+export default AdminLogin;
+
+
 // ----------------------------------------------------------------------
 if(document.getElementById('admin-login')){
 	ReactDOM.render(

backend/resources/js/admin/meeting/detail.jsx

@@ -1,5 +1,5 @@
 import { useRef, useEffect, useState } from 'react';
-import { useHistory, Link } from 'react-router-dom';
+import { useNavigate, Link } from 'react-router-dom';
 import moment from 'moment';
 
 import Alert from '../../component/alert';
@@ -11,7 +11,7 @@ import PageLoader from '../../component/page_loader';
 
 const AdminMeetingDetail = (props) => {
 
-  const history = useHistory();
+  const history = useNavigate();
   const [loaded, setLoaded] = useState(false);
   const [submit, setSubmit] = useState(false);
   const [meeting, setMeeting] = useState(null);

backend/resources/js/admin/meeting/edit.jsx

@@ -1,5 +1,5 @@
 import React, { useRef, useEffect, useState } from 'react';
-import { useHistory } from 'react-router-dom';
+import { useNavigate } from 'react-router-dom';
 import { LoadingButton } from '@material-ui/lab';
 import IconButton from '@mui/material/IconButton';
 import RemoveIcon from '@mui/icons-material/Remove';
@@ -11,7 +11,7 @@ import UploadingProgress from '../../component/modal_uploading';
 
 const AdminMeetingEdit = (props) => {
     const meeting_id = props.match.params.meeting_id;
-    const history = useHistory();
+    const history = useNavigate();
     const [meeting, setMeeting] = useState(null);
     const [title, setTitle] = useState('');
     const [memo, setMemo] = useState('');

backend/resources/js/admin/parent/add.jsx

@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import { useHistory } from 'react-router-dom';
+import { useNavigate } from 'react-router-dom';
 import { LoadingButton } from '@material-ui/lab';
 
 import Alert from '../../component/alert';
@@ -7,7 +7,7 @@ import Alert from '../../component/alert';
 
 const AdminParentAdd = () => {
 
-    const history = useHistory();
+    const history = useNavigate();
 
     const [email, setEmail] = useState('');
     const [limit, setLimit] = useState('');

backend/resources/js/admin/parent/detail.jsx

@@ -1,5 +1,5 @@
 import React, { useRef, useEffect, useState } from 'react';
-import { useHistory, Link } from 'react-router-dom';
+import { useNavigate, Link } from 'react-router-dom';
 
 import IconButton from "@material-ui/core/IconButton";
 import PhotoCameraOutlinedIcon from '@mui/icons-material/PhotoCameraOutlined';
@@ -17,7 +17,7 @@ const Transition = React.forwardRef(function Transition(props, ref) {
 
 const AdminParentDetail = (props) => {
 
-    const history = useHistory();
+    const history = useNavigate();
 
     const [image, setImage] = useState('');
     const [loaded, setLoaded] = useState(false);

backend/resources/js/admin/parent/edit.jsx

@@ -1,12 +1,12 @@
 import React, { useRef, useEffect, useState } from 'react';
-import { useHistory } from 'react-router-dom';
+import { useNavigate } from 'react-router-dom';
 import { LoadingButton } from '@material-ui/lab';
 import Alert from '../../component/alert';
 import PageLoader from '../../component/page_loader';
 
 const AdminParentEdit = (props) => {
 
-    const history = useHistory();
+    const history = useNavigate();
 
     const [company, setCompany] = useState('');
     const [email, setEmail] = useState('');

backend/resources/js/admin/parent/password_edit.jsx

@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import { useHistory } from 'react-router-dom';
+import { useNavigate } from 'react-router-dom';
 import { LoadingButton } from '@material-ui/lab';
 
 import Alert from '../../component/alert';
@@ -7,7 +7,7 @@ import Alert from '../../component/alert';
 
 const AdminParentPasswordEdit = (props) => {
 
-    const history = useHistory();
+    const history = useNavigate();
 
     const [password, setPassword] = useState('');
     const [password_confirmation, setConfirmPassword] = useState('');

backend/resources/js/app.js

@@ -1,12 +1,14 @@
 require('./bootstrap');
 
-require('./pages/pages');
+// require('./pages/pages');
 
-require('./admin');
-require('./admin/login');
+// require('./admin');
+// require('./admin/login');
 
-require('./parent');
-require('./parent/auth');
+// require('./parent');
+// require('./parent/auth');
 
-require('./child');
-require('./child/auth');
+// require('./child');
+// require('./child/auth');
+
+require('./index')

backend/resources/js/child/auth/forgot_password/reset.jsx

@@ -1,12 +1,12 @@
 import React, { useState } from 'react';
-import { useHistory } from 'react-router';
+import { useNavigate } from 'react-router-dom';
 import { LoadingButton } from '@material-ui/lab';
 
 import Alert from '../../../component/alert';
 
 const ChildForgotPasswordReset = (props) => {
 
-    const history = useHistory();
+    const history = useNavigate();
     const [submit, setSubmit] = useState(false);
 
     const [password, setPassword] = useState('');

backend/resources/js/child/auth/register/index.jsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from 'react';
-import { useHistory } from 'react-router';
+import { useNavigate } from 'react-router-dom';
 import { LoadingButton } from '@material-ui/lab';
 
 import IconButton from "@material-ui/core/IconButton";
@@ -7,7 +7,7 @@ import PhotoCameraOutlinedIcon from '@mui/icons-material/PhotoCameraOutlined';
 
 const ChildSignUp = (props) => {
 
-    const history = useHistory();
+    const history = useNavigate();
     const [submit, setSubmit] = useState(false);
     const [loaded, setLoaded] = useState(false);
 

backend/resources/js/child/meeting/detail.jsx

@@ -1,5 +1,5 @@
 import React, { useRef, useEffect, useState } from 'react';
-import { Link, useHistory } from 'react-router-dom';
+import { Link, useNavigate } from 'react-router-dom';
 
 import Notification from '../../component/notification';
 import moment from 'moment';
@@ -12,7 +12,7 @@ import PageLoader from '../../component/page_loader';
 
 const ChildMeetingDetail = (props) => {
 
-    const history = useHistory();
+    const history = useNavigate();
     const child_id = localStorage.getItem('kiki_acc_id');
     const [notice, setNotice] = useState(localStorage.getItem('notice'));
     

backend/resources/js/child/parent/detail.jsx

@@ -1,5 +1,5 @@
 import React, { useRef, useEffect, useState } from 'react';
-import { useHistory } from 'react-router-dom';
+import { useNavigate } from 'react-router-dom';
 
 import Notification from '../../component/notification';
 import Alert from '../../component/alert';
@@ -7,7 +7,7 @@ import PageLoader from '../../component/page_loader';
 
 const ChildParentDetail = (props) => {
 
-    const history = useHistory();
+    const history = useNavigate();
     const [notice, setNotice] = useState(localStorage.getItem('notice'));
     const [loaded, setLoaded] = useState(false);
     const [parent, setParent] = useState(null);

backend/resources/js/child/parent/index.jsx

@@ -1,5 +1,5 @@
 import React, { useRef, useEffect, useState } from 'react';
-import { useHistory, Link } from 'react-router-dom';
+import { useNavigate, Link } from 'react-router-dom';
 
 import Notification from '../../component/notification';
 import Alert from '../../component/alert';
@@ -11,7 +11,7 @@ const SCROLL_DELAY_TIME = 1500;
 
 const ChildParents = () => {
     
-    const history = useHistory();
+    const history = useNavigate();
     const child_id = localStorage.getItem('kiki_acc_id');
     const [notice, setNotice] = useState(localStorage.getItem('notice'));
     

backend/resources/js/child/profile/edit.jsx

@@ -1,5 +1,5 @@
 import React, { useRef, useEffect, useState } from 'react';
-import { useHistory } from 'react-router-dom';
+import { useNavigate } from 'react-router-dom';
 import { LoadingButton } from '@material-ui/lab';
 
 import Notification from '../../component/notification';
@@ -9,7 +9,7 @@ import PageLoader from '../../component/page_loader';
 
 const ChildProfileEdit = () => {
 
-    const history = useHistory();
+    const history = useNavigate();
     const child_id = localStorage.getItem('kiki_acc_id');
     const [notice, setNotice] = useState(localStorage.getItem('notice'));
 

backend/resources/js/child/profile/index.jsx

@@ -1,5 +1,5 @@
 import React, { useRef, useEffect, useState } from 'react';
-import { useHistory, Link } from 'react-router-dom';
+import { useNavigate, Link } from 'react-router-dom';
 import IconButton from "@material-ui/core/IconButton";
 import PhotoCameraOutlinedIcon from '@mui/icons-material/PhotoCameraOutlined';
 
@@ -11,7 +11,7 @@ import copy from 'clipboard-copy';
 
 const ChildProfileDetail = (props) => {
 
-    const history = useHistory();
+    const history = useNavigate();
     const child_id = localStorage.getItem('kiki_acc_id');
     const [notice, setNotice] = useState(localStorage.getItem('notice'));
 

backend/resources/js/child/profile/password_edit.jsx

@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import { useHistory } from 'react-router-dom';
+import { useNavigate } from 'react-router-dom';
 import { LoadingButton } from '@material-ui/lab';
 
 import Notification from '../../component/notification';
@@ -8,7 +8,7 @@ import Alert from '../../component/alert';
 
 const ChildProfilePasswordEdit = () => {
 
-    const history = useHistory();
+    const history = useNavigate();
     const child_id = localStorage.getItem('kiki_acc_id');
     const [notice, setNotice] = useState(localStorage.getItem('notice'));
 

backend/resources/js/component/notification.jsx

@@ -1,9 +1,9 @@
 import React, { useEffect } from 'react';
-import { useHistory, useLocation } from 'react-router-dom';
+import { useNavigate, useLocation } from 'react-router-dom';
 
 const Notification = ({ notice }) => {
     
-    const history = useHistory();
+    const history = useNavigate();
     const { pathname } = useLocation();
 
     const handleClick = () => {

backend/resources/js/component/password_reset_complete.jsx

@@ -1,10 +1,10 @@
 import React, { useEffect, useState } from 'react';
 import { Button } from '@material-ui/core';
-import { useHistory, useLocation } from 'react-router';
+import { useNavigate, useLocation } from 'react-router-dom';
 
 const PasswordResetComplete = () => {
 
-    const history = useHistory();
+    const history = useNavigate();
     const { pathname } = useLocation();
 
     const gotoLogin = () => {

backend/resources/js/component/register/complete.jsx

@@ -1,11 +1,11 @@
 import React, { useState } from 'react';
 import { Button } from '@material-ui/core';
-import { useHistory, useLocation } from 'react-router';
+import { useNavigate, useLocation } from 'react-router-dom';
 import Alert from '../alert';
 
 const SignUpComplete = (props) => {
 
-    const history = useHistory();
+    const history = useNavigate();
     const { pathname } = useLocation();
     const [_success, setSuccess] = useState(props.history.location.state);
     

backend/resources/js/index.js

@@ -0,0 +1,22 @@
+import ReactDOM from 'react-dom';
+import { BrowserRouter, useRoutes } from 'react-router-dom';
+import routes from './routes';
+
+import ScrollToTop from './component/scroll_top';
+
+
+const App = () => {
+  const routing = useRoutes(routes);
+  return routing;
+};
+
+
+if(document.getElementById('p-auth')){
+  ReactDOM.render((
+    <BrowserRouter>
+      <ScrollToTop />
+      <App />
+    </BrowserRouter>
+  ), document.getElementById('p-auth'));
+}
+

backend/resources/js/layout/DashboardLayout.js

@@ -0,0 +1,15 @@
+import { Outlet } from 'react-router-dom';
+import PageChangeHandler from '../component/page_change_handler';
+
+const DashboardLayout = ({side}) => {
+
+  return (
+    <main className="l-container meeting-consent">
+      <PageChangeHandler />
+      <Outlet />
+      {side}
+    </main>
+  );
+};
+
+export default DashboardLayout;

backend/resources/js/layout/MainLayout.js

@@ -0,0 +1,16 @@
+import { Outlet } from 'react-router-dom';
+
+const MainLayout = () => {
+
+  return (
+    <main className="l-single-main">
+        <div className="l-centeringbox">
+            <div className="l-centeringbox-wrap">
+                <Outlet />
+            </div>
+        </div>
+    </main>
+  );
+};
+
+export default MainLayout;

backend/resources/js/pages/contact/index.jsx

@@ -1,12 +1,12 @@
 import React, { useState } from 'react';
-import { useHistory } from 'react-router-dom';
+import { useNavigate } from 'react-router-dom';
 import { LoadingButton } from '@material-ui/lab';
 
 import Alert from '../../component/alert';
 
 const Contact = () => {
 
-    const history = useHistory();
+    const history = useNavigate();
 
     const [email, setEmail] = useState('');
     const [message, setMessage] = useState('');

backend/resources/js/pages/contact/unknown.jsx

@@ -1,12 +1,12 @@
 import React, { useState } from 'react';
-import { useHistory } from 'react-router-dom';
+import { useNavigate } from 'react-router-dom';
 import { LoadingButton } from '@material-ui/lab';
 
 import Alert from '../../component/alert';
 
 const UnknownError = () => {
     
-    const history = useHistory();
+    const history = useNavigate();
     const [email, setEmail] = useState('');
     const [message, setMessage] = useState('');
     const [submit, setSubmit] = useState(false);

backend/resources/js/parent/auth/forgot_password/reset.jsx

@@ -1,12 +1,12 @@
 import React, { useState } from 'react';
-import { useHistory } from 'react-router';
+import { useNavigate } from 'react-router-dom';
 import { LoadingButton } from '@material-ui/lab';
 
 import Alert from '../../../component/alert';
 
 const ParentForgotPasswordReset = (props) => {
 
-    const history = useHistory();
+    const history = useNavigate();
     const [submit, setSubmit] = useState(false);
 
     const [password, setPassword] = useState('');

backend/resources/js/parent/auth/register/index.jsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from 'react';
-import { useHistory } from 'react-router';
+import { useNavigate } from 'react-router-dom';
 import { LoadingButton } from '@material-ui/lab';
 import IconButton from "@material-ui/core/IconButton";
 import PhotoCameraOutlinedIcon from '@mui/icons-material/PhotoCameraOutlined';
@@ -9,7 +9,7 @@ import Alert from '../../../component/alert';
 
 const ParentSignUp = (props) => {
 
-    const history = useHistory();
+    const history = useNavigate();
     const [submit, setSubmit] = useState(false);
     const [loaded, setLoaded] = useState(false);
 

backend/resources/js/parent/child/detail.jsx

@@ -1,5 +1,5 @@
 import React, { useRef, useEffect, useState } from 'react';
-import { Link, useHistory } from 'react-router-dom';
+import { Link, useNavigate } from 'react-router-dom';
 
 import moment from 'moment';
 import Notification from '../../component/notification';
@@ -9,7 +9,7 @@ import PageLoader from '../../component/page_loader';
 
 const ParentChildDetail = (props) => {
 
-    const history = useHistory();
+    const history = useNavigate();
     const [notice, setNotice] = useState(localStorage.getItem('notice'));
     const [loaded, setLoaded] = useState(false);
     const [show_delete, setShowDelete] = useState(false);

backend/resources/js/parent/child/edit.jsx

@@ -8,11 +8,11 @@ import { LoadingButton } from '@material-ui/lab';
 import Notification from '../../component/notification';
 import Alert from '../../component/alert';
 import PageLoader from '../../component/page_loader';
-import { useHistory } from 'react-router';
+import { useNavigate } from 'react-router-dom';
 
 const ParentChildEdit = (props) => {
 
-  const history = useHistory();
+  const history = useNavigate();
   const [notice, setNotice] = useState(localStorage.getItem('notice'));
   const [_success, setSuccess] = useState('');
   const [_400error, set400Error] = useState('');

backend/resources/js/parent/child/index.jsx

@@ -1,5 +1,5 @@
 import React, { useRef, useEffect, useState } from 'react';
-import { useHistory, Link } from 'react-router-dom';
+import { useNavigate, Link } from 'react-router-dom';
 
 import Notification from '../../component/notification';
 import Alert from '../../component/alert';
@@ -11,7 +11,7 @@ const SCROLL_DELAY_TIME = 1500;
 
 const ParentChilds = (props) => {
 
-    const history = useHistory();
+    const history = useNavigate();
     const [notice, setNotice] = useState(localStorage.getItem('notice'));
     const father_id = localStorage.getItem('kiki_acc_id');
     

backend/resources/js/parent/meeting/add.jsx

@@ -1,5 +1,5 @@
 import React, { useRef, useEffect, useState } from 'react';
-import { useHistory } from 'react-router-dom';
+import { useNavigate } from 'react-router-dom';
 import { LoadingButton } from '@material-ui/lab';
 import IconButton from '@mui/material/IconButton';
 import RemoveIcon from '@mui/icons-material/Remove';
@@ -12,7 +12,7 @@ import UploadingProgress from '../../component/modal_uploading';
 
 const ParentMeetingAdd = (props) => {
 
-    const history = useHistory();
+    const history = useNavigate();
     const father_id = localStorage.getItem('kiki_acc_id');
     const [notice, setNotice] = useState(localStorage.getItem('notice'));
     

backend/resources/js/parent/meeting/detail.jsx

@@ -1,6 +1,6 @@
 import React, { useRef, useEffect, useState } from 'react';
 import moment from 'moment';
-import { useHistory, Link } from 'react-router-dom';
+import { useNavigate, Link } from 'react-router-dom';
 
 import ModalEditMemo from '../../component/modal_edit_memo';
 import ModalConfirm from '../../component/modal_confirm';
@@ -13,7 +13,7 @@ import PageLoader from '../../component/page_loader';
 
 const ParentMeetingDetail = (props) => {
 
-  const history = useHistory();
+  const history = useNavigate();
   const [notice, setNotice] = useState(localStorage.getItem('notice'));
   const father_id = localStorage.getItem('kiki_acc_id');
   

backend/resources/js/parent/meeting/edit.jsx

@@ -1,5 +1,5 @@
 import React, { useRef, useEffect, useState } from 'react';
-import { useHistory } from 'react-router-dom';
+import { useNavigate } from 'react-router-dom';
 import { LoadingButton } from '@material-ui/lab';
 import IconButton from '@mui/material/IconButton';
 import RemoveIcon from '@mui/icons-material/Remove';
@@ -15,7 +15,7 @@ import UploadingProgress from '../../component/modal_uploading';
 
 const ParentMeetingEdit = (props) => {
 
-    const history = useHistory();
+    const history = useNavigate();
     const father_id = localStorage.getItem('kiki_acc_id');
     const meeting_id = props.match.params.meeting_id;
     const [notice, setNotice] = useState(localStorage.getItem('notice'));

backend/resources/js/parent/profile/edit.jsx

@@ -3,11 +3,11 @@ import { LoadingButton } from '@material-ui/lab';
 import Notification from '../../component/notification';
 import Alert from '../../component/alert';
 import PageLoader from '../../component/page_loader';
-import { useHistory } from 'react-router';
+import { useNavigate } from 'react-router-dom';
 
 const ParentProfileEdit = () => {
 
-  const history = useHistory();
+  const history = useNavigate();
   const father_id = localStorage.getItem('kiki_acc_id');
   const [notice, setNotice] = useState(localStorage.getItem('notice'));
 

backend/resources/js/parent/profile/index.jsx

@@ -1,5 +1,5 @@
 import React, { useRef, useEffect, useState } from 'react';
-import { useHistory, Link } from 'react-router-dom';
+import { useNavigate, Link } from 'react-router-dom';
 import IconButton from "@material-ui/core/IconButton";
 import PhotoCameraOutlinedIcon from '@mui/icons-material/PhotoCameraOutlined';
 
@@ -8,7 +8,7 @@ import PageLoader from '../../component/page_loader';
 import Notification from '../../component/notification';
 
 const ParentProfileDetail = (props) => {
-    const history = useHistory();
+    const history = useNavigate();
     const father_id = localStorage.getItem('kiki_acc_id');
     const [notice, setNotice] = useState(localStorage.getItem('notice'));
 

backend/resources/js/parent/profile/password_edit.jsx

@@ -1,12 +1,12 @@
 import { useState } from 'react';
-import { useHistory } from 'react-router-dom';
+import { useNavigate } from 'react-router-dom';
 import { LoadingButton } from '@material-ui/lab';
 import Notification from '../../component/notification';
 import Alert from '../../component/alert';
 
 
 const ParentProfilePasswordEdit = () => {
-    const history = useHistory();
+    const history = useNavigate();
     const father_id = localStorage.getItem('kiki_acc_id');
     const [notice, setNotice] = useState(localStorage.getItem('notice'));
     

backend/resources/js/routes.js

@@ -0,0 +1,222 @@
+import DashboardLayout from './layout/DashboardLayout';
+import MainLayout from './layout/MainLayout';
+
+/*====================================
+               Admin
+===================================*/
+import AdminMeetings from './admin/meeting';
+import AdminMeetingDetail from './admin/meeting/detail';
+import AdminMeetingEdit from './admin/meeting/edit';
+
+import AdminChilds from './admin/child';
+import AdminChildDetail from './admin/child/detail';
+import AdminChildEdit from './admin/child/edit';
+import AdminChildPasswordEdit from './admin/child/password_edit';
+
+import AdminParents from './admin/parent';
+import AdminParentDetail from './admin/parent/detail';
+import AdminParentEdit from './admin/parent/edit';
+import AdminParentPasswordEdit from './admin/parent/password_edit';
+import AdminParentAdd from './admin/parent/add';
+
+import AdminSide from './admin/side';
+
+import AdminLogin from './admin/login';
+
+
+/*====================================
+            p-account
+===================================*/
+import ParentMeetings from './parent/meeting';
+import ParentMeetingDetail from './parent/meeting/detail';
+import ParentMeetingAdd from './parent/meeting/add';
+import ParentMeetingEdit from './parent/meeting/edit';
+
+import ParentFavorite from './parent/favorite';
+import ParentSearch from './parent/search';
+
+import ParentChilds from './parent/child';
+import ParentChildAdd from './parent/child/add';
+import ParentChildEdit from './parent/child/edit';
+import ParentChildDetail from './parent/child/detail';
+
+import ParentProfileDetail from './parent/profile';
+import ParentProfileEdit from './parent/profile/edit';
+import ParentProfilePasswordEdit from './parent/profile/password_edit';
+import ParentProfileWithdrawal from './parent/profile/withdrawal';
+
+import ParentSide from './parent/side';
+
+/*------------------------------------*/
+import ParentForgotPassword from './parent/auth/forgot_password';
+import ParentForgotPasswordReset from './parent/auth/forgot_password/reset';
+import ParentLogin from './parent/auth/login';
+import ParentSignUp from './parent/auth/register';
+
+import PasswordResetComplete from './component/password_reset_complete';
+import SignUpComplete from './component/register/complete';
+import SignUpError from './component/register/error';
+import WithdrawalComplete from './component/withdrawal_complete';
+
+
+
+/*====================================
+            c-account
+===================================*/
+import ChildSide from './child/side';
+
+import ChildMeetings from './child/meeting';
+import ChildMeetingDetail from './child/meeting/detail';
+
+import ChildParents from './child/parent';
+import ChildParentDetail from './child/parent/detail';
+
+import ChildProfileDetail from './child/profile';
+import ChildProfileEdit from './child/profile/edit';
+import ChildProfilePasswordEdit from './child/profile/password_edit';
+import ChildProfileWithdrawal from './child/profile/withdrawal';
+
+import ChildSearch from './child/search';
+
+/*--------------------------------*/
+import ChildForgotPassword from './child/auth/forgot_password';
+import ChildForgotPasswordReset from './child/auth/forgot_password/reset';
+import ChildLogin from './child/auth/login';
+import ChildSignUpTemporary from './child/auth/register/temporary';
+import ChildSignUp from './child/auth/register';
+
+
+/*====================================
+               pages
+===================================*/
+import Contact from './pages/contact/index';
+import ContactComplete from './pages/contact/complete';
+import UnknownError from './pages/contact/unknown';
+
+
+
+
+
+
+
+
+const routes = [
+    {
+        path: 'admin',
+        element: <DashboardLayout side={AdminSide}/>,
+        children: [
+            { path: 'meeting', element: <AdminMeetings /> },   
+            { path: 'meeting/detail/:meeting_id', element: <AdminMeetingDetail /> },   
+            { path: 'meeting/edit/:meeting_id', element: <AdminMeetingEdit /> },   
+
+            { path: 'child', element: <AdminChilds /> },   
+            { path: 'child/detail/:child_id', element: <AdminChildDetail /> },   
+            { path: 'child/edit/:child_id', element: <AdminChildEdit /> },   
+            { path: 'child/edit/password/:child_id', element: <AdminChildPasswordEdit /> },   
+    
+            { path: 'parent', element: <AdminParents /> },   
+            { path: 'parent/detail/:father_id', element: <AdminParentDetail /> },   
+            { path: 'parent/edit/:father_id', element: <AdminParentEdit /> },   
+            { path: 'parent/edit/password/:father_id', element: <AdminParentPasswordEdit /> },   
+            { path: 'parent/register', element: <AdminParentAdd /> },   
+        ]
+    },
+    {
+        path: 'p-account',
+        element: <DashboardLayout side={ParentSide}/>,
+        children: [
+            { path: 'meeting', element: <ParentMeetings /> },
+            { path: 'meeting/detail/:meeting_id', element: <ParentMeetingDetail /> },
+            { path: 'meeting/new', element: <ParentMeetingAdd /> },
+            { path: 'meeting/edit/:meeting_id', element: <ParentMeetingEdit /> },
+
+            { path: 'favorite', element: <ParentFavorite /> },
+            { path: 'search', element: <ParentSearch /> },
+
+            { path: 'child', element: <ParentChilds /> },
+            { path: 'child/add', element: <ParentChildAdd /> },
+            { path: 'child/edit/hire-date/:child_id', element: <ParentChildEdit /> },
+            { path: 'child/detail/:child_id', element: <ParentChildDetail /> },
+
+            { path: 'profile', element: <ParentProfileDetail /> },
+            { path: 'profile/edit/:father_id', element: <ParentProfileEdit /> },
+            { path: 'profile/edit/password/:father_id', element: <ParentProfilePasswordEdit /> },
+            { path: 'profile/withdrawal', element: <ParentProfileWithdrawal /> },
+        ]
+    },
+    {
+        path: 'c-account',
+        element: <DashboardLayout side={ChildSide}/>,
+        children: [
+            { path: 'meeting', element: <ChildMeetings /> },
+            { path: 'meeting/detail/:meeting_id', element: <ChildMeetingDetail /> },
+
+            { path: 'search', element: <ChildSearch /> },
+            { path: 'parent', element: <ChildParents /> },
+            { path: 'parent/detail/:father_id', element: <ChildParentDetail /> },
+
+            { path: 'profile', element: <ChildProfileDetail /> },
+            { path: 'profile/edit/:child_id', element: <ChildProfileEdit /> },
+            { path: 'profile/password-edit/:child_id', element: <ChildProfilePasswordEdit /> },
+            { path: 'profile/withdrawal', element: <ChildProfileWithdrawal /> },
+        ]
+    },
+    {
+        path: 'admin',
+        element: <MainLayout />,
+        children: [
+            { path: 'login', element: <AdminLogin /> },
+        ]
+    },
+    {
+        path: 'p-account',
+        element: <MainLayout />,
+        children: [
+            { path: 'register/:token', element: <ParentSignUp /> },
+            { path: 'register/complete/:token', element: <SignUpComplete /> },
+            { path: 'register/error/:token', element: <SignUpError /> },
+            
+            { path: 'forgot-password', element: <ParentForgotPassword /> },
+            { path: 'forgot-password/reset/:token', element: <ParentForgotPasswordReset /> },
+            { path: 'forgot-password/complete', element: <PasswordResetComplete /> },
+            
+            { path: 'login', element: <ParentLogin /> },
+            { path: 'withdrawal/complete', element: <WithdrawalComplete /> },
+        ]
+    },
+    {
+        path: 'c-account',
+        element: <MainLayout />,
+        children: [
+            { path: 'register-temporary', element: <ChildSignUpTemporary /> },
+            { path: 'register/:token', element: <ChildSignUp /> },
+            { path: 'register/complete/:token', element: <SignUpComplete /> },
+            { path: 'register/error/:token', element: <SignUpError /> },
+
+            { path: 'forgot-password', element: <ChildForgotPassword /> },
+            { path: 'forgot-password/reset/:token', element: <ChildForgotPasswordReset /> },
+            { path: 'forgot-password/complete', element: <PasswordResetComplete /> },
+            
+            { path: 'login', element: <ChildLogin /> },
+            { path: 'withdrawal/complete', element: <WithdrawalComplete /> },
+        ]
+    },
+    {
+        path: '/',
+        element: <MainLayout />,
+        children: [
+            { path: 'contact-us', element: <Contact /> },
+            { path: 'contact-us/complete', element: <ContactComplete /> },
+            { path: 'unknown-error', element: <UnknownError /> },
+        ]
+    },
+];
+
+export default routes;
+
+
+
+
+
+
+