dev-redux: e. dynanic button

syeikhanritzmy · Sep 27, 2022 · a7b11e1 · a7b11e1
1 parent cd1727c
commit a7b11e1
Show file tree

Hide file tree

Showing 3 changed files with 46 additions and 15 deletions.
diff --git a/pages/players/[id].jsx b/pages/players/[id].jsx
@@ -56,16 +56,6 @@ export default function Profile() {
  dispatch(success());
  });
  }, [])
-
- if(status === 'loading'){
- return (
- <div className="container my-4">
- <div className="text-center">
- <h1>Loading...</h1>
- </div>
- </div>
- )
- }
 
  return(
  <div className={styles.profilePage + ' bg-dark'}>
@@ -97,7 +87,13 @@ export default function Profile() {
  <div className={ styles.skillBlock + " p-3 bg-danger text-center"}>
  {enableEdit ? 
  <Link href={ `/players/edit/${_userId}` }>
- <button className="btn btn-warning font-weight-bold btn-lg text-dark rounded-0">EDIT</button>
+ {status == 'loading' ? 
+ <button class="btn btn-warning font-weight-bold btn-lg text-dark rounded-0" type="button" disabled>
+ <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
+ Loading...
+ </button>
+ : 
+ <button className="btn btn-warning font-weight-bold btn-lg text-dark rounded-0">EDIT</button>}
  </Link> : ''}
  </div>
  </div>

diff --git a/pages/players/edit/[id].jsx b/pages/players/edit/[id].jsx
@@ -3,6 +3,8 @@ import { useRouter } from 'next/router'
 import { getDatabase, ref, onValue, update } from "firebase/database";
 import { getAuth, onAuthStateChanged } from "../../../firebase/clientApp";
 import { getDownloadURL, getStorage, ref as _ref, uploadBytes} from 'firebase/storage'
+import { useDispatch, useSelector } from "react-redux";
+import { processing, success } from "../../../store/statusSlice";
 import styles from "../../../styles/Profile.module.css"
 import Link from 'next/link'
 import Swal from 'sweetalert2';
@@ -31,11 +33,15 @@ export default function ProfileEdit() {
  const [_userId, setUserId] = useState('');
 
  const auth = getAuth();
-
  const router = useRouter()
+ const dispatch = useDispatch();
 
+ const status = useSelector(state => {
+ return state.status.status;
+ });
 
  useEffect(() => {
+ dispatch(processing());
  const pathname = window.location.pathname
  const getLastItem = thePath => thePath.substring(thePath.lastIndexOf('/') + 1)
  const userId = getLastItem(pathname)
@@ -51,6 +57,7 @@ export default function ProfileEdit() {
  score: data.score,
  url: data.url ?? "https://firebasestorage.googleapis.com/v0/b/fsw22-kelompok1.appspot.com/o/pexels-ron-lach-7848986.jpg?alt=media&token=8a222888-d8f9-4cf6-bc1f-9a744ab0bb5a",
  })
+ dispatch(success());
  });
  }, [])
 
@@ -148,9 +155,21 @@ export default function ProfileEdit() {
  <input type="text" readOnly className="form-control-plaintext text-light" name="score" id="total-score" value={ player.score } onChange={handleChange}/>
  </div>
  </div>
- <button className='btn btn-success me-3' type="submit">Save Profile</button>
+ { status == 'loading' ? <button class="btn btn-success me-3" type="button" disabled>
+ <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
+ Loading...
+ </button> :
+ <button className='btn btn-success me-3' type="submit">Save Profile</button>
+
+ }
  <Link href={`/players/${_userId}`}>
- <button className="btn btn-outline-success">Cancel</button>
+ {status == 'loading' ?
+ <button class="btn btn-outline-success" type="button" disabled>
+ <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
+ Loading...
+ </button>
+ :
+ <button className="btn btn-outline-success">Cancel</button>}
  </Link>
 
  </form>

diff --git a/pages/rank.jsx b/pages/rank.jsx
@@ -1,14 +1,22 @@
 import {useEffect, useState} from "react";
 import { query, orderByChild, limitToLast } from "firebase/database";
 import { getDatabase, ref, onValue } from "../firebase/clientApp";
+
+import { useDispatch, useSelector } from "react-redux";
+import { processing, success } from "../store/statusSlice";
 import Link from 'next/link'
 import styles from '../styles/Rank.module.css'
 
 export default function Rank() {
  const [player, setPlayer] = useState([]);
-
+ const status = useSelector(state => {
+ return state.status.status;
+ });
+
+ const dispatch = useDispatch();
 
  useEffect(() => {
+ dispatch(processing());
  const pathname = window.location.pathname
  const getLastItem = thePath => thePath.substring(thePath.lastIndexOf('/') + 1)
  const userId = getLastItem(pathname)
@@ -26,6 +34,7 @@ export default function Rank() {
  const y = x.sort((a, b) => b.score - a.score);
  console.log(y);
  setPlayer( y)
+ dispatch(success());
  });
  }, [])
 
@@ -40,9 +49,16 @@ export default function Rank() {
  <p className="text-center text-white">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et sequi quae ipsum unde consequatur fugiat exercitationem vel ipsa commodi? Velit.</p>
  <div className="d-block text-center">
  <Link href="/game/rps" >
+ { status == 'loading' ? 
+ <button class="btn btn-lg btn-block btn-warning my-4" type="button" disabled>
+ <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
+ Loading...
+ </button>
+ :
  <button className="btn btn-lg btn-block btn-warning my-4">
  PLAY NOW
  </button>
+ }
  </Link>
  </div>
  </div>