JSFiddle - React, Tailwind, and code Playground

by seankoole

HTML

<div>
  <h3>
    Login with correct token
  </h3>
  
  <a href="aodenhaag://login/token/foobar">Login</a> (aodenhaag://login/token/foobar)
</div>

<div>
  <h3>
    Login with incorrect token
  </h3>
  
  <a href="aodenhaag://login/token/barfoo">Login</a> (odenhaag://login/token/barfoo)
</div>

<div>
  <h3>
    Login without token
  </h3>
  
  <a href="aodenhaag://login">Login</a> (aodenhaag://login)
</div>

<div>
  <h3>
    Go to news page with ID 23
  </h3>
  
  <a href="aodenhaag://news/id/23">Login</a> (aodenhaag://login)
</div>

CSS

div {
  padding: 30px;
  border: 2px solid grey;
  margin: 60px;
}

JavaScript

const navigate = (screen, options) => {
  console.log('navigate to', screen, options);
}

const screens = {
  'news': 'newsScreen',
  'login': 'loginScreen',
}


/* let url = 'adodenhaag://login/token/foobar'; */
let url = 'adodenhaag://news/id/23';
url = url.split('/').splice(2);

const screen = url[0];
const parameter = url[1]; // make sure this can be undefined otherwise error
const value = url[2];
const parameters = []

parameters[parameter] = value;


navigate(screens[screen], parameters);