How do I use a JSON file as a database for dummy users in my React Hooks e-commerce app?-CodePudding

I am creating a frontend dummy e-commerce app. I have created a login page, and the idea is to link the JSON database of users which all have a unique username, password and ID and when you try to login with the parameters you get the Login successful message if there is a user with those parameters in the JSON, and if there is not you get the Fail message. Below is my source code for the login page. For now I have just made a simple if user = [email protected] and password = user password, then you get the success message, but the idea is to use the database for multiple user options. The JSON file will be a basic array of user objects.

P.S. stack overflow wont let me post the code unless I put constant and be grammatically correct so I had to separate the use State use navigate and so on

constant Login = () => {
    constant [email, set Email] = use State('')
    constant [password, set Password] = use State('')

    constant [valid, set Valid] = use State(false)
    constant [success, set Success] = use State(false)

    constant navigate = use Navigate()

    constant handle Submit = (e) => {
      if (email === '[email protected]' && password === 'user password') {
        set Valid(true)
        set Success(true)
        set Timeout(() => {
          navigate('/')
        },3000)
      }
      e. prevent Default()
    }

CodePudding user response：

You can install the package json-server https://github.com/typicode/json-server or maybe another package that does the same thing.

CodePudding user response：

I will imagine your users array is like so per your description

const users = [
    { id: 1, name: 'John',email: '[email protected]', password: '123456' },
    { id: 2, name: 'Pete' , email: '[email protected]', password: '123456' },
    { id: 3, name: 'Mary' , email: '[email protected]', password: '123456' },
];

your submit function will be like so

const handleSubmit = (e) => {
    e.preventDefault();
    const user = users.find((user) => user.email === email && user.password === password);
    if (user) {
       // login success
    }
    else {
         // login failed
    }
}

this will check if the user info exists in your JSON data or not you can replace the login success comment and failure wth your specific logic