Category: javascript

Category Added in a WPeMatico Campaign

Javascript: Switch from importing data from XML file to importing data from a JS object array

I need to edit a script to switch from reading XML data from an xml file to reading data from a JS object array instead.

let’s assume the xml file is x.xml:

<xml>
   <location>
     <name>cafe 1</name>
     <address>1 cafe st</address>
   </location>
   <location>
     <name>cafe 2</name>
     <address>2 cafe st</address>
   </location>
</xml>

The below code populates an array with data from an xml file

$.ajax({
               type: "GET",
               url: "x.xml",
               dataType: "xml",
               success: function(xml) {    
                   $(xml).find('location').each(function(){
   i +=1;
                       var name = $(this).find('name').text();
                       var address = $(this).find('address').text();
                     
                        table[i] = {name:name, address:address};
                       
                               
                   });

..can I rewrite that output as


var table = [
                  {"name":"cafe 1", "address":"1 cafe st"},
                  {"name":"cafe 2", "address":"2 cafe st"},
                  ]

…and call data in the array using

var m; 
for ( m = 1; m < table.length-1; m++) {

                      if (table[m].name == "cafe 1" ....

How would I upload a file from one pc, to another, to the directory that my HTML index is hosted and stored

I’ve seen many posts on uploading files, however I’ve not seen any regarding uploading files to a html page on one PC; and then taking those files and downloading them back in the host pc.

I have a simple html page that is hosted by node.js. My index is located in a directory stored in the standard location for NPM (var/www/html). I can login to my web page on multiple PCs on my network.
I wanted to be able to login to my Web Wrowser from any of my devices and then upload a file. I would then want to trigger a function where that file is downloaded back on the host pc. Essentially I upload from pc A to pc B (host pc) -ideally saving the file in a specific directory in the pc that holds my hosted html template

I’ve had a few ideas of how to do this but I’m not sure where I’m going wrong.

<span>File Upload<input type="file" id="photo" name="photo" accept="image/png, image/jpeg"></span>

<form action="yourScript">
  <input type="file" id="myFile" name="filename">
  <input type="submit">
  <a href="var/www/html" download> </a>
</form>

I’m using Apache/2.4.38 (Raspbian) Server.
Is there a function that I can call after submit that tells the server to download the uploaded file to the host pc (same directory where my index.html is located)?

Thanks for taking the time.

Function overloading with generic types in Flow

I have a component

<ButtonGroup
  value={value}
  options={[1, 2, 3, 4, 5, 6].map((x) => {
    return { label: x, value: x };
  })}
/>

I am using Flow for type checking and want to know, whether it is possible to have ButtonGroup component be generically typed in such a way that it will raise a Flow error if type of value is not the same as type of option.[0].value? This should work for any matching type, e.g number, array, etc. and only raise if type of value and option[at_some_index].value are different

What I currently have:


type Props<T> = {
  options: Array<{
    label: React$Node,
    value: T,
  }>,
  value: T,

};

This works fine for checking matching types but only for a particular type. E.g if I do

export const ButtonGroup = ({options, value}: Props<number>) => {do stuff}

It will work for number types as expected, but if I add union types to have the same behaviour for strings, arrays, like so Props<number | string | []> flow stops raising an error if types of values don’t match.

Below also doesn’t work:

export const ButtonGroup = <T>({options, value}: Props<T>) => {do stuff}

I know this can be done in Typescript and was just wondering whether this can be done in Flow?

Thank you!

Is there an NPM library or built-in for keyboard event key constants? [closed]

There are many questions that refer to keyCode (deprecated) and code, but I am not seeing much in regards to key. I am trying to reduce the amount of “magic strings” in my code.

Should I be using key, or should I switch to code? The code does not know if the Shift key was hit, but the key will be formatted in upper-case. Key also works with special characters, because it detects the keyboard layout better.

I am using the following logic, but I do not want to potentially create a map of all keys if I can help it.

const VirtualKeyBoard = {
  ENTER: 'Enter',
  A_LOWER: 'a',
  A_UPPER: 'A',
}

const elements = {
  code    : document.querySelector('#code'),
  key     : document.querySelector('#key'),
  keyCode : document.querySelector('#keyCode'),
};

const updateMap = (e) => 
  Object.keys(elements).forEach((key) =>
    elements[key].textContent = e[key]);

const onKeyPress = (e) => {
  const { code, key, keyCode } = e;
  updateMap(e);
  if (key === VirtualKeyBoard.ENTER) {
    console.log('You hit ENTER!');
  } else if (key === VirtualKeyBoard.A_LOWER) {
    console.log('You hit lower-case "a"!');
  } else if (key === VirtualKeyBoard.A_UPPER) {
    console.log('You hit upper-case "A"!');
  }
}
  

document.body.addEventListener('keypress', onKeyPress);
.as-console-wrapper {
  max-height: 4em !important;
}

html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

body {
  display: flex;
  justify-content: center;
  align-items: flex-start;
}

.grid {
  display: grid;
  grid-row-gap: 0.25em;
  padding: 0.5em;
  border: thin solid grey;
}

.grid-2 {
  grid-template-columns: repeat(2, 1fr);
  grid-column-gap: 1em;
}
<div class="grid grid-2">
  <div>Code</div>
  <div id="code">_</div>
  <div>Key</div>
  <div id="key">_</div>
  <div>KeyCode</div>
  <div id="keyCode">_</div>
</div>

How to stop loop if only one of these isn’t true?

I have a while function that will run in auto mode if auto mode is activated (checkBox.checked)

The problem is this code only stops once both a and b are greater than my game limit # (bestof.value). I want it to stop once only one of these is not true.

When I use while(a || b < bestof.value) it times out until the stack reaches its limit. It also returns no values.

if (checkBox.checked == true){
    while(a && b < bestof.value){
    myFunction();
};

Any idea how I can solve this?

Browser or Tab Close Event to notify server in ASP.NET MVC Application

Hello Fellow Developers,

I am currently working on the ASP.NET MVC application to get trigger browser or tab close event or request to notify the server so we can discard the changes on the server if the user has close the client (Browser or Tab).

Unfortunately, I have had no luck until now, I have tried JavaScript beforeunload event but this is not the requirement as this event also triggered on Refresh and some other issue regarding UX.

Furthermore, I also tried to implement with ServiceWorker Push Notification but it has some other problem as the user can not give permission for Push Notification.

Currently, I just need to notify the server when Browser or Tab is closed or about to close; is there any way to do this, with ServiceWorker or other API?

The above error occurred in the component

Im getting this issue when i add the switch tag, so far i think i have not mixed up any tags but iam not understanding where exactly i have made the error

please help me resolve this issue for this code im getting this error
im new to react js pls help me solve this issue

import "regenerator-runtime/runtime";
import React from "react";
import { login, logout } from "./utils";
import "./global.css";
import "bootstrap/dist/css/bootstrap.min.css";
import { Container, Navbar, Nav, NavDropdown } from "react-bootstrap";
import { BrowserRouter as Router, Switch, Route, Link } from "react-router-dom";

// components
import Home from "./Components/Home";
import NewPoll from "./Components/NewPoll";
import PollingStation from "./Components/PollingStation";


import getConfig from "./config";
const { networkId } = getConfig(process.env.NODE_ENV || "development");

export default function App() {
  return (
    <Router>
      <Navbar collapseOnSelect expand='lg' bg='dark' variant='dark'>
        <Container>
          <Navbar.Brand href='/'>
            VoteBlocks
          </Navbar.Brand>
          <Navbar.Toggle aria-controls='responsive-navbar-nav' />
          <Navbar.Collapse id='responsive-navbar-nav'>
            <Nav className='mx-auto'></Nav>
            <Nav>
              <Nav.Link href='/NewPoll'>New Poll</Nav.Link>
              <Nav.Link onClick={window.accountId === "" ? login : logout}>
                {window.accountId === "" ? "Login" : window.accountId}
              </Nav.Link>
            </Nav>
          </Navbar.Collapse>
        </Container>
      </Navbar>

      <Switch>

        <Route exact path='/'>
          <Home />
        </Route>

        <Route exact path='/PollingStation'>
          <PollingStation />
        </Route>

        <Route exact path='/NewPoll'>
          <NewPoll />
        </Route>

      </Switch>

    </Router>
  );
}

How to use openstack on client side

I try to make a upload/download services of files for my website, and i’m trying to use the object storage from openstack. The thing is, i have no problem doing it via php and openstack php sdk, but when i’m trying to do it via some javascript, i can’t find a good sdk or methods.
I’m not using node, I have a php server, and a javascript client. I would like to uploads or download files directly from the javascript client. I don’t want the file to transfer through the php server. I managed to create openstack tokens with the php sdk, maybe i could send those to the javascript so then they can authenticate? It’s been one week of searching with no solutions…

Force cache invalidation in Instagram web viewer

I have a website that is constantly updated because it has a feed streaming live data. However, no matter how hard I try, the page continues using an old javascript bundle that renders the website, and also, inside the Webpack, I’m generating JS files using a hash to distinguish from older versions.

chunkFilename: '[name].[chunkhash].js'

It only happens in Instagram web viewer. I’m also using Loadable to code split, it’s a React Hooks project, and in a common browser, like Chrome, Safari, Firefox, it’s working properly, the problem is with the Instagram web viewer. Does anyone have this problem and already solved it?

Cannot load any javascript file [closed]

`

// VARIABLES
let guessInput = document.getElementById("guess-input").value;
let guessValue = document.getElementById("guess-btn");
// RANDOM
let randomValue = Math.floor(Math.random() * 11);
console.log(randomValue);
// GUESSES
let guesses = 3;

// ADD EVENT LISTENER
guessValue.addEventListener("click", main());

function main() {
  while (guesses != 0 || guessInput == randomValue) {
    if (guessInput == randomValue) {
    } else {
      document.getElementById("guess-input").style.border = "solid 5px red";
    }
  }
}

When I add javascript file to my HTML file it won’t load it will just keep loading and nothing will happen. I tried everything I know but nothing works. Websites form internet works perfectly. I can inlcude javascript file, but the thing is that no matter what I try to load from my previous works nothing loads with javascript linked. The problem is I can’t load any javascript from my computer

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/skeleton/2.0.4/skeleton.css"
    />
    <title>Number Guesser</title>
  </head>
  <body>
    <div class="container">
      <h1>Number Guesser</h1>
      <div id="game">
        <p>
          Guess a number between <span class="min-num">0</span> and
          <span class="max-num">10</span>
        </p>
        <input
          type="number"
          id="guess-input"
          placeholder="Enter your guess..."
        />
        <input type="submit" value="Submit" id="guess-btn" />
        <p class="message"></p>
      </div>
    </div>

    <script type="text/javascript" src="script.js"></script>
  </body>
</html>

Check role claims and show elements if true

I am writting an app with angular on front + asp.net on backend. I have 2 roles: user and admin. There are a few buttons on my navbar that I want to hide from user role. My function for checking if currently logged user role is admin:

public isUserAdmin = (): boolean => {
    var token = localStorage.getItem("token");
    const decodedToken = this._jwtHelper.decodeToken(token!);
    const role = decodedToken['http://schemas.microsoft.com/ws/2008/06/identity/claims/role']
    return role === 'Admin';
  }

Above code is tested and it works, currently I am using it for guard.

My navbar html:

     <li class="nav-item">
        <a class="nav-link" *ngIf="isUserAdmin" routerLink="manufacturers">Manufacturers</a>
      </li>

navbar.ts:

export class HeaderComponent implements OnInit {
  public isUserAdmin: boolean = false;
  ...
  constructor(private userService: UserService, private _router: Router) {
    this.userService.adminChanged
      .subscribe(res => this.isUserAdmin = res); 
  }

To get above navbar.ts code work I modified userService:

export class UserService {

  private _adminChangeSub = new ReplaySubject<boolean>(1);
  public adminChanged = this._adminChangeSub.asObservable();

  constructor(private _http: HttpClient, private _envUrl: EnvironmentUrlService, private _jwtHelper: JwtHelperService) { 
  }

  public isUserAdmin = (): boolean => {
    var token = localStorage.getItem("token");
    const decodedToken = this._jwtHelper.decodeToken(token!);
    const role = decodedToken['http://schemas.microsoft.com/ws/2008/06/identity/claims/role']
    this._adminChangeSub.next(true);
    return role === 'Admin';
  }

But it just doesn’t work. Element in navbar is still here even If i log into admin account.
Also when I try to console.log(this.isUserAdmin) in constructor right after subscribing it return false. How can I hide buttons from navbar when user is not an admin?

Images are not loading in build version in one of my react app

I am working on my portfolio website with react and some of the images are not loading on the build version but it is also working fine on my local development server.

import cryptoImage from "./projectsImage/crypto4.png";
import wordIndexImage from "./projectsImage/Word Index.png";
import lcoImage from "./projectsImage/lco.png";

export const products = [
  {
    id: 1,
    title: "Crypto Stalker",
    img: cryptoImage,
    link: "https://crypto-stalker.netlify.app/",
    desc: "A crypto currency application to stalk all your favorite cryptocurrencies at one place including market cap, time gap and chart analysis.",
    tech: ["React", "Material UI", "Chart Js", "Redux", "Netlify"],
    gitlink: "https://github.com/codesabhi/crypto-stalker-app",
  },
  {
    id: 2,
    title: "Word Index",
    img: wordIndexImage,
    link: "https://wordindex.netlify.app/",
    desc: "A dictionary app which supports twelve languages along with audio support also a progressive web app that is downloadable on respectable devices",
    tech: ["React", "Material UI", "Axios", "PWAs", "Netlify"],
    gitlink: "https://github.com/codesabhi/word-index",
  },

And here I am mapping all the above data including images in a different component.

const ProductCard = ({title,img,link,desc,tech,git}) => {

  const theme = useContext(ThemeContext);
  return (
      <>
    <div className="c">
      <div className="c-left">
        <div className="c-card bg"></div>
        <div className="c-cards">
          <a href={link} target="_blank" rel="noreferrer" className="c-imglink"><img src={img} alt="" className="c-img" /></a>
        </div>
      </div>

I don’t know why?
but it is all working nice in local development but not on the build version

Data transfer from input into a table

So basically i need so that the data writen in the “book now” FORM to appear in the agenda on the left side of the main form in the correct table row that matches the time put in “Book now” form

just ignore the clock and all things all I want is that the data transfers correctly into the angenda

Sorry for bad and unorganised coding , I’m a beginner

```
body{
    display: flex;
}
.cont {
background-color: white;
width: 390px;
height: 600px;
border: 7px solid #50BE87;
overflow-y: scroll; 
}
.cont::-webkit-scrollbar {
display: none;
}
.cont {
-ms-overflow-style: none;  
scrollbar-width: none;  
}
table {
    align-items: center;
    font-size: 25px;
    font-family: Arial, Helvetica, sans-serif;    
    }
    th, td {    
  border-bottom: 1px solid #ddd;
}
#ore{
    width: 50px;
}
#introdu1{
    width: 300px;
}
th {
  height: 100px;
}
#ceas{
   
    font-family: Arial, Helvetica, sans-serif;
color: #000;
font-size: 20px;
align-items: left;
}

.cerc{
    width:600px;
    height: 600px;
    border: 7px solid #50BE87;
   
}
#booknow{
    display: inline;
    margin-top: 10px;
    margin-left: 10px;
    background-color:#50BE87 ;
    width: 180px;
    height: 60px;
    border: none;
    color: white;
    padding: 10px;
    font-family: Arial ;
    font-size: 25px;

}

.center {
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
}
.popup-overlay {
position:fixed;
top:0px;
left:0px;
width:100%;
height:100vh;
z-index:1;
background:#4BB4E6;
display:none;
}
.popup {
position:absolute;
top:-150%;
left:50%;
transform:translate(-50%,-50%) scale(1.15);
width:570px;
height:380px;
background:white;
z-index:2;
opacity:0;
box-shadow:5px 5px 3px rgba(0,0,0,0.2);
transition:transform 300ms ease-in-out,opacity 300ms ease-in-out;
}

body.showLoginForm .popup {
top:50%;
opacity:1;
transform:translate(-50%,-50%) scale(1);
}
body.showLoginForm .popup-overlay {
display:block;

}
body.showLoginForm .popup {
top:50%;
opacity:1;
transform:translate(-50%,-50%) scale(1);
}
.popup .form .header {
font-size:20px;
color:#222;
margin:5px 0px;
}
.popup .form .element {
padding:8px 10px;
}
.popup .form .element label {
margin-left: 20px;
width: 95%;
font-size:20px;
color:#222;
margin-bottom:5px;
}
.element input {


display:block;
width:90%;
padding:9px 9px;
border-radius:5px;
background:#999999;
border-top-style: hidden;
border-right-style: hidden;
border-left-style: hidden;
border-bottom-style: hidden;
}
.popup .form .element button {
margin-left: 25%;
margin-top:15px;
width:50%;
padding:10px 0px;
text-transform:uppercase;
border:none;
font-size:15px;

border-radius:3px;
cursor:pointer;
background:#333333;
color:white;
}
.element {
display: flex;
}
#email {
margin-left: 20px;
width: 90%;
}
#meet{
width: 90%; 
margin-left: 20px;
}
#num{
display:block;

}
#nuum{
display: block;
}
#start  {

border-radius: 5px;
text-align: center;
font-size: 20;
color: white;
width: 210px;
height: 110px;
background-color: #333333;
}
#start label {
border-radius: 5px;
padding: 8px 8px;
}
#appt{
border-top-style: hidden;
border-right-style: hidden;
border-left-style: hidden;
border-bottom-style: hidden;
height: 30px;
font-size: 25px;
border-radius: 5px;
padding: 8px;
margin-top: 25px;
background:#999999 ;
color: white;
}
#appt1{
border-top-style: hidden;
border-right-style: hidden;
border-left-style: hidden;
border-bottom-style: hidden;
height: 30px;
font-size: 25px;
border-radius: 5px;
padding: 8px;
margin-top: 25px;
background:#999999 ;
color: white;
}
#start label{
color: white;
margin-top: 10px;
font-size: 20px;
padding: 5px;
}
.time{
display: flex;
margin-left: 40px;
margin-right: 40px;
margin-top: 40px;
justify-content: space-between;

}#email{

width: 80%;
font-size:20px;
padding: 5px;
outline: none;

border-left:none;

}
#meet{
width: 80%;
font-size:20px;
padding: 5px;
outline: none;

border-left:none;
}
#report{
display: block;
margin-top: 350px;
    margin-left: 430px;
    background-color:black;
    width: 160px;
    height: 50px;
    border: none;
    color: white;
    padding: 10px;
    font-family: Arial ;
    font-size: 20px;
}
#bu15{
margin-top: 10px;
margin-left: 385px;
    background-color:#4BB4E6;
    width: 100px;
    height: 50px;
    border: none;
    color: white;
    padding: 10px;
    font-family: Arial ;
    font-size: 20px; 
}
#bu30{
display:blok;
    background-color:#4BB4E6;
    width: 100px;
    height: 50px;
    border: none;
    color: white;
    padding: 10px;
    font-family: Arial ;
    font-size: 20px; 
}
#bu45{
margin-top: 10px;
margin-left: 385px;
display: inline;
    background-color:#4BB4E6;
    width: 100px;
    height: 50px;
    border: none;
    color: white;
    padding: 10px;
    font-family: Arial ;
    font-size: 20px; 
}
#bu60{

display: inline;
    background-color:#4BB4E6;
    width: 100px;
    height: 50px;
    border: none;
    color: white;
    padding: 10px;
    font-family: Arial ;
    font-size: 20px; 
}
#bug{
font-size:28px;
}
#chen{
margin-left: 180px;
display:inline-flex;
font-family: Arial;
font-size: 25px;
}
body {
font-family:"Arial";
}
.center1 {
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
}
.popup-overlay1 {
position:fixed;
top:0px;
left:0px;
width:100%;
height:100vh;
z-index:1;
background:#4BB4E6;
display:none;
}
.popup1 {
align-content: center;
position:absolute;
top:-150%;
left:50%;
transform:translate(-50%,-50%) scale(1.15);
width:570px;
height:380px;
background:white;
z-index:2;
opacity:0;
transition:transform 300ms ease-in-out,opacity 300ms ease-in-out;
}
body.showLoginForm1 .popup-overlay1 {
display:block;
}
body.showLoginForm1 .popup1 {
top:50%;
opacity:1;
transform:translate(-50%,-50%) scale(1);
}


.popup1 .form1 .header1 {
text-align:center;
font-size:25px;
font-weight:600;
color:#222;
margin:20px 0px;
}
.popup1 .form1 .element1 {
padding:8px 20px;
}
.popup1 .form1 .element1 label {
text-align:center;
align-items: center;
display:block;
font-size:18px;
color:#222;
margin-bottom:3px;
}
.popup1 .form1 .element1 input {
margin-left: 100px;
align-content: center;
width:60%;
padding:8px 10px;
box-sizing:border-box;
outline:none;
border: none;
background:#999999;
border-radius:3px;
}
.popup1 .form1 .element1 button {
margin-top:5px;
width:150px;
padding:10px 0px;
text-transform:uppercase;
outline:none;
border:none;
font-size:20px;
font-weight:600;
margin-left: 180px;
cursor:pointer;
background:#999999;
color:#f5f5f5;
}
.dot2 {
position: absolute;
top: 129px;
left: 678px;
height: 305px;
width: 305px;
background-color: black;
border-radius: 50%;
display: inline-block;
}
#dot {
position: absolute;
top: 142px;
left: 692px;
height: 270px;
width: 270px;
background-color: #32C832;
border-radius: 50%;
display: inline-block;
border: 3px solid black;
}
.base-timer {
position:absolute;
width: 300px;
left: 680px;
top: 130px;
height: 300px;
}
.base-timer__svg {
transform: scaleX(-1);
}
.base-timer__circle {
fill: none;
stroke: none;
}
.base-timer__path-elapsed {
stroke-width: 7px;
stroke: white;
}
.base-timer__path-remaining {
stroke-width: 7px;
stroke-linecap: round;
transform: rotate(90deg);
transform-origin: center;
transition: 1s linear all;
fill-rule: nonzero;
stroke: currentColor;
}
.base-timer__path-remaining.green {
color: rgb(65, 184, 131);
}
.base-timer__path-remaining.orange {
color: orange;
}
.base-timer__path-remaining.red {
color: red;
}
.base-timer__label {
position: absolute;
width: 300px;
height: 300px;
top: 0;
display: flex;
align-items: center;
justify-content: center;
font-size: 48px;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.4/css/all.css" integrity="sha384-DyZ88mC6Up2uqS4h/KRgHuoeGwBcD4Ng9SiP4dIRy0EXTlnuz47vAwmeGwVChigm" crossorigin="anonymous">
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="table.css">
    <title>Document</title>
            </head>
      
<body>
    <div id="ceas"></div>
    <div class="cont" id="container">
       
    </div>
    <div class="cerc">
      <button id="booknow" onclick="openLoginForm()">Book Now</button>
      <h2 id="chen">{k<span style="color: #FF7900;">IT</span>chen} Pepper</h2>
      <div class="but5"></div> 
      <span class="dot2"></span>
      <div id="app"></div>
        <span id="dot"></span>
        <button id="report" onclick="openLoginForm1()"><i id="bug" class="fas fa-bug">Report</i></button>
        <button id="bu15" onclick="timer15()">15 min</button>
        <button id="bu30" onclick="timer30()">30 min</button>
        <button id="bu45" onclick="timer45()">45 min</button>
        <button id="bu60" onclick="timer60()">60 min</button>
        
     
    </div>
    
    <div class="popup-overlay"></div>
      <div class="popup">
        
        <div class="form">
          
          
          <div class="element">
            <div>
                <label for="meet">Meeting subject.</label>
            <input type="text" id="meet">
                </div>
                <div class="container">
                    <i class="fa fa-envelope icon"> </i>
                <label for="email">Email</label>
            <input type="email" id="email">
                </div>
                </div>

          <div class="element" >
            <i class="fas fa-user-plus"></i>
            <label  id="nuum" for="num" >Number of member</label>
            <input type="number" id="num"  min="1" max="5">
          </div>
       
          <div class="time">
          <div  id="start">
            <label for="appt">Start time:</label><br>
          <input type="time" id="appt" name="appt" value="08:00">
            </div>
          <div id="start">
            <label for="appt">Ended time:</label>
          <input type="time" id="appt1" name="appt" value="20:00">
            </div>
            </div>
          
         
          <div class="element">
            <button onclick="closeLoginForm()">Book</button>
          </div>
        </div>
      </div>
     
      <div class="popup-overlay1"></div>
      <div class="popup1">
        
        <div class="form1">
          
          <div class="header1">
            Report an issue<i class="fas fa-user-plus"></i>
          </div>
          <div class="element1">
            <label for= "email">Your email</label>
              <input type="email" id="email2">
          </div>
          <div class="element1">
            <label for="text">Description</label>
            <input type="text" id="description">
          </div>
          <div class="element1">
            <label for="text">Issue type</label>
            <input type="text" id="issue">
          </div>
          <div class="element1">
            <button onclick="closeLoginForm1()">Send</button>
          </div>
        </div>
      </div>
<script>
var date, array = [];
date = new Date();
date.setHours(80, 00, 00);
while (date.getMinutes() % 15 !== 0) {
    date.setMinutes ( date.getMinutes() + 1 );
}
for (var i = 3; i < 13 * 4; i++) {
  const content ="<div>"
    array.push(date.getHours() + ':' + date.getMinutes());
    date.setMinutes ( date.getMinutes() + 15);"</div>"
}


var myTable = "<table><tr>";

var perrow = 1;
var id = 1;
array.forEach((value, i) => {
  
  myTable += `<td id="ore">${value}</td>`;
  myTable += `<td id="introdu${id++}" > </td>`;

  var next = i + 1;
  if (next % perrow == 0 && next != array.length) {
    myTable += `</tr"><tr>`;
  }
});
myTable += "</tr ></table>";
document.getElementById("container").innerHTML = myTable;
let clock= ()=>{
            let date= new Date();
            let hrs = date.getHours();
            let mins = date.getMinutes();
            let secs = date.getSeconds();
            let period = "AM";
            if (hrs ==0){
                hrs = 12;
            }
            else if(hrs >= 24){
                hrs = hrs - 12;
                perod = "PM";
            }  
            hrs = hrs < 10 ? "0" + hrs : hrs;
            mins = mins < 10 ? "0" + mins : mins;
            secs = secs <10 ? "0" + secs : secs;
            let time = `${hrs}:${mins}:${secs}:${period}`;
            document.getElementById("ceas").innerHTML = time;
            setTimeout(clock, 1000);
            };
            clock();
            function openLoginForm(){
  document.body.classList.add("showLoginForm");
}
function closeLoginForm(){
  document.body.classList.remove("showLoginForm");
 

//so this is the transfer data i have
  document.getElementById("introdu1").innerHTML=
    document.getElementById('meet').value+"Subiectul conferintei "+
    document.getElementById('email').value+"email "+
    document.getElementById('num').value+" membri "+
    document.getElementById('appt').value+" - "+
    document.getElementById('appt1').value+" ora";
}

   
          
function openLoginForm1(){
        document.body.classList.add("showLoginForm1");
      }
      function closeLoginForm1(){
        document.body.classList.remove("showLoginForm1");
      }
      


      const FULL_DASH_ARRAY = 283;
const WARNING_THRESHOLD = 10;
const ALERT_THRESHOLD = 5;
const COLOR_CODES = {
  info: {
    color: "green"
  },
  warning: {
    color: "orange",
    threshold: WARNING_THRESHOLD
  },
  alert: {
    color: "red",
    threshold: ALERT_THRESHOLD
  }
};
var TIME_LIMIT = 0;
let timePassed = 0;
let timeLeft = TIME_LIMIT;
let timerInterval15 = null;
let timerInterval30 = null;
let timerInterval45 = null;
let timerInterval60 = null;
let remainingPathColor = COLOR_CODES.info.color;
document.getElementById("app").innerHTML = `
<div class="base-timer">
  <circle class="floor-timer" cx="50" cy="50" r="45"></circle>
  <svg class="base-timer__svg" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
    <g class="base-timer__circle">
      <circle class="base-timer__path-elapsed" cx="50" cy="50" r="45"></circle>
      <path
        id="base-timer-path-remaining"
        stroke-dasharray="283"
        class="base-timer__path-remaining ${remainingPathColor}"
        d="
          M 50, 50
          m -45, 0
          a 45,45 0 1,0 90,0
          a 45,45 0 1,0 -90,0
        "
      ></path>
    </g>
  </svg>
  <span id="base-timer-label" class="base-timer__label">${formatTime(
    timeLeft
  )}</span>
</div>
`;
function clearIntervals(){
  clearInterval(timerInterval15);
  clearInterval(timerInterval30);
  clearInterval(timerInterval45);
  clearInterval(timerInterval60);
}
function onTimesUp() {
  clearIntervals();
}
function formatTime(time) {
  const minutes = Math.floor(time / 60);
  let seconds = time % 60;
  if (seconds < 10) {
    seconds = `0${seconds}`;
  }
  return `${minutes}:${seconds}`;
}
function setRemainingPathColor(timeLeft) {
  const { alert, warning, info } = COLOR_CODES;
  if (timeLeft <= alert.threshold) {
    document
      .getElementById("base-timer-path-remaining")
      .classList.remove(warning.color);
    document
      .getElementById("base-timer-path-remaining")
      .classList.add(alert.color);
  } else if (timeLeft <= warning.threshold) {
    document
      .getElementById("base-timer-path-remaining")
      .classList.remove(info.color);
    document
      .getElementById("base-timer-path-remaining")
      .classList.add(warning.color);
  }
}
function calculateTimeFraction() {
  const rawTimeFraction = timeLeft / TIME_LIMIT;
  return rawTimeFraction - (1 / TIME_LIMIT) * (1 - rawTimeFraction);
}
function setCircleDasharray() {
  const circleDasharray = `${(
    calculateTimeFraction() * FULL_DASH_ARRAY
  ).toFixed(0)} 283`;
  document
    .getElementById("base-timer-path-remaining")
    .setAttribute("stroke-dasharray", circleDasharray);
}
function timer15(){
TIME_LIMIT = 901;
timePassed = 0;
timeLeft = TIME_LIMIT;
clearIntervals();
remainingPathColor = COLOR_CODES.info.color;
  timerInterval15 = setInterval(() => {
    var x = document.getElementById("dot")
    red = 'rgb(200,0,0)';
    x.style.backgroundColor = red
    timePassed = timePassed += 0;
    timePassed = timePassed += 1;
    timeLeft = TIME_LIMIT - timePassed;
    document.getElementById("base-timer-label").innerHTML = formatTime(
      timeLeft
    );
    setCircleDasharray();
    setRemainingPathColor(timeLeft);
    if (timeLeft === 0) {
      onTimesUp();
    }
  }, 1000);
}
function timer30(){
  TIME_LIMIT = 1801;
  timePassed = 0;
  timeLeft = TIME_LIMIT;
  clearIntervals();
  
  remainingPathColor = COLOR_CODES.info.color;
  timerInterval30 = setInterval(() => {
    var x = document.getElementById("dot")
    red = 'rgb(200,0,0)';
    x.style.backgroundColor = red
    timePassed = timePassed += 0;
    timePassed = timePassed += 1;
    timeLeft = TIME_LIMIT - timePassed;
    document.getElementById("base-timer-label").innerHTML = formatTime(
      timeLeft
    );
    setCircleDasharray();
    setRemainingPathColor(timeLeft);
    if (timeLeft === 0) {
      onTimesUp();
    }
  }, 1000);
  }
  function timer45(){
    TIME_LIMIT = 2701;
    timePassed = 0;
    timeLeft = TIME_LIMIT;
    clearIntervals();
    remainingPathColor = COLOR_CODES.info.color;
    timerInterval45 = setInterval(() => {
      var x = document.getElementById("dot")
    red = 'rgb(200,0,0)';
    x.style.backgroundColor = red
      timePassed = timePassed += 1;
      timeLeft = TIME_LIMIT - timePassed;
      document.getElementById("base-timer-label").innerHTML = formatTime(
        timeLeft
      );
      setCircleDasharray();
      setRemainingPathColor(timeLeft);
      if (timeLeft === 0) {
        onTimesUp();
      }
    }, 1000);
    }
    function timer60(){
      TIME_LIMIT = 3601;
      timePassed = 0;
      timeLeft = TIME_LIMIT;
      clearIntervals();
      remainingPathColor = COLOR_CODES.info.color;
      timerInterval60 = setInterval(() => {
        var x = document.getElementById("dot")
    red = 'rgb(200,0,0)';
    x.style.backgroundColor = red
        timePassed = timePassed += 1;
        timeLeft = TIME_LIMIT - timePassed;
        document.getElementById("base-timer-label").innerHTML = formatTime(
          timeLeft
        );
        setCircleDasharray();
        setRemainingPathColor(timeLeft);
        if (timeLeft === 0) {
          onTimesUp();
        }
      }, 1000);
      }
</script>


</body>
</html>

Uncaught TypeError: locationProp is undefined in Router component

I got this error, and it has taken me more than 2 hours debugging, but I still can’t understand where the problem is, I know this question might be down voted for low quality but at this moment I really need another pair of eyes.

Here I have App.js and Index, the problem seems to be in router but I don’t know why, because everything is done according to this repo.

App in src/App.js

import React from 'react';
import { connect } from 'react-redux';
import { ConnectedRouter} from 'connected-react-router';

import routes from './routes';
import './styles/main.scss';


const App = ({ history }) => {
    return (
        <ConnectedRouter history={history}>
            { routes }
        </ConnectedRouter>
    );
};

const mapStateToProps = (state) => {
    return {
        isAuthenticated: state.auth.isAuthenticated,
        location: state.router.location.pathname,
    };
};

export default connect(mapStateToProps)(App);
export { App as AppNotConnected };

Routes in src/routes/index.js

import React from 'react';
import { Route, Switch } from 'react-router';
import { HomeView, LoginView, ProtectedView, NotFoundView, NavBar } from '../containers';
import requireAuthentication from '../utils/requireAuthentication';

const routes = (
    <div>
        <NavBar />
        <Switch>
            <Route exact path="/" component={HomeView} />
            <Route path="/login" component={LoginView} />
            <Route path="/protected" component={requireAuthentication(ProtectedView)} />
            <Route path="*" component={NotFoundView} />
        </Switch>
    </div>
);
export default routes;

I get this error

Uncaught TypeError: locationProp is undefined
The above error occurred in the <Router> component:
.
.
.