Category: javascript

I’m currently making a bot in discord.js, and I’m trying to build a command handler ( for slash commands specifically). Unfortunately, whenever i run the code, it returns a 405 error from the discord API. here is the error:

DiscordAPIError[0]: 405: Method Not Allowed
    at SequentialHandler.runRequest (/home/ayman/Documents/Projects/image-bot/node_modules/@discordjs/rest/dist/lib/handlers/SequentialHandler.js:198:23)
    at processTicksAndRejections (node:internal/process/task_queues:96:5)
    at async SequentialHandler.queueRequest (/home/ayman/Documents/Projects/image-bot/node_modules/@discordjs/rest/dist/lib/handlers/SequentialHandler.js:99:20)
    at async /home/ayman/Documents/Projects/image-bot/src/main.js:35:5 {
  rawError: { message: '405: Method Not Allowed', code: 0 },
  code: 0,
  status: 405,
  method: 'put',
  url: 'https://discord.com/api/v9/applications/921468165576347658/guilds/545334770368774146/commands/undefined'
}

And here is the problematic code:

(async () => {
    try {
        if (process.env.ENV === "production") {
            await rest.put(Routes.applicationCommand(CLIENT_ID), {
                body: commands,
            });
            console.log("Commands successfully registered globally.");
        } else {
            await rest.put(Routes.applicationGuildCommand(CLIENT_ID, process.env.GUILD_ID), {
                body: commands,
            });
            console.log("Commands successfully registered locally.");
        }
    } catch (err) {
        if (err) console.error(err);
    }
})();

Is there any reason why this is happening? Thanks for any help!

I have an array of objects with data and one of the key is gallery, which is an array of URLs: data=[{id:1,gallery:[]},{id:2, galery:[]}].
I did an image carousel in the mapped “data” array. The problem is that the carousels, of each item, are not independent one of each other. Each time I change the picture on one of them, it changes to the other also.
Here is the code:

export class MyComponent extends Component {
    render() {
       return (
         <section>                
           {data &&
              data.map((item, i) =>
                (<div key={i}>
                   <div>
                    ...some data here
                   </div>
                    <div className='carousel' key={item}>
                            <img src={left}
                                className='left-arrow' alt="left"
                                onClick={() => prevSlide(item.gallery)} />
                            <img src={right}
                                className='right-arrow' alt="right"
                                onClick={() => nextSlide(item.gallery)} />
                            {item && item.gallery?.map((img, j) => (
                                <>
                                 {j === this.state.current && (
                                  <img src={img} alt={item.id} className='cart-image' key={j} />
                                    )}
                                </>
                            ))}
                    </div>
                 </div>))}
         </section>)}}
export default MyComponent

I want to have a different carousel for each item from data array. For the moment it is working like a big one, instead of two.
For me it is strange that all the other data it is rendered the way I want.
Could you please help me?
Thank you in advance

I have a schema to validate with Ajv in Node.js. There is a recurrent pattern on the properties of the json to convalidate, the possible keys value are 1,2,3,4,5. The question is, it’s possible with a regex expression to express only one property that will explain to ajv that the keys value of the json object could be an integer between one and five? And if so, how?

Below there is an example of the current code.

const Ajv = require("ajv")
const ajv = new Ajv()

const validate_setparameters = ajv.compile(
    {
        type: "object",
        properties: {
            "1": { type: "integer"},
            "2": { type: "integer"},
            "3": { type: "integer"},
            "4": { type: "integer"},
            "5": { type: "integer"}
        },
        additionalProperties: false,
        minProperties: 1
    }
)

console.log(validate_setparameters({"3":1}))

I am trying to create a class which can turn a csv file into an object and draw a chart. I am quite new to classes.

I have the following code:

1 <div id="wrapper">
2     <canvas id="chart"></canvas>
3 </div>
4 
5 <script>
6
7     function makeChart(myData) {
8         var barLabels = myData.map(function(d) {return d.Brands});
9         var barData = myData.map(function(d){return d.Emissions});
10
11        var chart = new Chart('chart', {
12           type: 'bar',
13           data: {
14               labels: barLabels,
15               datasets: [
16               {
17                   label: "Carbon Footprint of Leading European Apparel Brands in 2019",
18                   data: barData,
19                                
20               }]
21           }
22       });
23      
24   }
25  
26   d3.csv("carbon-footprint-of-apparel-brands-2019.csv").then(makeChart);
27
28</script>

I am not sure how to turn this into a function since I am not super familiar with the .then() method.

Another issue is that right now on lines 8 and 9 I’m using the actual column header names from the csv file. However, I would like to make the class eventually be able to take the column headers from any csv file so that it doesn’t rely on being hardcoded. I’m not sure how to do this.

(Firebase Version 9)

I’m trying to get document references from the fetched documents of the collection “products” with 2 sets of code below but both return “undefined”.

Get single document:

const docsSnap = await getDoc(
  doc(db, "products/WuAC97j0avTAFNs1kvdf"),
);

console.log(docsSnap.data().ref); // undefined

Get multiple documents:

const docsSnap = await getDocs(
  collection(db, "products"),
);

console.log(docsSnap.docs[0].data().ref); // undefined

Are there any ways to get document references from the fetched documents?

I would like to customise my select element which uses

<Typeahead
            id="basic-example"
            placeholder="Choose your specialty..."
            labelKey="title"
            options={specialties}
            selected={selected}
            onChange={handleSpecialtyChange}
            size="large"
            inputProps={{
              className:
                "customRadiusSelect custom-select custom-select-lg mb-3",
                }}
            emptyLabel="No specialty found"
          ></Typeahead>

I want to customise styling of some “specialties” items and gray out them (if they are “demo” or not) etc …
How could I do that please ?
Thanks in advance.

Background

I am trying to get familiar with React by creating a To Do App, using the React documentation.

Side note, I am using classes as components rather than functions.

Problem

When a value (this.props.completed) is changed, the className should also change, depending on the completed status. But in my current situation – it’s not updating the className and I can’t figure out why.

Logic:

'completed == true' then set the className = 'taskCompleted'
'completed == false' then set the className = 'taskNotCompleted'

Below is the app, both <div /> elements has class names set to taskNotCompleted, whilst the completed status is set to false, as shown in red on the left hand side of the image:

Next…

Clicking the done button for the 1st task, the completed status is changed as shown in the image below in blue border. But the className has not changed (red border).

this is my Task Class:

class Task extends React.Component {
  constructor(props) {
    super(props);
  }

  render() {
    const isCompleted = this.props.completed;
    return (
      <div className={`task ${isCompleted == true ? 'taskCompleted' : 'taskNotCompleted'}`}>
        <h2>{this.props.title}</h2>
        <p>{this.props.description}</p>
        <button onClick={this.props.handleChange}>Done</button>
        <p>{this.props.completed}</p>
        <p></p>
      </div>
    )
  }
}

I have found this resource: https://stackoverflow.com/a/35225464/12485722 I noticed within the answer, my className is very similar to the answer. Still no ideas why it’s going wrong.

Full Code

class App extends React.Component {
  render() {
    return (
      <Tasks />
    )
  }
}

class Tasks extends React.Component {
  constructor(props) {
    super(props);

    const tasksList = [{
      id: 1,
      title: "Title 1",
      description: "description 1",
      completed: false
    }, {
      id: 2,
      title: "Title 2",
      description: "description 2",
      completed: false
    }]

    this.state = {
      tasks: tasksList
    }

    this.alterStatus = this.alterStatus.bind(this);
  }

  alterStatus(id) {
    const tasks = Object.assign([], this.state.tasks);
    tasks.forEach(element => {
      if (element.id == id) {
        element.completed = true;
      }
    });
    this.setState({ tasks: tasks });
  }

  render() {
    return (
      <div>
        {this.state.tasks.map((task) =>
          <Task
            key={task.id}
            title={task.title}
            description={task.description}
            completed={task.completed.toString()}
            handleChange={() => this.alterStatus(task.id)} />
        )}
      </div>
    )
  }
}

class Task extends React.Component {
  constructor(props) {
    super(props);
  }

  render() {
    const isCompleted = this.props.completed;
    return (
      <div className={`task ${isCompleted == true ? 'taskCompleted' : 'taskNotCompleted'}`}>
        <h2>{this.props.title}</h2>
        <p>{this.props.description}</p>
        <button onClick={this.props.handleChange}>Done</button>
        <p>{this.props.completed}</p>
        <p></p>
      </div>
    )
  }
}

export default App;

I’m struggling to understand how to import CommonJS modules into an ESM syntax. I’m currently trying to work with the library url-metadata. url-metadata exposes a top-level export as a callable (which does not really conform to CommonJS, AFAIK):

const urlMetadata = require('url-metadata')
urlMetadata(URL, ...)

It’s not possible to write:

import urlMetadata from 'urlMetadata'

since no default export is defined.

Instead, I have to write:

import * as urlMetadata from 'url-metadata'

Or:

import urlMetadata = require("url-metadata")

I tried to read up on module loading in Node but I’m still somewhat confused as to what is the correct way to do this and why.

I am working on a folder uploading project and using React-dropzone for that.

however when I drop a folder and the folder does not contain anything then acceptedFiles
stays empty. I have noticed acceptedFiles, each file object contains a “path” attribute which gives the location, that’s because react-dropzone uses the file-selector library.

const onDrop = useCallback((acceptedFiles) => {console.log(acceptedFiles)}

but according to the DOC I can create a custom made drop event which can detect if a folder was dropped (even if its empty)
const {getRootProps, getInputProps, isDragActive} = useDropzone({onDrop, getFilesFromEvent: event => myCustomFileGetter(event)})

Does anyone know how can I generate a path for my empty folder structure?
It’s an issue because if I’m dropping a folder with multiple child folders just only those folder gets detected by file-selector which has a file in it.

Подскажите пожалуйста как сделать такой border-bottom как на фото
enter image description here

In the script below, I’m lazyloading two videos. My script is designed to remove the overlay image from the selected video when clicked. However, it’s also removing the overlay image from the second video and placing it above it. Another click removes the duplicate image, and a third click plays the video.

How do I remove only the image for the selected video in a way that doesn’t affect a second video on the page?

const getVideoId = (wistia_vid) => {
  const classes = Array.from(wistia_vid.querySelector(".wistia_embed").classList);
  const idClass = classes.find((cls) => cls.startsWith("wistia_async_"));
  const id = idClass.replace("wistia_async_", "");

  return id;
};

const removeElems = (wistia_vid) => {
  const toRemove = Array.from(
    wistia_vid.querySelectorAll(".wistia__overlay, .embed-youtube__play, .embed-video__play")
  );

  toRemove.forEach((node) => node.remove());
};

Array.from(document.querySelectorAll(".wistia")).forEach((node) => {
  node.addEventListener("click", () => {
    const videoId = getVideoId(node);
    let wistiaSupportScripts = [
      //adds jsonp file to provide security over requests
      `https://fast.wistia.com/embed/medias/${videoId}.jsonp`
    ];

    removeElems(node);
    
    //Checks if above scripts are already loaded, and if they are... they won't be loaded again
    const id = 'script-ev1';
    if (!document.getElementById(id)) {
      // const id = 'script-ev1';
      var script = document.createElement('script');
      script.id = id;
      script.onload = () => {
        console.log('Ev-1.js loaded and ready to go!');
      };
      script.src = `https://fast.wistia.com/assets/external/E-v1.js` ;
      document.getElementsByTagName('head')[0].appendChild(script);
    } else {
      console.log(`Ev-1.js script with id: ${videoId} already loaded.`);
    }     
    
    //loads supporting scripts into head
    for (var i = 0; i < wistiaSupportScripts.length; i++) {
      let wistiaSupportScript = document.createElement("script");
      wistiaSupportScript.src = wistiaSupportScripts[i];
      let complete = false;
      if (
        !complete &&
        (!this.readyState ||
          this.readyState == "loaded" ||
          this.readyState == "complete")
      ) {
        complete = true;
        console.log(`JSONP script was added.`);
      }

      let wistiaContainers = document.querySelector(".wistia");

      wistiaContainers ? document.getElementsByTagName("head")[0].appendChild(wistiaSupportScript) : console.log("No Wistia videos here.");
    }     

    window._wq = window._wq || [];
    _wq.push({
      //globally scoped
      id: videoId,
      options: {
        autoPlay: true,
        volume: 0.5
      },

      onReady: function (video) {
        playedOnce = true;
        video.popover.show();
        video.play();
      }
    });
  });
});

.wistia {
  position: relative;
  display: block;
  width: 100%;
  max-width: 500px;
  padding: 0;
  overflow: hidden;
  cursor: pointer;
}
.wistia__overlay {
  width: 100%;
  height: auto;
}
.wistia::before {
  display: block;
  content: "";
}
.wistia button.embed-youtube__play {
  background: url("https://nextiva.com/assets/svg/play-button.svg") no-repeat center center, rgba(33, 33, 33, 0.8);
  background-size: 40%;
  background-position: 55%;
  border: 0;
  border-radius: 50%;
  position: absolute;
  transition: all 0.2s ease;
  -webkit-transition: background 0.2s;
  width: 10%;
  aspect-ratio: 1/1;
  max-height: 15%;    
  cursor: pointer;
  z-index: 10;
  display: flex;
  justify-content: center;
  align-items: center;
  top: 50%;
  left: 50%;
  transform: translate3d(-50%, -50%, 0);
}
.wistia:hover button.embed-youtube__play,
.wistia button.embed-youtube__play:focus-visible,
.wistia button.embed-youtube__play:focus {
  background: url("https://nextiva.com/assets/svg/play-button.svg") no-repeat center center, #005fec;
  background-size: 40%;
  background-position: 55%;
}
.wistia_embed,
.wistia embed,
.wistia iframe {
  width: 100%;
  max-height: 100%;
}

<div class="wistia">
  <picture>
    <source srcset="https://embedwistia-a.akamaihd.net/deliveries/48f1d62d1ceddb4284ad9cf67c916235.jpg?auto=format&w=640" media="(min-width: 1200px)">
    <source srcset="https://embedwistia-a.akamaihd.net/deliveries/48f1d62d1ceddb4284ad9cf67c916235.jpg?auto=format&w=310" media="(min-width: 768px)">
    <img src="https://embedwistia-a.akamaihd.net/deliveries/48f1d62d1ceddb4284ad9cf67c916235.jpg?auto=format&w=310" alt="some text" class="wistia__overlay lazy" loading="lazy">
  </picture>
  <div class="wistia_embed wistia_async_vhkqhqhzyq videoFoam=true"></div>
  <button class="embed-youtube__play"></button>
</div>

<div class="wistia">
  <picture>
    <source srcset="https://embed-fastly.wistia.com/deliveries/2eab84ad71cf5acd9c7572d36667d255.jpg?auto=format&w=640" media="(min-width: 1200px)">
    <source srcset="https://embed-fastly.wistia.com/deliveries/2eab84ad71cf5acd9c7572d36667d255.jpg?auto=format&w=310" media="(min-width: 768px)">
    <img src="https://embed-fastly.wistia.com/deliveries/2eab84ad71cf5acd9c7572d36667d255.jpg?auto=format&w=310" alt="Some text" class="wistia__overlay lazy" loading="lazy">
  </picture>
  <div class="wistia_embed wistia_async_8ei13wuby7 videoFoam=true"></div>
  <button class="embed-youtube__play"></button>
</div>

    import React from 'react';
import updateCoverImage from '../../assets/images/profile/update-cover-image.png';
import facebookIcon from '../../assets/images/profile/facebook.png';
import instagramIcon from '../../assets/images/profile/instagram.png';
import tweeterIcon from '../../assets/images/profile/tweet.png';
import avatarUpdate from '../../assets/images/profile/avatar-update.png';
import verificationSign from '../../assets/images/profile/verification-sign.png';
import {useSelector} from 'react-redux';
import {getProfileSettings} from '../../store/reducers/profileSettingsSlice';

const ProfileTopBlock = () => {
  const {profile_data, profile_socials, profile_settings} = useSelector(getProfileSettings);
  const {cover, avatar} = profile_data;

  console.log(profile_data, profile_socials, profile_settings);

  return (
    <div className="user-top-block">
      <div className="top-border"></div>

      <div className="profile-cover-image-update" id="profile-cover-image-update">
        <div className="update-image">
          <img className="img" src={updateCoverImage} alt="update-cover-image"/>
        </div>


      </div>


      <div className="soc-links-block">
        <a href="#" className="soc-link" target="_blank">
          <img className="img" src={facebookIcon} alt="facebook icon"/>
        </a>
        <a href="#" className="soc-link" target="_blank">
          <img className="img" src={instagramIcon} alt="instagram icon"/>
        </a>
        <a href="#" className="soc-link" target="_blank">
          <img className="img" src={tweeterIcon} alt="twitter icon"/>
        </a>
      </div>

      <div className="user-info" style={{backgroundImage: `url(${cover})` }}>
        <div className="profile-name-img">

          <div className="profile-avatar">
            <div className="profile-image-block">
              <img className="img" src={avatar || '/'} alt="profile image"/>
            </div>

            {/*{% if not is_guest %}*/}
            <div className="avatar-update" id="profile-avatar-image-update">
              <img src={avatarUpdate} alt="" className="img"/>

              <form action="/" method="post" hidden
                    encType="multipart/form-data">
                {/*{% csrf_token %}*/}
                profile_avatar_form
              </form>
            </div>
            {/*// <!-- End profile avatar image update -->*/}
            {/*{% endif %}*/}
          </div>
          {/*// <!-- End profile-avatar -->*/}

          <div className="username-profession">
            <div className="username">
              <span>{profile_data?.first_name} {profile_data?.last_name}</span>
              <span className="verification-sign-img">
                  <img className="img" src={verificationSign} alt=""/>
              </span>
            </div>
            <div className="profession">
              {/*{% if profile_settings.profession %}*/}
              profile_settings.profession
              {/*{% else %}*/}
              Profession
              {/*{% endif %}*/}
            </div>
          </div>
          {/*// <!-- End username-profession -->*/}
        </div>
        {/*// <!-- End profile image block -->*/}
      </div>
      {/*// <!-- End user info -->*/}

      <div className="user-info-bottom-line">
        {/*{% if is_guest and not user.is_anonymous %}*/}

        <form action="/" method="POST">
          {/*{% csrf_token %}*/}
          <label>
            <input type="hidden" name="profile_slug" value=" profile.slug "/>
          </label>
          {/*{% if follow %}*/}
          <button type="submit" className="user-info-following followed">&#128076; Following</button>
          {/*{% else %}*/}
          <button type="submit" className="user-info-following">&#9995; Follow</button>
          {/*{% endif %}*/}
        </form>

        {/*{% elif is_guest %}*/}
        <a href="#" className="user-info-following">Follow</a>
        {/*{% endif %}*/}

        <a href="#" className="user-info-following">
          <span>Followers</span>
          <span>profile_followers | length</span>
        </a>
        <a href="#" className="user-info-following">
          <span>Following</span>
          <span>profile_followings.count</span>
        </a>
      </div>

      <div className="user-links">
        <ul className="user-links-list">
          <li className="links-list-item">
            <a href="#" className="list-link">Feed</a>
          </li>
          <li className="links-list-item">
            <a href="#" className="list-link">Videos</a>
          </li>
          <li className="links-list-item">
            <a href="#" className="list-link">Videos</a>
          </li>
          <li className="links-list-item">
            <a href="#" className="list-link">Groups</a>
          </li>
          <li className="links-list-item">
            <a href="#" className="list-link">Shop</a>
          </li>
          <li className="links-list-item">
            <a href="#" className="list-link">CV</a>
          </li>
          <li className="links-list-item">
            <a href="#" className="list-link">Portfolio</a>
          </li>
          {/*{% if not is_guest %}*/}
          <li className="links-list-item">
            <a href="#" className="list-link">•••</a>
          </li>
          {/*{% endif %}*/}
        </ul>
      </div>
      {/*// <!-- End user links -->*/}
      <div className="user-links-mobile user-links-mobile-fixed-bottom user-links-first-line">
        <a href="#" className="ok-btn">
          <span className="icon-block">&#x270B;</span>
        </a>
        <a href="#" className="ok-btn">
          <span className="icon-block">&#x270C;</span>
        </a>
        <a href="#" className="ok-btn">
          <span className="icon-block">&#x1F4F0;</span>
        </a>
        <a href="#" className="ok-btn">
          <span className="icon-block">&#x1F5BC;</span>
        </a>
        <a href="#" className="ok-btn">
          <span className="icon-block">&#x1F4F7;</span>
        </a>
      </div>

      <div className="user-links-mobile user-links-mobile-fixed-bottom">
        <a href="#" className="ok-btn">
          <span className="icon-block">&#x94D;</span>
        </a>
        <a href="#" className="ok-btn">
          <span className="icon-block">&#x1F6D2;</span>
        </a>
        <a href="#" className="ok-btn">
          <span className="icon-block">&#x1F3B4;</span>
        </a>
        <a href="#" className="ok-btn">
          <span className="icon-block">&#x223A;</span>
        </a>
        <a href="#" className="ok-btn">
          <span className="icon-block">•••</span>
        </a>
      </div>
    </div>
  );
};

export default ProfileTopBlock;

I am creating program, which should show me gallery page of my website. When I use the useselector from React Js hooks, It gives me an error of ” TypeError: Cannot destructure property ‘cover’ of ‘profile_data’ as it is null. ” And I cannot repair it, help me if you can. I used the useSelector, however the error is bigger showing in my screen.

I would like to increase a number by 1 every 1 second by using setInterval().
However, it would change the number to a string. How do I add a number instead of a string?

    function addNum (){setInterval(() => {number.innerHTML += 1;
        }, 1000);
    }

    document.getElementById("Btn").addEventListener("click",addNum);

<span id = "number">0</span>
<button id = "Btn">+1/s</button>

I have this code (abbreviated) that renders from the Gravity Forms WordPress plugin with no hooks or other means of altering its output (other than forking the plugin):

<div class="gform_heading">...</div>
<form id="gform_8" action="/volunteer/">
    <div class="gform_body gform-body">...</div>
    <div class="gform_footer top_label">...</div>
</form

I need for the div class="gform_heading">...</div> to be a child of the <form> element:

<form id="gform_8" action="/volunteer/">
    <div class="gform_heading">...</div>
    <div class="gform_body gform-body">...</div>
    <div class="gform_footer top_label">...</div>
</form

I’m planning to use this jQuery to alter the DOM.

$(".gform_heading").prependTo("[id^=gform_]");

However, the site has multiple forms and the gform_... id has a number after the underscore that changes depending on the form rendered to the page. I need to wildcard the number in the jQuery so it can work for any form, present or future, that the site may embed into a page.

I tried the solution at Use wildcard ID with jQuery and get wildcard ID in my Inspector console (substituting my form ID and class names) but it didn’t work.

What would be the most correct way to do this?

Am new to storybook and the docs make it pretty clear on the idiomatic way to write stories in Angular. Here’s an example of one for my app:

import { Meta, Story } from '@storybook/angular';

import {CustomerListComponent} from "@app/modules/customer/customer-search/components/customer-list/customer-list.component";

export default {
  title: 'Customer List',
  component: CustomerListComponent,
} as Meta;


const Template: Story = (args) => ({
  props: args,
});

export const EmptyArgs = Template.bind({});
EmptyArgs.args = {};

This fails with the following error:

Indeed, if we look at the constructor for the CustomerListComponent there is a dependency on CustomerSearchComponent.

@Component({
  selector: 'customer-list',
  templateUrl: './customer-list.component.html',
  styleUrls: ['./customer-list.component.scss']
})
export class CustomerListComponent {
  constructor (
    private customerSearchComponent: CustomerSearchComponent,
  ) {
  }
...

So what is typically done in this case? Can I just tell storybook to load that component, and any dependencies it has and so forth? Do I need to pass a mock of CustomerSearchComponent somehow? Am having trouble finding clean examples of cases like this, storybook docs seem to assume components with no depenencies on other components.

This also has me thinking – should I not plan to use storybook to render larger views (ie. parents with several child components)? Is that going to be hard to configure.

PS: random question – is storiesOf syntax deprecated? It’s not in official docs but tutorials all over the web.