hiteshchoudhary / chai-aur-react Goto Github PK
View Code? Open in Web Editor NEWchai aur react series on youtube
chai aur react series on youtube
Creator of currency-api has closed the repo and migrated it to exchange-api, as per their migration guide we have to update the endpoint:
From: https://cdn.jsdelivr.net/gh/fawazahmed0/currency-api@1/latest/currencies/${currency}.json
To: https://cdn.jsdelivr.net/npm/@fawazahmed0/currency-api@latest/v1/currencies/${currency}.json
Link for ref: Readme
appwriteService.getPosts is not a function
useEffect(() => {
appwriteService.getPosts().then((posts) => {
if (posts) {
setPosts(posts.documents)
}
})
}, [])
getting error -> appwriteService.getPosts()
ok
I want to fetch specific user's post but gotten issue in appwrites's query..
Here how I'm use the query to fetch the specific user's post...
async getPosts(userId){
console.log(userId);
try {
return await this.databases.listDocuments(
conf.appwriteDatabaseId,
conf.appwriteCollectionId,
[Query.equal('userId', userId)]
)
} catch (error) {
console.log("Appwrite::configservice::getPosts::error ", error);
return false;
}
}
"From Currency Type" box is showing the options of different currency but when we are selecting the option it is not changing it remain on USD option only
i have resolve this bug you can check it from here
https://github.com/parthh1112/React/tree/main/11CustomHookCurrencyConverter/src
when i add image and submit it shows bellow error
import React, { useCallback, useEffect } from 'react'
import { useForm } from 'react-hook-form'
import { Button, Input, Select, RTE } from '../index'
import databaseService from '../../appwrite/database'
import { useNavigate } from 'react-router-dom'
import { useSelector } from 'react-redux'
function PostForm({ post }) {
const { handleSubmit, register, watch, setValue, control, getValues } = useForm({
defaultValues: {
title: post?.title || "",
slug: post?.$id || '',
content: post?.content || '',
status: post?.status || 'active'
}
});
const navigate = useNavigate()
const userData = useSelector((state) => state.auth.userData)
const submit = async (data) => {
if (!post) {
const file = await databaseService.fileUpload(data.image[0]);
if (file) {
const fileId = file.$id;
data.featuredImage = fileId;
const dbPost = await databaseService.createPost({
...data,
userId: userData.$id,
});
if (dbPost) {
navigate(`/post/${dbPost.$id}`)
}
}
} else {
const file = data.image[0] ? await databaseService.fileUpload(data.image[0]) : null;
if (file) databaseService.deleteFile(post.featuredImage)
const dbPost = await databaseService.updatePost(post.$id, {
...data,
featuredImage: file ? file.$id : undefined,
});
if (dbPost) {
navigate(`/post/${dbPost.$id}`)
}
}
}
const slugTransform = useCallback((value) => {
if (value && typeof value === 'string') {
return value
.trim()
.toLowerCase()
.replace(/^[a-zA-Z\d\s]+/g, '-')
.replace(/\s/g, '-')
} else return ''
}, [])
useEffect(() => {
const subscription = watch((value, { name }) => {
if (name === 'title') {
setValue('slug', slugTransform(value.title), { shouldValidate: true })
}
})
return () => subscription.unsubscribe()
}, [watch, slugTransform, setValue])
return (
<form onSubmit={handleSubmit(submit)} className='flex flex-wrap'>
<div className="w-2/3 px-2">
<Input
label='Title: '
placeholder='Title'
className='mb-4'
{...register('title', {
required: true
})}
/>
<Input
label='Slug: '
placeholder="Slug"
className='mb-4'
{...register('slug', {
required: true
})}
onInput={e => {
setValue('slug', slugTransform(e.currentTarget.value), { shouldValidate: true })
}}
/>
<RTE label='Content: ' name='content' control={control} defaultValue={getValues('content')} />
</div>
<div className="w-1/3 px-2">
<Input
label='Featured Image: '
type='file'
className='mb-4'
accept='image/png, image/jpg, image/jpeg, image/gif'
{...register('image', { required: !post })}
/>
{post && (
<div className="w-full mb-4">
<img src={databaseService.filePreview(post.featuredImage)} alt={post.title} className='rounded-lg' />
</div>
)}
<Select
options={['active', 'inactive']}
label="Status"
className='mb-4'
{...register("status", { required: true })}
/>
<Button type='submit' bgColor={post ? 'bg-green-500' : undefined} className='w-full'>{post ? 'Update' : 'Submit'}</Button>
</div>
</form>
)
}
export default PostForm
my post is stored in appwrite's storage but i cannot see it on my website
when i click on all post
my console show me this
here is my github repo can you please check it for any error.
https://github.com/prince-sunsara/ReactJS-Learning/tree/main/12_react_appwrite
Hey @hiteshchoudhary,
I was going through the algorithm you used for the password generator project and found a minor bug there.
Even after I select numbers or characters, there is still a possibility that the password won't contain them as random indexes could be from the front only, even not the capital and small letters at the same time.
It could be fixed using a validation. Should I try to fix that?
when i do login and inside dashboard when i refresh page it gets automatically logout, we need to store redux login data on localstorage so that data will be persist even after refresh.
In authSlice.js
login: (state, action) => {
console.log(state , action)
state.status = true;
state.userData = action.payload.userData;
},
to
login: (state, action) => {
console.log(state , action)
state.status = true;
state.userData = action.payload;
}
as we are getting all the details in payload object their is no such key as userdata.
Dear Hitesh Choudhary Sir,
I hope this message finds you well.
I am writing to seek your assistance regarding an issue I am encountering with the MegaBlog code. When I run the code, it directly opens the login page. After logging in, I can upload an image without any problem. However, if I log out and then log in again with the same email and try to post, the following error appears in the console:
arduino
Copy code
PostForm.jsx:43 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading '$id')
at submit (PostForm.jsx:43:93)
at async react-hook-form.js?v=80acb06b:1557:7
I have also tried using your code, but the same problem persists.
Could you please provide guidance on how to resolve this issue? Any insights or suggestions would be greatly appreciated.
Thank you for your time and assistance.
Best regards,
[Your Name]
[Your Contact Information]
In todo project (located in 10todocontextLocal/src/App.jsx) location I've noticed an issue with the input fields of todo items. When editing and saving one todo item, the input fields of other todo items are unexpectedly cleared. This problem seems to come from how todos are updated in the updateTodo function within the App.jsx file. I would appreciate any assistance in resolving this issue. Thank you!
The Appwrite Package has been Updated to Version 15.0.0
this project was created at the Version 13.0.0
So there was a slight change in the Documentation
for 12MegaBlog/src/appwrite/auth.js
line 33
there will be a updation of the fucntion name
From
this.account.createEmailSession(email, password);
To
this.account.createEmailPasswordSession(email, password);
Correct URL Format:
Make sure you are using the correct URL format to access the API. The format should be:
https://cdn.jsdelivr.net/npm/@fawazahmed0/currency-api@latest/v1/currencies/usd.json
Dynamic Currency Code:
You can dynamically change the currency code to get rates for different currencies. For example:
${currency} instead of usd
Fallback Mechanism:
If the primary URL fails, use the fallback URL provided by the maintainer:
https://github.com/fawazahmed0/exchange-api
โ Now this API is working perfectly! You can change ${currency} instead of usd. ๐๐ฑ
โ Additional Troubleshooting Steps โ
Originally posted by @AliGates915 in GitHub ๐ฌ
in bg changer, there are only 4 colors still the code looks bulky and we need to manually do the copy-paste and change of color to different places instead, we can use component to shorten our code
Hi sir thank you so much for solving our point in each step
whatever i am bcz of your videos but sir i was stuck in mega project (slug )
when i was try to use ID.unique(), its trows an error msg please once you get 2 min time plz sir solve my small issue
thank you sir
### - Issue: Incorrect State Update on Currency Change
There is an issue with the component in the code where the onCurrencyChange prop is incorrectly updating the amount state instead of the currency state. This causes the amount to be updated instead of the selected currency when the currency is changed.
current code -
<InputBox
label="From"
amount={amount}
currencyOptions={options}
onCurrencyChange={(currency) => setAmount(amount)}
selectCurrency={from}
onAmountChange={(amount) => setAmount(amount)}
/>
The issue lies in the onCurrencyChange prop:
onCurrencyChange={(currency) => setAmount(amount)}
The onCurrencyChange prop should correctly update the currency state.
The corrected code should be -
<InputBox
label="From"
amount={amount}
currencyOptions={options}
onCurrencyChange={(currency) => setFrom(currency)}
selectCurrency={from}
onAmountChange={(amount) => setAmount(amount)}
/>
onChange={(e) => onAmountChange && e.target.value!=0 && onAmountChange(Number(e.target.value))}
To convert currency accurately multiply the amount by the exchange rate from the source currency currencyInfo[from] to the target currency currencyInfo[to].
const convert = () => {
setConvertedAmount( (amount * currencyInfo[from] ) * currencyInfo[to])
}
The old api is outdated so used https://cdn.jsdelivr.net/npm/@fawazahmed0/currency-api@latest/v1/currencies/eur.json this new Api
There is an error in the App.js file where the InputBox component's onCurrencyChange prop incorrectly uses setAmount instead of setFrom. This causes the amount to be set rather than updating the currency. This needs to be corrected to ensure the currency selection updates properly.
When the currency is changed in the "From" input, the setFrom state update function should be called to update the currency.
The setAmount state update function is called instead, which incorrectly updates the amount rather than the currency.
Here is the specific part of the code with the error and the proposed fix:
<InputBox
label="From"
amount={amount}
currencyOptions={options}
onCurrencyChange={(currency) => setFrom(currency)} // Corrected function
selectCurrency={from}
onAmountChange={(amount) => setAmount(amount)}
/>
<InputBox
label="To"
amount={convertedAmount}
currencyOptions={options}
onCurrencyChange={(currency) => setTo(currency)}
selectCurrency={to}
amountDisable
/>
changed selectCurrency : 'from' to 'to' in the second input box
In this functionality, when I click on the โ๏ธ button to edit the input field (e.g., changing "todo" to "todo1") and then click the ๐ button to save, the new input field value "todo1" is not being saved. After refreshing the page, the old input field value "todo" is still displayed instead of the updated value "todo1".
import { configureStore } from "@reduxjs/toolkit";
import { todoSlice } from "../features/todo/todoSlice"; //Change the import
export const store = configureStore({
reducer: todoSlice.reducer, // Use todoSlice.reducer as the reducer
});
https://cdn.jsdelivr.net/npm/@fawazahmed0/currency-api@latest/v1/currencies/usd.json ( use this API problem is resolved using)
Failed to load resource: the server responded with a status of 400 ()
cloud.appwrite.io/v1/account/sessions/email:1
Failed to load resource: the server responded with a status of 401 ()
cloud.appwrite.io/v1/account/sessions/email:1
Failed to load resource: the server responded with a status of 401 ()
cloud.appwrite.io/v1/account:1
Failed to load resource: the server responded with a status of 409 ()
2appwrite.js?v=cffb9ceb:854 Appwrite is using localStorage for session management. Increase your security by adding a custom domain as your API endpoint.
(anonymous) @ appwrite.js?v=cffb9ceb:854
Show 1 more frame
Show less
console.js:213 Appwrite is using localStorage for session management. Increase your security by adding a custom domain as your API endpoint.
https://cdn.jsdelivr.net/gh/fawazahmed0/currency-api@1/latest/currencies/${currency}.json
sir,
There is a bug in the 69th line in src < App.jsx
Actually, the line will be,
selectCurrency={to}
but mistakenly it was written by you like this,
selectCurrency={from}
after solving this, when we swap the values the currency on both sides will swap too.
note : There are strong chances that I might be wrong in my logic. so please guide me If I am wrong.
in our all-post-form we are not using useEffect, not using this hook web xhr request are in loop there is need to use the useeffect, as per my opinion.
#31 So,basically the setTo and the setFrom in the App.jsx are not correct
AFTER EDIT
// JUST WANT PERMISSION TO PULL
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.