I am trying to add material ui date range picker to add start date and end date.How to customise the material ui date range picker to User will only select the date from Date picker but will not be able to change the date manually.

...
import { DateRangePicker, LocalizationProvider } from "@mui/x-date-pickers-pro";

...
<DateRangePicker
        readOnly={readOnly}
       
        value={props.value ?? [new Date(), new Date()]}
        onChange={(newValue) => props.handleChange(newValue)}
        renderInput={(startProps, endProps) => (
          
            <div className={styles.inputGroup}>
              <div className={styles.fieldBox}>
                <TextField
                  {...startProps}
                  helperText={props.error?.message ?? props.error[0]?.message}
                  label=""
                  className={`textfield ${styles.borderLeftRadius}`}
                  placeholder={startPlaceholder}
                  error={props.error?.message || props.error[1] ? true : false}
                  name={startDateName}
                  InputProps={{
                    readOnly: readOnly,
                  }}
                />
                <span className={styles.iconBox}>
                  <FontAwesomeIcon icon={faCalendarWeek} size="1x" />
                </span>
              </div>
              <div className={styles.date_divider}>
                <FontAwesomeIcon icon={faArrowRight} size="xs" />
              </div>
              <div className={styles.fieldBox}>
                <TextField
                  {...endProps}
                  label=""
                  error={props.error?.message || props.error[1] ? true : false}
                  helperText={props.error?.message ?? props.error[1]?.message}
                  className={`textfield ${styles.borderRightRadius}`}
                  placeholder={endPlaceholder}
                  name={endDateName}
                  InputProps={{
                    readOnly: readOnly,
                  }}
                />
                <span className={styles.iconBox}>
                  <FontAwesomeIcon icon={faCalendarWeek} size="1x" />
                </span>
              </div>
            </div>
          </div>
        )}
      />

Given an array A of non-negative integers of size m. Your task is to sort the array in non-decreasing order and print out the original indices of the new sorted array. Example: A={4,5,3,7,1} After sorting the new array becomes A={1,3,4,5,7}. The required output should be “4 2 0 1 3”

NOTE: The indexing of the array starts with 0.

You can only write your own sorting algorithm must not use builtin functionality of sort()

I have a program that generates a png image in python. It saves a copy locally and sends another copy over stdout to a parent process which also writes it (for testing). The sent over stdout is 881KB and the one saved locally is 470KB. I have inspected their contents and both files are 2919 lines and i’ve parsed through and checked various points to confirm they are identical.

The larger one that transferred over stdout is somehow corrupted despite the contents appearing identical

sender (python)

img = Image.fromarray(
    x_sample.astype(np.uint8))
img.save(os.path.join(
    sample_path, f"{base_count:05}.png"))
my_stdout = open(1, "wb", buffering=1000000)

img.save(my_stdout, "PNG")

receiver (node)

var buffers = [];
txt2img.stdout.on("data", (data) => {
    if (buffers.length === 0) {
       const slice = data.slice(352, data.length - 1);
       buffers.push(slice);
    } else {
       buffers.push(data);
    }
});


txt2img.on("exit", async () => {
   await fs.writeFile(
    `/home/self/Pictures/${new Date().toISOString()}.png`,
     Buffer.concat(buffers),
     "binary"
   );
});

i’ve tried every way I can think of on the nodejs side (receiving) and the python side (sending) to ensure the file is treated as binary and never encoded as utf. Still something is not working

I have express.js controller and I can’t use req.params

The error is Property 'id' is missing in type 'ParamsDictionary' but required in type 'IParam'.

I need to get id from param with type string

import { Request, Response } from 'express'

interface IParam {
    id: string
}

const Update = (req: Request, res: Response) => {
    const { id }: IParam = req.param // The error occured here
}

export default Update

I am using react-native-mapview libraries to display map in mobile application.
now i have a multiple marker in my Map display. every marker have two Callout details, so what happen in my device, it gives one after one. in this case, is there have any way to set Callout for which will be the first just keep that no need to change to next.
just avoid change to next.

if there is any way then please help me to fix it.
ThankYou for your trying in advance.

explain to me how to use ScrollTrigger correctly

I just want to do simple pin the text.

The problem is, when it reach the scroll-start mark, the text goes down. I don’t understand how this thing works

I tried playing with the start and end, still not working

import { useRef, useEffect } from 'react';
import { gsap } from 'gsap';
import { ScrollTrigger } from 'gsap/dist/ScrollTrigger';

gsap.registerPlugin(ScrollTrigger);

export default function Home() {
  const text = useRef();
  const container = useRef();

  useEffect(() => {
    ScrollTrigger.create({
      trigger: container.current,
      pin: text.current,
      markers: true,
      start: '-=100',
      end: '+=500'
    });
  }, []);

  return (
    <section className="h-[3000px]">
      <div className="bg-teal-200 h-20 mt-[40em]" ref={container}>
        <p ref={text} className="ml-20">Cibai</p>
      </div>
    </section>
  );
}

I just want to do simple pin with ScrollTrigger. When start mark reach scroller-start the text goes down instantly. I just want to text to stop where start mark reach scroller-start

I’m attempting to put a point at the edge of a perspective cameras initial visible field, but the point is significantly more inward than I’d expect.

Any idea how I can address this? The trig seems fairly straight forward but its possible I’m missing something

import * as THREE from "three";

let scene = new THREE.Scene();
let aspect = 300 / 200;
let camera = new THREE.PerspectiveCamera(45, aspect, 0.1, 1000);
camera.position.z = 10;

let renderer = new THREE.WebGLRenderer();
renderer.setSize(300, 200);
document.body.appendChild(renderer.domElement);

const pointMesh = new THREE.Mesh(
  new THREE.SphereGeometry(0.1),
  new THREE.MeshBasicMaterial({ color: 0xff0000 })
);
pointMesh.position.x =
  Math.tan(THREE.MathUtils.degToRad(camera.fov) / 2) * camera.position.z;

scene.add(pointMesh);

renderer.render(scene, camera);

I am trying to add the datalabels onto my stacked bar/line chart in chartJS specifically at the line chart area. Because the values are not aligned with the Y-Axis, therefore I wanted to use chartJS datalabels plugin to show the values on top of the line chart only for better clarification when it is printed out.
What I tried:

#1 putting into config
const config = {
    type: 'line',
    data: data,
    options: {
      plugins: {
        datalabels: {
          anchor: 'end',
          align: 'top',
          formatter: function(value, context) {
            return GetValueFormatted(value);
          },
          borderRadius: 4,
          color: 'white',
          font: {
            weight: 'bold'
          },
          formatter: Math.round,
          padding: 6
        },
        title: {
          display: true,
          text: 'Menu Performance Chart'
        },
      },
      scales: {
        y: {
          stacked: true
        }
      }
    },
  };

#2 putting into specific dataset
const data = {
    labels: labels,
    datasets: [{
        label: 'Sub Total Sales (RM)',
        data: [
          '111',
          '22',
          '31',
          '12',
          '71',
          '110',
          '22',
        ],
        borderColor: 'rgb(255, 99, 132)',
        backgroundColor: 'rgba(255, 99, 132, 0.2)',
        stack: 'combined',
        type: 'bar'
      },
      {
        label: 'Total Amount Sold',
        data: [
          '11',
          '2',
          '3',
          '1',
          '7',
          '10',
          '2',
        ],
        borderColor: 'rgb(255, 159, 64)',
        backgroundColor: 'rgba(255, 159, 64, 0.2)',
        stack: 'combined',
      },
    ]
  };

I even tried the two at the same time to see if there were any results. Could anyone assist me with this? Thank you in advance.

Here is my code demo in JSFiddle:
https://jsfiddle.net/4gat7rzs/4/

I tried to add two of my js animation into a one js file which is the timeline and the playlist animation. However, when i try to link the js file to mu html file, it didnt work. Only works if i put the script tag at the bottom of my body tag but online the playlist animation that is working but not the timeline animation. I cant figure out as to why this problem happened. I am still new to js hence thats why i encounter this problem. I thank those who take their time to figure this problem with me.

My index.html file

<!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="style/main.css" />
    <link rel="preconnect" href="https://fonts.gstatic.com" />
    <!--Font-->
    <link
        href="https://fonts.googleapis.com/css2?family=Josefin+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&#38;display=swap"
        rel="stylesheet" />

    <!--Social Media icons-->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"
        integrity="sha512-iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w=="
        crossorigin="anonymous" referrerpolicy="no-referrer" />



    <title>Vague Models</title>
</head>

<body>
    <header>
        <div class="tophead">
            <p>sushi tight, sushi clean, sushi fresh</p>
        </div>
    </header>

    <div class="coverpage">
        <nav class="menu">
            <label><a href="index.html">Vague</a></label>
            <ul>
                <li><a href="index.html">Home</a></li>
                <li><a href="#">Services</a>
                    <ul class="dropdown">
                        <li><a href="service1.html">Runway</a></li>
                        <li><a href="service2.html">Commercial</a></li>
                        <li><a href="service3.html">Fitness</a></li>
                        <li><a href="service4.html">Fashion</a></li>
                    </ul>
                </li>
                <li><a href="enquiry.html">Enquiry</a></li>
                <li><a href="about.html">About</a></li>
                <li><a href="disclaimer.html">Disclaimer</a></li>
                <li><a href="enchancement.html">Enchancement</a></li>
                <li><a href="acknowledgement.html">Acknowledgement</a></li>
            </ul>
        </nav>
        <h1 class="title">Vague</h1>
    </div>


    <!--about-->
    <section class="about">
        <div class="main">
            <img src="style/images/1.jpg" alt="model group photo" />
            <div class="about-text">
                <h2>Our Story</h2>
                <h5>Director <span>&#38; Models</span></h5>
                <p>"He Who Must Not Be Named" as the company's creator, established Vague in 2020. Vague gave rise to
                    the Supermodel, which
                    has defined the business. By building the careers of our artists holistically and defining trends
                    within the industry,
                    Vague maintains its position as a leader in fashion. Vague has worked with artists, including Dante
                    and Nik Connor.
                    Vague's commitment to supporting diversity and developing our skills is advancing inclusion in the
                    sector. Vague
                    currently has offices in New York. Vague invites you to join us in defining what lies ahead as we
                    embark on a new
                    chapter in our illustrious history.</p>
                <p>
                    <a class="button" href="enquiry.html">Let's Talk</a>
                </p>

            </div>
        </div>
    </section>

    <div class="service">
        <div class="title">
            <h2>Our Services</h2>
        </div>

        <div class="box">
            <div class="card">
                <img src="images/spotlights.png" alt="spotlight2" />
                <h5>Runway</h5>
                <div class="pra">
                    <p>We believe modelling is a power for those who dare to show off attidude and confidents! Come and
                        check out our runway models
                    </p>

                    <p>
                        <a class="button" href="service1.html">Read Me</a>
                    </p>
                </div>
            </div>

            <div class="card">
                <img src="images/spotlight2.png" alt="spotlight2" />
                <h5>Commercial</h5>
                <div class="pra">
                    <p>We believe modelling is a power for those who dare to show off attidude and confidents! Come and
                        check out our Commercial models</p>

                    <p>
                        <a class="button" href="service2.html">Read Me</a>
                    </p>
                </div>
            </div>

            <div class="card">
                <img src="images/30_dumbell.png" alt="spotlight2" />
                <h5>Fitness</h5>
                <div class="pra">
                    <p>We believe modelling is a power for those who dare to show off attidude and confidents! Come and
                        check out our fitness models</p>

                    <p>
                        <a class="button" href="service3.html">Read Me</a>
                    </p>
                </div>
            </div>
            <div class="card">
                <img src="images/glasses_11.png" alt="spotlight2" />
                <h5>Fashion</h5>
                <div class="pra">
                    <p>We believe modelling is a power for those who dare to show off attidude and confidents! Come and
                        check out our fashion models</p>

                    <p>
                        <a class="button" href="service4.html">Read me</a>
                    </p>
                </div>
            </div>
        </div>

    </div>

    <!--timeline-->
    <div class="t-ctn">
        <div class="t-sect">
            <h1>Animated TimeLine</h1>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quaerat incidunt distinctio,

            </p>
        </div>
        <div class="tl">
            <div class="l"></div>
            <div class="sect">
                <div class="bead"></div>
                <div class="content">
                    <h2>Web Development</h2>
                    <p>
                        Lorem ipsum dolor sit amet consectetur adipisicing elit.
                        Animi ab repellendus pariatur? Maxime eius excepturi
                        soluta doloremque, rerum vitae
                        similique cumque, numquam voluptatibus exercitationem

                    </p>
                </div>
            </div>

            <div class="sect">
                <div class="bead"></div>
                <div class="content">
                    <h2>Web Development</h2>
                    <p>
                        Lorem ipsum dolor sit amet consectetur adipisicing elit.
                        Animi ab repellendus pariatur? Maxime eius excepturi
                        soluta doloremque, rerum vitae

                    </p>
                </div>
            </div>

            <div class="sect">
                <div class="bead"></div>
                <div class="content">
                    <h2>Web Development</h2>
                    <p>
                        Lorem ipsum dolor sit amet consectetur adipisicing elit.
                        Animi ab repellendus pariatur? Maxime eius excepturi
                        soluta doloremque, rerum vitae
                        similique cumque, numquam voluptatibus exercitationem

                    </p>
                </div>
            </div>
        </div>
        <!--<div class="timeline">
            <div class="box left">
                <div class="text">
                    <h2>Vague Inc.</h2>
                    <small>2021 - 2022</small>
                    <p>Our models became among the top demanded models by many prestigious companies like Vilan,
                        Victorious Truth, Port, etc.</p>
                    <p>Dante C. (Vague Models) has won The World Mediocre Facade Man 2021. Apart from that, he has
                        brought the fame and honours
                        to our company.</p>

                    <span class="left-arrow"></span>
                </div>
            </div>

            <div class="box right">
                <div class="text">
                    <h2>Vague Inc.</h2>
                    <small>2021 - 2022</small>
                    <p>We managed to donate $ 4 million to the Stop White Bleaching Product campaign to spread awareness
                        of the adverse effects
                        of the skin bleaching product.</p>
                    <p>Organise the largest modelling auditions in world. The auditions covered countries like China,
                        India, US, UK, UAE, Korea, Japan, Malaysia, Indonesia, and Australia</p>
                    <p>Won The Best Modelling Company Mediocre Category by Guinness World Book of Record</p>

                    <span class="right-arrow"></span>
                </div>
            </div>

            <div class="box left">
                <div class="text">
                    <h2>Vague Inc.</h2>
                    <small>2021 - 2022</small>
                    <p>Managed to recruited 16 Best Models from countries around the world such as Malaysia, UK, US,
                        Ghana, India, Indonesia</p>
                    <p>Jessica W.(Vague Models) was voted for Social Stopper of the year 2022. She also seen on the
                        nominations list under the Breakdown Moon category.</p>

                    <span class="left-arrow"></span>
                </div>
            </div>
        </div>-->

    </div>

    <!--Video of Models-->
    <div class="models-ctn">
        <h1>Check out our models!</h1>
        <div class="v-ctn">
            <section class="m-v">
                <video src="video/mixkit-man-modelling-in-different-places-359.mp4" controls autoplay muted></video>
                <h3 class="t">Title of the playing Video.</h3>
            </section>

            <section class="v-p">
                <h3 class="t">Vague Models</h3>
                <p>3 videos &nbsp; . &nbsp; .44s</p>
                <div class="v">

                </div>
            </section>
        </div>


        <!--<div class="m-row">
            <div class="m-col">
                <div class="m-img">
                    <video controls autoplay>
                        <source src="video/mixkit-man-modelling-in-different-places-359.mp4" type="video/mp4" />
                    </video>
                </div>
            </div>
            <div class="m-col">
                <div class="m-img">
                    <video controls autoplay>
                        <source src="video/mixkit-two-elegant-women-taking-a-selfie-in-a-bathroom-43569.mp4"
                            type="video/mp4" />
                    </video>
                </div>
            </div>
            <div class="m-col">
                <div class="m-img">
                    <video controls autoplay>
                        <source src="video/mixkit-urban-fashion-female-models-43276.mp4" type="video/mp4" />
                    </video>
                </div>
            </div>

        </div>-->
    </div>

    <!--Model cards-->
    <div class="mod-ctn">
        <h1>Our Top Models</h1>
        <div class="mcard">
            <div class="inner-card">
                <div class="front">
                    <img src="images/s1m1.jpg" alt="model picture" />
                </div>
                <div class="back">
                    <h2>Awards:</h2>
                    <p>Biggest models ever awards</p>
                    <p>
                        <a class="button" href="service1.html">Read Me</a>
                    </p>
                </div>
            </div>
        </div>
        <div class="mcard">
            <div class="inner-card">
                <div class="front">
                    <img src="images/s1f1.jpg" alt="model picture" />
                </div>
                <div class="back">
                    <h2>Awards:</h2>
                    <p>Biggest models ever awards</p>
                    <p>
                        <a class="button" href="service1.html">Read Me</a>
                    </p>
                </div>
            </div>
        </div>
        <div class="mcard">
            <div class="inner-card">
                <div class="front">
                    <img src="images/s1f1d.jpg" alt="model picture" />
                </div>
                <div class="back">
                    <h2>Awards:</h2>
                    <p>Biggest models ever awards</p>
                    <p>
                        <a class="button" href="service1.html">Read Me</a>
                    </p>
                </div>
            </div>
        </div>

        <div class="mcard">
            <div class="inner-card">
                <div class="front">
                    <img src="images/s1m1d.jpg" alt="model picture" />
                </div>
                <div class="back">
                    <h2>Awards:</h2>
                    <p>Biggest models ever awards</p>
                    <p>
                        <a class="button" href="service1.html">Read Me</a>
                    </p>
                </div>
            </div>
        </div>


    </div>
    <!--Google Map-->
    <div class="g-ctn">
        <h1>Our Office</h1>
        <iframe
            src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d387193.30594994064!2d-74.25986652425023!3d40.69714941680757!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x89c24fa5d33f083b%3A0xc80b8f06e177fe62!2sNew%20York%2C%20NY%2C%20USA!5e0!3m2!1sen!2sid!4v1665210935288!5m2!1sen!2sid"
            width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy"
            referrerpolicy="no-referrer-when-downgrade"></iframe>
    </div>



    <!--Footer-->
    <footer>
        <p>Vague</p>
        <p>For more information on our models - please click on the link below to subscribe to our channel:</p>
        <div class="social">
            <a href="https://www.youtube.com/"><i class="fab fa-youtube"></i></a>
            <a href="https://www.instagram.com/"><i class="fab fa-instagram"></i></a>
            <a href="https://twitter.com/"><i class="fab fa-twitter"></i></a>
        </div>
        <p class="end">CopyRight by Vague Inc.</p>
    </footer>




    <script src="javascripts/scriptb.js"></script>

</body>

</html>

My js file

/* timeline */
function qs(selector, all = false) {
    return all ? document.querySelectorAll(selector) : document.querySelector(selector)
}

const sections = qs('.sect', true);
const timeline = qs('.tl');
const line = qs('.l');
line.style.bottom = `calc(100% - 20px)`;
let prevScrollY = window.scrollY;
let up, down;
let full = false;
let set = 0;
const targetY = window.innerHeight * 0.8;

function scrollHandler(e) {
    const {
        scrollY
    } = window;
    up = scrollY < prevScrollY;
    down = !up;
    const timelineRect = timeline.getBoundingClientRect();
    const lineRect = line.getBoundingClientRect(); //CONST LINEHEIGHT = lineRect.bottom - lineRect.top

    const dist = targetY - timelineRect.top
    console.log(dist);

    if (down && !full) {
        set = Math.max(set, dist);
        line.style.bottom = `calc(100% - ${set}px)`
    }

    if (dist > timeline.offsetHeight + 50 && !full) {
        full = true;
        line.style.bottom = `-50px`
    }

    sections.forEach(item => {
        //console.log(items);
        const rect = item.getBoundingClientRect();

        if (rect.top + item.offsetHeight / 5 < targetY) {
            item.classList.add('show-me')
        }
    });

    prevScrollY = window.scrollY;
}

scrollHandler();
line.style.display = 'block';
window.addEventListener('scroll', scrollHandler)



/* video */
const main_video = document.querySelector('.m-v video');
const main_video_title = document.querySelector('.m-v .t');
const video_playlist = document.querySelector('.v-p .v');
let data = [
    {
        'id': 'a1',
        'title': 'Max raider ',
        'name': 'mixkit-man-modelling-in-different-places-359.mp4',
        'duration': '0:21',
    },
    {
        'id': 'a2',
        'title': 'Tes and La',
        'name': 'mixkit-two-elegant-women-taking-a-selfie-in-a-bathroom-43569.mp4',
        'duration': '0:15',
    },
    {
        'id': 'a3',
        'title': 'Fac and Boo',
        'name': 'mixkit-urban-fashion-female-models-43276.mp4',
        'duration': '0:8',
    },


];

data.forEach((video, i) => {
    let video_element = `
                <div class="video" data-id="${video.id}">
                    <img src="images/play.svg" alt="">
                    <p>${i + 1 > 9 ? i + 1 : '0' + (i + 1)}. </p>
                    <h3 class="title">${video.title}</h3>
                    <p class="time">${video.duration}</p>
                </div>
    `;
    video_playlist.innerHTML += video_element;
})

let videos = document.querySelectorAll('.video');
videos[0].classList.add('active');
videos[0].querySelector('img').src = '../images/pause.svg';

videos.forEach(selected_video => {
    selected_video.onclick = () => {

        for (all_videos of videos) {
            all_videos.classList.remove('active');
            all_videos.querySelector('img').src = '../images/play.svg';

        }

        selected_video.classList.add('active');
        selected_video.querySelector('img').src = '../images/pause.svg';

        let match_video = data.find(video => video.id == selected_video.dataset.id);
        main_video.src = 'video/' + match_video.name;
        main_video_title.innerHTML = match_video.title;
    }
});

I’m trying to create an overlay on my screen when I click an ‘a’ element. I am using the ‘onclick’ event in javascript to try and produce this result. However, when the overlay (a semi-transparent blue background) appears, it only appears for a short second.

I want it so that the overlay stays on screen when I click on the ‘a’ element to display it.

Thank you to anyone spending time to help.

my code:

<!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">
    <title>Document</title>

    <script>
        var buton = document.getElementById("overlay");
        function on() {
            document.getElementById("overlay").style.display = "block";
        }
        document.getElementsById("text").addEventListener("click", on())
    </script>

</head>

<body>
    <div id="overlay"> </div>
    <a id="text" onclick="on()" href=""> click me</a>

</body>

</html>

<style>
    #overlay {
        position: absolute;
        top: 0;
        bottom: 0;
        right: 0;
        left: 0;
        width: 100%;
        height: 100%;
        display: none;
        background-color: blue;
        opacity: 0.8;
        z-index: 2;
    }
</style>

I have this data and would like know how do I write the same in javascript ?

if(entity == 'abc' && !contains(keys(@), 'def'), 
        {
            students: people[*].{key: abc.id, value: @},
            joined:{
            student:people[*]
        }
        }.joined,
       if(
        entity == 'abc',
        
        { 
            lecturers: values(def)[*].{key: @[0].student.id, value:@},
            students: people[*].{key: entity.id, value: @},
            joined: list_join($.lecturers, $.students, &key, &key)[*].{
                key: left[0].key,
                lecturers: left[0].value,
                studemt: right[0].value
            }   
        }.joined

)

I receive 2 XML files named call log and sms log every hour. I want to get the ids of the latest of both call and sms files using Google Apps Script.

Below is the code that will get you the latest file:

function NewestFile()
{

var folder = DriveApp.getFolderById('###');
var fi = folder.getFiles();
var lastUpdatedFile = null;

while(fi.hasNext()){
 if(!lastUpdatedFile){ //Checks if we didn't assign anything to lastUpdatedFile
   lastUpdatedFile = fi.next();
 }else{
  var currentFile = fi.next();
  if(lastUpdatedFile.getLastUpdated() < currentFile.getLastUpdated()){
    lastUpdatedFile = currentFile;
  }
 }
}
   
     return [lastUpdatedFile.getId(),lastUpdatedFile.getName()];
}

The above script works fine if you want the latest between all of the files. However, I want to get the id of the latest of sms and call individually. I hope I was clear enough. I appreciate your help. Thank you

Currently in my GraphQL query, i can receive a single array response. But my response can be multiple arrays and there can be null in between of the response too depending on the input. Currenly if i have two inputs and suppose i’m getting an array for the first input and error for the second, it will throw an error. I need to fix that by showing null if error and returning the array if success. Here’s what i have right now:

export const LookupUsers = gql`
  query {
    lookupUsers(ethAddresses: ["0x433232bC8C604d0308B71Defdgd1Da86"]) {
      ...User
    }
  }

  fragment Identifiable on Node {
    __typename
    id
  }

  fragment User on User {
    ...Identifiable
    ethAddress
    firstName
    lastName
  }
`;

export interface Result {
  readonly user:  null | Array<null | User> ;
  readonly lookupUsers: Array<null | LookupUsersType>;
}

export interface LookupPayload {
  readonly payload: Array<string>;
}

export interface User extends Identifiable {
  readonly ethAddress: string;
  readonly emailAddress?: string;
  readonly firstName?: string;
  readonly lastName?: string;
}

export interface LookupUsersType extends Identifiable {
  readonly ethAddress: string;
  readonly emailAddress: string;
  readonly firstName?: string;
  readonly lastName?: string;
}
export interface Identifiable {
  readonly __typename: string;
  readonly id: string;
}

Where am i going wrong with this ?

Problem

I need OAuth2 Tokens for the user accessing the browser from multiple OAuth serves in order to have access tokens for accessing multiple resources.

The OAuth authentication process triggers when the user clicks a single button. Let’s call it Login.

Well not exactly what we are doing picture getting the user simultaneously authenticating using Google and Azure AD, so tokens for each can be obtained. (Having to manage individual credentials for each is an accepted pain point.)

The problem though is how to code up the JavaScript to trigger and manage authenticating with each where they both use callbacks and browser redirects. And they both must simply reload the users existing page storing the JWT of both in hidden form fields. (Using Session Storage is acceptable and happens anyway yet it must be retained between redirects.)

Restrictions

• Changing the basic requirements is not possible
• Adding new pages or radically changing the web application layout and pages is not possible
• Using vanilla Javascript web app that is hybrid SPA multipage App. (Each page can be semi-SPA ultimately pass on to the next required page vie workflow processing.)
• No normal sever side coding possible

Possible Solution

• Using hidden iframes may be possible if carefully managed and invisible to user
• Synchronises authentication where one auth process completes before the other starts is desirable

Attempted

• Using chained Promises, yet things get lost during the redirects, race conditions happen, and confusion breaks out.
• To use change state events of hidden form fields to orchestrate synchronises authentication, i.e. when one completes setting form field to obtained token that other starts

Seeking

• Some suggestions on how to solve this problem from smart cookies or those that have tackled it before.
• Hints at things that will not work and should be avoided

I have a nav bar containing 175 countries and my aim is that when a country is selected from the list, its associated polygon border is shown around it on the map

So far I have this code

async function addCountryBorder(countryName) {
    const result = await $.ajax({
        url: "assets/php/getcountryList.php",
        type: "GET",
        dataType: "json",
        data: {},
        success: function(result) {
            console.log(result)
            
            const filterData = result.data.border.features.filter((a) => (a.properties.name === countryName));
            

            if (border) map.removeLayer(border)

            border = new L.geoJSON(filterData[0], {
                style: {
                    color: '#006600'
                }
            }).addTo(map)

            map.panTo(border.getBounds().getCenter())
            map.fitBounds(border.getBounds())

}
    })
}

However, it is not adding a border at all.
BUT when I change const filterData = result.data.border.features.filter((a) => (a.properties.name === countryName)); to const filterData = result.data.border.features.filter((a) => (a.properties.name)); it adds a border to the first country in my list with no issues

However, no matter what country I select from the list using that method, it only ever keeps the border on the 1st country in the list