Levitating Balls

suvel rathneswar⚛️ — Tue, 11 Apr 2023 17:50:02 +0000

I was working on a task and suddenly this idea kicked in, so I took help from Chatgpt to draft a simple html app and improved it.

index.html

<!DOCTYPE html>
<html>
  <head>
    <title>Levitating Balls</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <div class="container">
      <p class="small-title">Quick app ✨</p>
      <h1 class="title">Levitating Balls</h1>
      <div class="balls-container">
        <div id="ball-mid" class="ball"></div>
        <div class="ball"></div>
        <div class="ball"></div>
        <div class="ball"></div>
        <div class="ball"></div>
        <div class="ball"></div>
        <div class="ball"></div>
        <div class="ball"></div>
        <div class="ball"></div>
      </div>
    </div>

    <script src="script.js"></script>
  </body>
</html>

style.css

body {
  margin: 0;
  padding: 0;
}

.container {
  height: 100vh;
  position: relative;
  display: grid;
  place-content: center;
  overflow: hidden;
  background: blue;
}

.title {
  font-size: 8em;
  font-family: monospace;
  color: white;
}

.small-title {
  font-size: 2em;
  font-family: monospace;
  color: white;
  text-align: start;
}

.balls-container {
  height: 100%;
  width: 100%;
  position: absolute;
}

.ball {
  position: absolute;
  width: 8em;
  height: 8em;
  border: 3px solid rgb(255, 255, 255);
  background-color: blue;
  border-radius: 50%;
  transition: transform 2s;
}

script.js

const balls = document.getElementsByClassName('ball');

let drop = 0;
setInterval(() => {
  console.log({ drop });
  for (let i = 0; i < balls.length; i++) {
    if (drop) {
      console.log('top');
      balls[i].style.transform = `translateY(${Math.random() * 90}vh)`;
    } else {
      balls[i].style.transform = `translateY(${90}vh)`;
    }
    balls[i].style.transform += `translateX(${Math.random() * 90}vw)`;
    const zIndex = parseInt(Math.random() * 3);
    console.log({zIndex})
    balls[i].style.zIndex = `${zIndex}`;
  }
  drop = !drop;
}, [2000]);

Redirect uri does not contain ? and hits an un-known page in React Router

suvel rathneswar⚛️ — Wed, 05 Apr 2023 03:16:46 +0000

🦨 If your application is adding "&state=" to the url after Keyclock is initialized, then this documentation might help you 🚑.

TLDR

👉 By default, when the responseMode is set to 'fragment', Keycloak adds the state parameter to the URL fragment. However, when the responseMode is set to 'query', the state parameter is added to the query string instead.

keycloak
    .init({ 
    onLoad: 'login-required',
    //add the below line 👇
    responseMode: 'query' 
    })

👉 Alternate solution, use BrowerRouter * without responseMode* (default to 'fragment')

Sample project example

Dependencies information

    "keycloak-js": "^19.0.2",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-router-dom": "^6.3.0",
    "react-scripts": "5.0.1",
    "universal-cookie": "^4.0.4"

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import { HashRouter } from 'react-router-dom';
import App from './App';

ReactDOM.render(
  <HashRouter>
    <App />
  </HashRouter>,
  document.getElementById('root')
);

App.js

import './App.css';
import { Route, Routes, Navigate, Link } from 'react-router-dom';
import NotFound from './NotFound';
import components from './page';
import appRoutes from './appRoutes';

const { Login } = components;

function App() {
  return (
    <>
      <div style={{ display: 'flex', gap: '10px' }}>
        <Link to={'/login'}>Login</Link>
        <Link to={'/a'}>A</Link>
        <Link to={'/b'}>B</Link>
        <Link to={'/c'}>C</Link>
      </div>
      <hr />
      <Routes element>
        <Route path='/' element={<Navigate to={'/login'} />} />
        <Route path='login' element={<Login />} />
        {appRoutes}
        <Route path='*' element={<NotFound />} />
      </Routes>
    </>
  );
}

export default App;

appRoutes.js

import { Route, Outlet, useLocation, useNavigate } from 'react-router-dom';
import components from './page';
import Cookies from 'universal-cookie';
import keycloak from './keyclock';

const { A, A1, A2, A3, B, C } =
  components;

const cookie = new Cookies();

const publicPath = ['/a', '/a/a1'];

const SecureRoutes = () => {
  const isGuestUser = JSON.parse(cookie.get('isGuest'));
  const location = useLocation();
  const navigate = useNavigate();

  if (!isGuestUser) {
    keycloak
      .init({ onLoad: 'login-required', responseMode: 'query' })
      .then((authenticated) => {
        if (authenticated) {
          cookie.set('isGuest', false);
        } else {
          cookie.set('isGuest', true);
        }
      })
      .catch((error) => {
        console.error('Failed to initialize Keycloak', error);
      });
  } else if (!publicPath.includes(location.pathname)) {
    alert('As guest you cannot access this ');
    console.log({ navigate });
  }

  return (
    <>
      <div>
        <div>Is Guest:{isGuestUser ? 'yes' : 'No'}</div>
        {!isGuestUser && (
          <button
            onClick={() =>
              keycloak.logout({ 
              //redirectUri:<URL to go when logout>
              redirectUri: 'http://localhost:3000/'
              })
            }
          >
            Logout
          </button>
        )}
      </div>
      <hr />
      <Outlet />
    </>
  );
};

const appRoutes = (
  <>
    <Route element={<SecureRoutes />}>
      <Route path='/a'>
        <Route index element={<A />} />
        <Route path='a1' element={<A1 />} />
        <Route path='a2' element={<A2 />} />
        <Route path='a3' element={<A3 />} />
      </Route>
      <Route path={'/b'} element={<B />} />
      <Route path='/c' element={<C />} />
    </Route>
  </>
);

export default appRoutes;

DEV Community: suvel rathneswar⚛️

Levitating Balls

Redirect uri does not contain ? and hits an un-known page in React Router

TLDR

Sample project example