AWS Amplify Signup InvalidParameterException: Attributes did not conform

I have a react native application and I am trying to integrate AWS amplify to my project. Right now, I have collected all of the required infomraiton that I need to create an account. I have everything saves in state. WHen I try to actually signup and create an account, I run into an issue I have tried several time to fux but nothing seems to be working.

Here is my sugnupUser function:

import { signUp } from 'aws-amplify/auth'

const signupUser = () => {
    signUp({
      username: username, 
      password: password,
      attributes: {
        username: username, 
        email: email, 
        preferred_username: username,
        phone_number: `+1${phone}`, 
        'custom:following': 0,
        'custom:followers': 0,
        'custom:favorites': 0
      }
    })
      .then((response) => {
        console.log('new user')
      })
      .catch((error) => {
        console.log('error: ', error)
      })
  }

This is the error that I am getting:

 LOG  error:  [InvalidParameterException: Attributes did not conform to the schema: name: The attribute is required
preferred_username: The attribute is required
email: The attribute is required
phone_number: The attribute is required

Here is the stored information in useState:

  const [username, setUsername] = useState('')
  const [email, setEmail] = useState('')
  const [password, setPassword] = useState('')
  const [verify, setVerify] = useState('')
  const [name, setName] = useState('')
  const [phone, setPhone] = useState('')
  const [location, setLocation] = useState('')

Not sure why I keep getting this error or how to fix the error.

With Processing’s JavaScript library,p5js, I want to select a video element and add filters

I have tried this code below, which only asks for permission then opens camera,then set the streams to the element src

`

Webcam Pixelation

function setup() {

// Request permission to access the camera

navigator.mediaDevices.getUserMedia({ video: true })

.then((stream) => {

// If permission is granted, attach the stream to the video element

let video = document.getElementById(‘me’);

video.srcObject = stream;

video.play();

})

.catch((error) => {

// Handle errors, e.g., if the user denies permission

console.error(‘Error accessing the camera:’, error);

});

createCanvas(390, 240);

capture1 = select(‘#me’); // Select the video element with id “me”

}

function draw() {

background(255);

image(capture1, 0, 0, 320, 240);

filter(‘POSTERIZE’, 3);

}

`

How to use wallet connect client on localhost with websocket?

I was trying to test wallet connect locally and initializing the client like this.
(note

      const _client = await Client.init({
        relayUrl: "ws://localhost.com:3000",
        projectId: projectId, // ID registered on wallet connect
      });

However when making the client, I get this error

{context: 'core'} {context: 'core/relayer'} Error: Socket stalled when trying to connect to ws://localhost.com:3000
    at watch.ts:37:1

I’m guessing its to do with web sockets not working properly on my local host?
Not sure if it’s related to needing to configure my JS client to somehow expose websockets on localhost?

How to use createBrowserRouter to impliment different differnt skeletons for routes?

  • Skeletion Loading for each Route Should be needed. I slowed down the network speed and tested out but It doesn’t showed Loading text instead of Component we are attaching with lazy.
  • Routing System is properly working but I need Skeleto for each page as different, it should be shown until the lazy importing component is loaded
import routes from "@/routes/Routes";
import type { FC } from "react";
import { Suspense } from "react";
import { RouterProvider } from "react-router-dom";
import Loader from "@/components/suspense/Loader";

const App: FC = () => {

  return <Suspense fallback={<Loader />}>
    <RouterProvider router={routes} />
  </Suspense>;
};

export default App;
  • My Component Generally Looks like this
import type { FC } from "react";

export const Component: FC = () => {

  return (
    <div>Home</div>
  );
};

Component.displayName = "Home";
import ErrorBoundary from "@/pages/handlers/ErrorBoundary";
import { Paths } from "@/routes/paths";
import { createBrowserRouter } from "react-router-dom";


export default createBrowserRouter([
  {
    path: Paths.HOME,
    lazy: () => import("@/pages/Home"),
    loader: () => <>Home Page Skeleton</>,
    index: true,
    ErrorBoundary
  },
  {
    path: Paths.AUTH,
    lazy: () => import("@/pages/auth/AuthLayout"),
   loader: () => <>Auth Page Skeleton</>,
    ErrorBoundary,
    children: [
      {
        path: Paths.LOGIN,
        lazy: () => import("@/pages/auth/Login"),
       loader: () => <>Login Page Skeleton</>,
        index: true,
      },
      {
        path: Paths.REGISTER,
        lazy: () => import("@/pages/auth/Register"),
       loader: () => <>Register Page Skeleton</>,
      }
    ]
  },
  {
    path: Paths.NOT_FOUND,
    lazy: () => import("@/pages/handlers/NotFound"),
    loader: () => <>Not Found Page Skeleton</>,
    ErrorBoundary,
  },
]);

//Also I am currently seeing two problems in this file

/*
Fast refresh can't handle anonymous components. Add a name to your export.eslint(react-refresh/only-export-components)
Missing return type on function.eslint[@typescript-eslint/explicit-function-return-type](https://typescript-eslint.io/rules/explicit-function-return-type)
(property) IndexRouteObject.loader?: LoaderFunction<any> | undefined
*/

/*
Missing return type on function.eslint[@typescript-eslint/explicit-function-return-type](https://typescript-eslint.io/rules/explicit-function-return-type)
(property) IndexRouteObject.lazy?: LazyRouteFunction<RouteObject> | undefined
*/

I need individual skeletons for each page

Delete middle element of a stack in js

I have wanted to get the middle elements of a stack, so I have created a function deleteMid and recursively called the remove function to check and pop the middle elements, but here I am getting an output of undefined, so how can you please rectify that code? code is given below.

   function deleteMid(s, sizeOfs) {
        let count = 0;
        let mid = Math.floor(sizeOfs / 2);
        remove(s, count, mid, sizeOfs);
    }

    function remove(s, count, mid, sizeOfs) {
        if (count === mid) {
            s.pop();
            return;
        }

        let num = s.pop();
        remove(s, count + 1, mid, sizeOfs);
        s.push(num);
    }
    console.log(deleteMid([1, 2, 3, 4, 5], 5))

Debug jQuery code to get total of all rows (Ticket Types)

I’m working on a ticket widget. There are few ticket types and further 3 ticket options to each ticket type. When a user starts inputting quantity for one ticket type, ticket options for other ticket types should be disabled. If the user erase the values or set the value back to zero, ticket options for other ticket types should again be enabled.

Total summary section should show the total quantity and total cost based on the inputs.

Here is my codepen: https://codepen.io/CodingPupil/pen/zYbqPxw

Enabling/disabling the ticket option is working fine. But it is counting the total only for the first row ticket type. If I input the values to second or third or any other ticket type, it is not calculating the total. Can you please debug my jQuery code, so it shows the correct total for all the ticket types?

Check my codepen what I have tried so far:
https://codepen.io/CodingPupil/pen/zYbqPxw

HTML:

<div class="ticket-section">
    <div class="ticket-type" data-ticket-type="grandstand">
      <h3>Grandstand</h3>
      <div class="ticket-options">
        <div class="ticket-option">
            <label>Adult:</label>
            <input type="number" class="ticket-qty" data-type="grandstand" data-option="adult" min="0" value="0">
        </div>
        <div class="ticket-option">
            <label>Child/OAP:</label>
            <input type="number" class="ticket-qty" data-type="grandstand" data-option="child_oap" min="0" value="0">
        </div>
        <div class="ticket-option">
            <label>Young Child:</label>
            <input type="number" class="ticket-qty" data-type="grandstand" data-option="young_child" min="0" value="0">
        </div>
      </div>
    </div>
    
    <div class="ticket-type" data-ticket-type="grandstand-side">
      <h3>Grandstand Side</h3>
      <div class="ticket-options">
        <div class="ticket-option">
            <label>Adult:</label>
            <input type="number" class="ticket-qty" data-type="grandstand-side" data-option="adult" min="0" value="0">
        </div>
        <div class="ticket-option">
            <label>Child/OAP:</label>
            <input type="number" class="ticket-qty" data-type="grandstand-side" data-option="child_oap" min="0" value="0">
        </div>
        <div class="ticket-option">
            <label>Young Child:</label>
            <input type="number" class="ticket-qty" data-type="grandstand-side" data-option="young_child" min="0" value="0">
        </div>
      </div>
    </div>
    
    <div class="ticket-type" data-ticket-type="ringside-row-1">
        <h3>Ringside Row 1</h3>
        <div class="ticket-options">
        <div class="ticket-option">
            <label>Adult:</label>
            <input type="number" class="ticket-qty" data-type="ringside-row-1" data-option="adult" min="0" value="0">
        </div>
        <div class="ticket-option">
            <label>Child/OAP:</label>
            <input type="number" class="ticket-qty" data-type="ringside-row-1" data-option="child_oap" min="0" value="0">
        </div>
        <div class="ticket-option">
            <label>Young Child:</label>
            <input type="number" class="ticket-qty" data-type="ringside-row-1" data-option="young_child" min="0" value="0">
        </div>
        </div>
    </div>
    
    <div class="ticket-type" data-ticket-type="ringside-row-2">
        <h3>Ringside Row 2</h3>
        <div class="ticket-options">
        <div class="ticket-option">
            <label>Adult:</label>
            <input type="number" class="ticket-qty" data-type="ringside-row-2" data-option="adult" min="0" value="0">
        </div>
        <div class="ticket-option">
            <label>Child/OAP:</label>
            <input type="number" class="ticket-qty" data-type="ringside-row-2" data-option="child_oap" min="0" value="0">
        </div>
        <div class="ticket-option">
            <label>Young Child:</label>
            <input type="number" class="ticket-qty" data-type="ringside-row-2" data-option="young_child" min="0" value="0">
        </div>
        </div>
    </div>
    
    <div class="ticket-type" data-ticket-type="ringside-row-3">
        <h3>Ringside Row 3</h3>
        <div class="ticket-options">
        <div class="ticket-option">
            <label>Adult:</label>
            <input type="number" class="ticket-qty" data-type="ringside-row-3" data-option="adult" min="0" value="0">
        </div>
        <div class="ticket-option">
            <label>Child/OAP:</label>
            <input type="number" class="ticket-qty" data-type="ringside-row-3" data-option="child_oap" min="0" value="0">
        </div>
        <div class="ticket-option">
            <label>Young Child:</label>
            <input type="number" class="ticket-qty" data-type="ringside-row-3" data-option="young_child" min="0" value="0">
        </div>
        </div>
    </div>
    
    <!-- Add additional ticket types and options as needed -->
</div>
  
<div class="ticket-summary">
    <h3>Total Summary</h3>
    <div class="total-info">
      <p>Total Tickets: <span id="total-tickets">0</span></p>
      <p>Total Cost: £<span id="total-cost">0.00</span></p>
    </div>
</div>

JS:

jQuery(document).ready(function($) {
        const ticketPrices = {
          grandstand: {
            adult: 20,
            child_oap: 15,
            young_child: 10
          },
          grandstand_side: {
            adult: 25,
            child_oap: 18,
            young_child: 12
          },
          ringside_row_1: {
            adult: 30,
            child_oap: 22,
            young_child: 15
          },
          ringside_row_2: {
            adult: 35,
            child_oap: 25,
            young_child: 18
          },
          ringside_row_3: {
            adult: 40,
            child_oap: 30,
            young_child: 20
          }
        };
    
        $('.ticket-qty').on('input', function() {
          var currentType = $(this).data('type');
          var activeQuantity = parseInt($(this).val()) || 0;
    
          // Disable all inputs initially
          $('.ticket-qty').prop('disabled', true);
    
          // Enable inputs for the current ticket type
          $('.ticket-qty[data-type="' + currentType + '"]').prop('disabled', false);
    
          var totalTickets = 0;
          var totalCost = 0;
    
          $('.ticket-qty').each(function() {
            var ticketType = $(this).data('type');
            var ticketOption = $(this).data('option');
            var quantity = parseInt($(this).val()) || 0;
    
            if (quantity > 0) {
              $(this).closest('.ticket-type').addClass('active');
            } else {
              $(this).closest('.ticket-type').removeClass('active');
            }
    
            if (ticketPrices[ticketType] && ticketPrices[ticketType][ticketOption]) {
              var ticketCost = ticketPrices[ticketType][ticketOption];
              totalTickets += quantity;
              totalCost += quantity * ticketCost;
            }
    
            if ($(this).val().trim() === '') {
              $(this).val('0');
            }
          });
    
          // Check if all inputs of the active row are 0 to enable other rows
          if (activeQuantity === 0) {
            $('.ticket-qty').not('.ticket-qty[data-type="' + currentType + '"]').prop('disabled', false);
          }
    
          $('#total-tickets').text(totalTickets);
          $('#total-cost').text(totalCost.toFixed(2));
        });
      });

Differences by Method Declaration Method in JavaScript [duplicate]

Why is there a different result?
I don’t know why it works like this.
Are you sure all three are used as methods for objects?

    class Foo {
        bar() {}
        baz = () => {};
        bax = function () {};
    }

    console.log(new Foo().bar === new Foo().bar); // true
    console.log(new Foo().baz === new Foo().baz); // false
    console.log(new Foo().bax === new Foo().bax); // false

Reverse a sentence using stack in js

I have wanted to reverse a sentence using Stack in JavaScript, so here if I give input, Hey, how are you doing? and want to get output done? You are hey, so I traverse the loop and check until space is found, then push that word, then pop all the words from the stack, but it’s not showing the undefined, so how can you please rectify that code?

function reverseSentence(S){
    let stack = [];
    let word="";
    for(let i=0;i<S.length;i++){
        while(S[i]!=' '&&i<S.length){ 
            word+=S[i]
            i++
        }
       return stack.push(word)
    }
    while(!stack.length){
       return stack.pop()
    }
}
console.log(reverseSentence("Hey, how are you doing?"))

filter() and map() data to radio buttons in React

I am getting data from an API in the following format:

const carProperties = [
        {
            "key": "Brand",
            "values": [
                {
                    "id": 1,
                    "name": "Ford"
                },
                {
                    "id": 2,
                    "name": "Chevy"
                },
                {
                    "id": 3,
                    "name": "Honda",
                }
            ]
        },
        {
            "key": "Color",
            "values": [
                {
                    "id": 100,
                    "name": "Blue"
                },
                {
                    "id": 200,
                    "name": "Red"
                },
                {
                    "id": 300,
                    "name": "White",
                }
            ]
        }
    ]

I need to filter this data by its key and then map the values to HTML elements like radio buttons, check boxes etc. I cannot seem to get the correct syntax to be able to map the values. Here is what I have:

carProperties?.filter(property => property.key === "Brand").map((data, index) => (
        <Div key={index}>
            <Form.Check>
                <Form.Check.Input
                    type="radio"
                    id={data.values.id.toString()}
                    value={data.values.name}
            />
                <Form.Check.Label className="form-check-label">{data.values.name}</Form.Check.Label>
            </Form.Check>
        </Div>))

The types for carProperties are:

export interface CarProperty {
    key: string,
    values: CarPropertyValue[]
}

export interface CarPropertyValue {
    id: number,
    name: string,
}

Importmap for Rails with JS Module Pattern Error: “net::ERR_ABORTED 404 (Not Found)”

I’m using Importmap for Rails 7 implementing the JavaScript Module Pattern and I’m getting errors related to loading of custom helpers JS files in the production environment.

My app/javascript has a filesystem structure like this:

> javascript
  > controllers
    > application.js
    > index.js
    > first_controller.js
    > second_controller.js
    > ...
  > helpers
    > index.js
    > useControllerMixinNamedOne.js
    > useControllerMixinNamedTwo.js
    > ...
  > application.js

Below is the content of relevant files for the question:

# config/importmap.rb
pin "application", preload: true
pin "@hotwired/turbo-rails", to: "turbo.min.js", preload: true
pin "@hotwired/stimulus", to: "stimulus.min.js", preload: true
pin "@hotwired/stimulus-loading", to: "stimulus-loading.js", preload: true
pin_all_from "app/javascript/controllers", under: "controllers"
pin_all_from "app/javascript/helpers", under: "helpers"


# app/javascript/application.js
import "@hotwired/turbo-rails"
import "controllers"
import "helpers"


# app/javascript/controllers/first_controller.js
import { Controller } from "@hotwired/stimulus"
import { useControllerMixinNamedOne, useControllerMixinNamedTwo } from "helpers"
// Connects to data-controller="first"
export default class extends Controller {
  connect() {
    useControllerMixinNamedOne(this);
    ...
  }
}


# app/javascript/helpers/index.js
export * from "./useControllerMixinNamedOne"
export * from "./useControllerMixinNamedTwo"
...


# app/javascript/helpers/useControllerMixinNamedOne.js
export const useControllerMixinNamedOne = controller => {
  Object.assign(controller, {
    customFunctionFromNamedOne(event) {
      console.log("Hello from NamedOne")
    }
  });
};


# app/javascript/helpers/useControllerMixinNamedTwo.js
export const useControllerMixinNamedTwo = controller => {
  Object.assign(controller, {
    customFunctionFromNamedTwo(event) {
      console.log("Hello from NamedTwo")
    }
  });
};

...

When I use the above in development, it works.

However, when I use it in production it doesn’t work: in the browser console I get errors like

GET https://www.mywebsite.com/assets/helpers/useControllerMixinNamedOne net::ERR_ABORTED 404 (Not Found)
index-1ee3e17fa548653761aab66bd7ab6d677cc5dc8be43616b1c86e694aee4c4b27.js:1 

GET https://www.mywebsite.com/assets/helpers/useControllerMixinNamedTwo net::ERR_ABORTED 404 (Not Found)
index-1ee3e17fa548653761aab66bd7ab6d677cc5dc8be43616b1c86e694aee4c4b27.js:1 

...

What’s wrong? How can I solve errors related to the helpers JS files?

Automatically transfer info from gmail to google sheets

I am trying to transfer information from gmail ( emails labeled WAIT LIST ) to google sheets .

The email contains
Information that should be transferred in to 8 columns, chat GPT created a script but it doesn’t extracts all info, only email extracts and other 8 columns are empty. Can someone help me

Since i am not a developer i tryed differently ask chat gpt to fix the problem, but it still was the same

React Router v6. Route doesn’t work, can’t find the path

I was trying to add a router in the Content field, but the browser turns to whole blank. It’s React-Router v6. I changed the code according to the error info and it still prompt the same msg. I have another route in my app file but it worked.

home page

error info

import React from 'react'
import { Layout } from 'antd'
import { Routes, Route, BrowserRouter } from 'react-router-dom';
import Header from '../../components/header';
import Left_nav from '../../components/left_nav';
import Home from '../home';
import Category from '../category';
import Product from '../product';
import Bar from '../charts/bar';
import Pie from '../charts/pie';
import Line from '../charts/line';

const { Footer, Sider, Content } =Layout;

export default function Admin() {
  return (
    <Layout style={{ height: '100%' }}>
      <Sider>
        <Left_nav />
      </Sider>
      <Layout>
        <Header>header</Header>
        <Content style={{ backgroundColor: '#fff' }}>
          hh
          <Routes>
            <Route path="/" element={<Home />} />
            <Route path="/*" element={<Home />} />
            <Route path="/home/*" element={<Home />} />
            <Route path="/category" element={<Category />} />
            <Route path="/product" element={<Product />} />
            <Route path="/charts/bar" element={<Bar />} />
            <Route path="/charts/line" element={<Line />} />
            <Route path="/charts/pie" element={<Pie />} />
          </Routes>
        </Content>
        <Footer style={{ textAlign: 'center' }}>
          Website Builder: Rui Zhang
        </Footer>
      </Layout>
    </Layout>
  )
}

Enable Pino Logging at a Particular Level

From researching the web, the proper way to enable logging at a certain level is by adding the ‘level’ attribute to the object passed into the pino constructor. The documentation can be found here.

However, per my logging configuration logger_config.js

import pino from "pino";

const send = function (level, logEvent, a, b) {}; 

const logger = pino({
   level: "trace",
   browser: {
      serialize: true,
      asObject: true,
      transmit: {
         send,
      },  
   },  
});

export default logger;

and logging usage, which contains a second way to set the level,

import logger from "../../logger_config";

export const myComponent = async (formData) => {
   logger.level = "trace";
   logger.error("ERROR: Start of myComponent");
   logger.info("INFO: Start of myComponent");
   logger.debug("DEBUG: Start of myComponent");

I was expecting the debug statement to print. Only the error and info level statements are printed. Furthermore, if I add a trace level debug statement, it gets printed, along with info and error; however, there is still no debug statement.

What’s even more odd is that when the level is set to debug, “logger level is debug” from the following statement gets printed.

   if (logger.levelVal === 20) {
      console.log("logger level is `debug`");
   }   

I’ve restarted node after changing the level setting.

How do I get the debug statement to print (i.e. have everything at the debug level and above to print)?

Not able to parse JavaScript in Identity Server 4 .Net CORE 3.1 MVC – Uncaught SyntaxError: Invalid or unexpected token

I have a .Net Core MVC Application for Identity Server 4. Inside of the Login.cshtml file I have a script tag surrounding 37k lines of a compiled function from a React application. I am trying to render this function inside of the .Net Core application. The function works in other instances –

  • Regular HTML file
  • Default .Net Core MVC application pulled from Windows directly
  • In React .html index file

My thought is that I am missing a certain package to be able to correctly parse this code.

((e = u.createElement("div")).innerHTML = "<script></script>")

Uncaught SyntaxError: Invalid or unexpected token

Now when I update to document.createElement(“script”), the console then returns another syntax error two lines down.

Uncaught SyntaxError: Unexpected token ‘:’

Thank you for the help!