Category: javascript

I’m trying to build a Nested Page in Nuxt using this guide and this guide and running into a problem

What I want is:

1. foobar.com/2021 shows me the parent page for the year
2. foobar.com/2021/jun shows me the parent page content for the year + child page for the month
3. foobar.com/2021/jun/edit shows me the parent page content for the year + the ‘edit’ child page for that month.

In the above cases, both the ‘2021’ part and the ‘Jun’ part will be dynamic

The problem:
I can get the first 2 to work but the not the edit route. This is what works currently:

/pages
_year.vue
_year/
_month.vue
index.vue

It’s demonstrated in this codesandbox here

What I’ve tried to get the edit route to work:
Add a _child folder under _year, right alongside _child.vue
Add a edit.vue there (didnt work)
Add a index.vue in addition (didnt work)
Rename the edit.vue to _edit.vue (didn’t work)

Is this something that’s feasible with automatic routing in Nuxt?

I’m trying to display the latestMessageText variable as bold and black if the props meet a certain condition. The useEffect method works, an ugly solution; How do I use Material UI’s useStyle hook to execute my goal. I’ve tried passing props to useStyle, using them inside the makeStyles function, to no effect.

import React, { useEffect, useRef } from "react";
import { Box, Typography } from "@material-ui/core";
import { makeStyles } from "@material-ui/core/styles";

const useStyles = makeStyles((theme) => ({
  root: {
    display: "flex",
    justifyContent: "space-between",
    marginLeft: 20,
    flexGrow: 1,
  },
  username: {
    fontWeight: "bold",
    letterSpacing: -0.2,
  },
  previewText: {
    fontSize: 12,
    // color: "#9CADC8",
    letterSpacing: -0.17,
    color: (messages, otherUser) => {
      if (messages.length && otherUser) {
        const lastMessage = messages[messages.length - 1];
        const { senderId, receiverHasRead } = lastMessage;
        if (senderId === otherUser.id && !receiverHasRead) {
          return 'black'
        }
        return "#9CADC8"
      }
    }
  },
  black: {
    color: 'black',
    fontWeight: 700,
  }
}));

const ChatContent = (props) => {
  const { conversation } = props;
  const { latestMessageText, otherUser, messages } = conversation;
  const classes = useStyles(messages, otherUser);

  return (
    <Box className={classes.root}>
      <Box>
        <Typography className={classes.username}>
          {otherUser.username}
        </Typography>
        <Typography className={classes.previewText}>
          {latestMessageText}
        </Typography>
      </Box>
    </Box>
  );
};

export default ChatContent;

I have an object that is going to have field products, this field will be filled with the response returned by different endpoints which each return a type of product. something like:

const products = {
  // each of this kind of products comes from endpoint response
  someProduct: {},
  someOtherProduct: {}
  anotherProduct: {}
}

I Can type all product types like this answer:

interface BaseProduct {
  name: string;
  description: string;
  price: number;
  type: string;
}

interface SomeProduct extends BaseProduct {
  genericAttrOne: string;
  genericAttrTwo: string;
}

interface OtherProduct extends BaseProduct {
  anAttributeOne: string;
  anAttributeTwo: string;
}

interface AnotherProduct extends BaseProduct {
  anotherAttributeOne: string;
  anotherAttributeTwo: string;
}

type Product = SomeProduct | OtherProduct | AnotherProduct;

const productsAsArray: Product[] = [];

the situation here is that sometimes I will go through all the product types(productsAsArray), and I will render it, then user click on some product and I take it as the productSelected. how should I type this productSelected if it can be of any type of product? and for this selectedProduct I will access product-specific properties…

I have some code that will filter data to match a specified set of keys. So far, my code handles whether the data passed in is an array or an object of a specific kind. For example, a car object or an array of car objects, and the key list would be car attributes. However, I’ve just gotten a new dataset and I’m wondering the best way to go about handling it. Here is my code so far (don’t worry too much about my array/object validation, I have custom functions that do much more checking)

const goodDataObject = {
  "make": "toyota",
  "model": "rav4",
  "color": "white"
  "mileage": "10000",
  "engine": "hybrid"
};

const goodDataArray = [
  {
    "make": "toyota",
    "model": "rav4",
    "color": "white"
    "mileage": "10000",
    "engine": "hybrid"
  },
  {
    "make": "chevrolet",
    "model": "cruze",
    "color": "black"
    "mileage": "20000",
    "engine": "gas"
  }
]

const badDataObject = {
  "dealer": "John Does Cars",
  "factory": "Michigan",
  "cars": [
    {
      "make": "toyota",
      "model": "rav4",
      "color": "white"
      "mileage": "10000",
      "engine": "hybrid"
    },
    {
      "make": "chevrolet",
      "model": "cruze",
      "color": "black"
      "mileage": "20000",
      "engine": "gas"
    }
  ]
}


// -->> results from goodDataObject:
{
  "make": "toyota",
  "model": "rav4"
}


// -->> results from goodDataArray:
[
  {
    "make": "toyota",
    "model": "rav4"
  },
  {
    "make": "chevrolet",
    "model": "cruze"
  }
]


// -->> results I WANT from badDataObject:
{
  "dealer": "John Does Cars",
  "factory": "Michigan",
  "cars": [
    {
      "make": "toyota",
      "model": "rav4"
    },
    {
      "make": "chevrolet",
      "model": "cruze"
    }
  ]
}

Here is my current code called with keys ["make", "model"].

function filterData(data, keys) {
  let filtered = null;
  
  if (typeof data === 'object') {
    for (let x of keys) {
      filtered[x] = data[x]
    }
  } else if (Array.isArray(data)) {
    filtered = [];
    for (let y of data) {
      let filteredObject = {};
      for (let key of keys) {
        filteredObject[key] = y[key];
      }
      filtered.push(filteredObject);
    }
  }
  return filtered;
}

I need to handle the badDataObject, and I’ve been thinking of a recursive option, but that has not been successful so far so I can’t post much there

I have multiple text files with file names under different names according to what they stand for but lets use the alphabet in to make it easier. I have these Text files:

a.txt
b.txt
c.txt
.....

and I then have JSON file’s that are associated to these files (where “a.txt” has “a.json”) and a number associated to that file within the JSON file.

.....
"file" : "a.txt"
"number : 15
.....

How could I shuffle the the file names, for example changing a.txt to b.txt and b.txt changes to another letter, whilst keeping the data on the JSON files up to date with the changes. I was thinking to make a script in Python, but I think JS would probably be more suited for a website implementation. Thankyou for any help I receive.

So I’m trying to build a simple VS Code extension but after I finally found the right modul to use I can’t get it to run corectly.

After pressing F5 to test the extension i just get the message:

Activating extension 'undefined_publisher.vs-code-media-player' failed: The module '\? 
c:UsersmyNameGoogle Drive3_PersoenlichProgrammingVS Code Extensionsvs-code- 
media-playernode_modulesrobotjsbuildReleaserobotjs.node'
was compiled against a different Node.js version using
NODE_MODULE_VERSION 83. This version of Node.js requires
NODE_MODULE_VERSION 89. Please try re-compiling or re-installing
the module (for instance, using `npm rebuild` or `npm install`)..

I tried:

• npm rebuild
• uprgading npm
• downgrading npm
• installing another module version
• create a new project
• updating node

But nothing worked so far.

Thanks in advance for your help.

I’m going to make a todolist app.
On the main page, to show the task of todolist,
I used scrollview, but I want to change it to FlatList.

<ScrollView width = {width-20}>
            {Object.values(tasks).map(item => (
               <Task key = {item.id} item={item} deleteTask={_deleteTask} 
               toggleTask={_toggleTask} updateTask={_updateTask}/>
           ))} 
         </ScrollView>

I’m new to react native. I have a problem while updating data(latitude, longitude, timestamp) for each user(member) to Firebase database realtime, I get endless loops

The error I have “too much recursion”

firebase.config.ts

const firebaseConfig = {
    ...
};

export const getCurrentLocation = (phoneNumber: number, setData: (locationParams: any) => void) => {
    const db = getDatabase();
    const reference = ref(db, 'members/' + phoneNumber);
    onValue(reference, (snapshot) => {
        const data = snapshot.val();
        setData(data);
    })
};


export const setCurrentLocation = (phoneNumber: number, latitude: number, longitude: number, timestamp: number) => {
    const db = getDatabase();
    const reference = ref(db, 'members/' + phoneNumber);
    set(reference, {
        latitude: latitude,
        longitude: longitude,
        timestamp: timestamp,
    }).then(() => console.log('setCurrentLocation to mainUser/firebase.config'));
};
const app = initializeApp(firebaseConfig);

memberList.tsx

const [userPhoneNumber, setUserPhoneNumber] = useState('0');
const members = useSelector((state: any) => state.members);

//get user's phoneNumber
const auth = getAuth();
    useEffect( ()=> {
        onAuthStateChanged(auth, (user) => {
            if (user) {
                setUserPhoneNumber(user.email.replace(/D/gi, '') || '');
            } else {
                console.log('logged out')
            }
        });
    }, [])


useEffect(() => {
        const timer = setInterval( () => {
            
            members.map(function (el) {
                getCurrentLocation(el.phoneNumber, (locationParams: any) => {
                    let timestamp = new Date().getTime()/1000;
              
                    setCurrentLocation(el.phoneNumber, locationParams.latitude, locationParams.longitude, timestamp)
                })
            })
        }, 10000);

        return () => clearInterval(timer);
    }, []);

I’m trying to write a basic After Effects extension and, while the extension is recognized and the html displays, I can’t seem to use csInterface to access anything in ae. I’m just trying to get an alert message to display for right now. I’m sure I’m missing something obvious, please help.

index.html:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Help Video Helper</title>
        <meta name="description" content="AE extension adding various functions for creating help videos">
        <link rel="stylesheet" href="./css/styles.css">
        <script type="text/javascript" src="./js/main.js"></script>
        <script type="text/javascript" src="./lib/CSInterface.js"></script>
    </head>
    <body>     
        <div class="container">
            <div class="control-div">
                <p class="control-label">Keyframe Hotkey</p>
                <input class="control-input" id="hotkey-keyframe-input" value="2" /></div>
            </div>
            <div class="control-div">
                <p class="control-label">Skip Forward Hotkey</p>
                <input class="control-input" id="hotkey-skip-input" value="2" /></div>
            </div>
            <button class="control-button" id="testButton">Test</button>
        </div>  
    </body>
</html>

main.js:

var csInterface = new CSInterface();

var testButton = document.getElementById('testButton');
testButton.addEventListener('click', test);

function test() {
    csInterface.evalScript("alert('hello world')");
};

Here’s the whole repo if anyone is interested: https://github.com/Wi-ll-iam/hvhelper/tree/master

I know this has been answered 38 million times elsewhere but I’m dumb. Please hammer it into my brain.

faxResponse is returning undefined. I’m trying to do something like the below:

const Base64String = async (req, res) => {
  let faxResponse = await postFax(req.body);
  console.log(faxResponse); // undefined

  if (faxResponse.status == "fail") {
    return res.status(200).send({
      statusCode: 400,
      message: faxResponse.error,
    });
  } else {
    return res.status(200).send({
      statusCode: 200,
      data: {
        ...req.body,
      },
      faxResponse,
    });
  }
};

const postFax = async ({
  login,
  pass,
  faxnum,
  faxsrc,
  recname,
  file1,
  data1,
}) => {
  const VITELITY_URL = `https://api.vitelity.net/fax.php?login=${login}&pass=${pass}&cmd=sendfax`;

  let formdata = new FormData();
  formdata.append("faxnum", faxnum);
  formdata.append("faxsrc", faxsrc);
  formdata.append("recname", recname);
  formdata.append("file1", file1);
  formdata.append("data1", data1);

  await fetch(VITELITY_URL, {
    method: "POST",
    body: formdata,
    redirect: "follow",
  })
    .then((res) => res.text())
    .then((result) => {
      console.log(result);
    })
    .catch((err) => console.log(err));
};

I’m copying the instructions from this file here:

https://github.com/mui-org/material-ui/blob/master/examples/nextjs-with-styled-components-typescript/next.config.js

I get this error when I add the next.config.js code below.

WebpackOptionsValidationError: Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema.
 - configuration[0].module.rules[1].oneOf[5].include should be one of these:
   RegExp | string | function | [(recursive)] | object { and?, exclude?, include?, not?, or?, test? } | [RegExp | string | function | [(recursive)] | object { and?, exclude?, include?, not?, or?, test? }]
   -> One or multiple rule conditions
   Details:
    * configuration[0].module.rules[1].oneOf[5].include.or[2] should be an instance of RegExp
    * configuration[0].module.rules[1].oneOf[5].include.or[2] should be a string.
    * configuration[0].module.rules[1].oneOf[5].include.or[2] should be an instance of function
    * configuration[0].module.rules[1].oneOf[5].include.or[2] should be an array:
      [RegExp | string | function | [(recursive)] | object { and?, exclude?, include?, not?, or?, test? }]
    * configuration[0].module.rules[1].oneOf[5].include.or[2] should be an object.
    * configuration[0].module.rules[1].oneOf[5].include.or[2] should be one of these:
      RegExp | string | function | [(recursive)] | object { and?, exclude?, include?, not?, or?, test? }
    * configuration[0].module.rules[1].oneOf[5].include.or[2] should be one of these:
      RegExp | string | function | [(recursive)] | object { and?, exclude?, include?, not?, or?, test? }
      -> A rule condition
 - configuration[1].module.rules[1].oneOf[3].issuer should be one of these:
   RegExp | string | function | [(recursive)] | object { and?, exclude?, include?, not?, or?, test? } | [RegExp | string | function | [(recursive)] | object { and?, exclude?, include?, not?, or?, test? }]
   -> One or multiple rule conditions
   Details:
    * configuration[1].module.rules[1].oneOf[2].issuer.or should be an array:
      [RegExp | string | function | [(recursive)] | object { and?, exclude?, include?, not?, or?, test? }]
    * configuration[1].module.rules[1].oneOf[2].issuer.or should be one of these:
      [RegExp | string | function | [(recursive)] | object { and?, exclude?, include?, not?, or?, test? }]
      -> Logical OR
    * configuration[1].module.rules[1].oneOf[3].issuer.or should be an array:
      [RegExp | string | function | [(recursive)] | object { and?, exclude?, include?, not?, or?, test? }]
    * configuration[1].module.rules[1].oneOf[3].issuer.or should be one of these:
      [RegExp | string | function | [(recursive)] | object { and?, exclude?, include?, not?, or?, test? }]
      -> Logical OR
    at webpack (/Users/thomasreggi/Desktop/project-template/node_modules/next/node_modules/webpack/lib/webpack.js:31:9)
    at HotReloader.start (/Users/thomasreggi/Desktop/project-template/node_modules/next/dist/server/hot-reloader.js:14:1858)
    at async DevServer.prepare (/Users/thomasreggi/Desktop/project-template/node_modules/next/dist/server/next-dev-server.js:10:1565)
    at async /Users/thomasreggi/Desktop/project-template/node_modules/next/dist/cli/next-dev.js:21:359
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

const withTM = require('next-transpile-modules')(['@mui/material', '@mui/system']); // pass the modules you would like to see transpiled

module.exports = withTM({
  reactStrictMode: true,
  webpack: (config) => {
    config.resolve.alias = {
      ...config.resolve.alias,
      '@mui/styled-engine': '@mui/styled-engine-sc',
    };
    return config;
  },
});

I have the following code snippet to change the src of an img tag when I hover over it.

<img src="./Path/to/image.png" alt="" class="exhibit-banner-img" onmouseover="this.src='./Path/to/newimage.png'" onmouseout="this.src='./Path/to/image.png'">

It runs as expected, but how do I add a transition time to the image when the event is fired?
Right now, it changes instantly.

Im fetching a group of documents in a forEach from Firestore, I know im fetching this all as I can see documents and is fields in the console.

But when I add the id to the field fetched it only shows one document. (it should be 5 tiles and images but I can only see one)

From reading I know I only need to some how duplicate the HTML code based on the documents fetch in the collection but am struggling to do so.

Javascript code

const i = query(collection(db, "teams"));
const unsubscribe = onSnapshot(i, (querySnapshot) => {
            
     querySnapshot.forEach((doc) => {
          const docData = doc.data();

  document.getElementById("ageGroup").innerText = docData.ageGroup,
                document.getElementById("teamImage").src = docData.teamImage,
           
                
                console.log("Current data: ", docData);
                
            });

        });

HTML Code

<section class="teams">
            <article>
                <h1 class="team-names" id="ageGroup"></h1>
                <div class="team-line"></div>
                <img class="team-image" id="teamImage">

            </article>
</section>

How do I refactor this code using a for loop:

const [userA, userB, userC, userD] = await Promise.all([
    createTestUser(),
    createTestUser(),
    createTestUser(),
    createTestUser()
]);

Is they an email service provider that can enable one create about 10k valid email addresses at one go without having to that it independently.