Category: javascript

I’m learning JavaScript through a course, and it’s been an interesting journey. When my teacher explains the code, it all clicks for me—I get it, right there and then. But then, the next day rolls around, and it’s as if my mind resets; I stare at the screen, not knowing where to start. I’ve tried rewatching the lessons, hoping it would help more, but it feels like I’m barely making progress. Honestly, it’s been a bit disheartening, and I’m starting to doubt myself. Still, I’m not giving up just yet and would really appreciate any advice on how to tackle this challenge

i just tried rewatching the video had helped a bit but more to nothing, idk i may be stupid, but open for any advice

I’m having trouble accessing the cookies at the middleware.ts of my next.js app. I don’t know why it fails if I have another next.js app with the same structure and it works, I suppose that becase the other app uses Next.js 14. Whenever I navigate through my app and make the middleware available, I get this error: Error: Invariant: cookies() expects to have requestAsyncStorage, none available.

this is my middleware.ts:

import { NextRequest, NextResponse } from 'next/server';
import { cookies } from "next/headers";
import { jwtDecode } from 'jwt-decode';
 
// This function can be marked `async` if using `await` inside
export async function middleware(request: NextRequest) {
  const cookieStore = cookies();
  const jwt = cookieStore.get("zurii-hr-panel-token")?.value || "";
  const origin = request.nextUrl.clone().origin;
  
  if(jwt) {
    const decoded = jwtDecode(jwt);
    const currentTimestamp = Math.floor(Date.now() / 1000);
    const validateJWT = decoded.exp && decoded.exp > currentTimestamp;
    if (validateJWT) {
      if(request.nextUrl.pathname==="/login") {
        return NextResponse.redirect(`${origin}/collaborators`);
      }
      return NextResponse.next();
    } else if(!validateJWT && request.nextUrl.pathname!=="/login") {
      return NextResponse.redirect(`${origin}/login`);
    }
  } else if(!jwt && request.nextUrl.pathname!=="/login") {
    return NextResponse.redirect(`${origin}/login`);
  }
}

export const config = {
  matcher: ["/", "/login", "/collaborators", "/settings", "/status"]
}

I don’t know what to do and I’ve been stuck for ages with this problem.

For some reason, when I call my sendTheMessage function, my device (not simulator) does not receive the notification if I retrieve the token from Firestore. However, when I uncomment the part const tok = … which sets the token manually and pass tok into my function, my device (not simulator) receives the notification. How can I make it so that I can get one (and eventually more than one) token from Firestore, then send the message using such token(s)?

const admin = require("firebase-admin");
const { onSchedule } = require("firebase-functions/v2/scheduler");
const { logger } = require("firebase-functions");
const { getFirestore } = require("firebase-admin/firestore");
admin.initializeApp();

exports.checkforsmsnotifs3 = onSchedule("*/5 * * * *", async (event) => {
    const db = getFirestore();
    const allDocsRef = db.collection("dates");


    const snapshot = await allDocsRef.where("checkedIn", "==", false).get();

    // TODO: get the token for the correct user
    //   const tok = "fUPMs-9eB0MTgW6V6mzzqf:APA91bF9a2iSaa_"+
    //           "d4xECQIYT6HXprjY1ZBP6Bj8Xt0tH12GH3Pp1jQai-Qrbqxowp"+
    //           "-1UDe6nvUUfWO8CSm10xO1G7n"+
    //           "ppsCnPGFYO4cKlg9FehscrJc84cNUTqSz1oetPKNVneWnFOtVJ";

    // Send notifications to all tokens.
    const sendTheMessage = async (tokenParam) => {
        const mess = {
            notification: {
                title: "Your friend is out on a date",
                body: "Your friend was supposed to check in on " +
                    "CheckDate but hasn't yet." +
                    " You may want to reach out.",
            },
            token: tokenParam,
        };
        logger.log("func was called");
        logger.log("tokenparam: " + tokenParam);
        await admin.messaging().send(mess);
    };

    snapshot.forEach(async (d) => {
        console.log(d.data().toNumber);
        const tokRef = db.collection("usersByPhoneNum").doc(d.data().toNumber);
        const doc = await tokRef.get();
        if (!doc.exists) {
            logger.log("No such document!");
        } else {
            logger.log("Document data:", doc.data().token);
            sendTheMessage(doc.data().token);
        }
    });
});

Tried adding await before sendTheMessage. I suspected it has something to do with asynchrony but haven’t been able to crack it. I know the function is being called because I see the logs. But no notification on my device.

So I want to make a site that has transition effects whenever entering the page.
This works when the page is initially loaded or reloaded. However, if I try to go back to the previous page or go forward, it doesn’t work.
Can anyone tell me how it can be done in JS?

This is the example site I want to implement.
:https://www.ethanchng.com/

I am trying to create a maps application that creates a color coded polygon over the city based on air pollution levels. I could not find any API provider that provides the data clearly. This is what I need the response to look like or include:

"geometry": {
    "type": "Polygon",
    "coordinates": [
      [
        [ 44.55894, 54.30577 ],
        [ 44.55198, 54.30724 ],
        [ 44.5507,  54.31366 ],
        [ 44.54092, 54.32204 ],
        [ 44.54182, 54.32476 ],
        [ 44.54499, 54.32563 ],
        [ 44.56358, 54.32214 ],
        [ 44.5689,  54.31886 ],
        [ 44.55894, 54.30577 ]

I found API by https://www.geoapify.com/boundaries-api but this one only gives the borders of places that make up the city and not the entire city. I also found this GitHub link https://github.com/drei01/geojson-world-cities but I have hard time understanding how to use this to get the data I need.

Any advice or help would be appreciated!

I am making a small website with Node.js, Express, Pug and MongoDB. I am trying to get a page to render but keep running into this error. The page renders data that is pulled from the database, and I am using a foreach loop to order to show all the data.

The function is filtering the data to select all data that contains { section: ‘mens’ }; as the page is a part of a clothing store site, showing only men’s clothes.

I have checked the function separately and it works, yet I still get an error when rendering it with Pug, which makes me believe there is an issue there.

Here is my function to get the filtered data from my MongoDB database.

async function showMenOffers() {
    db = await connection();
    let query = { section: "men" };
    let filter = await db.collection('offerings').find(query).toArray();
    return filter;
}

Here is the code when I attempt to render it:

router.get("/mens", async (request, response) => {
    let offers = await model.showMenOffers();
    response.render("/mens", { title: "Mens", view: offers });
});

And lastly the Pug code:

block layout-content 
    h1(class="display-2") Mens 
    table(class="table table-secondary table-bordered table-stripped-columns my-5 border border-black") 
        thead 
            tr 
                th(scope="col") Product 
                th(scope="col") Gender 
        tbody 
            if view.length > 0
                each offer in view 
                    tr 
                        td #{offer.size} #{offer.color} #{offer.name}
                        td #{offer.section}
            else 
                tr 
                    td(colspan="2") No offers available

I find myself lost on what next step to take. I’ve checked that the function works, I’ve checked for spelling errors as well and can’t find any.

I am a newbie learning vuejs 3.
I am making an authorization form which should consist of several vue components.
In the authorization form there is an Email input component , which is passed an isError value if Email validation failed after submitting the form.

In the code of the InputOutline.vue component, I want the input element to change its style (e.g. the input element borders become red) if the Email is incorrect (after the form has already been submitted). After changing the input value (e.g. the user starts editing the previously incorrectly specified email) the input style should return to its original state (the borders of the input element should stop being red).

My implementation of the code with the isError parameter works, but the problem is that after resubmitting the form with a newly invalid email, the input style does not change (i.e. the input borders do not turn red as they did when the form was first submitted with an invalid email).

I know what the problem is. The problem is that the component doesn’t update the isError value after the form is submitted a SECOND time with invalid data.

But I don’t know how to make vuejs update all data of component after submitting a form.

Full Login.vue code:

<script setup>
import GuestLayout from '@/Layouts/GuestLayout.vue';
import PrimaryButton from '@/Components/PrimaryButton.vue';
import { Head, Link, useForm } from '@inertiajs/vue3';
import InputOutline from "@/Components/OutlineComponents/InputOutline.vue";
import InputOutlineError from "@/Components/OutlineComponents/InputOutlineError.vue";
defineProps({
    status: {
        type: String,
    },
});
const form = useForm({
    email: '',
});
const submit = () => {
    form.post(route('login'), {});
};
</script>

<template>
    <GuestLayout>
        <Head title="Log in" />
        <div v-if="status" class="mb-4 font-medium text-sm text-green-600">
            {{ status }}
        </div>
        <form @submit.prevent="submit">
            <div>
                <InputOutline label="Email" type="email" v-model="form.email" required :isError="!!form.errors.email"/>
                <InputOutlineError class="mt-2" :message="form.errors.email" />
            </div>
            <div class="flex items-center justify-end mt-4">
                              <PrimaryButton class="ms-4" :class="{ 'opacity-25': form.processing }" :disabled="form.processing">
                    Log in
                </PrimaryButton>
            </div>
        </form>
    </GuestLayout>
</template>

Full InputOutline.vue code:

<script setup>
import {computed, ref} from "vue";
import {usePage} from "@inertiajs/vue3";

const model = defineModel({
        type: String,
        required: true
});

const input = ref(null);

defineProps({
    type: {
        type: String,
        default: "text",
    },
    required: {
        type: Boolean,
        default: false,
    },
    label: {
        type: String,
        required: true,
    },
    isError:{
        type: Boolean,
        default: false,
    },
    supportDarkTheme:{
        type: Boolean,
        default: false,
    },
});
</script>

<template>
    <div class="relative">
        <input :type="type" :required="required" v-model="model" ref="input" id="floating_outlined" placeholder=""
               class="input-base block px-2.5 pb-2.5 pt-4 w-full
               focus:outline-none focus:ring-0 peer"
               :class="[supportDarkTheme ? 'dark:text-white dark:border-gray-600 dark:focus:border-blue-500' : '',
               isError ? 'color-border-danger' : '',] "/>
        <label for="floating_outlined"
               class="label-base absolute duration-300 transform -translate-y-3.5 scale-75 top-1 z-10 origin-[0] px-1.5 cursor-text bg-white
               peer-focus:px-1.5 peer-focus:color-text-focused peer-focus:top-1 peer-focus:scale-75 peer-focus:-translate-y-3.5
               peer-placeholder-shown:scale-100 peer-placeholder-shown:-translate-y-1/2 peer-placeholder-shown:top-1/2
               rtl:peer-focus:translate-x-1/4 rtl:peer-focus:left-auto start-1"
               :class="[
                   supportDarkTheme ? 'label-base-dark peer-focus:dark:bg-gray-900 peer-focus:dark:text-blue-500' : '',
                   isError ? 'color-text-danger' : '',] ">
            {{label}}
        </label>
    </div>
</template>

This is my code, but I can’t get it to work, i’m using react and typescript(i’m new to both), i don’t know what i’m doing wrong, it always says: Uncaught TypeError: Cannot read properties of null(reading ‘value’). What I did wrong?

==================================/ /============================

import { Button } from "./components/ui/button"
import { Input } from "./components/ui/input"

function App() {
  const inputElement = document.getElementById('bla') as HTMLInputElement.value;
  console.log(inputElement)

  return (
    <>
    <div className="p-6 space-y-6">
      <div className="flex justify-center">
        <div className="flex justify-between w-1/2">
          <h1 id="bla">bla bla bla</h1>
          <Input id="pokemonInput" placeholder="Pokemon name" className="border rounded w-1/2"/>
          <Button>Pesquisar</Button>
        </div>
      </div>

      <div className="flex justify-center">
        <img src="" id="pokemonImage" className="border rounded w-1/2"/>
      </div>
    </div>
    <script type="module" src="./src/script.ts"></script>
    </>
  )
}



export default App

It should get the string ‘bla bla bla’ and console.log it but I can’t get the property ‘value’, no matter what.

I need to change between the original controls and someones to change the perspective with the corners like this:
enter image description here

At this moment I take this with the original controls, but I need to swap between the two options, teh originals and somones t ochange the perspective with the corners

function uploadImage() {
    var formData = new FormData(document.getElementById("uploadForm"));
    fetch("process.php", {
        method: "POST",
        body: formData
    })
    .then(response => response.text())
    .then(data => {
        document.getElementById("preview").innerHTML = data;
        var canvasContainer = document.getElementById("preview_canvas");
        canvasContainer.innerHTML = "";
        var newCanvas = document.createElement("canvas");
        newCanvas.id = "canvas";
        newCanvas.className = "mt-4 border";
        canvasContainer.appendChild(newCanvas);
        canvas = new fabric.Canvas('canvas', { backgroundColor: 'rgba(255, 255, 255, 0)' });
        var imgElement = document.getElementById('uploadedImage');
        fabricImg = new fabric.Image(imgElement, { left: 0, top: 0, selectable: true });
        var backgroundImageUrl = 'image.jpg';
        fabricImg.set({ skewX: parseFloat(document.getElementById('skewRange').value) });
        fabric.Image.fromURL(backgroundImageUrl, function(img) {
            canvas.setDimensions({ width: img.width, height: img.height });
            canvas.setBackgroundImage(img, canvas.renderAll.bind(canvas));
        });
        canvas.add(fabricImg);
    })
    .catch(error => {
        console.error("Error en la petición fetch: " + error.message);
    });
}

I have 2 css variables “–nav-color” and “–link-color” but it only console.logs my –nav-color only.

let regex = new RegExp('--', 'gim');
for (let i of Array.from(getComputedStyle(document.documentElement))) {
  if (regex.test(i)) {
    console.log(i); 
  }
}

i tried multiple methods and one of them is placing console.log(regex.test(i)) after the if but the problem is it also logged the false and true values.

I have the following file:
index.js

const http = require('http');
const httpProxy = require('http-proxy');
const express = require('express');

const app = express();
const proxy = httpProxy.createProxyServer({
  target: 'https://discord.com',
  changeOrigin: true,
});
app.use('/', (req, res) => {
  proxy.web(req, res);
});
const server = http.createServer(app);
const PORT = 8080;
server.listen(PORT, () => {
  console.log(`Process ${process.pid} has been successfully run! On Port ${PORT}`);
});

This lets me access the discord homepage (just a filler website) but my one problem is that I want to make this part of a static website Im making on github pages but this is node.js. So how can I make it so I get the same output when running an html file that has the js file in a script tag as I would if I ran the js file with Node.JS?

I found vite that would have transferred a node.js file to a static file but when I try this tool on the following html file:

<html>
  <head></head>
  <body><script src="index.js" type="module"></script></body>
<html>

All I get is a blank web page.

I want to hide all the controls of the video player in Windows and Android they are hidden but in iOS they are shown, I don’t know how to hide them

This is what it looks like on iOS:

y este es mi codigo:

  <video
    autoplay
     preload muted
    style="max-width: 100% !important; height: auto; box-shadow: none !important; "
    controls="false"
    disablepictureinpicture
    controlsList="nofullscreen nodownload noremoteplayback noplaybackrate"
    class="fit-picture custom-video-player "
    playsInline
    transition="scale-transition"     @ended="onPlayerEnded($event)"
    >
       <source :src="`${videoUrl}`" type="video/mp4">
   </video>


video::-webkit-media-controls-panel {
  // Your styling here
  background-image: linear-gradient(transparent, transparent) !important; //Transparent for your case

}

video::-webkit-media-controls-overlay-play-button {
    display: none !important;
}

video::-webkit-media-controls-timeline {
    display: none;
}


video::-webkit-media-controls-current-time-display {
    display: none;
}

video::-webkit-media-controls-time-remaining-display {
    display: none;
}

video::-webkit-media-controls-toggle-closed-captions-button {
  display: none;
}

video::-webkit-media-controls-fullscreen-button {
  display: none;
}
video::-webkit-media-controls-mute-button {
  display: none;
}
video::-webkit-media-controls-fullscreen-volume-slider {
    display: none;
}
video::-webkit-media-controls-volume-slider {
  display: none;
}

video::-webkit-media-controls-seek-forward-button {
  display: none;
}

video::-webkit-media-controls-volume-slider-mute-button{
display: none;
}

video::-webkit-media-controls-fullscreen-volume-min-button {
    display: none;
}

video::-webkit-media-controls-fullscreen-volume-max-button {
    display: none;
}

video::-webkit-media-text-track-container {
  display: none;
}
video::-webkit-media-controls-play-button{
  display: none;
}

::-webkit-media-controls {
  display: none !important;
}

I have tried it with

controls="false"

and it still doesn’t work

Any suggestions that can be solved, in the same way I tried it with the video.js library with its properties of hiding the controls and it still shows them

I am following this tutorial on YouTube
[https://www.youtube.com/watch?v=7CqJlxBYj-M]
and I have followed each step carefully, installing the required packages.
Despite the tutorial, I haven’t installed the Bootstrap package.
So far, this is my App.js

import logo from './logo.svg';
import './App.css';
import { BrowserRouter as Router, Route } from "react-router-dom";

import Navbar from "./components/navbar.component"
import ExercisesList from "./components/exercises-list.component.js"

function App() {
  return (
    <Router>
      <Navbar />      
      <br/>
      <Route path="/" exact component={ExercisesList} />
    </Router>
    
  );
}

export default App;

and I haven’t touched any other files in the src folder.

This is the Navbar component:

import React, { Component } from 'react';
import { Link } from 'react-router-dom';

export default class Navbar extends Component {

  render() {
    return (
      <nav className="navbar navbar-dark bg-dark navbar-expand-lg">
        <Link to="/" className="navbar-brand">ExcerTracker</Link>
        <div className="collpase navbar-collapse">
        <ul className="navbar-nav mr-auto">
          <li className="navbar-item">
          <Link to="/" className="nav-link">Exercises</Link>
          </li>
          <li className="navbar-item">
          <Link to="/create" className="nav-link">Create Exercise Log</Link>
          </li>
          <li className="navbar-item">
          <Link to="/user" className="nav-link">Create User</Link>
          </li>
        </ul>
        </div>
      </nav>
    );
  }
}

and the exercises-list.component:

import React, {Component} from 'react';

export default class ExercisesList extends Component {
    render() {
        return (
            <div>
                <p>Test</p>
            </div>
        )
    }
}


My package.json file: 

{
  "name": "mern-exercise-tracker",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.17.0",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "cors": "^2.8.5",
    "dotenv": "^16.4.2",
    "express": "^4.18.2",
    "mongoose": "^8.1.1",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-router": "^6.22.0",
    "react-router-dom": "^6.22.0",
    "react-scripts": "5.0.1",
    "web-vitals": "^2.1.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

I am getting this error message:

dispatcher is null
useRef@http://localhost:3000/static/js/bundle.js:73943:7
BrowserRouter@http://localhost:3000/static/js/bundle.js:70161:55
renderWithHooks@http://localhost:3000/static/js/bundle.js:20190:31
mountIndeterminateComponent@http://localhost:3000/static/js/bundle.js:23474:17
beginWork@http://localhost:3000/static/js/bundle.js:24770:20
callCallback@http://localhost:3000/static/js/bundle.js:9786:18
invokeGuardedCallbackDev@http://localhost:3000/static/js/bundle.js:9830:20
invokeGuardedCallback@http://localhost:3000/static/js/bundle.js:9887:35
beginWork$1@http://localhost:3000/static/js/bundle.js:29751:32
performUnitOfWork@http://localhost:3000/static/js/bundle.js:28999:16
workLoopSync@http://localhost:3000/static/js/bundle.js:28922:26
renderRootSync@http://localhost:3000/static/js/bundle.js:28895:11
performConcurrentWorkOnRoot@http://localhost:3000/static/js/bundle.js:28290:78
workLoop@http://localhost:3000/static/js/bundle.js:36302:46
flushWork@http://localhost:3000/static/js/bundle.js:36280:18
performWorkUntilDeadline@http://localhost:3000/static/js/bundle.js:36517:25

Can someone please help me out here? Thanks in advance!

I have tried re-installing react-router-dom and react-router packages. I expected the application to show the Navbar component, but it doesn’t show anything.

im not so confirm in Django, and Im trying to change some parts from a existung project to my wishes.

The existing project is not from me, I downloaded from Github here:
https://github.com/AliBigdeli/Django-Smart-RFID-Access-Control/

I added in Card management one new field in models.py

class UIDCard(models.Model):
    ...
    ammount = models.DecimalField(max_digits=8, decimal_places=2, default=0)
    ...

Also added in the folder dashboard/api/serializers.py the price in class CardReaderSerializer

Now I changed some parts in templates/card-management.html

• Added the field “ammount” in the genral overview, is showing me the Database value
• Added a Pay button, open a new Modal window, the plan is to add some money on it. The enterred value is saving on the Database, but with two issues.

first, I cant see the existing values from the Database in the formfields prefilled. Like in the edit part
second, the Update button is saving the value but the modal window is not closing

I cant find the problems in the code, can somewhre helping me please

The complete changed .html file:

{% extends 'dashboard/base.html'%}

{% block content %}
<div class="d-flex">
    <div>
        <h1 class="mt-4">Cards</h1>
    </div>
    <div class="ms-auto mt-4">
        <button type="button " class="btn btn-warning" data-bs-toggle="modal" data-bs-target="#CreateFormModal"
            id="CreateDevice">
            Add Card ID
        </button>
    </div>
</div>


<hr>
<div class="table-responsive" style="height: 100%;">
    <table class="table">
        <thead class="table-dark">

            <tr>
                <th scope="col">#</th>
                <th scope="col">Name</th>
                <th scope="col">Card ID</th>
                <th scope="col">Ammount</th>
                <th scope="col">Gateway</th>
                <th scope="col">Access</th>
                <th scope="col">Actions</th>
            </tr>

        </thead>
        <tbody id="table-item-wrapper">
        </tbody>
    </table>
</div>

<!-- Create Modal -->
<div class="modal fade" id="CreateFormModal" tabindex="-1" aria-labelledby="FormModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="FormModalLabel">Create Form</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <form id="create-form">
                    <div class="mb-3">
                        <label for="recipient-name" class="col-form-label">Name:</label>
                        <input type="text" class="form-control" name="name" >
                    </div>
                    <div class="mb-3">
                        <label for="recipient-name" class="col-form-label">Card ID:</label>
                        <input type="text" class="form-control" name="card_id">
                    </div>
                    <div class="mb
                    <div class="mb-3">
                        <label for="recipient-name" class="col-form-label">Ammount:</label>
                        <input type="text" class="form-control" name="ammount">
                    </div>
                    <div class="mb-3">
                        <label for="GatewaySelect">Gateway</label>
                        <select class="form-control GatewaySelect" name="gateway" >
                            
                        </select>
                    </div>
                    <div class="mb-3">
                        <label for="AccessSelect">Access</label>
                        <select class="form-control" name="access">
                            <option value="1">Authorized</option>
                            <option value="2">UnAuthorized</option>
                        </select>
                    </div>

            </div>
            <div class="modal-footer" id="ModalFooter">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                <button type="submit" class="btn btn-warning" >Create</button>
            </div>
            </form>
        </div>
    </div>
</div>

<!-- Edit Modal -->
<div class="modal fade" id="EditFormModal" tabindex="-1" aria-labelledby="FormModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="FormModalLabel">Create Form</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <form id="edit-form">
                    <div class="mb-3">
                        <label for="recipient-name" class="col-form-label">Name:</label>
                        <input type="text" class="form-control" name="name" id="FormModalName">
                    </div>
                    <div class="mb-3">
                        <label for="recipient-name" class="col-form-label">Card ID:</label>
                        <input type="text" class="form-control" name="card_id" id="FormModalCardID">
                    </div>
                    <div class="mb-3">
                        <label for="GatewaySelect">Gateway</label>
                        <select class="form-control GatewaySelect" name="gateway" id="FormModalGateway">
                            
                        </select>
                    </div>
                    <div class="mb-3">
                        <label for="AccessSelect">Access</label>
                        <select class="form-control" name="access" id="FormModalAccess">
                            <option value="1">Authorized</option>
                            <option value="2">UnAuthorized</option>
                        </select>
                    </div>


            </div>
            <div class="modal-footer" id="ModalFooter">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                <button type="submit" class="btn btn-warning">Update</button>
            </div>
            </form>
        </div>
    </div>
</div>



<!-- Payload Modal -->
<div class="modal fade" id="PayloadFormModal" tabindex="-1" aria-labelledby="FormModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="FormModalLabel">Create Form</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <form id="payload-form">
                    <div class="mb-3">
                        <label for="recipient-name" class="col-form-label">Name:</label>
                        <input type="text" class="form-control" name="name" id="FormModalName" readonly>
                    </div>
                    <div class="mb-3">
                        <label for="recipient-name" class="col-form-label">Ammount:</label>
                        <input type="text" class="form-control" name="ammount" id="FormModalCardID">
                    </div>


            <div class="modal-footer" id="ModalFooter">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                <button type="submit" class="btn btn-warning">Update</button>
            </div>
            </form>
        </div>
    </div>
</div>
{% endblock content %}



{% block extra_js %}
<script>
    var host_url = location.protocol + '//' + location.host
    var main_url = new URL(host_url + "/dashboard/api/card-id/")
    var general_id

    function fetchGatewayData(){
        let wrapper = $('.GatewaySelect')
        $.get("/dashboard/api/card-reader/",  // url
            function (data, textStatus, jqXHR) {

                results_data = data
                wrapper.empty()
                results_data.forEach(function (item, i) {
                    // for (post of data.results) {
                    wrapper.append(`<option value="${item.id}" >${item.name}</option>`)
                }


                )
            })
    }

    function fetchData(url) {
        let wrapper = $('#table-item-wrapper')

        $.get(url,  // url
            function (data, textStatus, jqXHR) {

                results_data = data
                wrapper.empty()
                results_data.forEach(function (item, i) {
                    // for (post of data.results) {
                    wrapper.append(`<tr id='table-item-${item.id}'>                
                            <td>${i += 1}</td>
                            <td>${item.name}</td>
                            <td>${item.card_id}</td>
                            <td>${item.ammount} €</td>
                            <td>${item.gateway.name}</td>
                            <td>${item.access.name}</td>
                            <td style="width:20%">
                                <button class="btn btn-primary btn-xs" type="button" onclick="openPayloadModal(${item.id})" >Pay</button>
                                <button class="btn btn-primary btn-xs" type="button" onclick="openEditModal(${item.id})" >Edit</button>
                                <button class="btn btn-danger btn-xs" type="button" onclick="removeItem(${item.id})">Delete</button>                                
                            </td>
                        </tr>`)
                }


                )
            })

    }

    $("#create-form").submit(function (e) {
        e.preventDefault()
        // console.log(this.job_title.value)
        // console.log('sent')
        formData = new FormData();
        formData.append('name', this.name.value)
        formData.append('gateway', this.gateway.value)
        formData.append('card_id', this.card_id.value)
        formData.append('ammount', this.ammount.value)
        formData.append('access', this.access.value)

        $.ajax({
            // contentType: "multipart/form-data",
            headers: {
                'X-CSRFToken': csrftoken,
            },
            type: 'POST',
            processData: false,
            contentType: false,
            data: formData,
            url: "/dashboard/api/card-id/",
            success: function (data) {
                fetchData(main_url)
                $('#create-form').trigger("reset");
                $("#CreateFormModal").modal('hide');
            },
            failure: function (response) {
                alert(response)
            }
        });
    });


    $("#edit-form").submit(function (e) {
        e.preventDefault()
        formData = new FormData();
        formData.append('name', this.name.value)
        formData.append('gateway', this.gateway.value)
        formData.append('card_id', this.card_id.value)
        formData.append('access', this.access.value)
        let id = general_id
        $.ajax({
            // contentType: "multipart/form-data",
            headers: {
                'X-CSRFToken': csrftoken,
            },
            type: 'PATCH',
            processData: false,
            contentType: false,
            data: formData,
            url: `/dashboard/api/card-id/${id}/`,
            success: function (data) {
                fetchData(main_url)
                $('#edit-form').trigger("reset");
                $("#EditFormModal").modal('hide');
            },
            failure: function (response) {
                alert(response)
            }
        });
    });


    $("#payload-form").submit(function (e) {
        e.preventDefault()
        formData = new FormData();
        formData.append('ammount', this.ammount.value)
        let id = general_id
        $.ajax({
            // contentType: "multipart/form-data",
            headers: {
                'X-CSRFToken': csrftoken,
            },
            type: 'PATCH',
            processData: false,
            contentType: false,
            data: formData,
            url: `/dashboard/api/card-id/${id}/`,
            success: function (data) {
                fetchData(main_url)
                $('#edit-form').trigger("reset");
                $("#EditFormModal").modal('hide');
            },
            failure: function (response) {
                alert(response)
            }
        });
    });


    function openEditModal(id) {
        $("#EditFormModal").modal('show');
        general_id = id
        modal = document.getElementById("EditFormModal")
        let result_data
        $.get(`/dashboard/api/card-id/${id}/`,
            function (data, textStatus, jqXHR) {
                result_data = data
                // console.log(result_data.text)

            }).then(function () {
                console.log(result_data)
                $('#FormModalName').val(result_data.name)
                $('#FormModalCardID').val(result_data.card_id)
                $('#FormModalGateway').val(result_data.gateway.id)
                $('#FormModalAccess').val(result_data.access.id)

            })
    }
 function openPayloadModal(id) {
        $("#PayloadFormModal").modal('show');
        general_id = id
        modal = document.getElementById("EditFormModal")
        let result_data
        $.get(`/dashboard/api/card-id/${id}/`,
            function (data, textStatus, jqXHR) {
                result_data = data
                // console.log(result_data.text)

            }).then(function () {
                console.log(result_data)
                $('#FormModalAmmount').val(result_data.ammount)
            })
    }
    function removeItem(id) {
        if (confirm(`Are you sure you want to remove this ${id} id?`)) {
            $.ajax({
                // contentType: "multipart/form-data",
                headers: {
                    'X-CSRFToken': csrftoken,
                },
                type: 'DELETE',
                processData: false,
                contentType: false,
                url: `/dashboard/api/card-id/${id}/`,
                success: function (data) {
                    fetchData(main_url)
                },
                failure: function (response) {
                    alert(response)
                },
                error: function (xhr, status, error) {
                    alert(error);
                }

            });
        } else {

        }
    }


    window.addEventListener('DOMContentLoaded', event => {
        url = main_url
        fetchData(url)
        fetchGatewayData()

        // fetchJobTitles()
    });
</script>
{% endblock extra_js %}

Testing out how to customize a Sharetribe web template. It’s built in React/redux howver I’m having trouble understanding the strcuture and how the components communicates with one another.
text

For Example let’s say I want to move the search bar from the header or add divs in the LandingPage, they are all structure with a pagebuilder component that gets data when it’s pushed from the website like a CMS, the dev guide is not really clear, any help or direction would be greatly apporeciated!