Anish Neupane Comments - Answer Overflow

Anish Neupane

Explore posts from servers

RRailway SSolidJS

Posts Comments

SSolidJS

•Created by Anish Neupane on 3/2/2024 in #support

solidjs createResource doesn't show error when there was an error i.e 401 Invalid credentials

Thank you for your explanation 😊, I will use axios instead of fetch.

9 replies

SSolidJS

•Created by Anish Neupane on 3/2/2024 in #support

solidjs createResource doesn't show error when there was an error i.e 401 Invalid credentials

but

import { createSignal, createResource } from "solid-js";
import { render } from "solid-js/web";

const fetchUser = async (id) =>
  (await fetch(`https://swapi.dev/api/peopl/${id}/`)).json();

const App = () => {
  const [userId, setUserId] = createSignal();
  const [user] = createResource(userId, fetchUser);

  return (
    <>
      <input
        type="number"
        min="1"
        placeholder="Enter Numeric Id"
        onInput={(e) => setUserId(e.currentTarget.value)}
      />
      <span>{user.loading && "Loading..."}</span>
      <span>{user.error && "Error"}</span>
      <div>
        <pre>{JSON.stringify(user(), null, 2)}</pre>
      </div>
    </>
  );
};

render(App, document.getElementById("app"));

import { createSignal, createResource } from "solid-js";
import { render } from "solid-js/web";

const fetchUser = async (id) =>
  (await fetch(`https://swapi.dev/api/peopl/${id}/`)).json();

const App = () => {
  const [userId, setUserId] = createSignal();
  const [user] = createResource(userId, fetchUser);

  return (
    <>
      <input
        type="number"
        min="1"
        placeholder="Enter Numeric Id"
        onInput={(e) => setUserId(e.currentTarget.value)}
      />
      <span>{user.loading && "Loading..."}</span>
      <span>{user.error && "Error"}</span>
      <div>
        <pre>{JSON.stringify(user(), null, 2)}</pre>
      </div>
    </>
  );
};

render(App, document.getElementById("app"));

https://www.solidjs.com/tutorial/async_resources?solved show error it use fetch

9 replies

SSolidJS

•Created by Anish Neupane on 3/2/2024 in #support

solidjs createResource doesn't show error when there was an error i.e 401 Invalid credentials

import { createForm, SubmitHandler, zodForm } from '@modular-forms/solid'
import { A } from '@solidjs/router'
import { createEffect, createResource, createSignal, Show } from 'solid-js'
import { z } from 'zod'

import MyTitle from '../components/MyTitle'
import { useAuth } from '../context/Auth'
import { BACKEND_URL } from '../utils'

const loginSchema = z.object({
  email: z.string().email('Enter a valid email'),
  password: z.string().min(8, 'Enter a valid password')
})

export type LoginFormType = z.infer<typeof loginSchema>

const loginUser = async (values: LoginFormType) => {
  const response = await fetch(`${BACKEND_URL}/login-admin/`, {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json'
    },
    body: JSON.stringify(values, null, 4)
  })
  return response.json()
}

const Login = () => {
  const { login } = useAuth()

  const [loginValues, setLoginValues] = createSignal<LoginFormType | null>(null)

  const [data] = createResource(loginValues, loginUser)

  const [loginForm, { Form, Field }] = createForm<LoginFormType>({
    validate: zodForm(loginSchema),
    validateOn: 'touched',
    initialValues: {
      email: '',
      password: ''
    }
  })

  const handleSubmit: SubmitHandler<LoginFormType> = async values => {
    setLoginValues(values)
  }

  createEffect(() => {
    console.log(data(), 'data')
    console.log(data.error ? '1' : '2')
  })
  return (
    <>
      <MyTitle title='Login' />
      <div>
        <Form onSubmit={handleSubmit}>
          ..................
        </Form>
        <div>
          <A href='/forget-password'>Forget password?</A>
        </div>
      </div>
    </>
  )
}

export default Login

import { createForm, SubmitHandler, zodForm } from '@modular-forms/solid'
import { A } from '@solidjs/router'
import { createEffect, createResource, createSignal, Show } from 'solid-js'
import { z } from 'zod'

import MyTitle from '../components/MyTitle'
import { useAuth } from '../context/Auth'
import { BACKEND_URL } from '../utils'

const loginSchema = z.object({
  email: z.string().email('Enter a valid email'),
  password: z.string().min(8, 'Enter a valid password')
})

export type LoginFormType = z.infer<typeof loginSchema>

const loginUser = async (values: LoginFormType) => {
  const response = await fetch(`${BACKEND_URL}/login-admin/`, {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json'
    },
    body: JSON.stringify(values, null, 4)
  })
  return response.json()
}

const Login = () => {
  const { login } = useAuth()

  const [loginValues, setLoginValues] = createSignal<LoginFormType | null>(null)

  const [data] = createResource(loginValues, loginUser)

  const [loginForm, { Form, Field }] = createForm<LoginFormType>({
    validate: zodForm(loginSchema),
    validateOn: 'touched',
    initialValues: {
      email: '',
      password: ''
    }
  })

  const handleSubmit: SubmitHandler<LoginFormType> = async values => {
    setLoginValues(values)
  }

  createEffect(() => {
    console.log(data(), 'data')
    console.log(data.error ? '1' : '2')
  })
  return (
    <>
      <MyTitle title='Login' />
      <div>
        <Form onSubmit={handleSubmit}>
          ..................
        </Form>
        <div>
          <A href='/forget-password'>Forget password?</A>
        </div>
      </div>
    </>
  )
}

export default Login

9 replies

SSolidJS

•Created by Anish Neupane on 1/4/2024 in #support

Error while using useNavigate() or <Navigate />

Thank you for your support

28 replies

SSolidJS

•Created by Anish Neupane on 1/4/2024 in #support

Error while using useNavigate() or <Navigate />

So please review my code is this correct or not https://codesandbox.io/p/devbox/laughing-mcnulty-zz5ct3?file=%2Fsrc%2FApp.tsx%3A23%2C20

28 replies

SSolidJS

•Created by Anish Neupane on 1/4/2024 in #support

Error while using useNavigate() or <Navigate />

you said

<Route path='/'>
  <PrivateRoute />
</Route>

<Route path='/'>
  <PrivateRoute />
</Route>

but while using this syntax error occur and the error is provided through image above with your syntax and other is my syntax and also provide the codesandbox with my example

28 replies

SSolidJS

•Created by Anish Neupane on 1/4/2024 in #support

Error while using useNavigate() or <Navigate />

please check this also https://codesandbox.io/p/devbox/laughing-mcnulty-zz5ct3?file=%2Fsrc%2FApp.tsx%3A23%2C20

28 replies

SSolidJS

•Created by Anish Neupane on 1/4/2024 in #support

Error while using useNavigate() or <Navigate />

28 replies

SSolidJS

•Created by Anish Neupane on 1/4/2024 in #support

Error while using useNavigate() or <Navigate />

document link https://github.com/solidjs/solid-router#configure-your-routes

28 replies

SSolidJS

•Created by Anish Neupane on 1/4/2024 in #support

Error while using useNavigate() or <Navigate />

import { useNavigate } from '@solidjs/router'

import { useAuth } from '../context/Auth.tsx'

const PrivateRoute = props => {
  const { isLoggedIn } = useAuth()
  const navigate = useNavigate()

  if (!isLoggedIn) {
    navigate('/login', { replace: true })
  }

  return (
    <>
      <div>Private Router</div>
      {props.children}
    </>
  )
}

export default PrivateRoute

import { MetaProvider } from '@solidjs/meta'
import { Route, Router } from '@solidjs/router'
import { Component } from 'solid-js'

import { AuthProvider } from './context/Auth'
import Home from './pages'
import Login from './pages/Login'
import PrivateRoute from './routes'
import PublicRoute from './routes/PublicRoute'

const App: Component = () => {
  return (
    <AuthProvider>
      <MetaProvider>
        <Router>
          <Route component={PrivateRoute}>
            <Route path={'/'} component={Home} />
          </Route>
          <Route component={PublicRoute}>
            <Route path={'/login'} component={Login} />
          </Route>
        </Router>
      </MetaProvider>
    </AuthProvider>
  )
}

export default App

import { useNavigate } from '@solidjs/router'

import { useAuth } from '../context/Auth.tsx'

const PrivateRoute = props => {
  const { isLoggedIn } = useAuth()
  const navigate = useNavigate()

  if (!isLoggedIn) {
    navigate('/login', { replace: true })
  }

  return (
    <>
      <div>Private Router</div>
      {props.children}
    </>
  )
}

export default PrivateRoute

import { MetaProvider } from '@solidjs/meta'
import { Route, Router } from '@solidjs/router'
import { Component } from 'solid-js'

import { AuthProvider } from './context/Auth'
import Home from './pages'
import Login from './pages/Login'
import PrivateRoute from './routes'
import PublicRoute from './routes/PublicRoute'

const App: Component = () => {
  return (
    <AuthProvider>
      <MetaProvider>
        <Router>
          <Route component={PrivateRoute}>
            <Route path={'/'} component={Home} />
          </Route>
          <Route component={PublicRoute}>
            <Route path={'/login'} component={Login} />
          </Route>
        </Router>
      </MetaProvider>
    </AuthProvider>
  )
}

export default App

the problem is solved from above code but what will be props type ? const PrivateRoute = props =>

28 replies

SSolidJS

•Created by Anish Neupane on 1/4/2024 in #support

Error while using useNavigate() or <Navigate />

import { Route, useNavigate } from '@solidjs/router'
import { lazy } from 'solid-js'

import { useAuth } from '../context/Auth'

const Index = lazy(() => import('../pages'))

const PrivateRoute = () => {
  const { isLoggedIn } = useAuth()
  const navigate = useNavigate()

  if (!isLoggedIn) {
    navigate('/login', { replace: true })
  }

  return (
    <>
      <Route path='/' component={Index} />
    </>
  )
}

export default PrivateRoute

import { MetaProvider } from '@solidjs/meta'
import { Route, Router } from '@solidjs/router'
import { Component } from 'solid-js'

import { AuthProvider } from './context/Auth'
import Login from './pages/Login.tsx'
import PrivateRoute from './routes'

const App: Component = () => {
  return (
    <AuthProvider>
      <MetaProvider>
        <Router>
          <Route path='/' component={PrivateRoute} />
          <Route path={'login'} component={Login} />
        </Router>
      </MetaProvider>
    </AuthProvider>
  )
}

export default App

import { Route, useNavigate } from '@solidjs/router'
import { lazy } from 'solid-js'

import { useAuth } from '../context/Auth'

const Index = lazy(() => import('../pages'))

const PrivateRoute = () => {
  const { isLoggedIn } = useAuth()
  const navigate = useNavigate()

  if (!isLoggedIn) {
    navigate('/login', { replace: true })
  }

  return (
    <>
      <Route path='/' component={Index} />
    </>
  )
}

export default PrivateRoute

import { MetaProvider } from '@solidjs/meta'
import { Route, Router } from '@solidjs/router'
import { Component } from 'solid-js'

import { AuthProvider } from './context/Auth'
import Login from './pages/Login.tsx'
import PrivateRoute from './routes'

const App: Component = () => {
  return (
    <AuthProvider>
      <MetaProvider>
        <Router>
          <Route path='/' component={PrivateRoute} />
          <Route path={'login'} component={Login} />
        </Router>
      </MetaProvider>
    </AuthProvider>
  )
}

export default App

But now warning popup in browser i.e Unrecognized value. Skipped inserting {children: undefined, path: '/', component: ƒ}

28 replies

SSolidJS

•Created by Anish Neupane on 1/4/2024 in #support

Error while using useNavigate() or <Navigate />

By this cli npm create vite@latest my-app -- --template solid-ts

28 replies

SSolidJS

•Created by Anish Neupane on 1/4/2024 in #support

Error while using useNavigate() or <Navigate />

It's not a solid start it's solid with vite

28 replies

SSolidJS

•Created by Anish Neupane on 1/4/2024 in #support

Error while using useNavigate() or <Navigate />

const App: Component = () => {
  return (
    <AuthProvider>
      <MetaProvider>
        <Router>
          <Route path='/'>
            <PrivateRoute />
          </Route>
        </Router>
      </MetaProvider>
    </AuthProvider>
  )
}

but still same problem

28 replies

SSolidJS

•Created by Anish Neupane on 1/4/2024 in #support

Error while using useNavigate() or <Navigate />

change to this

28 replies

SSolidJS

•Created by Anish Neupane on 1/4/2024 in #support

Error while using useNavigate() or <Navigate />

"@solidjs/meta": "^0.29.3", "@solidjs/router": "^0.10.5", "solid-js": "^1.8.8",

28 replies

Gaming

Programming