How to create a new user along with their profile images in Sanity?

Hi I am a beginner to Sanity and I am working on a personal project. All I want to know is how do I add a user along with his profile Image in the Sanity Database if possible every time whenever they fill out a form

 
<div className="flex h-screen flex-col items-center 
    justify-center bg-[#171821]"
    >
 <div className="m-6">
     <form>
       <input
            aria-label="Enter your email address"
            type="text"
            placeholder="User Name"
            className="text-gray-base mr-3 mb-2 
                              h-2 w-full rounded
                              py-5 px-4 text-sm bg-black text-white"
      />
      
<button type="submit" className="mt-5 w-full bg-green-400 p-2">
            Add User
          </button>
        </form>
      </div>
    </div>

Can you also

Why won’t Fields be Populated in Select box?

The HTML is displaying when I select Volvo, but the JavaScript isn’t running. I looked at other innerHTML JavaScript questions, but I’m confused. Please help a noob out. https://jsfiddle.net/nstruth/ksgwaqc8/4/

HTML:

<!DOCTYPE html>
<html>
<head>
<script   src="https://code.jquery.com/jquery-3.6.0.min.js"   integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="   crossorigin="anonymous"></script>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/select2.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script> // In your Javascript (external .js resource or <script> tag)
$(document).ready(function() {
    $("#cars2").select2();
});
</script>

<style>..
select {
width: 150px;

}
</style>
</head>
<body>
<div id="myDIV"><p>Hello</p></div>

<label for="cars">Choose a car:</label>

<select id="cars2" onchange="myFunction()">
<option value="0">Pick something</option>
  <option value="1">Volvo</option>
  <option value="2">Saab</option>
  <option value="3">Opel</option>
  <option value="4">Audi</option>
</select>
<script>
function myFunction(event){
 var x = document.getElementById("myDIV");
 //here you are picking the selected option item
 var y = $('select#cars2 option:selected').val();
 switch (y) {
  case '1':
    x.innerHTML = `<p>From:</p>
                                    <select style="float:left" id="lengthCalc1" class="js-example-basic-single select2-container newClass1" oninput="calcLength1()" onchange="calcLength1()">
    </select>

                                    <input style="height:50%;font-size:15pt;width:1000px; border: 1px solid #000;" id="lengthInput1" type="number" oninput="calcLength1()" onchange="calcLength1()" />

                                    <p>To:</p>

                                    <select style="float:left" id="lengthCalc2" class="js-example-basic-single select2-container newClass1" oninput="calcLength2()" onchange="calcLength2()">   
  </select>

                                    <input style="height:50%;font-size:15pt;width:1000px; border: 1px solid #000;" id="lengthInput2" type="number" oninput="calcLength2()" onchange="calcLength2()" />`;

$(".js-example-basic-single").select2();
    break;
  case '2':
    x.innerHTML = "<p>Roy!</p>";
  }
}
</script>
</body>
</html>

Javascript:

//Distance Math

var units = [['Inches', 0.025400000000000], ['Feet', 0.30480000000000000], ['Furlongs', 201.168]];
     var selectors = document.querySelectorAll('.newClass1');
     
     for (var i = 0; i < units.length; i++) {
       for (var j = 0; j < selectors.length; j++) {
         var option = document.createElement('option');
         option.value = units[i][1];
         option.textContent = units[i][0];
         selectors[j].add(option);
       }
     }
     
    function calcLength1() {
      var SpecialValue = document.getElementById("lengthInput1").value * document.getElementById("lengthCalc1").value / document.getElementById("lengthCalc2").value;
      document.getElementById("lengthInput2").value = SpecialValue.toFixed(12);
       
    }

    function calcLength2() {
      var SpecialValue = document.getElementById("lengthInput2").value * document.getElementById("lengthCalc2").value / document.getElementById("lengthCalc1").value;
      document.getElementById("lengthInput1").value = SpecialValue.toFixed(12);
}

CSS:

 .select2-selection--single{height:100px !important}

.accordion {
  background-color: #eee;
  color: #444;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: 2px solid red;
  border-radius: 5px;
  text-align: left;
  outline: none;
  font-size: 15px;
  transition: 0.4s;
}

.active, .accordion:hover {
 
}

.panel {
  padding: 0 18px;
  display: none;
  background-color: white;
  overflow: hidden;
}

body {font-family: Arial;}

/* Style the tab */
.tab {
  overflow: hidden;
  border: 1px solid #ccc;
  background-color: #f1f1f1;
}

/* Style the buttons inside the tab */
.tab button {
  background-color: inherit;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 14px 16px;
  transition: 0.3s;
  font-size: 17px;
}

/* Change background color of buttons on hover */
.tab button:hover {
  background-color: #ddd;
}

/* Create an active/current tablink class */
.tab button.active {
  background-color: #ccc;
}

/* Style the tab content */
.tabcontent {
  display: none;
  padding: 6px 12px;
  border: 1px solid #ccc;
  border-top: none;
}

I have to add text to post this question.
I have to add text to post this question.I have to add text to post this question.I have to add text to post this question. I have to add text to post this question.I have to add text to post this question.I have to add text to post this question.

secure websocket using spring security

I’m working on an application on spring boot, I managed to set up authentication with spring security using JWT, now I need to add a chat, so I opted for websocket, but I can’t to understand how to check permissions for websockets? should I send the token , It seems that SockJS does not allow sending parameters, I followed this tutorial
Websocket Authentication and Authorization in Spring

but I did not understand please someone explain to me how to check the authorization of websockets

Changing Iframe size by click event listener not working

I’m trying to change the iframe size by clicking the button by using the click event listener. But the iframe auto runs the function and I haven’t even clicked the button…

Someone said this is a duplicate of How to pass arguments to addEventListener listener function? but I don’t see where is this even related???

const btn = document.querySelector('button');
const iframe = document.querySelector('iframe');

function change(w) {
   iframe.style.width = `${w}px`;
}

btn.addEventListener('click', change(150));
iframe {
  width: 300px;
  height: 300px;
  background-color: blue;
}
<button>Change</button>
<iframe src=""></iframe>

Empty response for JWT login Node.js

I’m trying to make a simple authentication system on my Node.js API. Actually, I had the login endpoint working like a charm with JWT, but I also wanted to implement a logout function (and not have to wait for the token to expire) so I looked up how to achieve it.

After doing an exhaustive research on how to do it from the server side, I decided to install the jwt-redis package, which is suposed to not only repeat the entire functionallity of jsonwebtoken, but also store tokens in Redis and be able to destroy them with a simple method.

The fact is that now, after following the instructions on its readme, and although the endpoint is returning a successful status when testing with Postman, the response body (where the access token should be) is empty.

I attach my code below.

async login(req, res) {
    try {
        const redis = require('redis');
        const JWTR =  require('jwt-redis').default;
        //ES6 import JWTR from 'jwt-redis';
        const redisClient = redis.createClient();
        const jwtr = new JWTR(redisClient);
        redisClient.on("error", function (err) {
            console.log("Error " + err)
        })
        await redisClient.connect()

        console.log('email:' + req.body.email)
        console.log('hola')
        let user = await this.adapter.getByLogin(req.body.email)
        if (!user) return res.status(404).json({ Error: 'Recurso no encontrado' })

        const bcrypt = require('bcrypt')
        console.log(req.body.password, user.password)
        bcrypt.compare(req.body.password, user.password, (error, result) => {
            console.log(error, result)

            if (error) return res.status(404).json({ Error: 'Recurso no encontrado' })
            if (!result) return res.status(404).json({ Error: 'Recurso no encontrado' })

            delete user.password

            var payload = { jti: req.body.email }

            const accessToken = jwtr.sign(payload, process.env.ACCESS_TOKEN_SECRET)
            //console.log('accessToken:' + JSON.stringify(accessToken))
            res.json(accessToken)
        })
    } catch (error) {
        return res.status(500).json({ error: 'Recurso no encontrado', stacktrace: error })
    }
}

Please, take in care that I’m pretty new in JavaScript and Back-end development, so probably it is due to a dummie mistake. Anyway, I will appreciate your help, either if you have worked with this library before and you know where the error is, or you have any other idea of how I can make both login and logout work properly using JSON web token.

Thanks in advance.

Yarn,Npm İnstall Expo Start Error React Native :/

I Get This Error While Installing The Ready System
I Get React Native Error When I Start Expo

“”
yarn install
yarn install v1.22.18
warning ….package.json: No license field
[1/4] Resolving packages…
[2/4] Fetching packages…
[3/4] Linking dependencies…
warning ” > [email protected]″ has unmet peer dependency “lottie-ios@^3.2.3”.
warning “react-native > react-native-codegen > [email protected]” has unmet peer dependency “@babel/preset-env@^7.1.6”.
[4/4] Building fresh packages…

success Saved lockfile.
Done in 37.42s.

C:UsersisimsizDesktopV1.0.0>yarn global add expo-cli
yarn global v1.22.18
warning ....package.json: No license field
[1/4] Resolving packages...
[2/4] Fetching packages...
[3/4] Linking dependencies...
warning "xo > [email protected]" has unmet peer dependency "webpack@>=1.11.0".
[4/4] Building fresh packages...

success Installed "[email protected]" with binaries:
      - expo
      - expo-cli
Done in 19.80s.

yarn global v1.22.18ktopV1.0.0>yarn global add eas-cli
warning ....package.json: No license field
[1/4] Resolving packages...
[2/4] Fetching packages...
[3/4] Linking dependencies...
warning "xo > [email protected]" has unmet peer dependency "webpack@>=1.11.0".
[4/4] Building fresh packages...
success Installed "[email protected]" with binaries:
      - eas
Done in 17.36s.

“”

Expo Start 🙁 Eroor

    Using node to generate images. This is much slower than using native packages.
› Optionally you can stop the process and try again after successfully running `npm install -g sharp-cli`.

Using node to generate images. This is much slower than using native packages.
› Optionally you can stop the process and try again after successfully running `npm install -g sharp-cli`.

Using node to generate images. This is much slower than using native packages.
› Optionally you can stop the process and try again after successfully running `npm install -g sharp-cli`.

Web Bundling complete 105940ms
./node_modules/react-native/Libraries/Components/TextInput/TextInputState.js:18:17
Module not found: Can't resolve '../../Utilities/Platform'
  16 |
  17 | const React = require('react');
> 18 | const Platform = require('../../Utilities/Platform');
     |                 ^
  19 | const {findNodeHandle} = require('../../Renderer/shims/ReactNative');
  20 | import {Commands as AndroidTextInputCommands} from '../../Components/TextInput/AndroidTextInputNativeComponent';
  21 | import {Commands as iOSTextInputCommands} from '../../Components/TextInput/RCTSingelineTextInputNativeComponent';
./node_modules/react-native/Libraries/Core/Timers/JSTimers.js:14:17
Module not found: Can't resolve '../../Utilities/Platform'
  12 |
  13 | const BatchedBridge = require('../../BatchedBridge/BatchedBridge');
> 14 | const Platform = require('../../Utilities/Platform');
     |                 ^
  15 | const Systrace = require('../../Performance/Systrace');
  16 |
  17 | const invariant = require('invariant');
./node_modules/@stripe/stripe-react-native/lib/module/components/StripeProvider.js:1:515
Module not found: Can't resolve '../../package.json'
> 1 | var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports.StripeProvider=StripeProvider;exports.initStripe=void 0;var _regenerator=_interopRequireDefault(require("@babel/runtime/regenerator"));var _defineProperty2=_interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));var _react=require("react");var _NativeStripeSdk=_interopRequireDefault(require("../NativeStripeSdk"));var _helpers=require("../helpers");var _package=_interopRequireDefault(require("../../package.json"));function ownKeys(object,enumerableOnly){var keys=Object.keys(object);if(Object.getOwnPropertySymbols){var symbols=Object.getOwnPropertySymbols(object);if(enumerableOnly){symbols=symbols.filter(function(sym){return Object.getOwnPropertyDescriptor(object,sym).enumerable;});}keys.push.apply(keys,symbols);}return keys;}function _objectSpread(target){for(var i=1;i<arguments.length;i++){var source=arguments[i]!=null?arguments[i]:{};if(i%2){ownKeys(Object(source),true).forEach(function(key){(0,_defineProperty2.default)(target,key,source[key]);});}else if(Object.getOwnPropertyDescriptors){Object.defineProperties(target,Object.getOwnPropertyDescriptors(source));}else{ownKeys(Object(source)).forEach(function(key){Object.defineProperty(target,key,Object.getOwnPropertyDescriptor(source,key));});}}return target;}var EXPO_PARTNER_ID='pp_partner_JBN7LkABco2yUu';var repository=_package.default.repository;var appInfo={name:(0,_helpers.shouldAttributeExpo)()?_package.default.name+"/expo":_package.default.name,url:repository.url||repository,version:_package.default.version,partnerId:(0,_helpers.shouldAttributeExpo)()?EXPO_PARTNER_ID:undefined};var initStripe=function initStripe(params){var extendedParams;return _regenerator.default.async(function initStripe$(_context){while(1){switch(_context.prev=_context.next){case 0:extendedParams=_objectSpread(_objectSpread({},params),{},{appInfo:appInfo});_NativeStripeSdk.default.initialise(extendedParams);case 2:case"end":return _context.stop();}}},null,null,null,Promise);};exports.initStripe=initStripe;function StripeProvider(_ref){var children=_ref.children,publishableKey=_ref.publishableKey,merchantIdentifier=_ref.merchantIdentifier,threeDSecureParams=_ref.threeDSecureParams,stripeAccountId=_ref.stripeAccountId,urlScheme=_ref.urlScheme,setUrlSchemeOnAndroid=_ref.setUrlSchemeOnAndroid;(0,_react.useEffect)(function(){if(!publishableKey){return;}if(_helpers.isAndroid){_NativeStripeSdk.default.initialise({publishableKey:publishableKey,appInfo:appInfo,stripeAccountId:stripeAccountId,threeDSecureParams:threeDSecureParams,urlScheme:urlScheme,setUrlSchemeOnAndroid:setUrlSchemeOnAndroid});}else{_NativeStripeSdk.default.initialise({publishableKey:publishableKey,appInfo:appInfo,stripeAccountId:stripeAccountId,threeDSecureParams:threeDSecureParams,merchantIdentifier:merchantIdentifier,urlScheme:urlScheme});}},[publishableKey,merchantIdentifier,stripeAccountId,threeDSecureParams,urlScheme,setUrlSchemeOnAndroid]);return children;}
    |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   ^
  2 | //# sourceMappingURL=StripeProvider.js.map
./node_modules/react-native/Libraries/Alert/Alert.js:13
Module not found: Can't resolve '../Utilities/Platform'
  11 | 'use strict';
  12 |
> 13 | import Platform from '../Utilities/Platform';
  14 | import NativeDialogManagerAndroid, {
  15 |   type DialogOptions,
  16 | } from '../NativeModules/specs/NativeDialogManagerAndroid';
./node_modules/react-native/Libraries/Core/NativeExceptionsManager.js:60:17
Module not found: Can't resolve '../Utilities/Platform'
  58 | }
  59 |
> 60 | const Platform = require('../Utilities/Platform');
     |                 ^
  61 |
  62 | const NativeModule = TurboModuleRegistry.getEnforcing<Spec>(
  63 |   'ExceptionsManager',
./node_modules/react-native/Libraries/Core/setUpDeveloperTools.js:13
Module not found: Can't resolve '../Utilities/Platform'
  11 | 'use strict';
  12 |
> 13 | import Platform from '../Utilities/Platform';
  14 |
  15 | declare var console: typeof console & {_isPolyfilled: boolean, ...};
  16 |
./node_modules/react-native/Libraries/Core/ReactNativeVersionCheck.js:13
Module not found: Can't resolve '../Utilities/Platform'
  11 | 'use strict';
  12 |
> 13 | import Platform from '../Utilities/Platform';
  14 | const ReactNativeVersion = require('./ReactNativeVersion');
  15 |
  16 | /**
./node_modules/react-native/Libraries/EventEmitter/NativeEventEmitter.js:13
Module not found: Can't resolve '../Utilities/Platform'
  11 | 'use strict';
  12 |
> 13 | import Platform from '../Utilities/Platform';
  14 | import EventEmitter from '../vendor/emitter/EventEmitter';
  15 | import {type EventSubscription} from '../vendor/emitter/EventEmitter';
  16 | import RCTDeviceEventEmitter from './RCTDeviceEventEmitter';
./node_modules/react-native/Libraries/Image/AssetSourceResolver.js:24:17
Module not found: Can't resolve '../Utilities/Platform'
  22 |
  23 | const PixelRatio = require('../Utilities/PixelRatio');
> 24 | const Platform = require('../Utilities/Platform');
     |                 ^
  25 |
  26 | const invariant = require('invariant');
  27 |
./node_modules/react-native/Libraries/ReactNative/PaperUIManager.js:14:17
Module not found: Can't resolve '../Utilities/Platform'
  12 |
  13 | const NativeModules = require('../BatchedBridge/NativeModules');
> 14 | const Platform = require('../Utilities/Platform');
     |                 ^
  15 | const UIManagerProperties = require('./UIManagerProperties');
  16 |
  17 | const defineLazyObjectProperty = require('../Utilities/defineLazyObjectProperty');
./node_modules/react-native/Libraries/ReactPrivate/ReactNativePrivateInterface.js:32:11
Module not found: Can't resolve '../Utilities/Platform'
  30 |   },
  31 |   get Platform(): Platform {
> 32 |     return require('../Utilities/Platform');
     |           ^
  33 |   },
  34 |   get RCTEventEmitter(): RCTEventEmitter {
  35 |     return require('../EventEmitter/RCTEventEmitter');
./node_modules/react-native/Libraries/StyleSheet/processColor.js:13:17
Module not found: Can't resolve '../Utilities/Platform'
  11 | 'use strict';
  12 |
> 13 | const Platform = require('../Utilities/Platform');
     |                 ^
  14 |
  15 | const normalizeColor = require('./normalizeColor');
  16 |
./node_modules/react-native/Libraries/StyleSheet/processTransform.js:14:17
Module not found: Can't resolve '../Utilities/Platform'
  12 |
  13 | const MatrixMath = require('../Utilities/MatrixMath');
> 14 | const Platform = require('../Utilities/Platform');
     |                 ^
  15 |
  16 | const invariant = require('invariant');
  17 | const stringifySafe = require('../Utilities/stringifySafe').default;
./node_modules/react-native/Libraries/Utilities/HMRClient.js:16:17
Module not found: Can't resolve './Platform'
  14 | const invariant = require('invariant');
  15 | const MetroHMRClient = require('metro-runtime/src/modules/HMRClient');
> 16 | const Platform = require('./Platform');
     |                 ^
  17 | const prettyFormat = require('pretty-format');
  18 |
  19 | import getDevServer from '../Core/Devtools/getDevServer';
./node_modules/react-native/Libraries/StyleSheet/processColor.js:34:31
Module not found: Can't resolve './PlatformColorValueTypes'
  32 |
  33 |   if (typeof normalizedColor === 'object') {
> 34 |     const processColorObject = require('./PlatformColorValueTypes')
     |                               ^
  35 |       .processColorObject;
  36 |
  37 |     const processedColorObj = processColorObject(normalizedColor);
./node_modules/react-native/Libraries/StyleSheet/normalizeColor.js:24:35
Module not found: Can't resolve './PlatformColorValueTypes'
  22 | ): ?ProcessedColorValue {
  23 |   if (typeof color === 'object' && color != null) {
> 24 |     const {normalizeColorObject} = require('./PlatformColorValueTypes');
     |                                   ^
  25 |     const normalizedColor = normalizeColorObject(color);
  26 |     if (normalizedColor != null) {
  27 |       return color;
./node_modules/react-native/Libraries/Alert/Alert.js:17
Module not found: Can't resolve './RCTAlertManager'
  15 |   type DialogOptions,
  16 | } from '../NativeModules/specs/NativeDialogManagerAndroid';
> 17 | import RCTAlertManager from './RCTAlertManager';
  18 |
  19 | export type AlertType =
  20 |   | 'default'
./node_modules/react-native/Libraries/Network/XMLHttpRequest.js:18:22
Module not found: Can't resolve './RCTNetworking'
  16 | const EventTarget = require('event-target-shim');
  17 | const GlobalPerformanceLogger = require('../Utilities/GlobalPerformanceLogger');
> 18 | const RCTNetworking = require('./RCTNetworking');
     |                      ^
  19 |
  20 | const base64 = require('base64-js');
  21 | const invariant = require('invariant');
./components/AdmobBanner.jsx:6
Module not found: Can't resolve 'expo-ads-admob'
  4 | import { useStateValue } from "../StateProvider";
  5 |
> 6 | import {
  7 |   AdMobBanner,
  8 |   setTestDeviceIDAsync,
  9 |   requestPermissionsAsync,
./screens/HomeScreen.jsx:3
Module not found: Can't resolve 'expo-ads-admob'
  1 | /* eslint-disable no-unused-vars */
  2 | /* eslint-disable no-undef */
> 3 | import { requestPermissionsAsync, getPermissionsAsync } from "expo-ads-admob";
  4 | import React, { useState, useEffect, useCallback, useRef } from "react";
  5 | import {
  6 |   View,
./node_modules/@react-navigation/drawer/lib/module/views/DrawerView.js:22
Module not found: Can't resolve 'react-native-reanimated'
  20 |   View,
  21 | } from 'react-native';
> 22 | import * as Reanimated from 'react-native-reanimated';
  23 | import { useSafeAreaFrame } from 'react-native-safe-area-context';
  24 |
  25 | import type {
./node_modules/@react-navigation/drawer/lib/module/views/legacy/Drawer.js:12
Module not found: Can't resolve 'react-native-reanimated'
  10 |   View,
  11 | } from 'react-native';
> 12 | import Animated from 'react-native-reanimated';
  13 |
  14 | import type { DrawerProps } from '../../types';
  15 | import DrawerProgressContext from '../../utils/DrawerProgressContext';
./node_modules/@react-navigation/drawer/lib/module/views/legacy/Overlay.js:3
Module not found: Can't resolve 'react-native-reanimated'
  1 | import * as React from 'react';
  2 | import { Platform, Pressable, StyleSheet } from 'react-native';
> 3 | import Animated from 'react-native-reanimated';
  4 |
  5 | const {
  6 |   // @ts-expect-error: this is to support reanimated 1
./node_modules/@react-navigation/drawer/lib/module/views/modern/Drawer.js:15
Module not found: Can't resolve 'react-native-reanimated'
  13 |   State as GestureState,
  14 | } from 'react-native-gesture-handler';
> 15 | import Animated, {
  16 |   interpolate,
  17 |   runOnJS,
  18 |   useAnimatedGestureHandler,
./node_modules/@react-navigation/drawer/lib/module/views/modern/Overlay.js:3
Module not found: Can't resolve 'react-native-reanimated'
  1 | import * as React from 'react';
  2 | import { Platform, Pressable, StyleSheet } from 'react-native';
> 3 | import Animated, {
  4 |   useAnimatedProps,
  5 |   useAnimatedStyle,
  6 | } from 'react-native-reanimated';
./node_modules/react-native-draggable-flatlist/lib/constants.js:5:32
Module not found: Can't resolve 'react-native-reanimated'
  3 | exports.isReanimatedV2 = exports.isWeb = exports.isAndroid = exports.isIOS = exports.DEFAULT_PROPS = exports.DEFAULT_ANIMATION_CONFIG = exports.SCROLL_POSITION_TOLERANCE = void 0;
  4 | var react_native_1 = require("react-native");
> 5 | var react_native_reanimated_1 = require("react-native-reanimated");
    |                                ^
  6 | // Fire onScrollComplete when within this many px of target offset
  7 | exports.SCROLL_POSITION_TOLERANCE = 2;
  8 | exports.DEFAULT_ANIMATION_CONFIG = {
./node_modules/react-native-draggable-flatlist/lib/procs.js:23:45
Module not found: Can't resolve 'react-native-reanimated'
  21 | Object.defineProperty(exports, "__esModule", { value: true });
  22 | exports.springFill = exports.setupCell = exports.hardReset = exports.getIsAfterActive = void 0;
> 23 | var react_native_reanimated_1 = __importStar(require("react-native-reanimated"));
     |                                             ^
  24 | var constants_1 = require("./constants");
  25 | var set = react_native_reanimated_1.default.set, cond = react_native_reanimated_1.default.cond, add = react_native_reanimated_1.default.add, sub = react_native_reanimated_1.default.sub, block = react_native_reanimated_1.default.block, eq = react_native_reanimated_1.default.eq, neq = react_native_reanimated_1.default.neq, and = react_native_reanimated_1.default.and, divide = react_native_reanimated_1.default.divide, greaterThan = react_native_reanimated_1.default.greaterThan, greaterOrEq = react_native_reanimated_1.default.greaterOrEq, Value = react_native_reanimated_1.default.Value, spring = react_native_reanimated_1.default.spring, lessThan = react_native_reanimated_1.default.lessThan, lessOrEq = react_native_reanimated_1.default.lessOrEq, multiply = react_native_reanimated_1.default.multiply;
  26 | if (!react_native_reanimated_1.default.proc) {
./node_modules/react-native-draggable-flatlist/lib/components/DraggableFlatList.js:43:45
Module not found: Can't resolve 'react-native-reanimated'
  41 | var react_1 = __importStar(require("react"));
  42 | var react_native_gesture_handler_1 = require("react-native-gesture-handler");
> 43 | var react_native_reanimated_1 = __importStar(require("react-native-reanimated"));
     |                                             ^
  44 | var CellRendererComponent_1 = __importDefault(require("./CellRendererComponent"));
  45 | var constants_1 = require("../constants");
  46 | var PlaceholderItem_1 = __importDefault(require("./PlaceholderItem"));
./node_modules/react-native-draggable-flatlist/lib/components/CellDecorators.js:28:45
Module not found: Can't resolve 'react-native-reanimated'
  26 | var react_1 = __importDefault(require("react"));
  27 | var react_native_1 = require("react-native");
> 28 | var react_native_reanimated_1 = __importStar(require("react-native-reanimated"));
     |                                             ^
  29 | var draggableFlatListContext_1 = require("../context/draggableFlatListContext");
  30 | var useNode_1 = require("../hooks/useNode");
  31 | var useOnCellActiveAnimation_1 = require("../hooks/useOnCellActiveAnimation");
./node_modules/react-native-draggable-flatlist/lib/components/ScrollOffsetListener.js:3:32
Module not found: Can't resolve 'react-native-reanimated'
  1 | "use strict";
  2 | Object.defineProperty(exports, "__esModule", { value: true });
> 3 | var react_native_reanimated_1 = require("react-native-reanimated");
    |                                ^
  4 | var utils_1 = require("../utils");
  5 | var ScrollOffsetListener = function (_a) {
  6 |     var scrollOffset = _a.scrollOffset, onScrollOffsetChange = _a.onScrollOffsetChange;
./node_modules/react-native-draggable-flatlist/lib/components/PlaceholderItem.js:24:45
Module not found: Can't resolve 'react-native-reanimated'
  22 | var react_1 = __importStar(require("react"));
  23 | var react_native_1 = require("react-native");
> 24 | var react_native_reanimated_1 = __importStar(require("react-native-reanimated"));
     |                                             ^
  25 | var animatedValueContext_1 = require("../context/animatedValueContext");
  26 | var draggableFlatListContext_1 = require("../context/draggableFlatListContext");
  27 | var propsContext_1 = require("../context/propsContext");
./node_modules/react-native-draggable-flatlist/lib/components/CellRendererComponent.js:38:45
Module not found: Can't resolve 'react-native-reanimated'
  36 | var react_1 = __importStar(require("react"));
  37 | var react_native_1 = require("react-native");
> 38 | var react_native_reanimated_1 = __importStar(require("react-native-reanimated"));
     |                                             ^
  39 | var draggableFlatListContext_1 = require("../context/draggableFlatListContext");
  40 | var constants_1 = require("../constants");
  41 | var useCellTranslate_1 = require("../hooks/useCellTranslate");
./node_modules/react-native-draggable-flatlist/lib/context/animatedValueContext.js:24:32
Module not found: Can't resolve 'react-native-reanimated'
  22 | exports.useAnimatedValues = void 0;
  23 | var react_1 = __importStar(require("react"));
> 24 | var react_native_reanimated_1 = require("react-native-reanimated");
     |                                ^
  25 | var react_native_gesture_handler_1 = require("react-native-gesture-handler");
  26 | var useNode_1 = require("../hooks/useNode");
  27 | var react_2 = require("react");
./node_modules/react-native-draggable-flatlist/lib/hooks/useAutoScroll.js:41:32
Module not found: Can't resolve 'react-native-reanimated'
  39 | exports.useAutoScroll = void 0;
  40 | var react_1 = require("react");
> 41 | var react_native_reanimated_1 = require("react-native-reanimated");
     |                                ^
  42 | var react_native_gesture_handler_1 = require("react-native-gesture-handler");
  43 | var constants_1 = require("../constants");
  44 | var useNode_1 = require("../hooks/useNode");
./node_modules/react-native-draggable-flatlist/lib/hooks/useOnCellActiveAnimation.js:4:32
Module not found: Can't resolve 'react-native-reanimated'
  2 | Object.defineProperty(exports, "__esModule", { value: true });
  3 | exports.useOnCellActiveAnimation = void 0;
> 4 | var react_native_reanimated_1 = require("react-native-reanimated");
    |                                ^
  5 | var animatedValueContext_1 = require("../context/animatedValueContext");
  6 | var cellContext_1 = require("../context/cellContext");
  7 | var procs_1 = require("../procs");
./node_modules/react-native-draggable-flatlist/lib/hooks/useSpring.js:16:32
Module not found: Can't resolve 'react-native-reanimated'
  14 | exports.useSpring = void 0;
  15 | var react_1 = require("react");
> 16 | var react_native_reanimated_1 = require("react-native-reanimated");
     |                                ^
  17 | var constants_1 = require("../constants");
  18 | function useSpring(_a) {
  19 |     var _b = _a === void 0 ? { config: constants_1.DEFAULT_ANIMATION_CONFIG } : _a, configParam = _b.config;
./node_modules/react-native-draggable-flatlist/lib/hooks/useCellTranslate.js:4:32
Module not found: Can't resolve 'react-native-reanimated'
  2 | Object.defineProperty(exports, "__esModule", { value: true });
  3 | exports.useCellTranslate = void 0;
> 4 | var react_native_reanimated_1 = require("react-native-reanimated");
    |                                ^
  5 | var animatedValueContext_1 = require("../context/animatedValueContext");
  6 | var refContext_1 = require("../context/refContext");
  7 | var procs_1 = require("../procs");
./node_modules/react-native-youtube-iframe/dist/WebView.web.js:1:202
Module not found: Can't resolve 'react-native-web-webview'
> 1 | Object.defineProperty(exports,"__esModule",{value:true});Object.defineProperty(exports,"WebView",{enumerable:true,get:function get(){return _reactNativeWebWebview.WebView;}});var _reactNativeWebWebview=require("react-native-web-webview");
    |                                                                                                                                                                                                          ^
./node_modules/@openspacelabs/react-native-zoomable-view/src/ReactNativeZoomableView.tsx 39:2
Module parse failed: Unexpected token (39:2)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders`enter code here`
|   originalPageX: null,
|   originalPageY: null,
> } as ReactNativeZoomableViewState;
|
| class ReactNativeZoomableView extends Component<
Error from chokidar (C:): Error: EBUSY: resource busy or locked, lstat 'C:hiberfil.sys

How to leave space on either side of Navbar MUI

I am creating a nav bar in MUI.
I want the navbar to have space on either side, for example
enter image description here

Stackoverflow also have a navbar where there is space on either side.
This is my code

import * as React from 'react';
import AppBar from '@mui/material/AppBar';
import Box from '@mui/material/Box';
import Toolbar from '@mui/material/Toolbar';
import Typography from '@mui/material/Typography';
import IconButton from '@mui/material/IconButton';
import MenuIcon from '@mui/icons-material/Menu';
import AccountCircle from '@mui/icons-material/AccountCircle';
import MenuItem from '@mui/material/MenuItem';
import Menu from '@mui/material/Menu';
import { bgcolor } from '@mui/system';

export default function MenuAppBar() {
  const [auth, setAuth] = React.useState(true);
  const [anchorEl, setAnchorEl] = React.useState(null);

  const handleChange = (event) => {
    setAuth(event.target.checked);
  };

  const handleMenu = (event) => {
    setAnchorEl(event.currentTarget);
  };

  const handleClose = () => {
    setAnchorEl(null);
  };

  return (
    <Box sx={{ flexGrow: 1 }}>
      <AppBar sx={{ bgcolor : "brown", borderBottom : "3px solid #eceff1" }} position="absolute" elevation={0}>
        <Toolbar variant="dense">
          <IconButton
            size="large"
            edge="start"
            color="inherit"
            aria-label="menu"
            sx={{ mr: 2, color : "black"}}
          >
            <MenuIcon />
          </IconButton>
          {auth && (
            <div>
              <IconButton
                size="large"
                aria-label="account of current user"
                aria-controls="menu-appbar"
                aria-haspopup="true"
                onClick={handleMenu}
                color="inherit"
                sx={{ flexGrow: 1, color : "black" }}
              >
                <AccountCircle />
              </IconButton>
              <Menu
                id="menu-appbar"
                anchorEl={anchorEl}
                anchorOrigin={{
                  vertical: 'top',
                  horizontal: 'right',
                }}
                keepMounted
                transformOrigin={{
                  vertical: 'top',
                  horizontal: 'right',
                }}
                open={Boolean(anchorEl)}
                onClose={handleClose}
              >
                <MenuItem onClick={handleClose}>Profile</MenuItem>
                <MenuItem onClick={handleClose}>My account</MenuItem>
              </Menu>
            </div>
          )}
        </Toolbar>
      </AppBar>
      <Toolbar/>
    </Box>
  );
}

This is just some boiler plate code taken from MUI that I have customised very little.
I will eventually hook this navbar up to use the React Router.

How to do a popup coming from right

I’ve been trying to create a modal popup for several days now but I can’t find any solution that really works.
I would like the modal popup to come from the right like a page in the settings on iOS without blocking the scroll. I specify “without blocking the scroll” because I already tried with a modal popup in absolute or fixed position but it doesn’t have the right height.
For those who don’t see what I would like to achieve, here is an image that might help you understand:

Image that can help

Thanks to all those who will take the time to answer me.
Sorry I can’t give you a piece of code, but I’m stuck.

Angular 10 pagination with inner html content

I am working on angular project where I need to implement pagination or carousal type functionality on inner html content.

https://portal.growthemr.com/website?bid=1274&lpid=26053
I have a above page where we are injecting services dynamically on api call and the template for service is also dynamic. My requirement is to implement pagination on it but with inner html conent as I need to put those services in the template. But somehow below approach is not working.

I have tried ngx pagination but I cannot use it as I want pagination for content which will be injected as html

The approach I tried but it is giving error $(..)pagination is not a fucntion
index.html

<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="https://pagination.js.org/dist/2.1.4/pagination.min.js"></script>
<link rel="stylesheet" href="https://pagination.js.org/dist/2.1.4/pagination.css"/>

Component.ts

$('#list').pagination({ // you call the plugin
  dataSource: json.Product, // pass all the data
  pageSize: 2, // put how many items per page you want
  callback: function(data, pagination) {
      // data will be chunk of your data (json.Product) per page
      // that you need to display
      var wrapper = $('#list .wrapper').empty();
      $.each(data, function (i, f) {
         $('#list .wrapper').append('<ul><li>Key1: ' + f.Key1 + '</li></ul>');
      });
    }
   });

Clicked drop down menu

When I click menu text that should toggle the menuContent the first time, it works as it shows the menuContent which is what is meant to be shown. However, after it shows it does not hide so the display = block does not go back to display = none.

I tried using a show value but it did not work so I used display = block instead in an if statement.

(By the way: menu = button that toggles text and menuContent = text that should be shown or hidden)

This is the JavaScript:

menu.addEventListener('click', menuClick, false);
menuContent.style.display = 'none'

function menuClick() {
    menuContent.classList.toggle('show');
    if (menuContent.style.display = 'none') {
        menuContent.style.display = 'block'
    } else {
        menuContent.style.display = 'none'
    }
}

So the first part of the if statement worked but not the else part.

How do I fix this?

how to call ajax function from aspx in “website Project” using javascript

I’m calling the ajax function using javascript in website project and the webmethod aspx page is running on CodeFile="NewPLPage.aspx.cs" and when I run the NewPLPage.aspx page I’m getting the following error

Error is :

Uncaught TypeError: Cannot read properties of undefined (reading ‘0’)

Uncaught TypeError: Cannot read properties of undefined (reading ‘0’)

website project example pic

website project example pic

I’m not sure where I did the mistake in the code

this my aspx code “NewPLPage.aspx” :

<figure class="highcharts-figure">
                                <div id="container"></div>
                            </figure>

javascript code :

$(document).ready(function () {

 linedata();

}

function linedata() {
    //var param = "Line";
    var param = { Terms: $('#portperfgrphtab6M').text() };
    $.ajax({
        type: "POST",
        contentType: "application/json; charset=utf-8",
        data: JSON.stringify(param),
        url: "NewPLPage.aspx/GetLineChartData",
        dataType: "json",

        success: function (Result) {
            Result = Result.d;
            var data = [];
            for (var i in Result) {
                //var serie = new Array(Result[i].Names, Result[i].Values, Result[i].Dummy);
                var serie = new Array(Result[i].Date, Result[i].Niftyperform, Result[i].Portfolioperform);
                data.push(serie);
            }

            DreawLineChart(data);

            $(".highcharts-credits")[0].innerHTML = "";
            $(".highcharts-button-symbol").hide();
        },
        error: function (Result) {
            alert("Something Went Wrong !");
        }
    });
}

/*Inter link of "linedata()"*/
function DreawLineChart(series) {

    Highcharts.chart('container', {
        chart: {
            type: 'line'
        },
        title: {
            text: 'Performance Graph'
        },
        //subtitle: {
        //    text: 'Source: WorldClimate.com'
        //},

        xAxis: {
            //categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
            //    'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']

            categories: [series[0][0], series[1][0], series[2][0], series[3][0], series[4][0], series[5][0]] // Getting error : Uncaught TypeError: Cannot read properties of undefined (reading '0')

        },
        yAxis: {
            title: {
                text: ''
            },
            //labels: {
            //    formatter: function () {
            //        return this.value + '°';
            //    }
            //}
        },
        tooltip: {
            crosshairs: true,
            shared: true
        },
        plotOptions: {
            line: {
                marker: {
                    radius: 4,
                    lineColor: '#666666',
                    lineWidth: 1,
                }
            }
        },
        series: [{
            name: 'NiftyPerform',
            marker: {
                symbol: 'diamond'
            },
            //data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, {
            //    y: 26.5,
            //    marker: {
            //        symbol: 'url(https://www.highcharts.com/samples/graphics/sun.png)'
            //    }
            //}, 23.3, 18.3, 13.9, 9.6]

            data: [series[0][1], series[1][1], series[2][1], series[3][1], series[4][1], series[5][1]]

        }, {
            name: 'PortfolioPerform',
            marker: {
                symbol: 'diamond'
            },
            //data: [{
            //    y: 3.9,
            //    marker: {
            //        symbol: 'url(https://www.highcharts.com/samples/graphics/snow.png)'
            //    }
            //}, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8]
            data: [series[0][2], series[1][2], series[2][2], series[3][2], series[4][2], series[5][2]]
        }]
    });
}

this is NewPlPage.cs page code :

[WebMethod]
    public static List<Performgraph> GetLineChartData(string Terms)
    {

        //string Terms
        //string Terms = "";
        DataTable dt = new DataTable(); //null;
                                        //List<object> chartData = new List<object>();
                                        //List<string> reports = new List<string>();
        List<string> starttime = new List<string>();
        List<Performgraph> performgraphs = new List<Performgraph>();
  GetPerformgraphapp getPerformgraphapp = GraphData(); // Getting service data without any error


        if (Terms == "6M")
            dt = getPerformgraphapp.M6.ConvertToDataSet("Graph6M").Tables[0];
        else if (Terms == "1Y")
            dt = getPerformgraphapp.YR1.ConvertToDataSet("Graph1Y").Tables[0];
        else if (Terms == "2Y")
            dt = getPerformgraphapp.YR2.ConvertToDataSet("Graph2Y").Tables[0];
        else if (Terms == "3Y")
            dt = getPerformgraphapp.YR3.ConvertToDataSet("Graph3Y").Tables[0];
        else if (Terms == "5Y")
            dt = getPerformgraphapp.YR5.ConvertToDataSet("Graph5Y").Tables[0];


        if (dt.Rows.Count > 0 && dt != null)
        {

            ////Insert Label for columns in First position.
            //reports.Insert(0, "LineChart");
            //reports.Add("NiftyPerform");
            //reports.Add("PortfolioPerform");

            ////Add the columns Array to the Chart Array.
            //chartData.Add(reports.ToArray());

            starttime = (from p in dt.AsEnumerable()
                         select p.Field<string>("DATE")).ToList();

            string yyMMM = "";
            foreach (string datetime in starttime)
            {


                List<object> niftyperform = (from p in dt.AsEnumerable()
                                             where p.Field<string>("DATE") == datetime
                                             select p.Field<double>("niftyperform")).Cast<object>().ToList();


                //Should not use or convert the string data
                //List<object> totals = (from p in dt.AsEnumerable()
                //                       where p.Field<string>("DATE") == datetime
                //                       select Convert.ToString(p.Field<double>("portfolioperform"))).Cast<object>().ToList();

                List<object> portfolioperform = (from p in dt.AsEnumerable()
                                                 where p.Field<string>("DATE") == datetime
                                                 select p.Field<double>("portfolioperform")).Cast<object>().ToList();


                yyMMM = Convert.ToDateTime(datetime).ToString("yyMMM");
                //string[] yymmm = Convert.ToDateTime(datetime).GetDateTimeFormats();


                //totals.Insert(0, Convert.ToDouble(niftyperform[0]));
                //totals.Insert(0, yyMMM.ToUpper().ToString());
                //chartData.Add(portfolioperform.ToArray());

                performgraphs.Add(new Performgraph
                {
                    Date = yyMMM.ToUpper().ToString(),
                    Niftyperform = Convert.ToDouble(niftyperform[0]),
                    Portfolioperform = Convert.ToDouble(portfolioperform[0])
                });

            }

            //return chartData;
        }
        else
        {
            //Page page = (Page)HttpContext.Current.Handler;
            //Control myDiv = (Control)page.FindControl("pfperformchart");
        }

        return performgraphs;
    }

Class :

    public class Performgraph
    {
        public string Date { get; set; }
        public double Niftyperform { get; set; }
        public double Portfolioperform { get; set; }
    }

Give the best suggestion to resolve this error

I’m new to ajax call and webmethod concepts.

How to include the function (inside the array object) in the DOM element through the for of loop in Javascript

I am trying to show the countdown timer function in the browser display of item card element.
I have created the array of objects with key value pairs in it. I have count down timer function included in the array as well, I have managed to show the timer in one item card (picture attached) but struggling to find out how can I show that timer function in all item cards.
codes are here:–

let products = {
    data: [   
       { 
        productName: "Orange",
        catagory: "Fruits",
        price: "5 / kg",
        image: "orange1.jpg",
        desc: "Freshly Picked Oranges",
        timer: setInterval('updateTimer()', 1000)
      },
      { 
        productName: "Apple",
        catagory: "Fruits",
        price: "4 / kg",
        image: "apple.jpg",
        desc: "Freshly Picked Apple",
        timer: setInterval('updateTimer()', 1000)
      },
      { 
        productName: "Pear",
        catagory: "Fruits",
        price: "6 / kg",
        image: "pear1.jpg",
        desc: "Freshly Picked Pear",
      },
      { 
        productName: "Banana",
        catagory: "Fruits",
        price: "4 / kg",
        image: "banana1.jpg",
        desc: "Freshly Picked Banana",
      }
]
};


    for (let i of products.data) {
  
  let card = document.createElement("div");

 
  card.classList.add("card", i.catagory, "hide");
 
  let imgContainer = document.createElement("div");

  imgContainer.classList.add("image-container");
 
  let image = document.createElement("img");
  image.setAttribute("src", i.image);
  imgContainer.appendChild(image);
  card.appendChild(imgContainer);
 
  let container = document.createElement("div");
  container.classList.add("container");
  
  let name = document.createElement("h4");
  name.classList.add("product-name");
  name.innerText = i.productName.toUpperCase();
  container.appendChild(name);
  
  let desc = document.createElement("h5");
  desc.innerText = i.desc;
  container.appendChild(desc);
 
  let price = document.createElement("h4");
  price.innerText ="£" + i.price;
  container.appendChild(price);
  
  let timer = document.createElement("h3");
  timer.setAttribute("id", "timer");
  container.appendChild(timer);
  card.appendChild(container);
  document.getElementById("products").appendChild(card);
  
 }


  function updateTimer() {
  
  future = Date.parse("apr 28, 2022 15:05:00");
  now = new Date();
  diff = future - now;

  days = Math.floor(diff / (1000 * 60 * 60 * 24));
  hours = Math.floor(diff / (1000 * 60 * 60));
  mins = Math.floor(diff / (1000 * 60));
  secs = Math.floor(diff / 1000);

  d = days;
  h = hours - days * 24;
  m = mins - hours * 60;
  s = secs - mins * 60;

  document.getElementById("timer")
      .innerHTML =
      '<div>' + d + '<span>Days</span></div>' +
      '<div>' + h + '<span>Hrs</span></div>' +
      '<div>' + m + '<span>Mins</span></div>' +
      '<div>' + s + '<span>Secs</span></div>';
      
  if (diff < 0) {
    clearInterval(setInterval('updateTimer()', 1000));
    document.getElementById("timer")
      innerHTML = `<h4 style="color:red" class="expired">sorry, this item has expired!</h4>`;
  }
}
<body>
    <div class="wraper">
        <div id="search-container">
            <input type="search" name="" id="search-input" placeholder="Search...">
            <button id="search">Search</button>
        </div>
        <div id="buttons">
            <button class="button-value" onclick="filterProduct('all')">All</button>
            <button class="button-value" onclick="filterProduct('Fruits')">Fruits</button>
            <button class="button-value" onclick="filterProduct('Vegetable')">Vegetable</button>
            <button class="button-value" onclick="filterProduct('Dairy')">Dairy</button>
            <button class="button-value" onclick="filterProduct('Bakery')">Bakery</button>
        </div>
        <div id="products"></div>
        <!-- <div id="timer">0</div> -->
        
    
    </div>
    
    <script src="script.js"></script>
</body>

picture attached