How to format array of date

I am getting an array of dates in this format

Sat Feb 12 2022 01:00:00 GMT+0100 (West Africa Standard Time),Sun Feb 13 2022 01:00:00 GMT+0100 (West Africa Standard Time),Mon Feb 14 2022 01:00:00 GMT+0100 (West Africa Standard Time)

But i want it in a format like this

Sat, Feb 12, 2022,
Sun, Feb 13, 2022,
Mon, Feb 14, 2022

This is the code that output my date

function dateRange(startDate, endDate, steps = 1) {
  const dateArray = [];
  let currentDate = new Date(startDate);

  while (currentDate <= new Date(endDate)) {
    dateArray.push(new Date(currentDate));
    currentDate.setUTCDate(currentDate.getUTCDate() + steps);
  }

  return dateArray;
}
var currD = new Date().toISOString().slice(0,10);

function addDays(date, days) {
  var result = new Date(date);
  result.setDate(result.getDate() + days);
  return result;
}
 const futureDate = addDays(currD, 3);

const dates = dateRange(currD, futureDate);
console.log(dates);
alert(dates)

How to load infinite scroll pages faster?

https://immutascan.io/address/0xac98d8d1bb27a94e79fbf49198210240688bb1ed

This URL has 100k+ rows that I’m trying to scrape. They go back about a month (1/10/2022 I believe) but load in badges of 7-8.

Right now I have a macro slowly scrolling down the page, which is working, but takes about 8-10 hours per day’s worth of rows.

As of now, when new rows load there are 2-3 items that load immediately and then a few that load over time. I don’t need the parts that load slowly and would like them to load faster or not at all.

Is there a way that I can prevent elements from loading to speed up the loading of additional rows?

I’m using an autohotkey script that scrolls down with the mouse-wheel and that’s been working best.

I’ve also tried a Chrome extension but that was slower.

I found a python script at one point but it wasn’t any faster than autohotkey.

vue – reference values in setup() function in html template

I am trying to setup the demo code that comes with “vee-validate” (https://vee-validate.logaretm.com/v4/examples/multistep-form-wizard)

I have some fields on the inital form page that if contain a certain value, i want to hide and show certain elements using “v-if=”true/false”.

Normally i reference a variable stored in the “data()” part of the vue file to toggle show/hide but i cannot find a way to pass a value i obtain/set in the “setup()” function of the vue project. It also will not allow me to set values in “data()” by doing “this.variable = true” like i can normally do in a function.

React loader’s state doesn’t change

I am trying to implement a loading spinner into my React app, but I have a problem with changing its state. It is supposed to appear when the data to display is being downloaded through Axios (once the function getProjectDetails gets the data, see componentDidMount) and then disappear. But right now it’s just spinning forever. What am I doing wrong?

export function StyledTabs(props) {
    const [value, setValue] = React.useState(0);
    const [loading, setLoading] = useState(true);
    


    const handleChange = (event, newValue) => {
        console.log(props)
        setValue(newValue);
    };

    function tabProps(index) {
        return {
            id: `vertical-tab-${index}`,
            'aria-controls': `vertical-tabpanel-${index}`,
        };
    }

    return loading ? <LoadingComponent /> : (
        <div>
            <AppBar position="static" color="transparent">
                <Tabs
                    value={value}
                    onChange={handleChange}
                    variant="scrollable"
                    scrollButtons="on">
                    <Tab label="Project Information" {...tabProps(0)} />
                    <Tab label="Group Procurement Information" {...tabProps(1)} />
                    <Tab label="Other Information" {...tabProps(2)} />
                    <Tab label="Improvement Calculation* (Absolute Number)" {...tabProps(3)} />
                    <Tab label="Project Description" {...tabProps(4)} />
                </Tabs>
              </AppBar>
             </div>

   export default class ProjectDetails extends React.Component {
    state = {  
        projectDetails: {
            additionalEntities: "a5ff008e-eb77-4f4a-9ee7-0d863ffed1ed",
            additionalEntityName: "",
            bussinessCFO: 0,
            bussinessController: 0,
            bussinessOwner: 0,
            categoryName: "Technical Marine (Strategic)",
            contractEndDate: "2021-08-26T00:00:00",
            contractStartDate: "2021-08-26T00:00:00",
            description: "Test Desctription",
            descriptionId: 1,
            ebitda: 0,
            gpCategory: "fb6028e5-4273-4176-8cdb-978de1fd2e99",
            gpSubCategory: "e3a22c6e-6ffa-43e4-867d-0f51e90540e3",
            legalEntity: "4af62e99-abb4-41c5-835e-063a5f4eaa46",
            nameOfSuplier: "string",
            OverallImprovementTypeId: 1,
            overallImprovementTypeName: "OPEX",
            projectId: "351b2f09-d879-4db1-02b1-08d968707193",
            projectName: "Test Project",
            FullProjectNumber: "000.00",
            projectResponsible: 0,
            subCategoryName: "Terminal Equipment",
            valueImprovementTypeId: 1,
            valueImprovementTypeName: "EBIT"
        }
    }

    componentDidMount() {
        this.getProjectDetails();
        this.setState(() => {
          return  {loading: false}
        })
    }

    getProjectDetails() {
        customInstance.get('Project/' + this.id).then((response) => {
            const projectDetails = response.data;
            this.setState((state) => {
                state = response.data;
                this.state.projectDetails = response.data;
                return state;
            });
        });
        console.log(this.state.projectDetails);
    }

React: How to pass a pointer to one component to a second component

How can you pass a pointer to component 1 to component 2 (so that you can work with component 1 inside component 2, e.g. get its properties)

<Component1 />
<Component2 target = {Component1} />

In part, this problem can be solved by handling events from component 1, because in this case a зpointer to it (event.target) will be available, but what about before such an event occurs?

Getting “undefined is not an object” on a validated array

I’m trying to access an array inside of an object that comes in a response:

getMatches().then((matches) =>{
let possibleDraws = []
console.log(matches)
console.log(typeof matches)
matches.forEach(match => {
    if(isPossibleDraw(match)){
        possibleDraws.push(match)
    }
    console.log(match.homeForm)    
}) 
console.log(possibleDraws)}).catch((err) =>{
console.log(err)})

console.log(matches) returns correctly an array with just one value for testing purposes:

0:
awayForm: (4) ['L', 'D', 'W', 'D']
awayTeamID: 15994
awayTeamName: "Maritzburg United U23"
homeForm: (4) ['L', 'D', 'W', 'D']
homeTeamID: 15990
homeTeamName: "Chippa United U23"
leagueID: 734
matchID: 793855
season: 2021
[[Prototype]]: Object
length: 1
[[Prototype]]: Array(0)

However, when accessing match.homeForm, it returns “Undefined is not an object”, even when match.homeForm does exist (based on the last console.log) . I even mocked the response of getMatches() to the same array (original function calls an API and get the response as a promise) and it works perfectly fine, so I really have no idea what could be happening here.

How to provide type hints using JSDoc and Apollo Client?

I have trouble setting up type hints using JSDoc for my JavaScript code (trying to make this work with VSCode and WebStorm).

As first step, I converted GraphQL schema into set of JSDoc @typedef entries using @graphql-codegen/cli. For the sake of this converations, lets talk about this one specific:

// schema.js

/**
 * @typedef {Object} Country
 * @property {string} code
 * @property {string} name
 */

Then, somewhere in my App.js I tried writing:

// App.js

const GET_COUNTRIES = gql`
  query GetCountries {
    countries {
      code
      name
    }
  }
`;

/**
 * @typedef {import("./schema").Country} Country
 * @typedef {import("@apollo/client").QueryResult} QueryResult

 * @returns {QueryResult<Country>}
 */
const useGetCountries = () => {
  return useQuery(GET_COUNTRIES);
};

However, it looks like the type definitions from schema.js are being ignored (both App.js and schema.js are in the same directory).

My question is: is it possible to setup something like this – have IDE pickup JSDoc type definitions and provide type hints? If the answer is YES, how would I go around settings this up?

I’ve created a simple repro on CodeSandbox at https://codesandbox.io/s/graphql-type-hints-n1vh0

CoreMongooseArray(0) bug instead of Normal array

This is my index.js file

const mongoose = require('mongoose');

const Dishes = require('./models/dishes');

const url = 'mongodb://localhost:27017/conFusion';
const connect = mongoose.connect(url);

connect.then((db) => {

console.log('Connected correctly to server');

Dishes.create({
    name: 'Uthappizza',
    description: 'test'
})
.then((dish) => {
    console.log(dish);

    return Dishes.findByIdAndUpdate(dish._id, {
        $set: { description: 'Updated test'}
    },{ 
        new: true 
    })
    .exec();
})
.then((dish) => {
    console.log(dish);

    dish.comments.push({
        rating: 5,
        comment: 'I'm getting a sinking feeling!',
        author: 'Leonardo di Carpaccio'
    });

    return dish.save();
})
.then((dish) => {
    console.log(dish);

    return Dishes.remove({});
})
.then(() => {
    return mongoose.connection.close();
})
.catch((err) => {
    console.log(err);
});

});

this is my dishes.js file:

    const mongoose = require('mongoose');
const Schema = mongoose.Schema;

var commentSchema = new Schema({
    rating:  {
        type: Number,
        min: 1,
        max: 5,
        required: true
    },
    comment:  {
        type: String,
        required: true
    },
    author:  {
        type: String,
        required: true
    }
}, {
    timestamps: true
});


var dishSchema = new Schema({
    name: {
        type: String,
        required: true,
        unique: true
    },
    description: {
        type: String,
        required: true
    },
    comments:[commentSchema]
}, {
    timestamps: true
});

var Dishes = mongoose.model('Dish', dishSchema);
module.exports = Dishes;

I am getting an error that says:

isNew: false,
  errors: undefined,
  _doc: {
    _id: 6207ff6455a72312f4426861,
    name: 'Uthappizza',
    description: 'Updated test',
    comments: CoreMongooseArray(0) [
      _path: 'comments',
      toBSON: [Function: toBSON],
      _atomics: {},
      _parent: [Circular *1],
      _cast: [Function: _cast],
      _markModified: [Function: _markModified],
      _registerAtomic: [Function: _registerAtomic],
      '$__getAtomics': [Function: $__getAtomics],
      hasAtomics: [Function: hasAtomics],
      _mapCast: [Function: _mapCast],
      push: [Function: push],
      nonAtomicPush: [Function: nonAtomicPush],
      '$pop': [Function: $pop],
      pop: [Function: pop],
      '$shift': [Function: $shift],
      shift: [Function: shift],
      pull: [Function: pull],
      splice: [Function: splice],
      unshift: [Function: unshift],
      sort: [Function: sort],
      addToSet: [Function: addToSet],
      set: [Function: set],
      toObject: [Function: toObject],
      inspect: [Function: inspect],
      indexOf: [Function: indexOf],
      remove: [Function: pull],
      id: [Function: id],
      create: [Function: create],
      notify: [Function: notify],
      isMongooseDocumentArray: true,
      validators: [],
      _schema: [DocumentArray],
      _handlers: [Object]
    ],
    createdAt: 2022-02-12T18:41:40.049Z,
    updatedAt: 2022-02-12T18:41:40.096Z,
    __v: 0
  }

the issue is in the output of the comments part, can someone pls help me?
I have tried reading about it online, but i am not able to get anything where is the problem?

Ps: this is a part of course, I have followed all the steps very carefully, but I am still getting the problem

Javascript Multiplying Within an Array

I have an array with multiple arrays inside. I would like to multiply the contents of each array.

Here is my code–currently not getting anything in console.
The desired output is 3 numbers– the result of multiplication of the three arrays

var arr = [
  [1, 2, 3],
  [3, 4],
  [7, 8, 9]
]
var mult = 1
for (i = 0; i < arr.length; i++) {
  for (j = 0; j < arr.length; j++) {
    mult *= arr[i][j]
  }
  console.log(mult)
}

shuffle n elements in html list (see the code)

I’m trying to complete this code I have a list of 30 items. I want to show randomly: 2 elements between 1 and 10, 4 between 10 and 20 and 6 between 20 and 30. The code I show can only show the first two elements between 1 and 10…what can I do to show the other elements?

var list = document.getElementById("items"),
newlist = document.getElementById("shuffle");
function shuffle(items)
{
    var cached = items.slice(0,10), temp, i = cached.length, rand;
    while(--i)
    {
        rand = Math.floor(i * Math.random());
        temp = cached[rand];
        cached[rand] = cached[i];
        cached[i] = temp;
    }
    return cached;
}
function shuffleNodes()
{
    var nodes = list.children, i = 0;
    nodes = Array.prototype.slice.call(nodes);
    nodes = shuffle(nodes);
    
    list.innerHTML = "";
  
    while(i < 2)
    {
        list.appendChild(nodes[i]);
        ++i;
    }
}
window.onload = shuffleNodes;
<dl id="items">
    <dd>1. item.<br></dd>
    <dd>2. item.<br></dd>
    <dd>3. item.<br></dd>
    <dd>4. item.<br></dd>
    <dd>5. item.<br></dd>
    <dd>6. item.<br></dd>
    <dd>7. item.<br></dd>
    <dd>8. item.<br></dd>
    <dd>9. item.<br></dd>
    <dd>10. item.<br></dd>
    <dd>11. item.<br></dd>
    <dd>12. item.<br></dd>
    <dd>13. item.<br></dd>
    <dd>14. item.<br></dd>
    <dd>15. item.<br></dd>
    <dd>16. item.<br></dd>
    <dd>17. item.<br></dd>
    <dd>18. item.<br></dd>
    <dd>19. item.<br></dd>
    <dd>20. item.<br></dd>
    <dd>21. item.<br></dd>
    <dd>22. item.<br></dd>
    <dd>23. item.<br></dd>
    <dd>24. item.<br></dd>
    <dd>25. item.<br></dd>
    <dd>26. item.<br></dd>
    <dd>27. item.<br></dd>
    <dd>28. item.<br></dd>
    <dd>29. item.<br></dd>
    <dd>30. item.<br></dd>
</dl>

How to use Jquery load along with functions?

So I am using Jquery load to load navigation bar on my website.
Here’s how im doing it

Homepage.html

<div id="nav-placeholder">

</div>
<script>
      jQuery(document).ready(function($) {
        jQuery("#nav-placeholder").load("navbar.html");
      });
</script>

navbar.html

<div class="navbar">
  <a href="#">Phemesoft</a>
  <a href="/studdash">Dashboard</a>
  <a href="/courselists">Courses</a>
  <a href="#">Live classes</a>
  <a href="#">Labs</a>
  <div class="search">
    
    <input id="searchqueryy"  name="searchquery" type="search" placeholder="Search" class="inputSearch" />
     <button onclick="searchfunction()" type="submit" class="searchButton">
           <i class="fa fa-search"></i>
        </button>
        
  </div>
  <!-- <button type="submit" class="searchbtn">
    <span class="material-icons">search</span>
  </button> -->
  <span class="material-icons">shopping_cart</span>
  <span class="material-icons">account_circle</span>
</div>

Since I have a server running, to load the navbar I have used app.get like so:

app.get("/navbar.html",function(request,response){
  response.sendFile(path.join(__dirname, "../client/App/", "navbar.html"));
});

And the search function looks like this:

<script>
  function searchfunction(){
    var searchquery = document.getElementById('searchqueryys').value;
    window.location.href = "/search/"+searchquery;
  }
  </script>

Now the problem is, after loading the navigation bar using jQuery.load, searchfunction isn’t working. I tried putting the searchfunction() script inside navbar.html but it doesn’t work like that (maybe because navbar.html has already been loaded when homepage.html was opened?). So how do I make my search function work across pages while using jQuery.load?