Category: javascript

I keep getting this weird error in my React that says

Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

Check the render method of `ContactTemplate`.

I tried to remove each of the import to see where the error is, but nothing works.

My ContactTemplate.jsx:

import React from 'react';
import { Container } from '~/components/interface/Container';
import PreviewBar from '~/components/PreviewBar';
import HeroFull from '~/components/HeroFull/HeroFull';
import { Wrapper, Columns, Paragraph, BigText } from './ContactTemplate.styles';
import { Link } from '~/components/interface/Link';

const ContactTemplate = ({ preview }) => {
  const data = [
    {
      name: 'Name 1',
      job: 'Bestuursrechts',
      phone: '+31 (0) 612345678',
      email: 'Email',
      link: 'https://www.linkedin.com',
    },
    {
      name: 'Name 2',
      job: 'Intellectuele eigendom en contractenrecht',
      phone: '+31 (0) 612345678',
      email: 'email',
      link: 'https://www.linkedin.com',
    },
  ];

  return (
    <>
      <Wrapper>
        {preview && <PreviewBar />}
        <HeroFull
          title="Contact"
          intro="We offer ...."
        />
      </Wrapper>
      <Container>
        <Columns>
          {data.map(item => (
            <div>
              <BigText>{item.name}</BigText>
              <Paragraph>{item.job}</Paragraph>
              <Paragraph>{item.phone}</Paragraph>
              <Paragraph>{item.email}</Paragraph>
              <Link>{item.link}</Link>
            </div>
          ))}
        </Columns>
      </Container>
    </>
  );
};

export default ContactTemplate;

Could someone help me out with this please?
If there are more files needed I’ll add them on request.

In fullstackopen course in Part 4 I have encountered thing I dont understand.

https://fullstackopen.com/en/part4/user_administration#references-across-collections

How is it possible that object is created without the key name?

const passwordHash = await bcrypt.hash('sekret', 10)

const user = new User({ username: 'root', passwordHash })

User schema:

const userSchema = new mongoose.Schema({
  username: String,
  name: String,
  passwordHash: String,
  notes: [
    {
      type: mongoose.Schema.Types.ObjectId,
      ref: 'Note'
    }
  ],
})

I would imagine this should be done as below:

const passwordHash = await bcrypt.hash('sekret', 10)

const user = new User({ username: 'root', passwordHash: passwordHash })

I have an hidden icon and button next to it. Button click pop-ups modal with a form. On form post success, I have to show the icon of the selected row.

HTML

<td>
    <i class="fa fa-paperclip label-attachment" aria-hidden="true"></i>
    <button
        type="button"
        class="btn btn-primary btn-upload-file"
        data-toggle="modal"
        data-target="#pDataModal">
    <i class="fas fa-file"></i> Add File
    </button>
</td>

JS

$(document).on('submit', '#file_form', function (e) {
    e.preventDefault();
    ...

    $.ajax({
        ...
        success: function(response) {
            let parsedResponse = JSON.parse(response);
            if (parsedResponse['success']) {;
                $('i.fa.fa-paperclip.label-attachment').css('display', 'block');
                $('#pDataModal').modal('toggle');
            }
       }
    });
});

Now it is showing all the icons.

I need to display icon of the row where button is clicked.

I have found a few reg expressions and I don’t understand exactly. Can Anyone explain it to me the difference?

const analyzeStrength = (value) => {
            const repeatRegex = new RegExp(/(b(?:([A-Za-z0-9])(?!2{3}))+b)/);
            const strongRegex = new RegExp("^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[!@#$%^&*])(?=.{10,})");
            const mediumRegex = new RegExp("^(((?=.*[a-z])(?=.*[A-Z]))|((?=.*[a-z])(?=.*[0-9]))|((?=.*[A-Z])(?=.*[0-9])))(?=.{8,})");
 
            console.log(value, repeatRegex.test(value));
            if( !repeatRegex.test(value)){
                notSuitablePwd('No repeated numbers or characters');
            }else if( strongRegex.test(value)){
                obj.style.color = 'green';
                obj.innerHTML = 'String Password';
                obj.classList.remove('green', 'orange', 'red');
                obj.classList.add('green');
            }else if( mediumRegex.test(value)){
                obj.style.color = 'orange';
                obj.innerHTML = 'Medium Strength';
                obj.classList.remove('green', 'orange', 'red');
                obj.classList.add('orange');
            }else{
                notSuitablePwd('Not suitable for Password policy');
            }
            
            obj.style.display = 'block';
        };

My question is that strongRegex & mediumRegex is double-quoted like a string.

When I double-quoted repeatRegex. I am getting octal escape sequence error.

Can anyone tell me how to double-quoted repeatRegex? or at least some link to refer to?

i am trying to create a pattern that accept everything without word characters (a-z or A-Z) in angular.

  phone: new FormControl(null, [
    Validators.required,
    Validators.pattern("^-?[0-9]\d*(\.\d{1,2})?$"),
  ]),

i try this patter but not work fine because my goal is:

pattern must accept :

()*#%&#@64582 (example 1)
3796592#$#@$%^&$&/ (exapmle 2)
34242+5334?@^#$#%4242 (example 3)

That mean everything without (a-z or A-Z)

Pattern must not accept :

$%$@#423URVB 
t3653$^%#&#%&

Any idea ?

I encrypt a text in Java and want to decrypt in Javascript and vice versa, my Java code looks like this

Cipher c = Cipher.getInstance("AES/GCM/NoPadding");
SecretKeySpec k = new SecretKeySpec(this.key.getBytes(), "AES");
c.init(Cipher.ENCRYPT_MODE, k);
        
byte[] encryptedData = c.doFinal(this.value.getBytes());
byte[] iv = c.getIV();
        
sb.append(new String(Base64.getEncoder().encode(iv)));
sb.append(';');
sb.append(new String(Base64.getEncoder().encode(encryptedData)));
// send sb.toString() to the other end

I tried node-forge and elliptic for decryption in Nodejs, in node-forge I have an error complaining about tag which I don’t have, can someone provide a solution in Nodejs.

I want to close current window or tab using Javascript or jquery. I tried on Microsoft Edge browser.
I used the code window.close() but it is not working.
Please help me in fixing the above issue.

Thanks and regards
Sampat

Component return contains below code in that Autocomplete which is wrapped inside Controller of react hook form. Validate function is written to validate Autocomplete field should not be blank object.

<form onSubmit={onSubmit}>
<Controller
          control={control}
          name="details"
          rules={{
            validate: (value) => {
              if (
                (value &&
                  Object.keys(value).length === 0 &&
                  Object.getPrototypeOf(value) === Object.prototype) ||
                value === null
              ) {
                return "Please Select Details";
              }
            },
          }}
          render={({ field: { onChange, value } }) => (
            <Autocomplete
              onChange={(e, options) => onChange(options)}
              value={value?.email}
              isOptionEqualToValue={(option, value) =>
                option.email === value.email
              }
              options={
               [{email: '[email protected]'}, {email: '[email protected]'}, {email: '[email protected]'}]
              }
              getOptionLabel={(option) => option.email || ""}
              defaultValue={{email: '[email protected]'}}
              renderInput={(params) => (
                <TextField
                  {...params}
                  error={Boolean(errors?.details)}
                  helperText={errors?.details?.message}
                />
              )}
            />
          )}
        />
</form>

React hook form onSubmit:

const onSubmit = handleSubmit((data) => {
       console.log(data)
    }

How to avoid Overlapping of random numbers? On clicking button click me! , It will generate random numbers but there are some numbers which are overlapping how to avoid this…and how to rotate the
circle I tried to rotate the circle using moz webkit animation but it didn’t work for me.. Please answer How to do that?

const circle = document.querySelector(".circle");
const addNumBtn = document.querySelector('#addNumBtn');
// we set the width of the circle element in JS and pass
// it to CSS using a css variable and the root element
const circleWidth = 650;
document.documentElement.style.setProperty('--circleWidth', `${circleWidth}px`);

// NOTE: '~~' -> is quicker form of writing Math.floor() 
// runs faster on most browsers.

function randomPos(min, max) {
  return ~~(Math.random() * (max - min + 1) + min)
}

// return a random value between 1 and 50
function randomValue(){
  return ~~(Math.random() * 50) + 1;
}

function randomColor() {
  let r = ~~(Math.random() * 255) + 1;
  let g = ~~(Math.random() * 255) + 1;
  let b = ~~(Math.random() * 255) + 1;
  return `rgba(${r},${g},${b})`
}

function randomSize() {
  let size = ~~(Math.random() * 30) + 8;
  return `${size}px`
}

// add a helper function to find the center of the 
// circle and calculate distance to the edge of circle
// x and y are the randomly generated points
// cx, cy are center of circle x and y repsectively
// rad is circle radius
function pointInCircle(x, y, cx, cy, rad) {
  const distancesquared = (x - cx) * (x - cx) + (y - cy) * (y - cy);
  return distancesquared <= rad * rad;
}

// you can remove valArray array if you do not want the 50 numbers to not be repeated
const valArray = [];

function randNum() {
  // add a counter
  let count = 1;
  // while loop to check if the counter has reached the target 50
  while (count <= 50) {
    // set the randomly generated val
    let val = randomValue();
    // random size = string with px added
    let randSize = randomSize();
    // random size = the exact number => typeof number 
    let posSize = randSize.split('px')[0];
    // an array to hold our randomly positioned number values
    // uses helper function randonPos
    // pass in the 1 and the circle width minus the font size
    let ran = [randomPos(1, circleWidth - posSize), randomPos(1, circleWidth - posSize)];
    // conditional to check bounds of circle using helper function
    // we pass in the ran array, center points and radius
    // we add buffers to accommodate for the font size
    // you can remove !valArray.includes(val) if you do not want the 50 numbers to not be repeated
    if (pointInCircle(ran[0], ran[1], circleWidth/2-posSize, circleWidth/2-posSize, circleWidth / 2 - posSize) && !valArray.includes(val)) {
      // you can remove valArray.push(val); if you do not want the 50 numbers to not be repeated
      valArray.push(val);
      // if the conditional returns true, 
      // create the element, style and append
      let randnum = document.createElement("p");
      randnum.classList.add('numStyle');
      randnum.style.color = randomColor();
      randnum.style.fontSize = randSize;
      randnum.textContent = val;
      randnum.style.position = 'absolute';
      randnum.style.top = `${ran[0]}px`;
      randnum.style.left = `${ran[1]}px`;
      circle.append(randnum);
      // iterate the counter
      count++;
    }
  }
}

addNumBtn.addEventListener('click', randNum)

html {
  --circle-width: 300px;
}

.circle {  
  aspect-ratio: 1;
  width: var(--circleWidth);
  background-color: black;
  border-radius: 50%;
  position: relative;
  overflow: hidden;
  padding: .5rem;
  -moz-animation: spinoffPulse 1s infinite linear;
-webkit-animation: spinoffPulse 1s infinite linear;
  
}

@-moz-keyframes spinoffPulse {
    0% { -moz-transform:rotate(0deg); }
    100% { -moz-transform:rotate(360deg);  }
}
@-webkit-keyframes spinoffPulse {
    0% { -webkit-transform:rotate(0deg); }
    100% { -webkit-transform:rotate(360deg); }
}


#addNumBtn {
  position: absolute;
  top: 0;
  left: 0;
}

.numStyle {
  font-family: "roboto", sans-serif;
}

<div id="container"></div>
<div class="circle">
</div>
<button id="addNumBtn">Click Me!</button>

I am trying to stack text over another but cannot for the life of me figure out how to do this. In the picture it has the text ‘Replay’ overlaid one another 4 times to create this 3d effect but I cannot figure out how to recreate this in react-native. This is my code so far 3d text

import React, { useState, useRef } from 'react';
import { StatusBar } from 'expo-status-bar';
import { TouchableWithoutFeedback, StyleSheet, Text, View, TextInput, TouchableOpacity, Keyboard } from 'react-native';
import * as Font from "expo-font";
import AppLoading from 'expo-app-loading';


const fetchFonts = async () => {

    return Font.loadAsync({
        ShareTechMono: require("../assets/fonts/ShareTechMono-Regular.ttf"),
        Pacifico: require("../assets/fonts/Pacifico-Regular.ttf"),
      });
}; 


export default function Landing() {
    const [email, setEmail] = useState('');
    const [password, setPassword] = useState('');
    const ref_input2 = useRef();


    const [fontLoaded, setFontLoaded] = useState(false);
    if (!fontLoaded) {
      return (
        <AppLoading
          startAsync={fetchFonts}
          onFinish={() => setFontLoaded(true)}
          onError={err => console.log(err)}
        />
      );
    }


    return (
        <TouchableWithoutFeedback onPress={() => Keyboard.dismiss()}>
            <View style={styles.container}>
                <StatusBar style='auto' />
                
                <View styles = {styles.uppercontainer}>
                    
                        <Text style={styles.header1}>
                            Replay
                        </Text>
                        
                        <Text style={styles.header2}>
                            Replay
                        </Text>
                        <Text style={styles.header3}>
                            Replay
                        </Text>
                        <Text style={styles.header4}>
                            Replay
                        </Text>
                    

                    <Text style = {styles.slogan}>--slogan--</Text> 
                </View>
                

                <View style= {styles.lowercontainer}>
                    <Text style = {styles.terms}>By signing up for Replay, you agree to our Terms of Service.</Text>   
                    {/* terms of service will need to probably be a hyperlink to that, needs to be styled? */}
                

                    <TouchableOpacity style={styles.create_account}>
                        <Text style={styles.createText}>Create Account</Text>
                    </TouchableOpacity>


                    <TouchableOpacity>
                        <Text style={styles.sign_in}>Sign In</Text>
                    </TouchableOpacity>
                </View>
                

            </View>
        </TouchableWithoutFeedback>
    );
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#9B2226',
        alignItems: 'center',
        //flexDirection: 'column',
        //justifyContent: 'space-around',
        //justifyContent: 'center',
        
    },
    uppercontainer: {
        alignItems: 'center',
        //position: 'absolute',
        flex: 1,
        justifyContent: 'flex-start',
        marginTop: 100,
    },


    header1: {
        fontSize: 64,
        fontWeight: 'bold',
        fontFamily: 'Pacifico',         
        color: '#EE9B00',       //orange
        //top: 10,
        //position: 'absolute',
    },

    header2: {
        fontSize: 64,
        fontWeight: 'bold',
        fontFamily: 'Pacifico', 
        color: '#E9D8A6',
       
        
    },

    header3: {
        fontSize: 64,
        fontWeight: 'bold',
        fontFamily: 'Pacifico', 
        color: '#94D2BD',
      
        
    },

    header4: {
        fontSize: 64,
        fontWeight: 'bold',
        fontFamily: 'Pacifico', 
        color: '#0A9396',       //blue
        
       
    },

    

    lowercontainer: {
        alignItems: 'center',
        position: 'absolute',
        flex: 1,
        justifyContent: 'center',
    },

    slogan: {
        color:'#E9D8A6',
        fontFamily: 'ShareTechMono', 
        fontSize: 20,
        marginBottom: 300,

    },

    inputView: {
        backgroundColor: "#FFC0CB",
        borderRadius: 30,
        width: "70%",
        height: 45,
        marginBottom: 20,
        alignItems: "center",
    },

    textInput: {
        height: 50,
        flex: 1,
    },

    forgot_button: {
        height: 30,
        marginBottom: 0,
    },

    sign_up_button: {
        height: 30,
        marginBottom: 30,
    },
     
    create_account: {
        width: 295,
        borderRadius: 50,
        height: 50,
        alignItems: "center",
        justifyContent: "center",
        marginTop: 30,
        backgroundColor: "#E9D8A6",
        borderWidth: 3,
        marginBottom: 10,

    },

    terms: {
        marginTop: 500,
        fontFamily: 'ShareTechMono',
        color: '#E9D8A6',

    },

    sign_in: {
        fontFamily: 'ShareTechMono', 
        fontSize: 24,
        color: '#E9D8A6',
        fontWeight: "bold",
        

    },

    createText: {
        fontFamily: 'ShareTechMono', 
        fontSize: 24,
        fontWeight: "bold",
    },
  });

What my screen looks like as of now

I’ve got 2 arrays:

const array_1 = ["a", "b", "c"]
const array_2 = [["c", {animal: "dog"}], ["e", {animal: "cat"}], ["b", {animal: "mouse"}],["d", {animal: "frog"}], ["a", {animal: "cow"}]]

Now I want to have this output

const array_final = [["a", {animal: "cow"}], ["b", {animal: "mouse"}], ["c", {animal: "dog"}], ["e", {animal: "cat"}], ["d", {animal: "frog"}]  ]

So what shall I do in order to sort array of arrays with the array_1 (only with the entries that occurs in both, entries with “e” or “d” might be in any order)

I have front-end with React and Node.js API.
In my Node.js I have simple route:

//get file
router.post("/download", (req, res) => {
 
  return res.download(req.body.path);
});

I pass the path to my file directly from front-end and I return it with res.download().

In the fron-end, I have a button with this function:

 onClick={async () => {
                      axios({
                        method: "post",
                        url: `${apiAddress}/project/download`,
                        header: {
                          Authorization:
                            "Basic " + localStorage.getItem("token"),
                          "Access-Control-Allow-Origin": "*",
                        },
                        //responseType: "blob",
                        data: {
                          path: `D:\evgeni\project-system\projects\${props.projectId}\offer\${props.data[0]}`,
                        },
                      })
                        .then((res) => {
                          console.log(res.data);
                        })
                        .catch((err) => console.log(err));
                    }}

With my data property I am passing the path to the folder (it is correct, don’t look into props I put there). Now in the .then() I receive my res.data.

Here is what I get when I console.log() it:

the file data by itself. If I use “js-file-download” package and make it like this:

fileDownload(res.data, `${name}.doc`);

It is working absolutely fine. Here is the problem – I have different types of files:

All of them are available with their full names in the backend (req.body.path can extract the full name from there + even the extension .doc for example). How I can send from backend to front-end file name or file format so I could be able to pass it for downloading ? Is it possible or are there any better ideas (even using blob which by the way is figuring out the format)?

I’m building an app that consists of public and private route.

The private route is as below:
Sign in (starting screen) –> (user signed in) –> Main Stack Screens (Home, Country, Communities, etc.)

The public route is as below:
Sign in (starting screen) –> (user not signed in) –> Main Stack Screens (Home, Country, Communities, etc.) with limited functions and content display to the user

In public route, I’m trying to add a login icon in the header of the Main Stack Screens, so users can be redirected back to the Auth flow and log in or sign up at any point of time when they wish to.

Here is my code for AuthStackNavigator.js:

import React from "react";
import { createStackNavigator } from "@react-navigation/stack";
import SignInScreen from "../screen/authentication/SignInScreen";
import SignUpScreen from "../screen/authentication/SignUpScreen";
import SignUpSuccessScreen from "../screen/authentication/SignUpSuccessScreen";
import PasswordResetScreen from "../screen/authentication/PasswordResetScreen";

const Stack = createStackNavigator();

const AuthStackNavigator = () => {
  return (
    <Stack.Navigator
      initialRouteName="Sign In"
      screenOptions={{ headerShown: false }}
    >
      <Stack.Screen name="Sign In" component={SignInScreen} />
      <Stack.Screen name="Sign Up" component={SignUpScreen} />
      <Stack.Screen name="Sign Up Success" component={SignUpSuccessScreen} />
      <Stack.Screen name="Password Reset" component={PasswordResetScreen} />}
    </Stack.Navigator>
  );
};

export default AuthStackNavigator;

Here for MainNavigator.js:

import React, { useContext } from "react";
import { Platform, StyleSheet } from "react-native";
import { createStackNavigator } from "@react-navigation/stack";
import CountryScreen from "../screen/CountryScreen";
import CommunitiesScreen from "../screen/CommunitiesScreen";
import CommunityCreateScreen from "../screen/authorized/CommunityCreateScreen";
import CommunityHomeScreen from "../screen/CommunityHomeScreen";
import PostCreateScreen from "../screen/authorized/PostCreateScreen";
import CommentPostScreen from "../screen/authorized/CommentPostScreen";
import SearchBar from "../component/SearchBar";
import { generalconfig } from "../helper/generalconfig";
import { stylesconfig } from "../helper/stylesconfig";
import { AuthContext } from "../src/context/AuthContext";
import CustomProfileImg from "../component/CustomProfileImg";
import DefaultProfileIcon from "../component/DefaultProfileIcon";
import { Entypo } from "react-native-vector-icons";
import LoginIcon from "../component/LoginIcon";

const MainNavigator = () => {
  const Stack = createStackNavigator();
  const platform = Platform.OS;

  const { width } = generalconfig.device;
  const headerImageContainer = stylesconfig.global.headerImageContainer;
  const { common, ios, aos } = stylesconfig.navigatorHeader;

  const { profileImg, token } = useContext(AuthContext);

  return (
    <Stack.Navigator>
      <Stack.Screen
        name="Search Country"
        component={CountryScreen}
        options={{
          title: "Search",
          headerStyle: {
            backgroundColor: common.backgroundColor,
          },
          headerTitleAlign: "left",
          headerTintColor: common.color,
          headerTitleStyle: {
            fontFamily: platform === "ios" ? ios.fontFamily : aos.fontFamily,
            fontWeight: platform === "ios" ? ios.fontWeight : aos.fontWeight,
            fontSize: platform === "ios" ? ios.fontSize : aos.fontSize,
          },
          headerRight: () =>
            profileImg ? (
              <CustomProfileImg
                activeOpacity={1.0}
                onPress={() => {}}
                src={{ uri: profileImg }}
                style={headerImageContainer}
              />
            ) : (
              <DefaultProfileIcon
                activeOpacity={1.0}
                onPress={() => {}}
                iconSize={55}
                iconPosition={{ height: 65, marginRight: 11 }}
              />
            ),
        }}
      />
      <Stack.Screen
        name="Communities"
        component={CommunitiesScreen}
        options={{
          headerStyle: {
            backgroundColor: common.backgroundColor,
          },
          headerTintColor: common.color,
          headerTitleStyle: {
            fontFamily: platform === "ios" ? ios.fontFamily : aos.fontFamily,
            fontWeight: platform === "ios" ? ios.fontWeight : aos.fontWeight,
            fontSize: platform === "ios" ? ios.fontSize : aos.fontSize,
          },
          headerBackTitle: " ",
          headerBackImage: () => (
            <Entypo
              name="controller-fast-backward"
              size={23}
              style={{ marginLeft: width - 376 }}
              color={common.color}
            />
          ),
          headerRight: () => (token ? <LoginIcon /> : null),
        }}
      />
      <Stack.Screen
        name="Create Community"
        component={CommunityCreateScreen}
        options={{
          headerTitle: "Create a Community",
        }}
      />
      <Stack.Screen name="Community Home" component={CommunityHomeScreen} />
      <Stack.Screen name="Create Post" component={PostCreateScreen} />
      <Stack.Screen name="Comment Post" component={CommentPostScreen} />
    </Stack.Navigator>
  );
};

const styles = StyleSheet.create({});

export default MainNavigator;

LoginIcon.js (component)

import React from "react";
import { TouchableOpacity } from "react-native";
import { stylesconfig } from "../helper/stylesconfig";
import { MaterialCommunityIcons } from "react-native-vector-icons";
import AuthStackNavigator from "../navigator/AuthStackNavigator";

const LoginIcon = () => {
  const { common } = stylesconfig.navigatorHeader;

  return (
    <TouchableOpacity
      onPress={() => {
        <NavigationContainer>
          <AuthStackNavigator />
        </NavigationContainer>;
      }}
    >
      <MaterialCommunityIcons
        name="login"
        size={23}
        color={common.color}
        style={{ marginRight: 15 }}
      />
    </TouchableOpacity>
  );
};

export default LoginIcon;

SignInScreen.js (partial code of the link navigating to Country Screen when it’s pressed)

      <CustomButtonLink
        custBtnLinkName={browseAroundLabel}
        style={[styles.spacing_Browse, styles.align]}
        onNavigate={() => {
          navigation.navigate(MainNavigator, { screen: "Search Country" });
        }}
        onNavigate={() => <MainNavigator />}
      />

CustomButtonLink.js (component)

const CustomButtonLink = ({ custBtnLinkName, style, onNavigate }) => {
  return (
    <TouchableOpacity style={style} onPress={onNavigate}>
      <Text
        style={[
          stylesconfig.global.gtext,
          generalconfig.platform.os === "ios"
            ? stylesconfig.ios.text
            : stylesconfig.aos.text,
        ]}
      >
        {custBtnLinkName}
      </Text>
    </TouchableOpacity>
  );
};

So my questions are:

1. How do I direct the user to the public route (Country Screen) if user is not authenticated?
2. Once user is directed to the public route (say Country Screen), how do I redirect him back to the AuthStackNavigator (Sign In screen) when he clicks the login icon?

I’m quite new to React Native so deeply appreciate it if anyone can help. Thanks!

if i use @foreach ($outlets as $item) the #uptransdateModal changed from 4 to 11

here my code https://github.com/zieele/git-laundry

index.blade.php :

@foreach ($items as $item)
    @include('paket.update')
@endforeach

update.blade.php :

<div id="update-modal-{{ $item->getKey() }}"
    class="flex z-50 bg-black bg-opacity-30 fixed justify-center items-center w-screen h-screen transform -translate-y-20 lg:-translate-x-64 xl:-translate-x-96">
    <form action="{{ route('outlet.update', $item->getKey()) }}" method="post" class="bg-white w-96 flex flex-col rounded-xl text-gray-600 p-4">
        @csrf
        @method('PATCH')
        <div class="flex items-center justify-between mb-4">
            <span class="font-bold text-2xl">Ubah Data {{strtok( $item->nama_paket , " ")}}</span>
            <button id="update-close-{{ $item->getKey() }}" type="button" class="text-xl rounded-full h-8 w-8 transform hover:rotate-90 duration-300"><i class="fas fa-times"></i></button>
        </div>

        <div>
            <label class="font-semibold text-2xl text-gray-600" for="outlet">Outlet</label>
            <select name="outlet" id="outlet" class="mb-4 mt-1 outline-none shadow-md w-full bg-blue-50 rounded-lg px-3 py-2 appearance-none">
                    {{-- HEREEEEEEEEEEEEEEEEEEEEEEEEEE --}}
                    {{-- @foreach ($outlets as $item)
                        <option value="">{{ $item->nama }}</option>
                    @endforeach --}}
            </select>
    
            <label class="font-semibold text-2xl text-gray-600" for="jenis">Jenis</label>
            <select name="jenis" id="jenis" class="mb-4 mt-1 outline-none shadow-md w-full bg-blue-50 rounded-lg px-3 py-2 appearance-none">
                <option  
                    @if ($item->jenis == 'kiloan')
                        selected
                    @endif
                value="kiloan">Kiloan</option>
                <option  
                    @if ($item->jenis == 'selimut')
                        selected
                    @endif
                value="selimut">Selimut</option>
                <option  
                    @if ($item->jenis == 'bed_cover')
                        selected
                    @endif
                value="bed_cover">Bed Cover</option>
                <option  
                    @if ($item->jenis == 'kaos')
                        selected
                    @endif
                value="kaos">Kaos</option>
                <option  
                    @if ($item->jenis == 'lain')
                        selected
                    @endif
                value="lain">Lain Lain</option>
            </select>

            <label class="font-semibold text-lg text-gray-600" for="nama_paket">Nama Paket</label>
            <input class="mb-4 mt-1 outline-none shadow-md focus:shadow-xl duration-300 transform focus:-translate-y-1 w-full bg-blue-50 rounded-lg px-3 py-2" type="text" name="nama_paket" id="nama_paket" autocomplete="off" required placeholder="Tulis Nama Paket" value="{{ $item->nama_paket }}">
    
            <label class="font-semibold text-lg text-gray-600" for="harga">Harga</label>
            <input class="mb-4 mt-1 outline-none shadow-md focus:shadow-xl duration-300 transform focus:-translate-y-1 w-full bg-blue-50 rounded-lg px-3 py-2" type="year" name="harga" id="harga" autocomplete="off" required placeholder="Tulis Harga" value="{{ $item->harga }}"  onkeypress="return num(event)">
        </div>

        <div class="flex justify-end items-center mt-2">
            <button class="hover:bg-gray-200 duration-100 py-2 px-4 rounded-lg font-semibold mr-2" id="update-close-{{ $item->getKey() }}-btn" type="button">cancel</button>
            <button class="bg-green-400 hover:bg-green-300 duration-100 py-2 px-4 text-white rounded-lg font-semibold" type="submit">Ubah</button>
        </div>
    </form>
</div>

@push('script')
    <script>
        window.addEventListener('DOMContentLoaded', () =>{
            const body = document.querySelector('body')
            const updateModal{{ $item->getKey() }} = document.querySelector('#update-modal-{{ $item->getKey() }}')
            const updateClose{{ $item->getKey() }} = document.querySelector('#update-close-{{ $item->getKey() }}')
            const updateCloseBtn{{ $item->getKey() }} = document.querySelector('#update-close-{{ $item->getKey() }}-btn')
            const updateBtn{{ $item->getKey() }} = document.querySelector('#update-btn-{{ $item->getKey() }}')

            const updateModalToggle = () => {
                body.classList.toggle('overflow-y-hidden')
                updateModal{{ $item->getKey() }}.classList.toggle('hidden')
                updateModal{{ $item->getKey() }}.classList.toggle('flex')
            }

            updateCloseBtn{{ $item->getKey() }}.addEventListener('click', updateModalToggle)
            updateClose{{ $item->getKey() }}.addEventListener('click', updateModalToggle)
            updateBtn{{ $item->getKey() }}.addEventListener('click', updateModalToggle)
        })
    </script>
@endpush

the controller :

public function index()
{
    return view('outlet.index', [
        'title' => 'Daftar Outlet',
        'items' => Outlet::latest()->paginate(8)
    ]);
}

I was making a mini project out of html and jquery (btw i am still a student so my knowledge in programming is not so much). while i was programming i got an error saying unexpected end of input i thought it was a syntax error so i checked my code but when i checked it there was no error i was hoping you guys can help me fix this. I have put my code below (jquery an html respectively)
Thank you!

var data = "";
const arr = [];
$(document).ready(function() {
    $("button").click(function(){
        var subjects = [];
        $.each($("input[name='subject']:checked"), function(){            
        subjects.push($(this).val());
        
        var skills = [];
        $.each($("input[name='skill']:checked"), function(){            
        skills.push($(this).val());
   });
        //alert("My chosen subjects are: " + subjects.join(", "));
        //alert("My chosen skills are: " + skills.join(", "));
        var email = $("#email").val();
        var password = $("#password").val();
        var dob = $("#dob").val();
        var gender = $("#gender").val();
        var address = $("#address").val();
        var city = $("#city").val();
        //var subjects = [];
        console.log("This is the email:", email);
        console.log("This is the password:", password);
        console.log("This is the date of birth:", dob);
        console.log("This is the gender:",  gender);
        console.log("This is the address:",  address);
        console.log("This/These is/are the subject/s:",  subjects)
        console.log("This/There is/are the subject/s:", skills)
        data = "Email: " + email + ", " + "Password: " + password + ", " + "Date Of Birth: " + dob + ", " + "Gender: " + gender + ", " + "Address: " + address + ", " + "City: " + city + ", " + "Subjects: " + subjects.join(", ") + ", " + "Skills: " + skills.join(", ");
        arr.push(data);
        console.log(arr);
    });
});

 <form>
    <label>Email:</label><br>
      <input id="email" type="email" required><br>
      <label>Date Of Birth:</label><br>
      <input id="dob" type="date" required><br>
      <label>Gender:</label><br>
      <select id="gender" required>
        <option>Male</option>
        <option>Female</option>
        <option>other</option>
      </select><br>
      <label>Address:</label><br/>
      <input id="address" type="text" required><br/>
      <label>City:</label><br>
      <input id="city" type="text" required><br> 
    <label>Subject/s</label><br>
    <label><input type="checkbox" value="Math" name="subject"> Math</label>
    <label><input type="checkbox" value="Science" name="subject"> Science</label>
    <label><input type="checkbox" value="SST" name="subject"> SST</label>
    <label><input type="checkbox" value="English" name="subject"> English</label>
    <label><input type="checkbox" value="Computer Science" name="subject"> Computer Science</label>        
    <label><input type="checkbox" value="Kannada" name="subject"> Kannada</label><br>
    <label><input type="checkbox" value="Hindi" name="subject"> Hindi</label><br>
    <label>Skill/s</label><BR>
    <label><input type="checkbox" value="Math" name="skill"> Drawing/Doodling</label>
    <label><input type="checkbox" value="Science" name="skill"> Instrument Playing</label>
    <label><input type="checkbox" value="SST" name="skill"> Dance and/or Music</label>
    <label><input type="checkbox" value="English" name="skill"> sports (any)</label>
    <label><input type="checkbox" value="Computer Science" name="skill"> Computer Science</label>        
    <label><input type="checkbox" value="Kannada" name="skill"> Kannada</label>
    <label><input type="checkbox" value="Hindi" name="skill"> Hindi</label><br>
    <label>Password:</label><br>
    <input type="password" id="password"><br><br>
    <button type="button" value="submit">Submit</button>  
</form>