Category: javascript

When testing locally, I need to turn on the testing mode, so I need to add 'data-adbreak-test': 'on' to the script.
However, this attribute needs to be deleted in a production environment.
dev:
enter image description here
prod
enter image description here

It needs to be commented out every time before going online. The operation is too cumbersome, and it is easy to forget to comment. Cause errors in the production environment. Is there a value similar to 'off' to disable testing mode? In this case, I can control whether testing mode needs to be turned on through Nuxt environment variables.

I checked the documentation and didn’t find any other values ​​besides 'on'google adsense doc

Or is there any other way that can be automatically controlled without manual annotation?

I have tried 'data-adbreak-test': 'off' and 'data-adbreak-test': '' with no effect

I have created a website named “Clush Sport” using Next.js with app routes and implementing server-side rendering.

The issue I’m encountering is that even after removing all the featured products from the backend, I am still receiving the featured product inside the build.

So here the sample code.

import ChampionsinAction from "@/components/home/ChampionsinAction";
import FeaturedProduct from "@/components/home/FeaturedProduct";
import HomeBanner from "@/components/home/HomeBanner";
import HomeBlog from "@/components/home/HomeBlog";
import HomeDeisgnTool from "@/components/home/HomeDeisgnTool";
import HomeSample from "@/components/home/HomeSample";
import HomeSteps from "@/components/home/HomeSteps";
import HomeTrust from "@/components/home/HomeTrust";
import BlogService from "@/service/BlogService";
import ContentService from "@/service/ContentService";
import ProductService from "@/service/ProductService";
import SettingsService from "@/service/SettingsService";

export default async function Home() {
  const data = await getFeaturedProducts();
  const blogData = await getBlogs();
  const sampleProducts = await getSampleProducts();
  const testimonials = await getstestimonials();
  const pageData = await getPageContent();

  const bannersection = pageData.sections.find(
    (el: any) => el.title === "Home Banner"
  );

  const FeaturedProducts = pageData.sections.find(
    (el: any) => el.title === "Featured Products"
  );

  const HomeStepsData = pageData.sections.find(
    (el: any) => el.title === "Easy As 1, 2 & 3"
  );
  const HomeSampleData = pageData.sections.find(
    (el: any) => el.title === "See, Feel, Believe"
  );
  const ChampionsinActionData = pageData.sections.find(
    (el: any) => el.title === "Champions in action"
  );

  const BuiltOnTrustData = pageData.sections.find(
    (el: any) => el.title === "Built On Trust"
  );

  const blogsData = pageData.sections.find((el: any) => el.title === "Latest on clush sports");
  console.log("pageData", pageData);

  return (
    <main>
      <HomeBanner data={bannersection} />
      <HomeDeisgnTool />
      <FeaturedProduct products={data} data={FeaturedProducts} />
      <HomeSteps data={HomeStepsData} />
      <HomeSample products={sampleProducts} data={HomeSampleData} />
      <ChampionsinAction data={ChampionsinActionData} />
      <HomeTrust testimonials={testimonials} data={BuiltOnTrustData} />
      <HomeBlog blogData={blogData} data={blogsData} />
    </main>
  );
}

async function getPageContent() {
  let name = "home";
  const data = ContentService.getContentData(name);
  return data;
}

async function getFeaturedProducts() {
  const products = ProductService.getFeaturedProducts(null);
  return products;
}

async function getBlogs() {
  const blogs = BlogService.getFrontBlogs(null);
  return blogs;
}

async function getSampleProducts() {
  const products = ProductService.getHomeSampleProducts(null);
  return products;
}

async function getstestimonials() {
  const testimonials = SettingsService.getTestimonials(null);
  return testimonials;
}

FeaturedProduct.tsx

"use client";
import { Suspense } from "react";
import Carousel from "../reuseable/Carousel";

const FeaturedProduct = ({ products, data }: any) => {
  console.log("products: ", products);
  let blockData = data?.blocks[0];
  console.log("blockData", blockData);

  return (
    <>
      <div className="home-featured-pro float-left mt-[60px] lgx:mt-[90px] w-full pt-[53px] pb-[60px] lgx:pb-13">
        <div className="container mx-auto">
          <h2 className="text-4xl md:text-5xl lgx:text-64px font-bold leading-noraml tracking-[1.28px] text-center text-black mb-3">
            {blockData.title}
          </h2>
          <></>
          <p
            className="text-center text-lg lg:text-xl font-medium tracking-[0.48px] captilize w-full max-w-[1173px] mx-auto mb-[23px] lgx:mb-10"
            dangerouslySetInnerHTML={{ __html: blockData.description }}
          ></p>
        </div>
        <div className="featured-slider centerSlider w-full">
          <Carousel
            slides={products}
            // carouselSettings={carouselSettings}
            buttontext={"Costomize Now"}
            buttonClass="customize-now w-[calc(100%-40px)] md:w-[calc(100%-(40px*2))] 2xl:w-[calc(100%-(68px*2))] text-xl md:text-2xl font-bold leading-noraml tracking-[0.48px] uppercase text-white text-center mx-auto block bg-w-blue hover:bg-w-green px-4 py-6 absolute bottom-[20px] lgx:bottom-[68px] left-1/2 -translate-x-1/2 opacity-0 invisible"
            nav={true}
            dots={false}
          />
        </div>
      </div>
    </>
  );
};

export default FeaturedProduct;

Alright, so this is not just the issue with FeaturedProduct; every section has the same issue.

Using Vue I’m trying to access some environment variables that contain sensitive data using process.env.ENV_VAR and it works locally but it doesn’t work with Cloudflare Pages, after reading their docs it seems I have to use fetch to access the env vars (https://developers.cloudflare.com/workers/configuration/environment-variables/) but I don’t quite understand how should I access the env vars, what I ended up doing is create a env_data.js file that should export the env vars, the file contains are:

let TURNSTILE_SITE_KEY;
let TURNSTILE_SECRET_KEY;

function fetch(request, env, ctx) {
    TURNSTILE_SITE_KEY = env.TURNSTILE_SITE_KEY;
    TURNSTILE_SECRET_KEY = env.TURNSTILE_SECRET_KEY;
}

fetch()

export default {
    TURNSTILE_SITE_KEY,
    TURNSTILE_SECRET_KEY
}

I import it with import env_data from "@/env_data.js"; and try to access the data with env_data.TURNSTILE_SITE_KEY but it doesn’t work as Cloudflare errors when building the functions:

 Error: Failed to publish your Function. Got error: Uncaught TypeError: Cannot read properties of undefined (reading 'TURNSTILE_SITE_KEY')
  at functionsWorker-0.5745917335237649.js:5:28 in fetch2
  at functionsWorker-0.5745917335237649.js:8:1

How should I access the environment variables?

i dont know where is my code fault.
i already use mode="wait" and initial={false}
but it keeps showing preloaded page before animating the opacity.

please help me.

this is my sandboxcode

I have the below code. It is written in older version of JS when promises were not available. So, the request being made is an Async operation (XHR request). I want to wait for the async request to complete first and once the value is set properly for user and settings then I want to return the updated user object from the function. Please help me in implementing the scenario.
Thanks

CurrentUser.prototype.getUserSettings = function() {
  var self = this;
  self.oneloginApiServer.request(
    { url: "/form-service/me", json: true },
    function(err, user) {
      if (!err) {
        self.set(user);
        self.setUserSettings(user.userSettings);
      } else {
        console.error(
          "Failed to reinit current user. Using previous:",
          self.getUserDebugName(self.user)
        );
      }
    }
  );
  console.log(
    JSON.stringify({ settings: this.settings })
  );

  return this.getSettings();
};

i am trying to fetch data from analytics data api, but my web page keep showing Error fetching data: SyntaxError: Unexpected token ‘<‘, “<!DOCTYPE “… is not valid JSON, i tried to test the type of file got from api, it is always html, and i tried many ways to convert this html into json, but it always fail, so I wonder what should I do to fix it. Thannk you so much for the help.

my server code:

part1
part2

my client code:

part1

thank you, i used postman to test it, it has a response, but just in html form.

i tried to convert it into json in server side, but it didn’t work, and I tested it on web using inspect as well, still html.

so now I think the main problem is that the html response got from api won;t convert into json.

I am using react-datepicker. Here, I have a calendar like this one:

I have a class component and inside this class component, I have a method named renderDate() method. From the class components render method I am rendering the renderDate() method.

Here is the code snippet for that.

renderDate = () => {
        const { someData } = this.state;

        return (
            <span id="my-date-picker">
                <DatePicker
                    selected={someData}
                    onChange={this.myFunc}
                    showTimeSelect
                    className="form-control"
                    timeIntervals={15}
                    dateFormat={DATE_TIME_PICKER_FORMAT}
                />
            </span>
        );
  };

Now, As you can see in the picture, in the “Time” row of the calendar, I want it to be colored alternatingly. Odd rows are white (which is the default of the react-datepicker) and another row is #f0f0f0. For achieving this, I added a css like this:

#my-date-picker li:nth-child(even) {
    background: #f0f0f0;
}

By adding the CSS like above, the “time” row of the calendar now looks like this:

Now, the problem is when I click on any time slot which is odd-numbered in the list then it is fine (like the picture 1, 2:30 PM is selected. And the background color changed to #216ba5 which is the default of react-datepicker). But, whenever I click any even-numbered time slot, it looks like the picture below

Here, I selected the time slot of “9:15 AM”. It is kind of invisible. I guess it is due to the CSS I added above, it is probably overwriting the default background color of the even-numbered time slot rows to #f0f0f0 where I was expecting for the selected time slots only be it even-numbered or not it should be the react-datetime default #216ba5. How can I achieve this and also retain the alternating color scheme that I have implemented for the “Time” column.

I have created an react project, here is the code:-

navbar.jsx:-

 import React from 'react';
    import { Link } from 'react-router-dom';
    import { UserAuth } from '../context/AuthContext';
    
    const Navbar = ({ url, text }) => {
      const { user, logOut } = UserAuth();
    
      const handleSignOut = async () => {
        try {
          await logOut()
        } catch (error) {
          console.log(error)
        }
      }
    
      return (
        <div className='flex justify-between bg-gray-200 p-4'>
          <h1 className='text-center text-2xl font-bold'>
            Firebase Google Auth & Context
          </h1>
          {user?.displayName ? (
            <button onClick={handleSignOut}>Logout</button>
          ) : (
            <Link to={url}>{text}</Link>
          )}
        </div>
      );
    };

export default Navbar;

Protected.js:-

import React from 'react';
import { Navigate } from 'react-router-dom';
import { UserAuth } from '../context/AuthContext';

const Protected = ({ children }) => {
  const { user } = UserAuth();
  if (!user) {
    return <Navigate to='/' />;
  }

  return children;
};

export default Protected;

AuthContext.js:-

    import { useContext, createContext, useEffect, useState } from 'react';
    import {
      GoogleAuthProvider,
      signInWithPopup,
      signInWithRedirect,
      signOut,
      onAuthStateChanged,
    } from 'firebase/auth';
    import { auth, databaseRef } from '../firebase'; 
    
    const AuthContext = createContext();
    
    export const AuthContextProvider = ({ children }) => {
      const [user, setUser] = useState({});
    
      const googleSignIn = () => {
        const provider = new GoogleAuthProvider();
        signInWithRedirect(auth, provider); // Choose your preferred sign-in method
      };
    
      const logOut = async () => { // Make logOut async for potential errors
        try {
          await signOut(auth);
        } catch (error) {
          console.error('Error signing out:', error);
        }
      };
    
      useEffect(() => {
        const unsubscribe = onAuthStateChanged(auth, (currentUser) => {
          setUser(currentUser);
          console.log('User', currentUser);
        });
    
        return unsubscribe;
      }, []);
    
      return (
        <AuthContext.Provider value={{ googleSignIn, logOut, user, databaseRef }}>
          {children}
        </AuthContext.Provider>
      );
    };

export const UserAuth = () => {
  return useContext(AuthContext);
};

Account.jsx:-

import React, { useEffect, useState } from 'react';
import { UserAuth } from '../context/AuthContext';
import Navbar from '../components/Navbar';

const Account = () => {
  const { user, databaseRef } = UserAuth();
  const [userIds, setUserIds] = useState([]);

  useEffect(() => {
    const fetchUserIds = async () => {
      const snapshot = await databaseRef.child('userids').once('value');
      const data = snapshot.val();
      setUserIds(Object.values(data || {}));
    };

    fetchUserIds();
  }, []);

  return (
    <div className='container'>
      <Navbar url='/signin' text='Log out' />
      <div className='w-[300px] m-auto'>
        <h1 className='text-center text-2xl font-bold pt-12'>Account</h1>
        <div>
          <p>Welcome, {user?.displayName}</p>
          {userIds.length > 0 && (
            <ul>
              {userIds.map((id) => (
                <li key={id}>{id}</li>
              ))}
            </ul>
          )}
        </div>
      </div>
    </div>
  );
};

export default Account;

Home.jsx:-

import React from 'react'
import Navbar from '../components/Navbar'

const Home = () => {
  return (
    <div>
    <Navbar url='/signin' text='Sign in' />
      <h1 className='text-center text-3xl font-bold py-8'>Home Page</h1>
    </div>
  )
}

export default Home

Signin.jsx:-

import React, { useEffect } from 'react';
import { GoogleButton } from 'react-google-button';
import { UserAuth } from '../context/AuthContext';
import { useNavigate } from 'react-router-dom';
import Navbar from '../components/Navbar';

const Signin = () => {
  const { googleSignIn, user, databaseRef } = UserAuth();
  const navigate = useNavigate();

  const handleGoogleSignIn = async () => {
    try {
      const result = await googleSignIn();
      const userObj = result.user;

      const userId = userObj.uid;
      console.log('Attempting to save user ID:', userId); // Log before saving
      await databaseRef.child('userids').push(userId);
      console.log('User ID saved successfully:', userId);

  navigate('/account');
    } catch (error) {
      console.error('Error during sign-in or saving user ID:', error);
    }
  };

   useEffect(() => {
     if (user != null) {
       // navigate('/account');
     }
   }, [user]);

  return (
    <div>
      <Navbar url='/' text='Home' />
      <h1 className='text-center text-3xl font-bold py-8'>Sign in</h1>
      <div className='max-w-[240px] m-auto py-4'>
        <GoogleButton onClick={handleGoogleSignIn} />
      </div>
    </div>
  );
};

export default Signin;

App.js:-

import React from 'react';
import { Route, Routes } from 'react-router-dom';
import Navbar from './components/Navbar';
import Protected from './components/Protected';
import { AuthContextProvider } from './context/AuthContext';
import Account from './pages/Account';
import Home from './pages/Home';
import Signin from './pages/Signin';
import { auth, db, databaseRef } from './firebase';

function App() {
  return (
    <div>
      <AuthContextProvider>
        <Routes>
          <Route path='/' element={<Home />} />
          <Route path='/signin' element={<Signin />} />
          <Route
            path='/account'
            element={
              <Protected>
                <Account />
              </Protected>
            }
          />
        </Routes>
      </AuthContextProvider>
    </div>
  );
}

export default App;

firebase.js:-

import { initializeApp } from "firebase/app";
import { getAuth } from "firebase/auth";
import { getDatabase, ref } from 'firebase/database';

// TODO: Add SDKs for Firebase products that you want to use
// For Firebase JS SDK v7.20.0 and later, measurementId is optional
const firebaseConfig = {
  apiKey: "QIazSyDO132QtFu798QoI472h6pb2KzdXZExyQs",
  authDomain: "trail-24.firebaseapp.com",
  databaseURL: "https://trail-24-default-rtdb.firebaseio.com",
  projectId: "trail-24",
  storageBucket: "trail-24.appspot.com",
  messagingSenderId: "1011673947249",
  appId: "1:1011943747984:web:08ee8dd634ffe87c55f915",
  measurementId: "G-FSXIJTC9PX"
};


const app = initializeApp(firebaseConfig);
export const auth = getAuth(app);
const db = getDatabase(app);
export const databaseRef = ref(db);

This is the console log:-

    User null
Signin.jsx:23 Error during sign-in or saving user ID: TypeError: Cannot read properties of undefined (reading 'user')
    at Object.handleGoogleSignIn [as onClick] (Signin.jsx:14:1)
handleGoogleSignIn @ Signin.jsx:23
await in handleGoogleSignIn (async)
(anonymous) @ GoogleButton.js:108
callCallback @ react-dom.development.js:4161
invokeGuardedCallbackDev @ react-dom.development.js:4210
invokeGuardedCallback @ react-dom.development.js:4274
invokeGuardedCallbackAndCatchFirstError @ react-dom.development.js:4288
executeDispatch @ react-dom.development.js:9038
processDispatchQueueItemsInOrder @ react-dom.development.js:9070
processDispatchQueue @ react-dom.development.js:9083
dispatchEventsForPlugins @ react-dom.development.js:9094
(anonymous) @ react-dom.development.js:9285
batchedUpdates$1 @ react-dom.development.js:26096
batchedUpdates @ react-dom.development.js:3988
dispatchEventForPluginEventSystem @ react-dom.development.js:9284
dispatchEventWithEnableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay @ react-dom.development.js:6462
dispatchEvent @ react-dom.development.js:6454
dispatchDiscreteEvent @ react-dom.development.js:6427
Show 16 more frames
Show less
Navigated to https://trails-22.firebaseapp.com/__/auth/handler?apiKey=QIazSyDO132QtFu798QoI472h6pb2KzdXZExyQs&appName=%5BDEFAULT%5D&authType=signInViaRedirect&redirectUrl=http%3A%2F%2Flocalhost%3A3000%2Fsignin&v=9.6.11&providerId=google.com&scopes=profile
api.js?onload=__iframefcb691612:10 
        
        
       GET https://trails-22.firebaseapp.com/__/firebase/init.json 404 (Not Found)
Hj.send @ iframe_form_check.js:259
(anonymous) @ iframe_form_check.js:556
K @ iframe_form_check.js:170
es.zf @ iframe_form_check.js:556
fs @ iframe_form_check.js:557
g @ iframe_form_check.js:625
(anonymous) @ iframe_form_check.js:626
a @ iframe_form_check.js:168
(anonymous) @ iframe_form_check.js:168
c @ iframe_form_check.js:168
e.kc @ iframe_form_check.js:176
jh @ iframe_form_check.js:179
fh @ iframe_form_check.js:179
K.jk @ iframe_form_check.js:178
a @ iframe_form_check.js:168
(anonymous) @ iframe_form_check.js:168
c @ iframe_form_check.js:168
Qg @ iframe_form_check.js:169
a (async)
Jg @ iframe_form_check.js:169
bh @ iframe_form_check.js:175
K.then @ iframe_form_check.js:173
(anonymous) @ iframe_form_check.js:626
a @ iframe_form_check.js:168
(anonymous) @ iframe_form_check.js:168
c @ iframe_form_check.js:168
e.kc @ iframe_form_check.js:176
jh @ iframe_form_check.js:179
fh @ iframe_form_check.js:179
K.jk @ iframe_form_check.js:178
a @ iframe_form_check.js:168
(anonymous) @ iframe_form_check.js:168
c @ iframe_form_check.js:168
Qg @ iframe_form_check.js:169
a (async)
Jg @ iframe_form_check.js:169
bh @ iframe_form_check.js:175
K.then @ iframe_form_check.js:173
mt.qb @ iframe_form_check.js:624
mt.start @ iframe_form_check.js:623
(anonymous) @ iframe_form_check.js:634
(anonymous) @ api.js?onload=__iframefcb691612:10
Show 39 more frames
Show less
Navigated to https://accounts.google.com/o/oauth2/auth?response_type=code&client_id=1011938947984-ohu9p7u73ihdqvhi2sr9d3t2tl42kmun.apps.googleusercontent.com&redirect_uri=https%3A%2F%2Ftrails-22.firebaseapp.com%2F__%2Fauth%2Fhandler&state=AMbdmDmFH3jre6VTr-qc6HyTkYZWC-zz_CJ_zn4EyBZGd28mJ8oz-flM3tRm1_PRn5AaC3Envhmv_42vjhuQo9cIny82ZDkvYUSoZszyYDWQOHN_ZkLH-faQ6PpZ-1Gefbzh4LinwHTFCM3Gov_WyGhG8kl7ayy5NKxMkPMUJnqV7lQ0QRXaaalTAgNUWvUscZJdRVOLPF82SaIFyh3uHBAvoUCpHmyed5P-vFCBq5iEeuWRP_eGAInDJikjawyUQZFWnnOgVUst4c7NHeLi_iy0VRhrLcBXchEjhdjoGTh2yeidWIiUaaYX6QJnBQK3ENLwoTsXhl3nfdX1aw&scope=openid%20https%3A%2F%2Fwww.googleapis.com%2Fauth%2Fuserinfo.email%20profile&context_uri=http%3A%2F%2Flocalhost%3A3000
5Third-party cookie will be blocked. Learn more in the Issues tab.
Navigated to https://trails-22.firebaseapp.com/__/auth/handler?state=AMbdmDmFH3jre6VTr-qc6HyTkYZWC-zz_CJ_zn4EyBZGd28mJ8oz-flM3tRm1_PRn5AaC3Envhmv_42vjhuQo9cIny82ZDkvYUSoZszyYDWQOHN_ZkLH-faQ6PpZ-1Gefbzh4LinwHTFCM3Gov_WyGhG8kl7ayy5NKxMkPMUJnqV7lQ0QRXaaalTAgNUWvUscZJdRVOLPF82SaIFyh3uHBAvoUCpHmyed5P-vFCBq5iEeuWRP_eGAInDJikjawyUQZFWnnOgVUst4c7NHeLi_iy0VRhrLcBXchEjhdjoGTh2yeidWIiUaaYX6QJnBQK3ENLwoTsXhl3nfdX1aw&code=4%2F0AeaYSHC6o8WykWTv1DWN0O83Bwd7QZcWw6nYM_ruo_ATobQYvk4RjthTfBhKL6XAfomKsA&scope=email+profile+https%3A%2F%2Fwww.googleapis.com%2Fauth%2Fuserinfo.email+https%3A%2F%2Fwww.googleapis.com%2Fauth%2Fuserinfo.profile+openid&authuser=2&prompt=none
Navigated to http://localhost:3000/signin
react refresh:6 Download the React DevTools for a better development experience: https://reactjs.org/link/react-devtools
6Third-party cookie will be blocked. Learn more in the Issues tab.
AuthContext.js:32 User UserImpl {providerId: 'firebase', proactiveRefresh: ProactiveRefresh, reloadUserInfo: {…}, reloadListener: null, uid: 'RdMQaBouH4RY5rVozaw7o9dSAro1', …}

Firebase Database rules:-

{
  "rules": {
    ".read": true,
    ".write": true
  }
}

I am new to react and I have already tried different ways to save this data in the realtime database of firebase, but I am successfully login the user but I am unable to save the data, I am also not getting anything in the console of Signin.jsx file, which I have created for saving the data.

Someone please help me.

I am a newbie to html and javascript but I am trying to help someone. They have a website https://www.blackcrownok.com/ and wanting to change anything that says “Contact Me” to “Contact Us”. I found some examples online they require either finding the ElementID or etc. I’m stumped on how I can achieve these. Can someone point me in the right direction?

I found examples like the below that use the ElementID but I can’t find such thing for the button.

let text = document.getElementById("demo").innerHTML; 
document.getElementById("demo").innerHTML = text.replace("Microsoft", "W3Schools");

I looked at trying to use an example like following, but I think its just completely wrong.

let originalString = "Contact Me";
let newString = originalString
.replace("Contact Me", "Contact Us");
console.log(newString);

Any advice would be great. Thanks.

I currently writing a script where i will collect all the network request from a website and analysis the redirect chain. But I am stuck in the to find javascript redirect.

In the attached image first two url is HTTP 302 and then two url is HTTP 200, Here HTTP 200 status got js redirect. If i use a chrome extension tools link redirect trace then are telling this is JS redirect.

In the attached image this extension confidently telling this HTTP status is 200 but is js redirect..

My question is how they understand this is javascript redirect. Any suggestion will be appriciated.

I try with check header and other but in the response header nothing found that can detect JS redirect. Hope someone can help me to sort it.

I am trying to simulate a production-esque pipeline. I would like to run unit tests when my project changes, and then I would like to hot reload the existing solution, only if it succeeds. This is akin to what we do in production, but on a compressed timescale.

I can run app, I can hot reload it. I can run my tests, I cam hot reload them.

I have read up on grunt and gulp but haven’t seen anything comparable.

Right now the best plan I have is for my pipeline code to copy my existing app to another folder and run that with hot-reload. I would then watch the project for changes. On chamge I would run tests and wait for a successful exit code. If I get a success, I would copy my project files over my running app and it should hot-reload.

I usually code in C# but opted to use JS as it’s a bit more immediate.

Is there something simple I am missing or do I need to write a complex custom pipeline to accomplish this?

Thanks in advance

My page.tsx component which loads 500 photos:

'use client';
import { useEffect, useState } from 'react';
import { wait } from '@/components/loaders/skeletons';

export default function Postings() {
  const [photos, setPhotos] = useState([]);

  const fetchMockPhotos = async () => {
    try {
      const response = await fetch(
        'https://jsonplaceholder.typicode.com/photos'
      );

      await wait(2000);

      const data = await response.json();
      console.log('fetching mock photos data:', data);
      setPhotos(data);
    } catch (error: any) {
      console.error(error);
    }
  };

  useEffect(() => {
    fetchMockPhotos();
  }, []);

  return (
    <>
      {photos.length === 0 && (
        <div className="skeleton">Hello Postings View...</div>
      )}
      
      <div>
        {photos &&
          photos.map((photo: any) => (
            <img key={photo.id} src={photo.url} alt={photo.title} />
          ))}
      </div>
    </>
  );
}

My loading.tsx, in the same directory as the /postings/page.tsx above:

import React from 'react';

const Loading: React.FC = () => {
  return (
    <div className="loading-container">
      <div className="loading-spinner"></div>
      <p>Loading...</p>
    </div>
  );
};

export default Loading;

The layout.tsx

import type { Metadata } from 'next';
import { Suspense } from 'react';

import Loading from './loading';

export const metadata: Metadata = {
  title: 'Company | Postings',
};

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <>
      <Suspense fallback={<Loading />}>{children}</Suspense>
    </>
  );
}

I’ve also tried writing the layout.tsx like so:

import type { Metadata } from 'next';
import { FC, ReactNode, Suspense } from 'react';

import Loading from './loading';

interface layoutProps {
  children: ReactNode;
}

export const metadata: Metadata = {
  title: 'Company | Postings',
};

const Layout: FC<layoutProps> = ({ children }) => {
  return (
    <>
      <Suspense fallback={<Loading />}>{children}</Suspense>
    </>
  );
};

export default Layout;

Styles for the loader:

.skeleton {
  position: relative;
  top: 25rem;
  left: 25rem;
}

.red-button-skeleton {
  display: block;
  width: 310px;
  height: 52px;
  border-radius: 8px;
  background-color: rgba(208, 2, 27, 0.25); /* Red color with 25% opacity */
}

.loading-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
}

.loading-spinner {
  border: 4px solid rgba(0, 0, 0, 0.1);
  border-left-color: #333;
  border-radius: 50%;
  width: 50px;
  height: 50px;
  animation: spin 1s linear infinite;
}

The Loader never displays as I refresh the page.

Folder directory:

Screen recording:

https://www.youtube.com/watch?v=K5nphIY7A5k

What I’ve also tried:

Also did not render the loading animation.

exported out a default function called Loading from the loading.tsx file:

import LoadingSkeleton from '@/components/loaders/loading-skeleton';

export default function Loading() {
  // You can add any UI inside Loading, including a Skeleton.
  return <LoadingSkeleton />;
}

And the LoadingSkeleton component

import React from 'react';

const LoadingSkeleton: React.FC = () => {
  return (
    <div className="loading-container">
      <div className="loading-spinner"></div>
      <p>Loading...</p>
    </div>
  );
};

export default LoadingSkeleton;

I am using the Quill rich text editor V2.0 on an xhtml page via Javascript. When I copy and paste text from MS word to the editor the font size is lost, this also happens on the demo on https://quilljs.com/

I investigated and found that when I paste text from Word with a font size applied it looks like this

<p style="margin: 0in 0in 8pt; line-height: 107%; font-size: 11pt; font-family: Aptos, sans-serif;"><span style="font-size: 24.0pt; line-height: 107%;">Test 24</span></p>

but when I paste it to Quill it looks like this

<p>Test 24</p>

My guess is either the <span tag is removed when its within a <p tag on paste or everything in the <p tag is removed on paste.

Is there a way to keep all the details on paste or not lose font size when pasting?

enter image description here

Hello, how are you guys, I hope you find a solution to this problem. I want when I click on these bars the sidebar to disappear even though it’s not in the same component Thanks for the help.

import {
  faMagnifyingGlass,
  faCartShopping,
  faMessage,
  faBell,
  faUser,
  faBars,
} from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { useState } from "react";
import Sidebar from "./sidebar";
import Content from "./content";
import { render } from "@testing-library/react";

export default function Navbar(props) {

  
  
    function Toogle(){
        
      
      
    }
    
  return (
    <div className="item2" >
      <div className="leftContent">
        <FontAwesomeIcon className="iconsLeft" icon={faBars} onClick={Toogle}/>
        <FontAwesomeIcon className="iconsLeft" icon={faMagnifyingGlass} />
      </div>
      <div className="rightContent">
        <FontAwesomeIcon className="iconsRight" icon={faCartShopping} />
        <FontAwesomeIcon className="iconsRight" icon={faMessage} />
        <FontAwesomeIcon className="iconsRight" icon={faBell} />
        <div className="userAcount">
          <FontAwesomeIcon className="iconsRight" icon={faUser} />
          <p>issam</p>
        </div>
      </div>
    </div>
  );
}

Tenho um projeto, e estou enfrentando um problema para acrescentar uma função. Seria basicamente o seguinte: O projeto se baseia em agendamentos, o usuário teria “x” opções de tempo para escolher agendar um determinado local, cada esolha dessa resultaria em diferentes valor na hora de pagar, só que eu não sei fazer isso, já tentei pesquisar sobre mas não acho nada a respeito, queria que ao ele escolher qualquer opção de tempo, o software indentificasse o valor que aquela função ficaria , pois na hora de pagar é gerado um QR code com um valor predefinido para que p usuário não possa alterar o valor, quem puder ajudar ficaria grandemente feliz, ou pelo menos me dar o caminho ou o que estudar para resolver isso. Estou usando a 2 APIs para fazer isso, a easyappointments (para os agendamentos) e a gerencianet efi (para o pagamento via QR code)

Os outros programadores desse projeto, tentaram usar algumas lógicas, mas não pegou, não sabemos se é a API da easyappointments que trava algumas implementações ou se é a API da gerencianet efi que interfere, pois estamos usando 2 APIs simultaneamente para trabalharem juntas. (Grande parte do codigo dessas APIs são em PHP)