hiteshchoudhary / chai-aur-react Goto Github PK

on updating the currency type in currency options our UI does not show us the change currency type

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

https://github.com/hiteshchoudhary/chai-aur-react/blob/651285bff5badfe7ab31fc9f18d2a6b97fc37949/12MegaBlog/src/pages/AllPosts.jsx#L7C1-L12C7

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

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
});

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])
}

• Required "setFrom" instead of "setAmount" for "onCurrencyChange".
• Required "to" instead of "from" for "selectCurrency".

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.

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?

This account scope issue not resolved even after adding a web platform on appwrite console..Need help to resolve this..

#31 So,basically the setTo and the setFrom in the App.jsx are not correct

BEFORE EDIT

AFTER EDIT

// JUST WANT PERMISSION TO PULL

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.

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.

1. 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

2. Dynamic Currency Code:
   You can dynamically change the currency code to get rates for different currencies. For example:
   ${currency} instead of usd

3. 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 ❓

• Check for Updates: Ensure you are using the latest version of the API.
• Network Issues: Verify that there are no network issues preventing access to the API.
• Rate Limits: Check if you have exceeded any rate limits set by the API provider.
• API Documentation: Refer to the official API documentation for the latest updates and detailed information.

Originally posted by @AliGates915 in GitHub 💬

The old api is outdated so used https://cdn.jsdelivr.net/npm/@fawazahmed0/currency-api@latest/v1/currencies/eur.json this new Api

appwriteService.getPosts is not a function

useEffect(() => {
appwriteService.getPosts().then((posts) => {
if (posts) {
setPosts(posts.documents)
}
})
}, [])

getting error -> appwriteService.getPosts()

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.

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

"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

ok

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!

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.

Make sure counter value never goes in negative.

here

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

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;
}
}

let url = https://cdn.jsdelivr.net/gh/fawazahmed0/currency-api@1/latest/currencies/${currency}.json

In pass generator project when u click on number checkbox their is a chance where u didn't get any number in your password because their is low probability of number they are just 0-9 .

Wants to add a feature to send generated password to users WhatsApp account with description.
Below I attached the image how it will look.

Blog application / Allpages.jsx

Here , appwriteService .getPosts() is called outside the useEffect block , that will rerun on all the rerenders of the component , instead it should be placed inside the useEffect to prevent uneccessary requests to the server .