问:
React Testing with Firebase Realtime Database & Auth - empty user.uid makes tests fail
I’m building a financial dashboard with React that is tested with React-testing-library / Jest, and connected to Firebase for authentication and its Realtime Database.
My issue I’m having is during testing:
In my Transactions file, I have a useEffect that updates an allTransactions State with the transactions in that users database, the users id/auth is being tracked by useAuthState (stored in the var user.uid, users  must login before using the dashboard).
My tests fail because there is no user specified (an empty user.uid) to get the transactions from to eventually display them.
How do I go about having a user.uid available for when my tests run?

Transactions.js

```<code>import React, { useEffect, useState } from 'react';
import { getDatabase, ref, onValue, remove } from "firebase/database";
import { useAuthState } from 'react-firebase-hooks/auth';
import { auth } from '../../config/Firebase';

const [ allTransactions, setAllTransactions ] = useState([]);
const [ user ] = useAuthState(auth);

useEffect(()=> {
   const db = getDatabase();
   const dbRef = ref(db,'transactions/' + user.uid);
   onValue(dbRef, (snapshot) => {
     snapshot.forEach((childSnapshot) => {
     const childData = childSnapshot.val();
     // if snapshot id is found in the alltransactions array dont add it
     let check = allTransactions.some(item => item.id === childData.id);
     if(!check){
        let oldTransactions = allTransactions;
        oldTransactions.push(childData);
        setAllTransactions(oldTransactions);
      }
   })});
}, []);
</code>```

Transactions.test.js

```<code>import { render, screen, cleanup } from '@testing-library/react';
import Transactions from './Transactions';
afterEach(cleanup);

test('Transactions component renders', () => {
 render(<Transactions />);
 expect(screen.getByText('Transactions')).toBeInTheDocument();
});
</code>```

Firebase.js Config

```<code>import { initializeApp } from "firebase/app";
import { getAuth } from 'firebase/auth';

const firebaseConfig = {
  apiKey: process.env.REACT_APP_API_KEY,
  authDomain: process.env.REACT_APP_AUTH_DOMAIN,
  projectId: process.env.REACT_APP_PROJECT_ID,
  storageBucket: process.env.REACT_APP_STORAGE_BUCKET,
  messagingSenderId: process.env.REACT_APP_MESSAGING_SENDER_ID,
  appId: process.env.REACT_APP_APP_ID,
  measurementId: process.env.REACT_APP_MEASUREMENT_ID
};

// Initialize Firebase
initializeApp(firebaseConfig);
export const auth = getAuth();
</code>```

Failing test error

I'm expecting to be able to test my code, even if that means I need to mock data or run it with an emulator. I eventually want to be able to test writing to, deleting from the database, and displaying the info in the database.

Body:
I’m building a financial dashboard with React that is tested with React-testing-library / Jest, and connected to Firebase for authentication and its Realtime Database.
My issue I’m having is during testing:
In my Transactions file, I have a useEffect that updates an allTransactions State with the transactions in that users database, the users id/auth is being tracked by useAuthState (stored in the var user.uid, users  must login before using the dashboard).
My tests fail because there is no user specified (an empty user.uid) to get the transactions from to eventually display them.
How do I go about having a user.uid available for when my tests run?

Transactions.js

import React, { useEffect, useState } from 'react';
import { getDatabase, ref, onValue, remove } from "firebase/database";
import { useAuthState } from 'react-firebase-hooks/auth';
import { auth } from '../../config/Firebase';

const [ allTransactions, setAllTransactions ] = useState([]);
const [ user ] = useAuthState(auth);

useEffect(()=> {
   const db = getDatabase();
   const dbRef = ref(db,'transactions/' + user.uid);
   onValue(dbRef, (snapshot) => {
     snapshot.forEach((childSnapshot) => {
     const childData = childSnapshot.val();
     // if snapshot id is found in the alltransactions array dont add it
     let check = allTransactions.some(item => item.id === childData.id);
     if(!check){
        let oldTransactions = allTransactions;
        oldTransactions.push(childData);
        setAllTransactions(oldTransactions);
      }
   })});
}, []);

Transactions.test.js

import { render, screen, cleanup } from '@testing-library/react';
import Transactions from './Transactions';
afterEach(cleanup);

test('Transactions component renders', () => {
 render(<Transactions />);
 expect(screen.getByText('Transactions')).toBeInTheDocument();
});

Firebase.js Config

import { initializeApp } from "firebase/app";
import { getAuth } from 'firebase/auth';

const firebaseConfig = {
  apiKey: process.env.REACT_APP_API_KEY,
  authDomain: process.env.REACT_APP_AUTH_DOMAIN,
  projectId: process.env.REACT_APP_PROJECT_ID,
  storageBucket: process.env.REACT_APP_STORAGE_BUCKET,
  messagingSenderId: process.env.REACT_APP_MESSAGING_SENDER_ID,
  appId: process.env.REACT_APP_APP_ID,
  measurementId: process.env.REACT_APP_MEASUREMENT_ID
};

// Initialize Firebase
initializeApp(firebaseConfig);
export const auth = getAuth();

Failing test error

I'm expecting to be able to test my code, even if that means I need to mock data or run it with an emulator. I eventually want to be able to test writing to, deleting from the database, and displaying the info in the database.


来源: stackexchange

问:
Is there any way i can read text from the terminal in python?
I was wondering if there was any way that i could read recent text from the terminal in python. I have heard about reading output of command with subprocess.run or subprocess.check_output, however, that requires a command to be run at that specific time. Is there any way i can just read the recent text from the terminal, without running a command to "catch" it?</p>

ContentLicense: CC BY-SA 4.0


问:
Retain query on caddy canonical redirect for file_server directive
EDIT: looks like it's the same issue that this merged PR is fixing https://github.com/caddyserver/caddy/pull/4196

EDIT 2: that PR got reverted by https://github.com/caddyserver/caddy/commit/c0f76e9ed482b0abde0c3d8f5e26e9f015418ca3 so I've raised a new PR to fix: https://github.com/caddyserver/caddy/pull/5253

EDIT 3: That last PR only fixes the issue when you have browsing enabled for the file_server directive. You'll also need this PR https://github.com/caddyserver/caddy/pull/5254 which fixes it for the non-browse case.

EDIT 4: my PR might have subtle security issues https://github.com/caddyserver/caddy/pull/5254#issuecomment-1353770422 hoping to work with the project team to get a safe fix

I have a simple Caddyfile for a static file server:

```<code>example.com {
  encode gzip
  file_server {
      root "/path/to/files"
  }
}
</code>```

The issue I have, is that when I have a structure like:

/path/to/files/demo/index.html

and a link like /demo?app=123, Caddy issues a 308 redirect to /demo/ because the request is really for the index.html in the demo directory. The querystring ?app=123 is dropped from the redirect.

What does my Caddyfile need to look like, so the request for /demo?app=123 becomes /demo/?app=123

Body:
EDIT: looks like it's the same issue that this merged PR is fixing https://github.com/caddyserver/caddy/pull/4196

EDIT 2: that PR got reverted by https://github.com/caddyserver/caddy/commit/c0f76e9ed482b0abde0c3d8f5e26e9f015418ca3 so I've raised a new PR to fix: https://github.com/caddyserver/caddy/pull/5253

EDIT 3: That last PR only fixes the issue when you have browsing enabled for the file_server directive. You'll also need this PR https://github.com/caddyserver/caddy/pull/5254 which fixes it for the non-browse case.

EDIT 4: my PR might have subtle security issues https://github.com/caddyserver/caddy/pull/5254#issuecomment-1353770422 hoping to work with the project team to get a safe fix

I have a simple Caddyfile for a static file server:

example.com {
  encode gzip
  file_server {
      root "/path/to/files"
  }
}

The issue I have, is that when I have a structure like:

/path/to/files/demo/index.html

and a link like /demo?app=123, Caddy issues a 308 redirect to /demo/ because the request is really for the index.html in the demo directory. The querystring ?app=123 is dropped from the redirect.

What does my Caddyfile need to look like, so the request for /demo?app=123 becomes /demo/?app=123


问:
Basic authentication in Spring Boot
I have added basic authentication in my Rest API. My API is CRUD. I have changed the username and password. When I apply the GET, GET by id parameter and POST, they are working flawlessly but when I  call the PUT and DELETE, I get 401 unauthorized. I have checked the username and password for they are correct or no. There is no problem about it. What is the reason about this issue?

pom.xml

```<code><?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
   xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd">
   <modelVersion>4.0.0</modelVersion>
   <parent>
      <groupId>org.springframework.boot</groupId>
      <artifactId>spring-boot-starter-parent</artifactId>
      <version>3.0.0</version>
      <relativePath/> <!-- lookup parent from repository -->
   </parent>
   <groupId>com.xyztq</groupId>
   <artifactId>TodoApp2</artifactId>
   <version>0.0.1-SNAPSHOT</version>
   <name>TodoApp2</name>
   <description>Demo project for Spring Boot</description>
   <properties>
      <java.version>17</java.version>
   </properties>
   <dependencies>
      <dependency>
         <groupId>org.springframework.boot</groupId>
         <artifactId>spring-boot-starter-data-mongodb</artifactId>
      </dependency>
      <dependency>
         <groupId>org.springframework.boot</groupId>
         <artifactId>spring-boot-starter-web</artifactId>
      </dependency>

      <dependency>
         <groupId>org.projectlombok</groupId>
         <artifactId>lombok</artifactId>
         <optional>true</optional>
      </dependency>
      <dependency>
         <groupId>org.springframework.boot</groupId>
         <artifactId>spring-boot-starter-security</artifactId>
      </dependency>
      <dependency>
         <groupId>org.springframework.boot</groupId>
         <artifactId>spring-boot-starter-test</artifactId>
         <scope>test</scope>
      </dependency>
   </dependencies>

   <build>
      <plugins>
         <plugin>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-maven-plugin</artifactId>
            <configuration>
               <excludes>
                  <exclude>
                     <groupId>org.project.lombok</groupId>
                     <artifactId>lombok</artifactId>
                  </exclude>
               </excludes>
            </configuration>
         </plugin>
      </plugins>
   </build>

</project>
</code>```

SecurityConfiguration class

```<code>@Configuration
@EnableWebSecurity
public class SecurityConfiguration {

    @Bean
    public SecurityFilterChain filterChain(HttpSecurity http) throws Exception{
      http.httpBasic();
      http.formLogin();

  http.authorizeHttpRequests().requestMatchers("/todos").authenticated().and()
                .csrf().ignoringRequestMatchers("/todos")
                .and().authorizeHttpRequests().requestMatchers("/todos/{id}").authenticated().and()
                .csrf().ignoringRequestMatchers("/todos/{id}");
        return http.build();
    }
</code>```

This is my controller

```<code>@RestController
@RequestMapping("/todos")
@AllArgsConstructor
public class TodoController {
    private final TodoService todoService;

    @GetMapping
    public ResponseEntity<List<Todo>> getTodos(@RequestParam(required = false) String title){
        return new ResponseEntity<>(todoService.getTodos(title), OK);
    }

    @GetMapping("/{id}")
    public ResponseEntity<Todo> getTodo(@PathVariable String id){
        return new ResponseEntity<>(todoService.getTodoById(id), OK);
    }

    @PostMapping
    public ResponseEntity<Todo> createTodo(@RequestBody Todo todo){
        return new ResponseEntity<>(todoService.createTodo(todo), OK);
    }

    @PutMapping("/{id}")
    public ResponseEntity<Void> updateTodo(@PathVariable String id,@RequestBody Todo todo){
        todoService.updateTodo(id,todo);
        return new ResponseEntity<>(OK);
    }
    @PatchMapping("/{id}")
    public ResponseEntity<Void> updateDoneTodo(@PathVariable String id,@RequestBody Todo todo){
        todoService.patchTodo(id,todo);
        return new ResponseEntity<>(OK);
    }

    @DeleteMapping("/{id}")
    public ResponseEntity<Void> deleteTodo(@PathVariable String id){
        todoService.deleteTodo(id);
        return new ResponseEntity<>(OK);
    }
</code>```

Title: Basic authentication in Spring Boot

Body:
I have added basic authentication in my Rest API. My API is CRUD. I have changed the username and password. When I apply the GET, GET by id parameter and POST, they are working flawlessly but when I  call the PUT and DELETE, I get 401 unauthorized. I have checked the username and password for they are correct or no. There is no problem about it. What is the reason about this issue?

pom.xml

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
   xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd">
   <modelVersion>4.0.0</modelVersion>
   <parent>
      <groupId>org.springframework.boot</groupId>
      <artifactId>spring-boot-starter-parent</artifactId>
      <version>3.0.0</version>
      <relativePath/>
   </parent>
   <groupId>com.xyztq</groupId>
   <artifactId>TodoApp2</artifactId>
   <version>0.0.1-SNAPSHOT</version>
   <name>TodoApp2</name>
   <description>Demo project for Spring Boot</description>
   <properties>
      <java.version>17</java.version>
   </properties>
   <dependencies>
      <dependency>
         <groupId>org.springframework.boot</groupId>
         <artifactId>spring-boot-starter-data-mongodb</artifactId>
      </dependency>
      <dependency>
         <groupId>org.springframework.boot</groupId>
         <artifactId>spring-boot-starter-web</artifactId>
      </dependency>

      <dependency>
         <groupId>org.projectlombok</groupId>
         <artifactId>lombok</artifactId>
         <optional>true</optional>
      </dependency>
      <dependency>
         <groupId>org.springframework.boot</groupId>
         <artifactId>spring-boot-starter-security</artifactId>
      </dependency>
      <dependency>
         <groupId>org.springframework.boot</groupId>
         <artifactId>spring-boot-starter-test</artifactId>
         <scope>test</scope>
      </dependency>
   </dependencies>

   <build>
      <plugins>
         <plugin>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-maven-plugin</artifactId>
            <configuration>
               <excludes>
                  <exclude>
                     <groupId>org.project.lombok</groupId>
                     <artifactId>lombok</artifactId>
                  </exclude>
               </excludes>
            </configuration>
         </plugin>
      </plugins>
   </build>

</project>

SecurityConfiguration class

@Configuration
@EnableWebSecurity
public class SecurityConfiguration {

    @Bean
    public SecurityFilterChain filterChain(HttpSecurity http) throws Exception{
      http.httpBasic();
      http.formLogin();

  http.authorizeHttpRequests().requestMatchers("/todos").authenticated().and()
                .csrf().ignoringRequestMatchers("/todos")
                .and().authorizeHttpRequests().requestMatchers("/todos/{id}").authenticated().and()
                .csrf().ignoringRequestMatchers("/todos/{id}");
        return http.build();
    }

This is my controller

@RestController
@RequestMapping("/todos")
@AllArgsConstructor
public class TodoController {
    private final TodoService todoService;

    @GetMapping
    public ResponseEntity<List<Todo>> getTodos(@RequestParam(required = false) String title){
        return new ResponseEntity<>(todoService.getTodos(title), OK);
    }

    @GetMapping("/{id}")
    public ResponseEntity<Todo> getTodo(@PathVariable String id){
        return new ResponseEntity<>(todoService.getTodoById(id), OK);
    }

    @PostMapping
    public ResponseEntity<Todo> createTodo(@RequestBody Todo todo){
        return new ResponseEntity<>(todoService.createTodo(todo), OK);
    }

    @PutMapping("/{id}")
    public ResponseEntity<Void> updateTodo(@PathVariable String id,@RequestBody Todo todo){
        todoService.updateTodo(id,todo);
        return new ResponseEntity<>(OK);
    }
    @PatchMapping("/{id}")
    public ResponseEntity<Void> updateDoneTodo(@PathVariable String id,@RequestBody Todo todo){
        todoService.patchTodo(id,todo);
        return new ResponseEntity<>(OK);
    }

    @DeleteMapping("/{id}")
    public ResponseEntity<Void> deleteTodo(@PathVariable String id){
        todoService.deleteTodo(id);
        return new ResponseEntity<>(OK);
    }


问:
How do I stop pdb from hiding tracebacks at the shell?
If you execute a statement that results in an exception in pdb you get the exception but the traceback for the exception is hidden.

Is there a way of getting pdb to output the exception?

Unfortunately neither sys.exc_info() or  !sys.exc_info seems to contain the exception for for  the last executed command. One seems to point to the exception that triggered the pdb post mortem. The other is an exception from within pdb. It'd also be nice to always get it to do the right thing.


问:
text is not shown in mobile chrome - nextjs
In my nextjs project everything works fine in desktop but in mobile (chorme) text is displayed sometimes and sometimes text is invisible. Here are the images Desktop  Mobile-text-shown Mobile-text-not-shown

/* index.js */

```<code>    import Head from "next/head";
    import React from "react";
    import MainContainer from "../components/Maincontainer";
    import BookHoliday from "../components/BookHoliday";

    export default function Home() {
      return (
        <>
          <Head>
            <title>Tourister</title>
            <meta name="description" content="Generated by create next app" />
            <link rel="icon" href="/favicon.ico" />
          </Head>
          <MainContainer />
            <BookHoliday/>
            <div className="test">
              <h2>Just For Test</h2>
          <p>
         lorem400
            </p>
            </div>
        </>
      );
    }

</code>```

/* MainContainer.js */

```<code>    import React, { useEffect, useRef } from "react";
    import { FaAngleLeft, FaAngleRight } from "react-icons/fa";
    import Navbar from "./Navbar";
    import Header from "./Header";
    import SideBar from "./SideBar";
    import Image from "next/legacy/image";
    function showAnimation() {
      var count = 2;
      let myInterval = null;
      function runInterval() {
        myInterval = setInterval(() => {
          if (count === 3) {
            document.getElementById("bg-3").style.opacity = "0";
            document.getElementById("circle3").classList.remove("circle-ani");
            document
              .getElementById("small-circle3")
              .classList.remove("small-circle-ani");
            document.getElementById("bg-1").style.opacity = "1";
            document.getElementById("circle1").classList.add("circle-ani");
            document
              .getElementById("small-circle1")
              .classList.add("small-circle-ani");
            count = 1;
          } else if (count === 2) {
            document.getElementById("bg-2").style.opacity = "0";
            document.getElementById("circle2").classList.remove("circle-ani");
            document
              .getElementById("small-circle2")
              .classList.remove("small-circle-ani");
            document.getElementById("bg-3").style.opacity = "1";
            document.getElementById("circle3").classList.add("circle-ani");
            document
              .getElementById("small-circle3")
              .classList.add("small-circle-ani");
            count = 3;
          } else if (count === 1) {
            document.getElementById("bg-1").style.opacity = "0";
            document.getElementById("circle1").classList.remove("circle-ani");
            document
              .getElementById("small-circle1")
              .classList.remove("small-circle-ani");
            document.getElementById("bg-2").style.opacity = "1";
            document.getElementById("circle2").classList.add("circle-ani");
            document
              .getElementById("small-circle2")
              .classList.add("small-circle-ani");
            count = 2;
          }
        }, 3000);
      }
      runInterval();
      document.getElementById("circle1").addEventListener("click", () => {
        changeBg("bg-1");
      });
      document.getElementById("circle2").addEventListener("click", () => {
        changeBg("bg-2");
      });
      document.getElementById("circle3").addEventListener("click", () => {
        changeBg("bg-3");
      });
      document.getElementById("left").addEventListener("click", () => {
        changeBg("left");
      });
      document.getElementById("right").addEventListener("click", () => {
        changeBg("right");
      });

      function changeBg(data) {
        if (data === "bg-1") {
          clearInterval(myInterval);
          document.getElementById(`bg-${count}`).style.opacity = "0";
          document.getElementById(`circle${count}`).classList.remove("circle-ani");
          document
            .getElementById(`small-circle${count}`)
            .classList.remove("small-circle-ani");
          document.getElementById("bg-1").style.opacity = "1";
          document.getElementById("circle1").classList.add("circle-ani");
          document
            .getElementById("small-circle1")
            .classList.add("small-circle-ani");
          count = 1;
          setTimeout(() => {
            runInterval();
          });
        }
        if (data === "bg-2") {
          clearInterval(myInterval);
          document.getElementById(`bg-${count}`).style.opacity = "0";
          document.getElementById(`circle${count}`).classList.remove("circle-ani");
          document
            .getElementById(`small-circle${count}`)
            .classList.remove("small-circle-ani");
          document.getElementById("bg-2").style.opacity = "1";
          document.getElementById("circle2").classList.add("circle-ani");
          document
            .getElementById("small-circle2")
            .classList.add("small-circle-ani");
          count = 2;
          setTimeout(() => {
            runInterval();
          });
        }
        if (data === "bg-3") {
          clearInterval(myInterval);
          document.getElementById(`bg-${count}`).style.opacity = "0";
          document.getElementById(`circle${count}`).classList.remove("circle-ani");
          document
            .getElementById(`small-circle${count}`)
            .classList.remove("small-circle-ani");
          document.getElementById("bg-3").style.opacity = "1";
          document.getElementById("circle3").classList.add("circle-ani");
          document
            .getElementById("small-circle3")
            .classList.add("small-circle-ani");
          count = 3;
          setTimeout(() => {
            runInterval();
          });
        }
        if (data === "left") {
          clearInterval(myInterval);
          if (count === 3) {
            document.getElementById("bg-3").style.opacity = "0";
            document.getElementById("circle3").classList.remove("circle-ani");
            document
              .getElementById("small-circle3")
              .classList.remove("small-circle-ani");
            document.getElementById("bg-2").style.opacity = "1";
            document.getElementById("circle2").classList.add("circle-ani");
            document
              .getElementById("small-circle2")
              .classList.add("small-circle-ani");
            count = 2;
            setTimeout(() => {
              runInterval();
            });
          } else if (count === 2) {
            document.getElementById("bg-2").style.opacity = "0";
            document.getElementById("circle2").classList.remove("circle-ani");
            document
              .getElementById("small-circle2")
              .classList.remove("small-circle-ani");
            document.getElementById("bg-1").style.opacity = "1";
            document.getElementById("circle1").classList.add("circle-ani");
            document
              .getElementById("small-circle1")
              .classList.add("small-circle-ani");
            count = 1;
            setTimeout(() => {
              runInterval();
            });
          } else if (count === 1) {
            document.getElementById("bg-1").style.opacity = "0";
            document.getElementById("circle1").classList.remove("circle-ani");
            document
              .getElementById("small-circle1")
              .classList.remove("small-circle-ani");
            document.getElementById("bg-3").style.opacity = "1";
            document.getElementById("circle3").classList.add("circle-ani");
            document
              .getElementById("small-circle3")
              .classList.add("small-circle-ani");
            count = 3;
            setTimeout(() => {
              runInterval();
            });
          }
        }
        if (data === "right") {
          clearInterval(myInterval);
          if (count === 3) {
            document.getElementById("bg-3").style.opacity = "0";
            document.getElementById("circle3").classList.remove("circle-ani");
            document
              .getElementById("small-circle3")
              .classList.remove("small-circle-ani");
            document.getElementById("bg-1").style.opacity = "1";
            document.getElementById("circle1").classList.add("circle-ani");
            document
              .getElementById("small-circle1")
              .classList.add("small-circle-ani");
            count = 1;
            setTimeout(() => {
              runInterval();
            });
          } else if (count === 2) {
            document.getElementById("bg-2").style.opacity = "0";
            document.getElementById("circle2").classList.remove("circle-ani");
            document
              .getElementById("small-circle2")
              .classList.remove("small-circle-ani");
            document.getElementById("bg-3").style.opacity = "1";
            document.getElementById("circle3").classList.add("circle-ani");
            document
              .getElementById("small-circle3")
              .classList.add("small-circle-ani");
            count = 3;
            setTimeout(() => {
              runInterval();
            });
          } else if (count === 1) {
            document.getElementById("bg-1").style.opacity = "0";
            document.getElementById("circle1").classList.remove("circle-ani");
            document
              .getElementById("small-circle1")
              .classList.remove("small-circle-ani");
            document.getElementById("bg-2").style.opacity = "1";
            document.getElementById("circle2").classList.add("circle-ani");
            document
              .getElementById("small-circle2")
              .classList.add("small-circle-ani");
            count = 2;
            setTimeout(() => {
              runInterval();
            });
          }
        }
      }
    }
    const Maincontainer = () => {
      const dataFetchedRef = useRef(false);
      useEffect(() => {
        if (dataFetchedRef.current) return;
        dataFetchedRef.current = true;
        showAnimation();
      }, []);
      return (
        <div id="nav-head">
          <Image
            layout="fill"
            objectFit="cover"
            src="/london.jpg"
            className="bg"
            id="bg-1"
          />
          <Image
            layout="fill"
            objectFit="cover"
            src="/rome.jpg"
            className="bg"
            id="bg-2"
          />
          <Image
            layout="fill"
            objectFit="cover"
            src="/paris.jpg"
            className="bg"
            id="bg-3"
          />
          <div className="nav-head-container">
            <SideBar />
            <Navbar />
            <Header />
            <div className="circle-list">
              <div className="circle" id="circle1">
                <div className="small-circle" id="small-circle1"></div>
              </div>
              <div className="circle circle-ani" id="circle2">
                <div
                  className="small-circle small-circle-ani"
                  id="small-circle2"
                ></div>
              </div>
              <div className="circle" id="circle3">
                <div className="small-circle" id="small-circle3"></div>
              </div>
            </div>
            <FaAngleLeft
              className="left-arrow"
              id="left"
              color="#fff"
              fontSize={20}
            />
            <FaAngleRight
              className="right-arrow"
              id="right"
              color="#fff"
              fontSize={20}
            />
          </div>
        </div>
      );
    };

    export default Maincontainer;

</code>```

/* BookHoliday.js */

```<code>    import React, { useState } from "react";
    import Datetime from "react-datetime";
    import "react-datetime/css/react-datetime.css";
    import { AiFillCalendar, AiOutlineSearch } from "react-icons/ai";
    import moment from "moment";
    const BookHoliday = () => {
      var yesterday = moment().subtract(1, "day");
      const [arrivalDate, setArrivalDate] = useState(null);
      const [departureDate, setDepartureDate] = useState(null);
      var Arrivalvalid = function (current) {
        return current.isAfter(yesterday);
      };
      var Departurevalid = function (current) {
        if (arrivalDate !== null) {
          return current >= arrivalDate;
        } else {
          return current.isAfter(yesterday);
        }
      };
      return (
        <div className="book-holiday">
          <h2>Book Holiday Now!</h2>
          <form className="form-container">
            <div className="input-container">
              <input
                type="search"
                name="search"
                id="search"
                placeholder="Search Your Destination"
              />
              <div className="icon" id="search-icon">
                {" "}
                <AiOutlineSearch color="#bd7457" fontSize={20} />
              </div>
            </div>
            <div className="input-container">
              <Datetime
                timeFormat={false}
                dateFormat="DD MMM YYYY"
                isValidDate={Arrivalvalid}
                value={arrivalDate}
                onChange={(e) => {
                  setArrivalDate(e);
                  if (departureDate !== null && e > departureDate) {
                    setDepartureDate(e);
                  }
                }}
                inputProps={{ placeholder: "Arrival", readOnly: true }}
              />{" "}
              <div className="icon pointer" id="a-icon">
                {" "}
                <AiFillCalendar color="#bd7457" fontSize={20} />
              </div>
            </div>
            <div className="input-container">
              <Datetime
                timeFormat={false}
                dateFormat="DD MMM YYYY"
                isValidDate={Departurevalid}
                value={departureDate}
                onChange={(e) => {
                  setDepartureDate(e);
                }}
                inputProps={{ placeholder: "Departure", readOnly: true }}
              />{" "}
              <div className="icon pointer" id="d-icon">
                {" "}
                <AiFillCalendar color="#bd7457" fontSize={20} />
              </div>
            </div>
            <button id="search-btn">Search</button>
          </form>
        </div>
      );
    };

    export default BookHoliday;

</code>```

/* globals.css */

```<code>    @import url("https://fonts.googleapis.com/css2?family=Ubuntu&display=swap");
    @import url("https://fonts.googleapis.com/css2?family=Montserrat&display=swap");
    @import url("https://fonts.googleapis.com/css2?family=Lobster&family=Ubuntu&display=swap");

    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    html,
    body {
      font-family: "Montserrat";
    }

    #nav-head {
      position: relative;
      width: 100%;
      height: 100vh;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .nav-head-container {
      position: absolute;
      top: 0;
      left: 0;
      background-color: rgba(0, 0, 0, 0.5);
      width: 100%;
      height: 100%;
    }
    #bg-1,
    #bg-3 {
      opacity: 0;
    }
    .bg {
      transition: 0.6s;
    }
    .left-arrow {
      position: absolute;
      left: 10px;
      top: 50%;
      border: 1px solid white;
      border-radius: 4px;
      cursor: pointer;
    }
    .right-arrow {
      position: absolute;
      right: 10px;
      top: 50%;
      border: 1px solid white;
      border-radius: 4px;
      cursor: pointer;
    }
    .circle-list {
      position: absolute;
      bottom: 10px;
      left: 0;
      width: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .circle {
      width: 20px;
      height: 20px;
      border-radius: 20px;
      background-color: gray;
      opacity: 0.5;
      margin: 0px 10px;
      display: flex;
      justify-content: center;
      align-items: center;
      cursor: pointer;
    }
    .circle-ani {
      border: 2px solid white;
      background-color: transparent;
      opacity: 1;
    }
    .small-circle {
      width: 6px;
      height: 6px;
      border-radius: 6px;
    }
    .small-circle-ani {
      background-color: white;
    }
    .navbar {
      height: 75px;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .logo {
      flex: 1;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .navbar .navlink {
      display: flex;
      flex: 4;
      justify-content: space-evenly;
      align-items: center;
    }
    .link {
      text-decoration: none;
      color: white;
      transition: 0.6s;
    }
    .navlink li {
      list-style: none;
    }

    .cta {
      display: flex;
      justify-content: center;
      align-items: center;
      flex: 1;
    }
    .cta-button {
      border: none;
      background-color: transparent;
      color: white;
      cursor: pointer;
      padding: 10px;
      border-bottom: 1px solid white;
      transition: 0.6s;
    }
    #ham {
      position: relative;
      display: none;
      height: 24px;
      width: 24px;
      margin-left: 10px;
      cursor: pointer;
    }
    #header {
      width: 100%;
      height: calc(100vh - 75px);
      display: flex;
      color: white;
      flex-direction: column;
      justify-content: center;
    }
    #header h2 {
      font-size: 4rem;
      padding: 0px 10% 10px;
    }
    #header p {
      padding: 0px 10% 20px;
      line-height: 25px;
    }
    #header-btn {
      padding: 10px 20px;
      background-color: #bd7457;
      color: white;
      border: 1px solid #bd7457;
      width: 180px;
      margin-left: 10%;
      border-radius: 6px;
      transition: 0.6s;
    }
    #sidebar {
      position: fixed;
      bottom: 0;
      left: 0;
      width: 200px;
      height: 100%;
      background-color: black;
      color: white;
      z-index: 5;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      transform: translateX(-200px);
      transition: 0.6s;
    }
    #cross {
      position: absolute;
      right: 10px;
      top: 10px;
      width: 14px;
      height: 14px;
      cursor: pointer;
    }
    .sidelink {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-around;
      width: 100%;
      height: 226px;
    }
    .sidelink .link {
      font-size: 1.4rem;
    }
    .side-cta {
      height: 56px;
      width: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    #side-button {
      padding: 10px 20px;
      border: none;
      background-color: transparent;
      border: 1px solid white;
      border-radius: 6px;
      cursor: pointer;
      color: white;
      transition: 0.6s;
    }

    .book-holiday {
      background-color: rgb(245, 245, 245);
      padding: 30px 0px;
      max-height: 9999px;
    }
    .book-holiday h2 {
      font-size: 2rem;
      text-align: center;
      margin-bottom: 20px;
    }
    .form-control,
    #search {
      width: 250px;
      padding: 10px 20px;
      outline: none;
    }
    .form-container {
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
    }
    #search-btn {
      background-color: #bd7457;
      border: 1px solid #bd7457;
      color: white;
      padding: 10px 20px;
      transition: 0.6s;
      margin: 10px 0px 20px;
    }
    .input-container {
      display: flex;
      position: relative;
      margin: 10px 0px;
    }
    .icon {
      position: absolute;
      right: 0px;
      top: 0px;
      padding: 7px 10px;
    }

    .test {
      background-color: rgb(255, 235, 205);
      padding: 30px 0px;
      max-height: 9999px;
    }
    .test h2 {
      margin-bottom: 20px;
      text-align: center;
      font-size: 2rem;
    }

    /* This is for react date-time library */
    .rdtDay {
      color: #bd7457 !important;
    }
    .rdtDisabled {
      color: #999999 !important;
    }
    .rdtOld {
      color: #999999 !important;
    }
    .rdtNew {
      color: black !important;
    }
    .rdtActive,
    .rdtActive:hover {
      background-color: #bd7457 !important;
      color: white !important;
    }
    .rdtPicker td.rdtToday:before {
      border-bottom-color: #bd7457 !important;
    }

    @media (hover: hover) {
      .cta-button:hover {
        border-color: #bd7457;
        color: #bd7457;
      }
      .navlink li .link:hover {
        color: #bd7457;
      }
      #side-button:hover {
        color: #bd7457;
        border-color: #bd7457;
      }
      #header-btn:hover,
      #search-btn:hover {
        border: 1px solid #bd7457;
        background-color: transparent;
        color: #bd7457;
      }
    }
    @media (hover: none) {
      .cta-button:active {
        border-bottom: none;
        color: #bd7457;
      }
      .navlink li .link:active {
        color: #bd7457;
      }
      #side-button:active {
        color: #bd7457;
        border-color: #bd7457;
      }
      #header-btn:active,
      #search-btn:active {
        border: 1px solid #bd7457;
        color: #bd7457;
        background-color: transparent;
      }
    }

    @media (max-width: 768px) {
      .logo {
        justify-content: flex-end;
        margin-right: 30px;
      }
      #ham {
        display: flex;
      }
      .navbar .navlink,
      .cta {
        display: none;
      }
      .navbar {
        height: 40px;
        align-items: flex-end;
      }
      #header {
        height: calc(100vh -40px);
      }
      #header h2 {
        font-size: 3rem;
      }
    }
    @media (max-width: 540px) {
      #header h2 {
        font-size: 2.6rem;
      }
    }
    @media (max-height: 414px) {
      .sidelink .link {
        font-size: 1.2rem;
      }
      #header h2 {
        font-size: 2.4rem;
        padding-bottom: 5px;
      }
      #header p {
        padding-bottom: 10px;
      }
    }

</code>```

I have tried almost everything, earlier I thought it was because of changing the background images using setInterval or due to react-date-time library, so I made a static background image, removed that date-time library and even removed the background image, but it didn't solve the problem. I am able to click the text when it is invisible, but when i refresh the page it appears.

Body:
In my nextjs project everything works fine in desktop but in mobile (chorme) text is displayed sometimes and sometimes text is invisible. Here are the images Desktop  Mobile-text-shown Mobile-text-not-shown

/* index.js */

    import Head from "next/head";
    import React from "react";
    import MainContainer from "../components/Maincontainer";
    import BookHoliday from "../components/BookHoliday";

    export default function Home() {
      return (
        <>

            <title>Tourister</title>
            <meta name="description" content="Generated by create next app" />
            <link rel="icon" href="/favicon.ico" />

          <MainContainer />
            <BookHoliday/>

Just For Test

         lorem400

        </>
      );
    }

/* MainContainer.js */

    import React, { useEffect, useRef } from "react";
    import { FaAngleLeft, FaAngleRight } from "react-icons/fa";
    import Navbar from "./Navbar";
    import Header from "./Header";
    import SideBar from "./SideBar";
    import Image from "next/legacy/image";
    function showAnimation() {
      var count = 2;
      let myInterval = null;
      function runInterval() {
        myInterval = setInterval(() => {
          if (count === 3) {
            document.getElementById("bg-3").style.opacity = "0";
            document.getElementById("circle3").classList.remove("circle-ani");
            document
              .getElementById("small-circle3")
              .classList.remove("small-circle-ani");
            document.getElementById("bg-1").style.opacity = "1";
            document.getElementById("circle1").classList.add("circle-ani");
            document
              .getElementById("small-circle1")
              .classList.add("small-circle-ani");
            count = 1;
          } else if (count === 2) {
            document.getElementById("bg-2").style.opacity = "0";
            document.getElementById("circle2").classList.remove("circle-ani");
            document
              .getElementById("small-circle2")
              .classList.remove("small-circle-ani");
            document.getElementById("bg-3").style.opacity = "1";
            document.getElementById("circle3").classList.add("circle-ani");
            document
              .getElementById("small-circle3")
              .classList.add("small-circle-ani");
            count = 3;
          } else if (count === 1) {
            document.getElementById("bg-1").style.opacity = "0";
            document.getElementById("circle1").classList.remove("circle-ani");
            document
              .getElementById("small-circle1")
              .classList.remove("small-circle-ani");
            document.getElementById("bg-2").style.opacity = "1";
            document.getElementById("circle2").classList.add("circle-ani");
            document
              .getElementById("small-circle2")
              .classList.add("small-circle-ani");
            count = 2;
          }
        }, 3000);
      }
      runInterval();
      document.getElementById("circle1").addEventListener("click", () => {
        changeBg("bg-1");
      });
      document.getElementById("circle2").addEventListener("click", () => {
        changeBg("bg-2");
      });
      document.getElementById("circle3").addEventListener("click", () => {
        changeBg("bg-3");
      });
      document.getElementById("left").addEventListener("click", () => {
        changeBg("left");
      });
      document.getElementById("right").addEventListener("click", () => {
        changeBg("right");
      });

      function changeBg(data) {
        if (data === "bg-1") {
          clearInterval(myInterval);
          document.getElementById(`bg-${count}`).style.opacity = "0";
          document.getElementById(`circle${count}`).classList.remove("circle-ani");
          document
            .getElementById(`small-circle${count}`)
            .classList.remove("small-circle-ani");
          document.getElementById("bg-1").style.opacity = "1";
          document.getElementById("circle1").classList.add("circle-ani");
          document
            .getElementById("small-circle1")
            .classList.add("small-circle-ani");
          count = 1;
          setTimeout(() => {
            runInterval();
          });
        }
        if (data === "bg-2") {
          clearInterval(myInterval);
          document.getElementById(`bg-${count}`).style.opacity = "0";
          document.getElementById(`circle${count}`).classList.remove("circle-ani");
          document
            .getElementById(`small-circle${count}`)
            .classList.remove("small-circle-ani");
          document.getElementById("bg-2").style.opacity = "1";
          document.getElementById("circle2").classList.add("circle-ani");
          document
            .getElementById("small-circle2")
            .classList.add("small-circle-ani");
          count = 2;
          setTimeout(() => {
            runInterval();
          });
        }
        if (data === "bg-3") {
          clearInterval(myInterval);
          document.getElementById(`bg-${count}`).style.opacity = "0";
          document.getElementById(`circle${count}`).classList.remove("circle-ani");
          document
            .getElementById(`small-circle${count}`)
            .classList.remove("small-circle-ani");
          document.getElementById("bg-3").style.opacity = "1";
          document.getElementById("circle3").classList.add("circle-ani");
          document
            .getElementById("small-circle3")
            .classList.add("small-circle-ani");
          count = 3;
          setTimeout(() => {
            runInterval();
          });
        }
        if (data === "left") {
          clearInterval(myInterval);
          if (count === 3) {
            document.getElementById("bg-3").style.opacity = "0";
            document.getElementById("circle3").classList.remove("circle-ani");
            document
              .getElementById("small-circle3")
              .classList.remove("small-circle-ani");
            document.getElementById("bg-2").style.opacity = "1";
            document.getElementById("circle2").classList.add("circle-ani");
            document
              .getElementById("small-circle2")
              .classList.add("small-circle-ani");
            count = 2;
            setTimeout(() => {
              runInterval();
            });
          } else if (count === 2) {
            document.getElementById("bg-2").style.opacity = "0";
            document.getElementById("circle2").classList.remove("circle-ani");
            document
              .getElementById("small-circle2")
              .classList.remove("small-circle-ani");
            document.getElementById("bg-1").style.opacity = "1";
            document.getElementById("circle1").classList.add("circle-ani");
            document
              .getElementById("small-circle1")
              .classList.add("small-circle-ani");
            count = 1;
            setTimeout(() => {
              runInterval();
            });
          } else if (count === 1) {
            document.getElementById("bg-1").style.opacity = "0";
            document.getElementById("circle1").classList.remove("circle-ani");
            document
              .getElementById("small-circle1")
              .classList.remove("small-circle-ani");
            document.getElementById("bg-3").style.opacity = "1";
            document.getElementById("circle3").classList.add("circle-ani");
            document
              .getElementById("small-circle3")
              .classList.add("small-circle-ani");
            count = 3;
            setTimeout(() => {
              runInterval();
            });
          }
        }
        if (data === "right") {
          clearInterval(myInterval);
          if (count === 3) {
            document.getElementById("bg-3").style.opacity = "0";
            document.getElementById("circle3").classList.remove("circle-ani");
            document
              .getElementById("small-circle3")
              .classList.remove("small-circle-ani");
            document.getElementById("bg-1").style.opacity = "1";
            document.getElementById("circle1").classList.add("circle-ani");
            document
              .getElementById("small-circle1")
              .classList.add("small-circle-ani");
            count = 1;
            setTimeout(() => {
              runInterval();
            });
          } else if (count === 2) {
            document.getElementById("bg-2").style.opacity = "0";
            document.getElementById("circle2").classList.remove("circle-ani");
            document
              .getElementById("small-circle2")
              .classList.remove("small-circle-ani");
            document.getElementById("bg-3").style.opacity = "1";
            document.getElementById("circle3").classList.add("circle-ani");
            document
              .getElementById("small-circle3")
              .classList.add("small-circle-ani");
            count = 3;
            setTimeout(() => {
              runInterval();
            });
          } else if (count === 1) {
            document.getElementById("bg-1").style.opacity = "0";
            document.getElementById("circle1").classList.remove("circle-ani");
            document
              .getElementById("small-circle1")
              .classList.remove("small-circle-ani");
            document.getElementById("bg-2").style.opacity = "1";
            document.getElementById("circle2").classList.add("circle-ani");
            document
              .getElementById("small-circle2")
              .classList.add("small-circle-ani");
            count = 2;
            setTimeout(() => {
              runInterval();
            });
          }
        }
      }
    }
    const Maincontainer = () => {
      const dataFetchedRef = useRef(false);
      useEffect(() => {
        if (dataFetchedRef.current) return;
        dataFetchedRef.current = true;
        showAnimation();
      }, []);
      return (

          <Image
            layout="fill"
            objectFit="cover"
            src="/london.jpg"
            className="bg"
            id="bg-1"
          />
          <Image
            layout="fill"
            objectFit="cover"
            src="/rome.jpg"
            className="bg"
            id="bg-2"
          />
          <Image
            layout="fill"
            objectFit="cover"
            src="/paris.jpg"
            className="bg"
            id="bg-3"
          />

            <SideBar />
            <Navbar />

            <FaAngleLeft
              className="left-arrow"
              id="left"
              color="#fff"
              fontSize={20}
            />
            <FaAngleRight
              className="right-arrow"
              id="right"
              color="#fff"
              fontSize={20}
            />

      );
    };

    export default Maincontainer;

/* BookHoliday.js */

    import React, { useState } from "react";
    import Datetime from "react-datetime";
    import "react-datetime/css/react-datetime.css";
    import { AiFillCalendar, AiOutlineSearch } from "react-icons/ai";
    import moment from "moment";
    const BookHoliday = () => {
      var yesterday = moment().subtract(1, "day");
      const [arrivalDate, setArrivalDate] = useState(null);
      const [departureDate, setDepartureDate] = useState(null);
      var Arrivalvalid = function (current) {
        return current.isAfter(yesterday);
      };
      var Departurevalid = function (current) {
        if (arrivalDate !== null) {
          return current >= arrivalDate;
        } else {
          return current.isAfter(yesterday);
        }
      };
      return (

Book Holiday Now!

          <form className="form-container">

              <input
                type="search"
                name="search"
                id="search"
                placeholder="Search Your Destination"
              />

                {" "}
                <AiOutlineSearch color="#bd7457" fontSize={20} />

              <Datetime
                timeFormat={false}
                dateFormat="DD MMM YYYY"
                isValidDate={Arrivalvalid}
                value={arrivalDate}
                onChange={(e) => {
                  setArrivalDate(e);
                  if (departureDate !== null && e > departureDate) {
                    setDepartureDate(e);
                  }
                }}
                inputProps={{ placeholder: "Arrival", readOnly: true }}
              />{" "}

                {" "}
                <AiFillCalendar color="#bd7457" fontSize={20} />

              <Datetime
                timeFormat={false}
                dateFormat="DD MMM YYYY"
                isValidDate={Departurevalid}
                value={departureDate}
                onChange={(e) => {
                  setDepartureDate(e);
                }}
                inputProps={{ placeholder: "Departure", readOnly: true }}
              />{" "}

                {" "}
                <AiFillCalendar color="#bd7457" fontSize={20} />

            <button id="search-btn">Search</button>
          </form>

      );
    };

    export default BookHoliday;

/* globals.css */

    @import url("https://fonts.googleapis.com/css2?family=Ubuntu&display=swap");
    @import url("https://fonts.googleapis.com/css2?family=Montserrat&display=swap");
    @import url("https://fonts.googleapis.com/css2?family=Lobster&family=Ubuntu&display=swap");

    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    html,
    body {
      font-family: "Montserrat";
    }

    #nav-head {
      position: relative;
      width: 100%;
      height: 100vh;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .nav-head-container {
      position: absolute;
      top: 0;
      left: 0;
      background-color: rgba(0, 0, 0, 0.5);
      width: 100%;
      height: 100%;
    }
    #bg-1,
    #bg-3 {
      opacity: 0;
    }
    .bg {
      transition: 0.6s;
    }
    .left-arrow {
      position: absolute;
      left: 10px;
      top: 50%;
      border: 1px solid white;
      border-radius: 4px;
      cursor: pointer;
    }
    .right-arrow {
      position: absolute;
      right: 10px;
      top: 50%;
      border: 1px solid white;
      border-radius: 4px;
      cursor: pointer;
    }
    .circle-list {
      position: absolute;
      bottom: 10px;
      left: 0;
      width: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .circle {
      width: 20px;
      height: 20px;
      border-radius: 20px;
      background-color: gray;
      opacity: 0.5;
      margin: 0px 10px;
      display: flex;
      justify-content: center;
      align-items: center;
      cursor: pointer;
    }
    .circle-ani {
      border: 2px solid white;
      background-color: transparent;
      opacity: 1;
    }
    .small-circle {
      width: 6px;
      height: 6px;
      border-radius: 6px;
    }
    .small-circle-ani {
      background-color: white;
    }
    .navbar {
      height: 75px;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .logo {
      flex: 1;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .navbar .navlink {
      display: flex;
      flex: 4;
      justify-content: space-evenly;
      align-items: center;
    }
    .link {
      text-decoration: none;
      color: white;
      transition: 0.6s;
    }
    .navlink li {
      list-style: none;
    }

    .cta {
      display: flex;
      justify-content: center;
      align-items: center;
      flex: 1;
    }
    .cta-button {
      border: none;
      background-color: transparent;
      color: white;
      cursor: pointer;
      padding: 10px;
      border-bottom: 1px solid white;
      transition: 0.6s;
    }
    #ham {
      position: relative;
      display: none;
      height: 24px;
      width: 24px;
      margin-left: 10px;
      cursor: pointer;
    }
    #header {
      width: 100%;
      height: calc(100vh - 75px);
      display: flex;
      color: white;
      flex-direction: column;
      justify-content: center;
    }
    #header h2 {
      font-size: 4rem;
      padding: 0px 10% 10px;
    }
    #header p {
      padding: 0px 10% 20px;
      line-height: 25px;
    }
    #header-btn {
      padding: 10px 20px;
      background-color: #bd7457;
      color: white;
      border: 1px solid #bd7457;
      width: 180px;
      margin-left: 10%;
      border-radius: 6px;
      transition: 0.6s;
    }
    #sidebar {
      position: fixed;
      bottom: 0;
      left: 0;
      width: 200px;
      height: 100%;
      background-color: black;
      color: white;
      z-index: 5;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      transform: translateX(-200px);
      transition: 0.6s;
    }
    #cross {
      position: absolute;
      right: 10px;
      top: 10px;
      width: 14px;
      height: 14px;
      cursor: pointer;
    }
    .sidelink {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-around;
      width: 100%;
      height: 226px;
    }
    .sidelink .link {
      font-size: 1.4rem;
    }
    .side-cta {
      height: 56px;
      width: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    #side-button {
      padding: 10px 20px;
      border: none;
      background-color: transparent;
      border: 1px solid white;
      border-radius: 6px;
      cursor: pointer;
      color: white;
      transition: 0.6s;
    }

    .book-holiday {
      background-color: rgb(245, 245, 245);
      padding: 30px 0px;
      max-height: 9999px;
    }
    .book-holiday h2 {
      font-size: 2rem;
      text-align: center;
      margin-bottom: 20px;
    }
    .form-control,
    #search {
      width: 250px;
      padding: 10px 20px;
      outline: none;
    }
    .form-container {
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
    }
    #search-btn {
      background-color: #bd7457;
      border: 1px solid #bd7457;
      color: white;
      padding: 10px 20px;
      transition: 0.6s;
      margin: 10px 0px 20px;
    }
    .input-container {
      display: flex;
      position: relative;
      margin: 10px 0px;
    }
    .icon {
      position: absolute;
      right: 0px;
      top: 0px;
      padding: 7px 10px;
    }

    .test {
      background-color: rgb(255, 235, 205);
      padding: 30px 0px;
      max-height: 9999px;
    }
    .test h2 {
      margin-bottom: 20px;
      text-align: center;
      font-size: 2rem;
    }

    /* This is for react date-time library */
    .rdtDay {
      color: #bd7457 !important;
    }
    .rdtDisabled {
      color: #999999 !important;
    }
    .rdtOld {
      color: #999999 !important;
    }
    .rdtNew {
      color: black !important;
    }
    .rdtActive,
    .rdtActive:hover {
      background-color: #bd7457 !important;
      color: white !important;
    }
    .rdtPicker td.rdtToday:before {
      border-bottom-color: #bd7457 !important;
    }

    @media (hover: hover) {
      .cta-button:hover {
        border-color: #bd7457;
        color: #bd7457;
      }
      .navlink li .link:hover {
        color: #bd7457;
      }
      #side-button:hover {
        color: #bd7457;
        border-color: #bd7457;
      }
      #header-btn:hover,
      #search-btn:hover {
        border: 1px solid #bd7457;
        background-color: transparent;
        color: #bd7457;
      }
    }
    @media (hover: none) {
      .cta-button:active {
        border-bottom: none;
        color: #bd7457;
      }
      .navlink li .link:active {
        color: #bd7457;
      }
      #side-button:active {
        color: #bd7457;
        border-color: #bd7457;
      }
      #header-btn:active,
      #search-btn:active {
        border: 1px solid #bd7457;
        color: #bd7457;
        background-color: transparent;
      }
    }

    @media (max-width: 768px) {
      .logo {
        justify-content: flex-end;
        margin-right: 30px;
      }
      #ham {
        display: flex;
      }
      .navbar .navlink,
      .cta {
        display: none;
      }
      .navbar {
        height: 40px;
        align-items: flex-end;
      }
      #header {
        height: calc(100vh -40px);
      }
      #header h2 {
        font-size: 3rem;
      }
    }
    @media (max-width: 540px) {
      #header h2 {
        font-size: 2.6rem;
      }
    }
    @media (max-height: 414px) {
      .sidelink .link {
        font-size: 1.2rem;
      }
      #header h2 {
        font-size: 2.4rem;
        padding-bottom: 5px;
      }
      #header p {
        padding-bottom: 10px;
      }
    }

I have tried almost everything, earlier I thought it was because of changing the background images using setInterval or due to react-date-time library, so I made a static background image, removed that date-time library and even removed the background image, but it didn't solve the problem. I am able to click the text when it is invisible, but when i refresh the page it appears.


问:
Issue on showing Google Admob ads in Native and Banner Ads
Explanation:

An issue of not showing ads on Banner Ads and Native Ads; is not an issue with reward ads.
It's not more than 5 minutes, I integrated Banner ads and Native Ads on the real id--just by replacing the test id from the real account.

 With the test id, they were working fine on all ads. A made several queries on google and it shows that generally, it takes some hours to work.

Is this actually because of the time factor or could be other issues?


问:
Google Sheets Pulling Info From Different Files
I have two unrelated sheets. One sheet is what holds a backlog of names, dates, and locations. The other sheet is an authentication sheet where a sticker number is assigned to one of the names one the first sheet. I can't combine the two in one sheet and have two tabs because I need to import the second sheet everyday and it can't have another tab added in.

I want to be able to have the second sheet 'scan' the first sheet file and pull information automatically. So if sticker 001 has Bob Jones, the code scans the manifest for his 'location' and 'date' and then automatically fills sticker 001.

I have no idea how to write code so I'm just curious if it's possible to grab informatoin from a different file or if both tabs need to be under one sheet.


问:
How to plot two GeoDataFrames with one legend in Python
I have the following code:

```<code>import geopandas as gpd
import matplotlib.pyplot as plt

states_gdf = gpd.read_file('https://www2.census.gov/geo/tiger/GENZ2018/shp/cb_2018_us_state_5m.zip')
CO_gdf = states_gdf[states_gdf['STUSPS'] == 'CO']

fig, ax = plt.subplots()
CO_gdf.plot(ax = ax, column = 'STUSPS')
CO_gdf.boundary.to_frame().plot(ax = ax, color = 'k', label = 'CO Boundary')
</code>```

I want to have one legend, that labels both the colored-in region and the boundary.

If I try the following code:

```<code>fig, ax = plt.subplots()
CO_gdf.plot(ax = ax, column = 'STUSPS', legend = True)
CO_gdf.boundary.to_frame().plot(ax = ax, color = 'k', label = 'CO Boundary')
ax.legend()
</code>```

The first legend gets deleted when the second one is plotted.

I've also tried collecting the handles and labels manually with ax.get_legend_handles_labels(), but for some reason the first plot line CO_gdf.plot(...) doesn't seem to create any handles.

Body:
I have the following code:

import geopandas as gpd
import matplotlib.pyplot as plt

states_gdf = gpd.read_file('https://www2.census.gov/geo/tiger/GENZ2018/shp/cb_2018_us_state_5m.zip')
CO_gdf = states_gdf[states_gdf['STUSPS'] == 'CO']

fig, ax = plt.subplots()
CO_gdf.plot(ax = ax, column = 'STUSPS')
CO_gdf.boundary.to_frame().plot(ax = ax, color = 'k', label = 'CO Boundary')

I want to have one legend, that labels both the colored-in region and the boundary.

If I try the following code:

fig, ax = plt.subplots()
CO_gdf.plot(ax = ax, column = 'STUSPS', legend = True)
CO_gdf.boundary.to_frame().plot(ax = ax, color = 'k', label = 'CO Boundary')
ax.legend()

The first legend gets deleted when the second one is plotted.

I've also tried collecting the handles and labels manually with ax.get_legend_handles_labels(), but for some reason the first plot line CO_gdf.plot(...) doesn't seem to create any handles.


问:
Dynamic feature modules in Navigation Compose
Since few days, I search a solution to use Jetpack Compose and Dagger with dynamic feature modules (like onDemand module : https://developer.android.com/guide/playcore/feature-delivery/on-demand).

I found this issue : https://issuetracker.google.com/issues/183677219 and I read lot of documentation, so I don't have lot of hope, but with luck...

Do you have any idea?


问:
Wordpress boilerplate plugin url parameter not working
I have a problem with jquery.
Jquery redirects to domain.com/wp-admin/admin.php + form values instead ajax_admin.php
I have other jquery calls with same url ajaxurl(ajax_admin.php) and they work.
This call is getting info from form but it seems that url parameter is not working.
Also it seems that action doesn´t go through also since it´s not in the redirected url.
Redirected url looks like this - domain.com/wp-admin/admin.php?name=name&phone=phone
What am i doing wrong?</p>
```<code>jQuery('#add_db').submit(function(e){
        var form_data = jQuery(this).serialize();
        jQuery.ajax({
            url: ajaxurl,
            data: {action: 'add_bookingdb', form_data},
            type: 'post',
            success: function(data) {
                console.log(data);

            }
        });
    });
</code>```

Body:
I have a problem with jquery.
Jquery redirects to domain.com/wp-admin/admin.php + form values instead ajax_admin.php
I have other jquery calls with same url ajaxurl(ajax_admin.php) and they work.
This call is getting info from form but it seems that url parameter is not working.
Also it seems that action doesn´t go through also since it´s not in the redirected url.
Redirected url looks like this - domain.com/wp-admin/admin.php?name=name&phone=phone
What am i doing wrong?

jQuery('#add_db').submit(function(e){
        var form_data = jQuery(this).serialize();
        jQuery.ajax({
            url: ajaxurl,
            data: {action: 'add_bookingdb', form_data},
            type: 'post',
            success: function(data) {
                console.log(data);

            }
        });
    });


问:
ngx for android-permissions with ionic missing
I'm trying to manage permissions inside an ionic project that was at first an angular one.
To do that, i've done the following commands :

```<code>ionic cordova plugin add cordova-plugin-android-permissions
npm install @ionic-native/android-permissions
</code>```

But when i write the foloowing import in the app.module.ts :

```<code>import {AndroidPermissions} from "@ionic-native/android-permissions/ngx";
</code>```

It tells me that it can't find this module.
I looked at the directory ionic-native/android-permissions in the node module library and there is no "ngx" directory or file at all, just the parent directory (ionic-native/android-permissions)
whith the following items  :
androi-permissions directory
I'm using Intellij ultimate , my npm version is a 6.14.13 one,ionic is in 5.4.16 version
and node is in a v18.12.1 one.

```<code>

I've removed the ioni-native directory and reinstalled it with the "npm install @ionic-native/android-permissions " command, but the same problem remains.

When i just use : import {AndroidPermissions} from "@ionic-native/android-permissions"; (so without "ngx") then it tells me that class "AndroidPermissions" can't be imported (nether an angular module nor a standalone declarable)
</code>```

Thank you for your help.

Body:
I'm trying to manage permissions inside an ionic project that was at first an angular one.
To do that, i've done the following commands :

ionic cordova plugin add cordova-plugin-android-permissions
npm install @ionic-native/android-permissions

But when i write the foloowing import in the app.module.ts :

import {AndroidPermissions} from "@ionic-native/android-permissions/ngx";

It tells me that it can't find this module.
I looked at the directory ionic-native/android-permissions in the node module library and there is no "ngx" directory or file at all, just the parent directory (ionic-native/android-permissions)
whith the following items  :
androi-permissions directory
I'm using Intellij ultimate , my npm version is a 6.14.13 one,ionic is in 5.4.16 version
and node is in a v18.12.1 one.

I've removed the ioni-native directory and reinstalled it with the "npm install @ionic-native/android-permissions " command, but the same problem remains.

When i just use : import {AndroidPermissions} from "@ionic-native/android-permissions"; (so without "ngx") then it tells me that class "AndroidPermissions" can't be imported (nether an angular module nor a standalone declarable)

Thank you for your help.


问:
map not defined in my react after bring data from database
i have a website with api to get movies,i have a user in my web and this user can like a movie and get him into his favorite. then he have a commponent that call favorite and i want to do there a get request from my data base and bring him the title of my movie.after he get the title i do in my useeffect an api request to get the poster and all the details of the movie and then i wanna to show it in my favorite useing map function.
but i have a problem
my map dosent work or if it work he dosent bring the data from the api

this is the favorite componnent

```<code>import { getAllFavorite } from "../../service/favServics";
import { useState, useEffect } from "react";
import PageHeader from "../common/pageHeader";
import FavoriteChiled from "./favoritechild";
function Favorite() {
  const [favorite, setFavorite] = useState([]);
  const [movies, setMovies] = useState([]);
  const [data, setData] = useState([]);
  async function getAll() {
    const { data } = await getAllFavorite();
    setFavorite(data);
    for (let i = 0; i < data.length; i++) {
      const url = `http://www.omdbapi.com/?s=${data[i]}&apikey=aea06659`;
      const response = await fetch(url);
      const responseJson = await response.json();
      const obj = responseJson.Search[0];
      if (responseJson.Search) {
        setMovies(obj.Title);
      }
    }
  }
  useEffect(() => {
    getAll(favorite);
  }, []);
</code>```

This is the return of favorite component

```<code><div className="row">
  {movies.map((movie) => (
    <FavoriteChiled movie={movie} />
  ))}
</div>
</code>```

this is the child componnent

```<code>function FavoriteChiled(props) {
  let { movies } = props;
  return (
    <>
      <div key={movies.imdbID} className="image-container d-flex justify-content-start m-3">
        <img src={movies.Poster} alt="movie"></img>
      </div>
    </>
  );
}
</code>```

the console error

```<code>favorite.jsx:32 Uncaught TypeError: Cannot read properties of undefined (reading 'map')
    at Favorite (favorite.jsx:32:1)
    at renderWithHooks (react-dom.development.js:16305:1)
    at updateFunctionComponent (react-dom.development.js:19588:1)
    at beginWork (react-dom.development.js:21601:1)
    at HTMLUnknownElement.callCallback (react-dom.development.js:4164:1)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:4213:1)
    at invokeGuardedCallback (react-dom.development.js:4277:1)
    at beginWork$1 (react-dom.development.js:27451:1)
    at performUnitOfWork (react-dom.development.js:26557:1)
    at workLoopSync (react-dom.development.js:26466:1)`
</code>```

or this error

```<code>favorite.jsx:32 Uncaught TypeError: movies.map is not a function
    at Favorite (favorite.jsx:32:1)
    at renderWithHooks (react-dom.development.js:16305:1)
    at updateFunctionComponent (react-dom.development.js:19588:1)
    at beginWork (react-dom.development.js:21601:1)
    at HTMLUnknownElement.callCallback (react-dom.development.js:4164:1)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:4213:1)
    at invokeGuardedCallback (react-dom.development.js:4277:1)
    at beginWork$1 (react-dom.development.js:27451:1)
    at performUnitOfWork (react-dom.development.js:26557:1)
    at workLoopSync (react-dom.development.js:26466:1)`
</code>```

Body:
i have a website with api to get movies,i have a user in my web and this user can like a movie and get him into his favorite. then he have a commponent that call favorite and i want to do there a get request from my data base and bring him the title of my movie.after he get the title i do in my useeffect an api request to get the poster and all the details of the movie and then i wanna to show it in my favorite useing map function.
but i have a problem
my map dosent work or if it work he dosent bring the data from the api

this is the favorite componnent

import { getAllFavorite } from "../../service/favServics";
import { useState, useEffect } from "react";
import PageHeader from "../common/pageHeader";
import FavoriteChiled from "./favoritechild";
function Favorite() {
  const [favorite, setFavorite] = useState([]);
  const [movies, setMovies] = useState([]);
  const [data, setData] = useState([]);
  async function getAll() {
    const { data } = await getAllFavorite();
    setFavorite(data);
    for (let i = 0; i < data.length; i++) {
      const url = `http://www.omdbapi.com/?s=${data[i]}&apikey=aea06659`;
      const response = await fetch(url);
      const responseJson = await response.json();
      const obj = responseJson.Search[0];
      if (responseJson.Search) {
        setMovies(obj.Title);
      }
    }
  }
  useEffect(() => {
    getAll(favorite);
  }, []);

This is the return of favorite component

  {movies.map((movie) => (
    <FavoriteChiled movie={movie} />
  ))}

this is the child componnent

function FavoriteChiled(props) {
  let { movies } = props;
  return (
    <>

    </>
  );
}

the console error

favorite.jsx:32 Uncaught TypeError: Cannot read properties of undefined (reading 'map')
    at Favorite (favorite.jsx:32:1)
    at renderWithHooks (react-dom.development.js:16305:1)
    at updateFunctionComponent (react-dom.development.js:19588:1)
    at beginWork (react-dom.development.js:21601:1)
    at HTMLUnknownElement.callCallback (react-dom.development.js:4164:1)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:4213:1)
    at invokeGuardedCallback (react-dom.development.js:4277:1)
    at beginWork$1 (react-dom.development.js:27451:1)
    at performUnitOfWork (react-dom.development.js:26557:1)
    at workLoopSync (react-dom.development.js:26466:1)`

or this error

favorite.jsx:32 Uncaught TypeError: movies.map is not a function
    at Favorite (favorite.jsx:32:1)
    at renderWithHooks (react-dom.development.js:16305:1)
    at updateFunctionComponent (react-dom.development.js:19588:1)
    at beginWork (react-dom.development.js:21601:1)
    at HTMLUnknownElement.callCallback (react-dom.development.js:4164:1)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:4213:1)
    at invokeGuardedCallback (react-dom.development.js:4277:1)
    at beginWork$1 (react-dom.development.js:27451:1)
    at performUnitOfWork (react-dom.development.js:26557:1)
    at workLoopSync (react-dom.development.js:26466:1)`


问:
Load Data To Multiple oracle Destination tables from Single Source sequential in DFT
I am trying to insert records into 3 different Oracle tables from the same source query. I tried using MultiCast but i had dependencies on other tables so that dint work.

I want to table to get executed in a sequential manner. Is there any other way to run this?

I tried using MultiCast but i had dependencies on other tables so that dint work.

I am expecting something like this:


问:
Send Reminder through Outlook
Good day all,

i am looking to alter the below VBA Code to send reminder to filtered range to each User based on specific text in column "H" "Send Reminder" and filtered range must be pasted into email below the body lines (Means Column A1:E1 by User wise filtered range).

Basically VBA code will reduce our work from more than hours to Milli seconds.

Problems encountered:
in our daily work we have so many todo list which needs to remind employee by employee wise with filtered list to each person will consume more than 2 hours to sort our data. Now the below code works  but not filtered by User wise so its completely insufficient to use it properly. sending each email wise but filtered table also needs to place in the body of the emails is worthy. Hence time does not reduce much more than that.

Hence i am Looking to alter the below code as per my requirement.

Existing VBA Code:

Sub Send_Reminder()
    Dim wStat As Range, i As Long
    Dim dam As Object

    For Each wStat In Range("H2", Range("H" & Rows.Count).End(xlUp))
        If wStat.Value = "Send Reminder" Then
            i = wStat.Row
            Set dam = CreateObject("Outlook.Application").CreateItem(0)
            dam.To = Range("I" & i).Value
            dam.Cc = ""         'Range("F" & i).Value
            dam.Subject = Range("B" & i).Value
            dam.Body = "Hi " & Range("E" & i).Value & "," & vbCr & vbCr & _
                       "This is to remind you that " & Range("B" & wStat.Row).Value & " " & _
                       "Report is due today." & vbCr & vbCr & _
                       "Cheers!"
            dam.FlagRequest = "Follow up"              ' We set the Follow up Flag
            dam.FlagDueBy = Format(DateAdd("d", 1, Date) + TimeValue("09:30:00"), "dd/mm/yyyy hh:mm")      ' We set the due date for the reminder two days from today
            dam.Display         '.Sent
            '
            dam.Display                 '.Send
            wStat.Value = "Sent"
        End If
    Next
    MsgBox "Emails Sent"

End Sub
```

Title: Send Reminder through Outlook


问:
Swift, help iterating over keyPaths and setting values
I've found that it's a little easier to explain what I'm doing by giving too much context for why I'm trying to do it, sorry.

I'm currently trying to add an encryption service to my project. It's nothing that'll get published I think though and I've mostly got it working. The problem that I'm having is that I have my model like this

```<code>struct Entity {
    // All types are examples though I think they will be all optionals.
    var prop1: String?
    var prop2: Int?
    var prop3: Bool?
    var encryptedData: [Keypath:EncryptedData]

    static var encryptableKeyPaths: [WritableKeyPath<Entity, Any?>]
}
</code>```

As an example for what's happening, I can get the encryptionService to take in prop1, create an EncryptedData and put it in the encryptedData dictionary. I can even get the keyPath for the property. I can encrypt all the data and decrypt it just fine and get all the values properly, so I don't need help with that. But I'm struggling with 3 issues.

Getting the KeyPaths to be WritableKeyPaths so I can write to them with the values I need.

Setting the properties to nil once the values are encrypted so I'm not storing extra data.

Setting the properties to their values once their decrypted.

All three of these issues seem to revolve around making the KeyPaths into WritableKeyPaths.

This is the closest attempt I've gotten so far. You can copy the following code right into a playground and run it and it should work. Except it'll crash at the end. There are a couple of issues here, I'm losing the type safety as I have to make all the property types Initializable? which isn't great. Also, see that the values are permanently wrapped. I can't figure out how to prevent that. I had to mark Optional as conforming to Initializable to make this work. Lastly, the variable allStoredProperties doesn't let me write to them. I'm not sure how to properly convert it to WritableKeyPath from PartialKeyPath.

```<code>import UIKit

protocol Initializable {}

extension String: Initializable {}
extension Int: Initializable {}
extension Bool: Initializable {}
extension Optional: Initializable {}

protocol KeyPathIterable {
    associatedtype Model

    init()

    static var allKeyPaths: [WritableKeyPath<Model, Initializable?>] { get }
}

extension KeyPathIterable {
    var keyPathReadableFormat: [String: Initializable] {
        var description: [String: Initializable] = [:]
        let mirror = Mirror(reflecting: self)
        for case let (label?, value) in mirror.children {
            description[label] = (value as! Initializable)
        }
        return description
    }

    static var allStoredProperties: [PartialKeyPath<Self>] {
        var members: [PartialKeyPath<Self>] = []
        let instance = Self()
        for (key, _) in instance.keyPathReadableFormat {
            members.append(\Self.keyPathReadableFormat[key])
        }
        return members
    }

    static func setValue<Self: KeyPathIterable, T: Initializable>(on root: inout Self,
                                                                  at keyPath: WritableKeyPath<Self, Initializable?>,
                                                                  withValue value: T?) throws {

        root[keyPath: keyPath] = value
    }
}

struct Foo: KeyPathIterable {
    typealias Model = Foo

    var prop1: Initializable? // I want this to be String?
    var prop2: Initializable? // I want this to be Int?
    var prop3: Initializable? // I want this to be Bool?

    init() {
        self.prop1 = nil
        self.prop2 = nil
        self.prop3 = nil
    }

    static var allKeyPaths: [WritableKeyPath<Foo, Initializable?>] {
        return [\Model.prop1, \Model.prop2, \Model.prop3]
    }
}

var foo = Foo()
foo.prop1 = "Bar"
foo.prop2 = 1
foo.prop3 = true

print(foo.prop1 as Any)

let keyPath = \Foo.prop1

foo[keyPath: keyPath] = "Baz"

print(foo.prop1 as Any)

for path in Foo.allStoredProperties {
    print("-=-=-")
    print(path)
}

print("-=-=-=-=-=-=-=-")

do {
    try Foo.setValue(on: &foo, at: keyPath, withValue: "BazBar" as Initializable?)
} catch {
    print("Should never fail")
}

print(foo.prop1 as Any) // Returns Optional(Optional("BarBaz")) - I want this to be all the way unwrapped.
print("--------------")

let values1: [Initializable] = ["Hello World", 100, false]
do {
    for (path, value) in zip(Foo.allKeyPaths, values1) {
        try Foo.setValue(on: &foo,
                         at: path,
                         withValue: value as Initializable?)
    }
} catch {
    print("Success?")
}
print(foo.prop1 as Any)
print(foo.prop2 as Any)
print(foo.prop3 as Any)
print("----====----====----")

let values2: [Initializable] = ["Howdy", 0, false]
do {
    for (path, value) in zip(Foo.allStoredProperties, values2) {
        try Foo.setValue(on: &foo,
                         at: path as! WritableKeyPath<Foo, Initializable?>,
                         withValue: value as Initializable?)
    }
} catch {
    print("Always fails")
}

print("=-=-=-=-=-=-=-=")
print(foo)

</code>```

I've looked all over google and youtube and everywhere and I can't seem to get this to work. I'm open to a different architecture if that work accomplish my goals better. Just a little frustrated. Thanks for your help.

Body:
I've found that it's a little easier to explain what I'm doing by giving too much context for why I'm trying to do it, sorry.

I'm currently trying to add an encryption service to my project. It's nothing that'll get published I think though and I've mostly got it working. The problem that I'm having is that I have my model like this

struct Entity {
    // All types are examples though I think they will be all optionals.
    var prop1: String?
    var prop2: Int?
    var prop3: Bool?
    var encryptedData: [Keypath:EncryptedData]

    static var encryptableKeyPaths: [WritableKeyPath<Entity, Any?>]
}

As an example for what's happening, I can get the encryptionService to take in prop1, create an EncryptedData and put it in the encryptedData dictionary. I can even get the keyPath for the property. I can encrypt all the data and decrypt it just fine and get all the values properly, so I don't need help with that. But I'm struggling with 3 issues.

Getting the KeyPaths to be WritableKeyPaths so I can write to them with the values I need.

Setting the properties to nil once the values are encrypted so I'm not storing extra data.

Setting the properties to their values once their decrypted.

All three of these issues seem to revolve around making the KeyPaths into WritableKeyPaths.

This is the closest attempt I've gotten so far. You can copy the following code right into a playground and run it and it should work. Except it'll crash at the end. There are a couple of issues here, I'm losing the type safety as I have to make all the property types Initializable? which isn't great. Also, see that the values are permanently wrapped. I can't figure out how to prevent that. I had to mark Optional as conforming to Initializable to make this work. Lastly, the variable allStoredProperties doesn't let me write to them. I'm not sure how to properly convert it to WritableKeyPath from PartialKeyPath.

import UIKit

protocol Initializable {}

extension String: Initializable {}
extension Int: Initializable {}
extension Bool: Initializable {}
extension Optional: Initializable {}

protocol KeyPathIterable {
    associatedtype Model

    init()

    static var allKeyPaths: [WritableKeyPath<Model, Initializable?>] { get }
}

extension KeyPathIterable {
    var keyPathReadableFormat: [String: Initializable] {
        var description: [String: Initializable] = [:]
        let mirror = Mirror(reflecting: self)
        for case let (label?, value) in mirror.children {
            description[label] = (value as! Initializable)
        }
        return description
    }

    static var allStoredProperties: [PartialKeyPath<Self>] {
        var members: [PartialKeyPath<Self>] = []
        let instance = Self()
        for (key, _) in instance.keyPathReadableFormat {
            members.append(\Self.keyPathReadableFormat[key])
        }
        return members
    }

    static func setValue<Self: KeyPathIterable, T: Initializable>(on root: inout Self,
                                                                  at keyPath: WritableKeyPath<Self, Initializable?>,
                                                                  withValue value: T?) throws {

        root[keyPath: keyPath] = value
    }
}

struct Foo: KeyPathIterable {
    typealias Model = Foo

    var prop1: Initializable? // I want this to be String?
    var prop2: Initializable? // I want this to be Int?
    var prop3: Initializable? // I want this to be Bool?

    init() {
        self.prop1 = nil
        self.prop2 = nil
        self.prop3 = nil
    }

    static var allKeyPaths: [WritableKeyPath<Foo, Initializable?>] {
        return [\Model.prop1, \Model.prop2, \Model.prop3]
    }
}

var foo = Foo()
foo.prop1 = "Bar"
foo.prop2 = 1
foo.prop3 = true

print(foo.prop1 as Any)

let keyPath = \Foo.prop1

foo[keyPath: keyPath] = "Baz"

print(foo.prop1 as Any)

for path in Foo.allStoredProperties {
    print("-=-=-")
    print(path)
}

print("-=-=-=-=-=-=-=-")

do {
    try Foo.setValue(on: &foo, at: keyPath, withValue: "BazBar" as Initializable?)
} catch {
    print("Should never fail")
}

print(foo.prop1 as Any) // Returns Optional(Optional("BarBaz")) - I want this to be all the way unwrapped.
print("--------------")

let values1: [Initializable] = ["Hello World", 100, false]
do {
    for (path, value) in zip(Foo.allKeyPaths, values1) {
        try Foo.setValue(on: &foo,
                         at: path,
                         withValue: value as Initializable?)
    }
} catch {
    print("Success?")
}
print(foo.prop1 as Any)
print(foo.prop2 as Any)
print(foo.prop3 as Any)
print("----====----====----")

let values2: [Initializable] = ["Howdy", 0, false]
do {
    for (path, value) in zip(Foo.allStoredProperties, values2) {
        try Foo.setValue(on: &foo,
                         at: path as! WritableKeyPath<Foo, Initializable?>,
                         withValue: value as Initializable?)
    }
} catch {
    print("Always fails")
}

print("=-=-=-=-=-=-=-=")
print(foo)

I've looked all over google and youtube and everywhere and I can't seem to get this to work. I'm open to a different architecture if that work accomplish my goals better. Just a little frustrated. Thanks for your help.


问:
trouble publishing app on IIS, always landing on welcome page
I'm trying to publish a C# app on my windows PC but cant succeed using IIS,

I've been publishing my app with with visual studio no problem,
When i add a new website on IIS and only specify the name and physical path the app is indeed working on localhost,
But when i add my IP to the host name, i can connect, but always land on IIS Welcome Page...

I've tried to move my published folder inside the default website folder but it does'nt seem to work either.

default page for reference


问:
I cannot reach all the elements in an array when splitting a txt file by using "\n" in Unity
I cannot reach all the elements of an array after reading it by using TMPro_InputField in Unity. I am reading a .txt file in another class by using a method that I wrote and trying to compare an array with the .txt file that is read.

This is for reading the file by using Split("\n")

```<code>public void ReadFile()
{
    if(dataLines.Count > 0)
        dataLines = new List<string>();

    rawDataLines = FileManager.fileManagerInstance.mainFile.text.Split("\n");
    foreach(string line in rawDataLines)
    {
        if (line.Contains(",") && !line.Contains("#") && line!="\n" && !dataLines.Contains(line))
        {
            dataLines.Add(line);
        }

    }
}
</code>```

This is for comparing the read .txt file with InputField text.

arrayConvertedData = inputData.ToArray();
for(int i=arrayConvertedData.Length-1; i>-1; i--)
{
    if (CheckFile.checkFileInstance.dataLines.Contains(arrayConvertedData[i]))
    {
        arrayConvertedData[i] = "";
    }
}
```

Body:
I cannot reach all the elements of an array after reading it by using TMPro_InputField in Unity. I am reading a .txt file in another class by using a method that I wrote and trying to compare an array with the .txt file that is read.

This is for reading the file by using Split("\n")

public void ReadFile()
{
    if(dataLines.Count > 0)
        dataLines = new List<string>();

    rawDataLines = FileManager.fileManagerInstance.mainFile.text.Split("\n");
    foreach(string line in rawDataLines)
    {
        if (line.Contains(",") && !line.Contains("#") && line!="\n" && !dataLines.Contains(line))
        {
            dataLines.Add(line);
        }

    }
}

This is for comparing the read .txt file with InputField text.

arrayConvertedData = inputData.ToArray();
for(int i=arrayConvertedData.Length-1; i>-1; i--)
{
    if (CheckFile.checkFileInstance.dataLines.Contains(arrayConvertedData[i]))
    {
        arrayConvertedData[i] = "";
    }
}


问:
MAT_MOMENT_DATE_ADAPTER is not initialized at @angular/material-moment-adapter/index.ts
I am working on Node.js version 12.13, angular version 11.2.12,

I am trying to work with MatDatePicker. I have installed Moment.js dependency too.

While trying to use MAT_MOMENT_DATE_ADAPTER_OPTIONS under providers I am getting this compile time error.

*only initialized variables and constants can be referenced in decorators because the value of this variable is needed by the template compiler in 'MAT_MOMENT_DATE_ADAPTER_OPTIONS'
MAT_MOMENT_DATE_ADAPTER is not initialized at @angular/material-moment-adapter/index.ts *

Reinstalled npm. No luck.


问:
How to create Wavy background in tailwindcss?
How to create a Gradient Background with waves in tailwind?

wave div


问:
Firefox extension applies the required edits on the website only once, how to detect the website every time it's opened
Summary

I'm new to the firefox extension and I'm not a web developer.
but I'm trying to make an extension that removes a specific element by class name.
Every time I refresh, close the tap or the browser, and re-open them, it seems like the extension doesn't remove the element.

Note: I checked the element class and it's the same, and If I disabled and re-enabled the extension the element gets removed.

The manifest.json file

```<code>{
    "manifest_version": 2,
    "name": "bla bla bla",
    "description": "Remove bla bla bla",
    "version": "0.0.1",
    "icons": {
      "64": "icons/icon.jpg"
    },
    "content_scripts": [
      {
        "matches":["https://www.example.com/"],
        "js": ["background_script.js"]
      }
    ],
    "browser_action": {
      "default_icon": {
        "64": "icons/icon.jpg"
      }
    }
}
</code>```

The background.js file

```<code>document.getElementsByClassName('_2cNrC')[0].remove();
</code>```

When I load the extension for the first time in the Temporary Extensions, the wanted element gets removed from the website.

If I closed the tap or the browser and re-open it the element is not removed.

What I tried to do:

I tried this manifest.json

```<code>{
    "manifest_version": 2,
    "name": "bla bla bla",
    "description": "Remove bla bla bla",
    "version": "0.0.1",
    "icons": {
      "64": "icons/icon.jpg"
    },
    "background": {
      "scripts": ["background_script.js"]
    },
    "content_scripts": [
      {
        "matches":["https://www.example.com/"]
      }
    ],
    "browser_action": {
      "default_icon": {
        "64": "icons/icon.jpg"
      }
    }
}
</code>```

I tried to play around with the permissions, but nothing useful.

I read Mozilla documents for the extensions, but I couldn't figure out how to detect the website every time it's opened.

Body:
Summary

I'm new to the firefox extension and I'm not a web developer.
but I'm trying to make an extension that removes a specific element by class name.
Every time I refresh, close the tap or the browser, and re-open them, it seems like the extension doesn't remove the element.

Note: I checked the element class and it's the same, and If I disabled and re-enabled the extension the element gets removed.

The manifest.json file

{
    "manifest_version": 2,
    "name": "bla bla bla",
    "description": "Remove bla bla bla",
    "version": "0.0.1",
    "icons": {
      "64": "icons/icon.jpg"
    },
    "content_scripts": [
      {
        "matches":["https://www.example.com/"],
        "js": ["background_script.js"]
      }
    ],
    "browser_action": {
      "default_icon": {
        "64": "icons/icon.jpg"
      }
    }
}

The background.js file

document.getElementsByClassName('_2cNrC')[0].remove();

When I load the extension for the first time in the Temporary Extensions, the wanted element gets removed from the website.

If I closed the tap or the browser and re-open it the element is not removed.

What I tried to do:

I tried this manifest.json

{
    "manifest_version": 2,
    "name": "bla bla bla",
    "description": "Remove bla bla bla",
    "version": "0.0.1",
    "icons": {
      "64": "icons/icon.jpg"
    },
    "background": {
      "scripts": ["background_script.js"]
    },
    "content_scripts": [
      {
        "matches":["https://www.example.com/"]
      }
    ],
    "browser_action": {
      "default_icon": {
        "64": "icons/icon.jpg"
      }
    }
}

I tried to play around with the permissions, but nothing useful.

I read Mozilla documents for the extensions, but I couldn't figure out how to detect the website every time it's opened.


问:
ASP.NET: Razor: Partial: @section: include multiple javascript files
I have an index.cshtml that includes a partial razor view called "_CustomPartial.cshtml". The view is rendered ok. I included 2 javascript files in my partial view that reference a div from my partial. This part isn't working. I think the scripts are not being loaded. Below is my code:

_CustomPartial.cshtml:

```<code><div style="overflow: auto; width: 100%; height: 100%;">
    <div id="gvplayer" style="width:50%;height:400px; float: left; border: thin solid black;">
    </div>
</div>

@section JavaScriptIncludes
{
    <script type="text/javascript" src='@Url.Content("~/js/PlaybackScript.js")'></script>
    <script type="text/javascript" src='@Url.Content("~/js/PlaybackStateMachine.js")'></script>
}
</code>```

PlaybackScript.js:

```<code>console.log('initializing Playback object');
const playbackObject = CustomWindow();
$('#gvplayer').val(playbackObject);
</code>```

_Layout.cshtml:

```<code><body>
...
@RenderSection("JavaScriptIncludes", required: false)
</body>
</code>```

The scripts are not loaded because the I don't see the log in my console.

Body:
I have an index.cshtml that includes a partial razor view called "_CustomPartial.cshtml". The view is rendered ok. I included 2 javascript files in my partial view that reference a div from my partial. This part isn't working. I think the scripts are not being loaded. Below is my code:

_CustomPartial.cshtml:

@section JavaScriptIncludes
{

}

PlaybackScript.js:

console.log('initializing Playback object');
const playbackObject = CustomWindow();
$('#gvplayer').val(playbackObject);

_Layout.cshtml:

...
@RenderSection("JavaScriptIncludes", required: false)

The scripts are not loaded because the I don't see the log in my console.


问:
How to use cppcheck command the input path from txt file
I'm using Cppchek to analyse my source codes

By this command : cppcheck inputPath1 inputPath2 --enable=warning --xml 2> cppcheck-result.xml the report was well generated, However, I require a method to store the inputPath in a text file so that it can be read by the command line that will be executed.