Category: javascript

I have:

• mono repository, more projects inside
• js/ts, react

1. When Find all references is tried on react component (I suppose on anything) that is imported in another project inside monorepo, it starts finding references.
2. Initializing JS/TS language features starts – from Typescript and Javascript Language Features built-in extension.
3. It takes about 2 minutes (depends on project size)
4. After that references outside project/folder are not found
5. During that process I cannot use Go to definition

I have also solution and will be written in answer below to help other folks (maybe my future me :D) to not waste halfday as I did on this 😉

I need to append as a child react component to ref that i pass by redux. I can’t figure out way to do that. Is that even possible?

I want to export all images from one file which index.js so that If in future I have to change the path of image then I have to only make changes in one file.

like this:

export {default as avatar} from './avatar.png';
export {default as career} from './PsychoScreenImages/career.jpeg';
export {default as application} from './redeemIcons/application.jpeg';
export {default as featured} from './redeemIcons/featured.jpeg';

But I can’t do like this require(avatar) as it requires the only a path. So, How can I export and import images from just one js file?

I just started next.js and javascript as a whole. I am stuck in a problem, that if anyone explains would be cool. So, I started using the virtual event starter kit template in vercel which is made using NextJS. I was able to set up everything, except the redis (Upstash) part. I am not sure on how to set it up, if anyone could go through the docs and explain me would be really cool

Thanks

I want to verify file download using NodeJS and Webdriverio. The file to download is of PDF format. When WebDriverIO clicks on “Download” Firefox opens up the following download confirmation window:

I want Firefox to download the file automatically without showing above confirmation window, so I used the below code:

 conf_firefox.js file
require('dotenv').config();
const path = require('path');
const merge = require('deepmerge');
const baseConfig = require('./wdio.conf_base');

exports.config = merge(baseConfig.config, {
  services: ['selenium-standalone'],
  capabilities: [
    {
      maxInstances: 2,
      browserName: 'firefox',
      'moz:firefoxOptions': {
        prefs: {
          'browser.download.dir': path.join(__dirname, '../test-data/tmp/download/firefox'),
          'browser.helperApps.neverAsk.saveToDisk': 'application/pdf',
        },
      },
      acceptInsecureCerts: true,
    },
  ],
});

but still Firefox shows the same window. How can I set Firefox profile so that PDF files are downloaded automatically without showing the confirmation dialogue?
For chrome everything works correctly. Thanks!

I’m using Vue JS 2 to create an image uploader. My input has a change function which runs a function and sets my file on v-model property.

When I console.log my data, all what’s set is an empty object rather than the image, this is also causing my Vee Validate rule to fail as it thinks it’s empty.

What am I missing?

My HTML for uploading a logo

<div>
  <validation-provider
    name="base64_logo"
    rules="mimes:image/jpeg,image/png"
    v-slot="{ errors, classes, validate }"
  >
    <label for="base64_logo" class="block text-sm font-medium text-gray-500 mb-2">
      Brand logo <em>(PNG or JPG)</em>
    </label>
    <div class="mt-1 relative rounded-md shadow-sm">
      <input @change="selectFilesToUpload('base64_logo', $event.target.files[0]); validate()" type="file" name="base64_logo" id="base64_logo" :class="classes" class="focus:ring-green-500 focus:border-green-500 block w-full py-3 px-4 sm:text-sm border border-gray-300 rounded-md" accept="image/png, image/jpeg">
    </div>
    <span class="text-xs text-red-500">{{ errors[0] }}</span>
  </validation-provider>
</div>

The following function runs:

/*
** Select files to upload (file uploader)
*/
selectFilesToUpload (model, file) {
  try {
    this.form[model] = file
  } catch (err) { }
},

Which form should now contain everything associated with my image, but when adding an image, it shows as an empty object (see attached)

I’ve also tried a JSON.stringify before setting my model, no luck here either.

I’m coding a query in my NestTs project, so I would like to retrieve information matched with LIKE clause values. the problem with my query is the table has three types of records ‘_INFORMED’, ‘_UNINFORMED’ and ‘WITHOUT’. If I use the sentence .where(“user.firstName like :name”, { name:%_INFORMED% }) It matches with _INFORMED and _UNINFORMED records, then I tried to use the wildcard character as to standard SQL ‘%_INFORMED%’ but it looks wrong. Do you have any idea? Thanks!

I have a javascript file where i encode, decode and remove/modify some characters from the url. I have been recently facing some issues during the decoding of this particular character (“ and ”). When this character is parsed it throws a Uncaught SyntaxError: Invalid regular expression: /?/: Nothing to repeat error. When i commented the decoding it parsed the file without an issue. I want to know why this character is being not parsed by the browser.

This is my function for reference:

decodeEntities = function(v){
if (v !== null && v !== '' && typeof(v) == 'string') {
v = v.replace(/>/gi,">"); // 62
v = v.replace(/&lt;/gi,"<"); // 60
v = v.replace(/&#38;/g, "&");
v = v.replace(/``/g, " ");
v = v.replace(/“/gi,""");//<-- exception in chrome version 95 and up, works for 94
v = v.replace(/”/gi,""");//<-- exception in chrome version 95 and up, works for 94
}
return v;
};

Following two statements from the function above fails with the error above for chrome versions 95 and above. 94 however has no problem with it. v = v.replace(/“/gi,”””);
v = v.replace(/”/gi,”””); Any help as to how to rewrite the last two lines of the code would be greatly appreciated. Thanks.

I have three links which I am currently animating to slide down when the user clicks the toggle menu button. It works fine when the user clicks the toggle again.

The problem: when the user clicks on a route and navigates away THEN comes back to select another route, the animation doesn’t restart again. The animation should restart to initial position even if the user navigates to another route.

Here is what I currently have:

let linkOne = useRef(null);
let linkTwo = useRef(null);
let linkThree = useRef(null);

const [dropped, setDropped] = useState()

const tl = useRef()
useEffect(() => {
    // tl.current = gsap.timeline({paused: true})
    tl.current = new gsap.timeline()
        .to([linkOne, linkTwo, linkThree], { y: 30, stagger: { amount: .3 } });
    return tl.current.kill()
}, [])

useEffect(() => {
    dropped ? tl.current.play() : tl.current.reverse();
}, [dropped])

HTML:

<Navbar.Toggle onClick={() => setDropped(!dropped)} aria-controls="responsive-navbar-nav" />

<Nav.Link ref={el => linkOne = el} as={Link} to="/About" href="#About">About</Nav.Link>
<Nav.Link ref={el => linkTwo = el} as={Link} to="/TestPage" href="#TestPage">Test Page</Nav.Link>
<Nav.Link ref={el => linkThree = el} as={Link} to="/GsapImageReveal" href="#GsapImageReveal">GsapImageReveal</Nav.Link>

I have tried using useLocation:

let location = useLocation()
useEffect(() => {
    dropped ? tl.current.play() : tl.current.reverse();
    console.log(location)
}, [dropped, location])

This doesn’t work. But i think useLocation is on the right track because it gives me a route change.

Can anyone suggest a work around or a better way to approach this?

Is there possible to integrate Clover POS with website while ordering through website? if yes the guide me through it i need to integrate clover with my food website.

if a person renames the file extension to an allowed one let say abc.exe to abc.pdf and try to upload it.

I want to know if there are any open source library available in React/JavaScript to detect the content in the file so that no executable or malicious code is checked in even if the extension of the file is changed to what is allowed in the code

I have a problem with the task. I would like the easiest way to get the result, which is a tree with all the elements.
The object looks like this:

const bookPages = [
    {
        name: '1',
        content: [
            {
                name: '1.1',
                content: [
                    {
                        name: '1.1.1',
                        content: []
                    }
                ]
            },
            {
                name: '1.2',
                content: []
            }
        ]
    },
    {
        name: '2',
        content: [
            {
                name: '2.1',
                content: []
            }
        ]
    }
]

console.log(bookPages);

After typing this to the console I would like to get a similar result:

// - 1
// -- 1.1
// --- 1.1.1
// -- 1.2
// -2
// --2.1

WHAT would be the easiest way to do it? Thanks

Styled Components with bracket doesn’t work properly in Next.js
I’m using typescript, styled-components with Next.js

package.json

    "dependencies": {
             "@reduxjs/toolkit": "^1.6.2",
             "babel-plugin-styled-components": "^2.0.2",
             "next": "12.0.4",
             "react": "17.0.2",
             "react-dom": "17.0.2",
             "react-inlinesvg": "^2.3.0",
             "react-redux": "^7.2.6",
             "redux": "^4.1.2",
             "redux-saga": "^1.1.3",
             "styled-components": "^5.3.3"
    },
    "devDependencies": {
             "@types/node": "^16.11.10",
             "@types/react": "^17.0.37",
             "@types/styled-components": "^5.1.15",
             "eslint": "7.32.0",
             "eslint-config-next": "12.0.4",
             "typescript": "^4.5.2"
    }

.babelrc

    {
    "presets": ["next/babel"],
    "plugins": [
       [
         "babel-plugin-styled-components",
         {
            "ssr": true, 
            "displayName": true, 
            "preprocess": false
         }
       ]
    ]
    }

_document.tsx

import React from "react";
import Document, { Html, Head, Main, NextScript } from "next/document";
import { ServerStyleSheet } from "styled-components";
class MyDocument extends Document {
  static async getInitialProps(ctx) {
    const sheet = new ServerStyleSheet();
    const originalRenderPage = ctx.renderPage;

    try {
      ctx.renderPage = () =>
        originalRenderPage({
          enhanceApp: (App) => (props) =>
            sheet.collectStyles(<App {...props} />),
        });

      const initialProps = await Document.getInitialProps(ctx);
      return {
        ...initialProps,
        styles: (
          <>
            {initialProps.styles}
            {sheet.getStyleElement()}
          </>
        ),
      };
    } finally {
      sheet.seal();
    }
  }

  render() {
    return (
      <Html>
        <Head />
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    );
  }
}

export default MyDocument;

but in a certain situation, like using Styled Components with bracket, and the components in the bracket were imported, styled-components cannot apply any of it.

(it can render the imported component, but cannot apply any additional styles)

RegisterForm.tsx

    import React, { useState } from 'react';
    import styled from 'styled-components';
    import RoundButton from '../../components/common/RoundButton';

    const RoundButtonWithMarginTop = styled(RoundButton)`
        margin-top: 3.75rem;
    `;

    const RegisterForm = () => {
         ...
         <RoundButtonWithMarginTop>Next</RoundButtonWithMarginTop>
         ...
    }

components/common/index.tsx

    export * from './Header';
    export * from './Responsive';
    export * from './RoundButton';

components/common/RoundButton.tsx

import React from 'react';
import styled from 'styled-components';
import palette from '../../lib/styles/palette';

const RoundButtonBlock = styled.button`
    width: 100%;
    background-color: ${palette.Gray[1]};
    border-radius: 30px;
    border: none;
    font-size: 1.1em;
    font-weight: 700;
    height: 3rem;

    cursor: pointer;

    &:hover {
        background-color: ${palette.Gray[0]};
    }
`;

const RoundButton = ({ children }) => {
    return (
        <RoundButtonBlock>
            {children}
        </RoundButtonBlock>
    );
};

export default RoundButton;

how button appears on the page

How can I solve this problem?
Please give me the solution.

I am trying to filter an array, based on some nested object.
the final value would be the main object.

this is the data I have.

JSonData =  [
        {
            "ID": 1,
            "Name": "0ABCDDDD",
            "Business Profile Owner": "owner ",
            "Folder": "out-of-the-box strategize methodologies",
            "Profile Type": "Greenholt",
            "status": "low"
            "Risk": [
              {
                "ID": 1.1,
                "Name": "Tiaxxxxxnna",
                "Risk Owner": "Lindgren",
                "Risk Taxonomy": "Lindgren",
                "status": "high"
                "Control": [
                  {
                    "ID": 1.2,
                    "Name": "rrrrrrrrrr",
                    "Control Owner": "333333",
                    "Control Hierarchy": "North Laurineshire",
                    "Control Type 3": "Jerde Spring",
                    "status": "high"
                  },
                  {
                    "ID": 1.21,
                      "Name": "cccccccActive",
                    "Control Owner": "333333",
                    "Control Hierarchy": "North Laurineshire",
                    "Control Type 3": "Jerde Spring",
                    "status": "low"
                  }
                ]
              },
              {
                ID: 1.11,
                Name: "Tiaxxxxxnna",
                "Risk Owner": "rRrrrrrrrrrrr",
                "Risk Taxonomy": "rrrrrrrrrrrr",
                "status": "low"
              }
            ]
    
    }, {
            "ID": 2,
            "Name": "dddd0ABCDDDD",
            "Business Profile Owner": "ddddd ",
            "Folder": "strategize methodologies",
            "Profile Type": "ssd",
            "status": "high"
            "Risk": [
              {
                "ID": 2.1,
                "Name": "deeeeeec",
                "Risk Owner": "Lindgren",
                "Risk Taxonomy": "Lindgren",
                "status": "high"
                "Control": [
                  {
                    "ID": 2.2,
                   "Name": "3Active",
                    "Control Owner": "333333",
                    "Control Hierarchy": "North Laurineshire",
                    "Control Type 3": "Jerde Spring",
                    "status": "high"
                  },
                  {
                    "ID": 2.21,
                    "Name": "55555Active",
                    "Control Owner": "333333",
                    "Control Hierarchy": "North Laurineshire",
                    "Control Type 3": "Jerde Spring",
                    "status": "low"
                  }
                ]
              },
              {
                ID: 2.11,
                Name: "33333333",
                "Risk Owner": "eeeeeeee",
                "Risk Taxonomy": "wwwwwwwww",
                "status": "high"
              }
            ]
    
    }, {
            "ID": 3,
            "Name": "WWWW",
            "Business Profile Owner": "Business Profile",
            "Folder": "strategize",
            "Profile Type": "cccccc",
            "status": "high"
            "Risk": [
              {
                "ID": 3.1,
                "Name": "ruchas",
                "Risk Owner": "boss",
                "Risk Taxonomy": "8989889",
                "status": "high"
                "Control": [
                  {
                    "ID": 3.2,
                     "Name": "Active",
                    "Control Owner": "eeeeee",
                    "Control Hierarchy": "North",
                    "Control Type 3": "Jerde",
                    "status": "low"
                  },
                  {
                    "ID": 3.21,
                    "Name": "Active1",
                    "Control Owner": "wwwwww",
                    "Control Hierarchy": "Laurineshire",
                    "Control Type 3": "Spring",
                    "status": "high"
                  }
                ]
              },
              {
                ID: 3.11,
                Name: "EEEE",
                "Risk Owner": "eeeeeeee",
                "Risk Taxonomy": "wwwwwwwww",
                "status": "low"
              }
            ]
        }
    ];

The multiple values which are selected from multi-select are

[{name: 'Business Profile', type: 'bp'}
{name: 'Low', type: 'risk'}
{name: 'Active', type: 'control'}]

here ‘bp’ is the main object (ID’s which are 1,2,3).
risk and control are nested objects/ Array.

it should return the following object since it matches all records.
(selected records should work with && operations)

 {
        "ID": 3,
        "Name": "WWWW",
        "Business Profile Owner": "Business Profile",
        "Folder": "strategize",
        "Profile Type": "cccccc",
        "status": "high"
        "Risk": [
          {
            "ID": 3.1,
            "Name": "ruchas",
            "Risk Owner": "boss",
            "Risk Taxonomy": "8989889",
            "status": "low"
            "Control": [
              {
                "ID": 3.2,
                 "Name": "Active",
                "Control Owner": "eeeeee",
                "Control Hierarchy": "North",
                "Control Type 3": "Jerde",
                "status": "low"
              }
            ]
          },
          {
            ID: 3.11,
            Name: "EEEE",
            "Risk Owner": "eeeeeeee",
            "Risk Taxonomy": "wwwwwwwww",
            "status": "low"
          }
       ]
}

I tried to use every single logic in my mind to resolve this problem, but this is the only solution that it worked.

knex.schema.createTable('documents', (table) => {
      table.integer('id').unsigned().notNullable().unique()
      table.string('path')
      table.enum('type', ['CPF', 'RG'])
      table.integer('user_id').unsigned().notNullable()
      table.foreign('user_id').references('id').inTable('users')
      table.primary(['id', 'user_id'])

      table.timestamps(true, true)
    })
    knex.schema.alterTable(this.tableName, (table) => {
      table.increments('id', { primaryKey: false }).alter()
    })
}