Category: javascript

I am using the Swipeable component from Software Mansion. How can I complete the intended use-case and delete the row when the user decides to delete it?

https://docs.swmansion.com/react-native-gesture-handler/docs/api/components/swipeable/

Am stuck at an issue where am unable to make use of cy.ntlmSs and cy.ntlm to launch my work url. This application uses Windows Authentication which is collected by .net core pre-defined library and does use any login validation via API call with username and password.

How do overcome this scenario. I have tried almost all available ntlm options but none work. Please suggest.

i have input form to upload you file and submitting that file(method = post) i need to cheack if user upload the image or not. if not should display error message and return false. but in my case return false don’t working

my code

const jobs = document.getElementById("jobImage");
const error = document.getElementById("Error");

my function

function func(){
    if(jobs.value < 1){    
     console.log("1")
     error.style.display = "block";
     error.textContent = "Pleas upload your image";
     setTimeout(function(){ window.location.reload(); },5000);
      return false
    }
        
}

when i use my function its return true not false

<div class="form-group">
        <div class="col-md-offset-2 col-md-10">
            <button  type="submit" value="Save" class="btn btn-default" id="save" onclick="func()"><a href="www.google.com">Go now</a></button>
        </div>
    </div>
</div>

best regards

I’d like for a game to fire events upon key presses, but when I navigate away from and back to the game page the event listener fires twice. I found another issue suggesting I remove the listener before adding it, but that isn’t helping.

The listener is added during mounted

mounted() {
        this.setupInputListener();
    },

And the keydown event listener is added to the document

        keydownListener() {
            const action = handleKeyDown(event.key);
            if ( action ) {
                this.SEND_INPUT({
                    gameId: this.gameId,
                    action: action
                });
            }
        },
        setupInputListener() {
            document.removeEventListener('keydown', this.keydownListener);
            document.addEventListener('keydown', this.keydownListener);
        }

How can I prevent this keydown listener from emitting duplicate events?

<div class="form-group"><label for="unit_of">Unit of Measure</label>
<select class="form-control-sm selectpicker" multiple="multiple" id="unit_of" name="unit_of[]" data-selected-text-format="count">
<?php $sql = "select * from unit_of";
$res = mysqli_query($db_handle, $sql);
while ($list = mysqli_fetch_assoc($res)) {
$unit_of = $list['unit_of'];
?>
<option><?= $unit_of; ?></option>
<?php
}
?>
</select>
</div>
<input type="text" class="form-control-sm" id="rates" name="rates" >
<input type="text" class="form-control-sm" id="rates1" name="rates1" style="display:none">
<input type="text" class="form-control-sm" id="rates2" name="rates2" style="display:none">

In the dropdown
Per Minute
Per Page,
Per Hour,
Per Day,
Per Month,
Per Item,
Per Contract,
Others

I want to add onchange multiple select max three input types number on multiple select with placeholder e.g.(“Enter Rate Per Page”)

Thanks in Advance

I have the following state

const state = {
  courses: [],
  series: [],
  course: {
      title: 'testing',
      course_notes: [
    {
      id: 1,
      note: "one" // want to edit this
    },
    {
      id: 2,
      note: "two"
    }
  ]
}
}

I want to change state.course.course_notesp[0].name

I’ve never fully understood how this works, read a lot of tutorials, I feel I know how it works but it always trips me up. This is what I am trying

const m = {
  ...state, 
  course: {
    course_notes:[
      ...state.course.course_notes,
      state.course.course_notes.find(n => n.id === 1).note = "edited"
    ]
  }
}

That seems to add edited as an extra node. state.course.course_notes.length ends up being 3.

Im trying to write some unit test for my React app, and still in the process of getting familiar with the React testing library.

I created an empty page to just test on the axios api calls to make myself familiar with it. I have a axios util for customize basicAxios. When I follow the step for axios testing I got the typeError mentioned on the title.

here is my axios util code:

// axiosUtils.ts
import axios from "axios";
import { merge } from "lodash";
import type { AxiosPromise } from "axios";
import { getToken } from "./authUtils";

export const basicAxios = (options: {}): AxiosPromise<any> => {
  const token = getToken();
  const config = merge({ params: { token } }, options);
  return axios(config);
};

here is the test component:

// TestPage.tsx
const TestPage = () => {
  const [total, setTotal] = useState<number | null>(null);

  useEffect(() => {
    basicAxios({
      method: "POST",
      url: URL,
      data: payloadBody,
    }).then(({ data }) => {
      setTotal(data.total);
    });

    // async function getSummary() {
    //   try {
    //     const { data } = await axios.post(URL, payloadBody);
    //     setTotal(data.total);
    //   } catch (error) {
    //     console.log(error);
    //   }
    // }

    // getSummary();
  }, []);

  return (
    <Container>
      {!total ? (
        <Loader>Loading...</Loader>
      ) : (
        <div>
          Total amount of return:
          <Label data-testid="label">{total}</Label>
        </div>
      )}
    </Container>
  );
};

export default TestPage;

here is my jest setup to mock axios:

//axios.ts
export default {
  __esModule: true,
  post: jest.fn().mockResolvedValue({ data: {} }),
  get: jest.fn().mockResolvedValue({ data: {} }),
  default: jest.fn().mockResolvedValue({ data: {} }),
};

Lastly here is my test file:

// TestPage.test.tsx
import React from "react";
import { render } from "@testing-library/react";
import axios from "axios";
import "@testing-library/jest-dom/extend-expect";
import TestPage, { URL, payloadBody } from "../TestPage";

const mockedAxios = axios as jest.Mocked<typeof axios>;

test("show loader when it's fetching data, then render total num", async () => {
  mockedAxios.post.mockResolvedValueOnce({
    data: {
      aggregations: [],
      total: 144,
    },
  });

  const { findByTestId, getByText } = render(<TestPage />);

  expect(getByText(/loading.../i)).toBeInTheDocument();

  const labelValue = await findByTestId("label");

  expect(mockedAxios.post).toHaveBeenCalledWith(URL, payloadBody);
  expect(mockedAxios.post).toHaveBeenCalledTimes(1);
});

In my TestPage.tsx, if I use the comment-out code, the test pass without the error. The error occurs when I use basicAxios(used in multiple places in the app).
Below is the error log:

TypeError: (0 , _axios.default) is not a function

       9 |   const token = getToken();
      10 |   const config = merge({ params: { token } }, options);
    > 11 |   return axios(config);
         |          ^
      12 | };
      13 |

      at basicAxios (src/lib/axiosUtils.ts:11:10)
      at src/features/pages/TestPage.tsx:22:5
      at invokePassiveEffectCreate (node_modules/react-dom/cjs/react-dom.development.js:23487:20)
      at HTMLUnknownElement.callCallback (node_modules/react-dom/cjs/react-dom.development.js:3945:14)
      at HTMLUnknownElement.callTheUserObjectsOperation (node_modules/jsdom/lib/jsdom/living/generated/EventListener.js:26:30)
      at innerInvokeEventListeners (node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:338:25)
      at invokeEventListeners (node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:274:3)
      at HTMLUnknownElementImpl._dispatch (node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:221:9)
      at HTMLUnknownElementImpl.dispatchEvent (node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:94:17)
      at HTMLUnknownElement.dispatchEvent (node_modules/jsdom/lib/jsdom/living/generated/EventTarget.js:231:34)
      at Object.invokeGuardedCallbackDev (node_modules/react-dom/cjs/react-dom.development.js:3994:16)
      at invokeGuardedCallback (node_modules/react-dom/cjs/react-dom.development.js:4056:31)
      at flushPassiveEffectsImpl (node_modules/react-dom/cjs/react-dom.development.js:23574:9)
      at unstable_runWithPriority (node_modules/scheduler/cjs/scheduler.development.js:468:12)
      at runWithPriority$1 (node_modules/react-dom/cjs/react-dom.development.js:11276:10)
      at flushPassiveEffects (node_modules/react-dom/cjs/react-dom.development.js:23447:14)
      at Object.<anonymous>.flushWork (node_modules/react-dom/cjs/react-dom-test-utils.development.js:992:10)
      at act (node_modules/react-dom/cjs/react-dom-test-utils.development.js:1107:9)
      at render (node_modules/@testing-library/react/dist/pure.js:82:26)
      at Object.<anonymous> (src/features/pages/__test__/TestPage.test.tsx:19:39)

Does anyone have experience on this issue?

render() {
    drawRect(0,0,canvas.width,canvas.height,3);
    console.log(this) // when called with setInterval(classObject.render, 1000), returns window; if called with (classObject).render returns (classObject)
    for (let i = 0; i <= this.sprites.length; i++) {
        if (this.sprites[i]) {
            let cs = this.sprites[i]
            cs.drawRoutine(cs.position.x,cs.position.y);
        }
    }
}
setRenderInterval(fps) {
    setInterval(this.render,1000/fps);
}

Here, let’s assume classObject is called game.
When game.render() is called normally, it has game as this. But when it’s called using setInterval, it has window as this. How can I circumvent this?
this.sprites is an array of sprites for the game, and it needs to be accessed using this, as there can be multiple games with different variable names. And cs.drawRoutine is a function within the sprite that just draws in the canvas. The function runs when normally called.

my CSS won’t load when running my HTML. The HTML is hooked up correctly with the CSS but express and node.js seem to be ignoring it. I can’t understand the articles and tutorials or other stack overflow questions so I’ll send my code via a Github link. Code with problems

He’i’p.microsoft.com Talk 8779477788 to a person
This Help.microsoft.com +1-877-947-7788 rebuilds the data utility but doesn’t fix the help.microsoft.com. This is often a complicated issue and has required fixing as soon as possible. When this Help.microsoft.comoccurs users generally get the message, ‘Recover data file’ or ‘Your HELP.MICROSOFT.COMisn’t working. For this help.microsoft.com, the HELP.MICROSOFT.COMfile must fix and recovered. To stop this Help.microsoft.comfrom doing any damage, restore a backup copy, and then condense the company file. It’s a really Support software issue that needs immediate HELP.MICROSOFT.COMmention and will be fixed as soon as possible. How does HELP.MICROSOFT.COM +1-877-947-7788 Support Number affect? As mentioned earlier they skipped 111 Help.microsoft.comis one of the most occuCOIN.BASEing help.microsoft.coms in MS OFFICE. So it means the business or user is at constant risk of Contact of HELP.MICROSOFT.COMSupport Number HELP.MICROSOFT.COMSupport Phone Number mostly occurs within the application system because of file damage. The file must be repaired by either restoration or by replacing it with an earlier saved backup copy of the stored data. HELP.MICROSOFT.COMTECHNICAL Support phone number – However, this is often HELP.MICROSOFT.COMCustomer Support phone number software within the end and that’s why HELP.MICROSOFT.COMCustomer Support phone number sometimes it does face issues affecting the business operations of its users. An issue that’s quite common has the HELP.MICROSOFT.COM +1-877-947-7788 Support Phone Number. This Help.microsoft.comcode recovers the data that has been founded and again rebuilds the data section. losing their financial and operational data. Then they need storing in MS OFFICE. It’s imperative to make a backup of the data to stop problems in the future. Steps to resolve HELP.MICROSOFT.COMCustomer Support Phone Number Wherever there’s a problem there’s always a resolution. A similar is that the case with HELP.MICROSOFT.COM +1-877-947-7788 Support Number. Below mentioned are some steps that may help to repair can pass few tests and if your file passes these tests, then the backup of the file has automatically been created in the ADR folder. After this, the logging program of ADR transactions will invoice all the transactions quickly also as automatically. Ithave integrated with the file from a specific instance on HELP.MICROSOFT.COM +1-877-947-7788 Software. Once the recovering process is complete, HELP.MICROSOFT.COMaccounting software will create a duplicate of that file. But if your application is open, you’d not find any backup created. This may produce two backup duplicates and also the latest one would be 12 hours old while another would be 24 hours old. This way the oldest file would get deleted.
bold
italic

quote

First – I know not to keep passwords and logins that way. I am only doing this as a task.

So, i need to save username and password from register form, and next use it in login form.
How i can do this with only html and JS?

Now i have something like that:

let user_name = document.getElementById("username");
let user_paswrd = document.getElementById("password");


let store_data = () => {
  let input_username = localStorage.setItem("username", user_name.value);
  let input_password = localStorage.setItem("password", user_paswrd.value);

};

https://jsfiddle.net/gcu78z20/

it’s saving username and password in localstorage, but I need to save all registered username and password. Then in login menu get it back when login. How can I do it? It is better to do this with localstore or cookie?

IMPORTANT INFORMATION
this form will only be opened locally. The website will not be on the web.

I have my api like this:

const api = "https://api.exchangerate-api.com/v4/latest/USD";

and I want to download it then separate the value to Country and Ratio and embed them to google table. I have found a chart like this. I want to modify the code so it can display in a table with country and corresponding ratio. But at this point, I have no idea how to do it. May I ask for some hint ?

I have a list of items. Some have a download link and some not.

If I try to render a an undefined url, I have this error. So I tried this :

if (spectacle.pdf.url) {
    const pdf = spectacle.pdf.url;
    const flag = `/fl_attachment:dossier${spectacle.slug}`;
    const position = 47;
    const output = [pdf.slice(0, position), flag, pdf.slice(position)].join('');
}

But I now have an other error telling me that output is not defined.
Does someone can explain me how to do it well to stop a function to load if undefined ?

[slug].js

const Spectacle = ({ spectacle, spectacles, categories }) => {



  const slideRight = () => {
    const slider = document.querySelector('.gallery');
    console.log(slider);
    slider.scrollBy({
      left: 450,
      behavior: 'smooth'
    });
  }

  const slideLeft = () => {
    const slider = document.querySelector('.gallery');
    console.log(slider);
    slider.scrollBy({
      left: -450,
      behavior: 'smooth'
    });
  }

  useEffect(() => {
    const bigTitle = document.getElementById('big-title');
    const vertTitle = document.getElementById('ver-title');
    const title = spectacle.title;
    if (title.length > 30) {
      bigTitle.style.fontSize = "8vw";
      vertTitle.style.fontSize = "3rem";
    }
  }, []);

  
if (spectacle.pdf.url) {
    const pdf = spectacle.pdf.url;
    const flag = `/fl_attachment:dossier${spectacle.slug}`;
    const position = 47;
    const output = [pdf.slice(0, position), flag, pdf.slice(position)].join('');
}


  return (
    <>
      <div className="spectacle-header">
        <img src={spectacle.image.url} />
        <div className="spectacle-titles">
          <h1 id="big-title" className="big-title">{spectacle.title}</h1>
          <h5 className="subtitle">{spectacle.sousTitre}</h5>
        </div>
      </div>
      <Container className="spectacle-text">
        <Row className="bloc-mob">
          <Col className="ext a">
            <h1 id="ver-title" className="vertical-title red">{spectacle.title}</h1>
            <h2 className="quote shows">{spectacle.citation}</h2>
          </Col>
          <Col className="middle-col">
            <p className="">
              <Moment format="YYYY" className="date">{spectacle.year}</Moment>
            </p>
            <Row className="status">
              <Col>
                <span>{spectacle.status}</span>
              </Col>
              <Col>
                <span>{spectacle.category.name}</span>
              </Col>
            </Row>
            <div>
              <p className="description" id='desc'>
                <ReactMarkdown source={spectacle.description} />
                <a href={output} download="newfilename"><h4>Télécharger le document</h4></a>
              </p>
              <div className="video"
              dangerouslySetInnerHTML={{ __html: spectacle.video}} >
              </div>
            </div>
          </Col>
          <Col className="ext b">
            <p className="generic" id="generic">
              <ReactMarkdown source={spectacle.cast} />
            </p>

           
            <div className="scroll-down">
              Scroll down
              <img src="https://res.cloudinary.com/ciefact/image/upload/v1634668021/arrow_0e058f1520.svg"
                className="arrow-down" />
            </div>
          </Col>
          {/* <Col className="illu">
            <img src={spectacle.Illustration.url} />
          </Col> */}
        </Row>

        <Row className="gallery">

          {spectacle.galery.map((item) => (
            <ModalImage
              key={item.id}
              small={item.url}
              large={item.url}
              alt={item.title}
              hideZoom={true}
              hideDownload={true}
            />
          ))}
        </Row>
        <button
          id="slideLeft"
          type="button"
          onClick={slideLeft}
        >
          <img src="https://res.cloudinary.com/ciefact/image/upload/v1634668021/arrow_0e058f1520.svg"
            className="arrow-down" />
        </button>
        <button
          id="slideRight"
          type="button"
          onClick={slideRight}
        >
          <img src="https://res.cloudinary.com/ciefact/image/upload/v1634668021/arrow_0e058f1520.svg"
            className="arrow-down" />
        </button>
      </Container>
    </>
  )
}

export async function getStaticPaths() {
  const spectacles = await fetchAPI("/spectacles")

  return {
    paths: spectacles.map((spectacle) => ({
      params: {
        slug: spectacle.slug,
      },
    })),
    fallback: 'blocking',
  }
}

export async function getStaticProps({ params }) {
  const spectacle = (await fetchAPI(`/spectacles?slug=${params.slug}`))[0]

  const [spectacles, categories] = await Promise.all([
    fetchAPI("/spectacles"),
    fetchAPI("/categories"),
  ])
  return {
    props: { spectacle: spectacle, spectacles, categories },
    revalidate: 1,
  }
}

export default Spectacle 

I am using “load” and “OBJloader” from loaders.gl/core and loaders.gl/obj to load a mesh to export it as a const so other module can use it, currently I am using this

export const myMesh = Object.freez({
     mesh : load(path_to_obj_file,OBJLoader),
     origin: [1.4,0,2.2],
     dimensions: [2,2,2],
     scale: 1
)}

but then I find out that I can calculate the origin and dimensions from the obj file itself without the need to put them manually (I used to calculate them form meshlab), and I can do it from the load function itself

load(path_to_obj_file,OBJLoader).then((obj)=>{
console.log(obj.schema.metadata.get["boundingBox"]
}

boundingBox would be like that [[-1.4,-1,-2],[0.6,1,-0.2]] (numbers are not accurate at all).
and I can calculate origin and dims from the boundingBox.

my question is, how can I export the const myMesh now? since I have promise, also when we write:

mesh : load(path_to_obj_file,OBJLoader) 

could that cause a problem since load returns a promise ? (currently it is working correctly)

I tried:

export const loadMyMesh = load(path_to_obje_file,OBJLoader).then((obj) =>{
     const myMesh = Object.freez({
     mesh: obj,
     origin: calculateOrigin(obj),
     dimensions: claculateDim(obj),
     scale: 1
    });
  return myMesh
})

where calculateOrigin and calculateDim are functions used to get the boundingbox and calculate the origin and the dims, but that didn’t work.

so any solution ?

If I enter a fromAmount which is larger than the current toAmount, then toAmount value is expected to become fromAmount + $1.

    const initialObj = {
      fromAmount: '',
      toAmount: '',
      comment: ''
    };
    const [itemObj, setItemObj] = useState(initialObj);

    const setItemFieldHandler = (key, value) => {
      console.log("set", key, value);
      console.log("old state: ", itemObj);
      
      const newState = {
        ...itemObj,
        [key]: value
      };
      
      console.log("new state: ", newState);
      
      setItemObj(newState);
    };


    const handleFromAmountInput = useCallback((value) => {
       setItemFieldHandler('fromAmount', value);
      //check if from amount > to amount, 
      // then set toAmount = fromAmount + 1
      if(areBothAmountsValid()) {
         const newToAmount = value + 1;
         handleToAmountInput(newToAmount);
      }
    }, [itemObj]);


    const handleToAmountInput = useCallback((value => {
      setItemFieldHandler('toAmount', value);
    }, [itemObj]);
    }

The current from-amount is 1, to-amount is 5. If I change from-amount to 10, the console log is:

set fromAmount 10
old state: 
  {
    fromAmount: 1,
    toAmount: 5,
    comment: ''
  }
new state: 
   {
    fromAmount: 10,
    toAmount: 5,
    comment: ''
  }

set toAmount 11
old state: 
  {
    fromAmount: 1,
    toAmount: 5,
    comment: ''
  }
new state: 
   {
    fromAmount: 1,
    toAmount: 11,
    comment: ''
  }

What confuses me is that, fromAmount is already set as 10, why when calling handleToAmountInput(), the fromAmount’s value is still 1.

At first, I thought it is because the setState is async, so I used setTimeOut to make handleToAmountInput() running after like 5s to test, but the issue is still the same.

Does anyone know the reason and how to solve it?