Maybe https://nextjs.org/docs/app/api-reference/functions/use-router#userouter refresh() after the profile pic update is done?

Would you like to have a look at my code ?

router.refresh() can solve the problem. However please share how your component get the data for the image. Maybe an easy revalidateTag can also solve the problem

Yes please, I need a bit of help cause the code is so big now and I don't want to do something stupid.

Give me a moment I'll upload what I think it's related.

And I have the same issue when deleting the current profile image of the user. Normally it should fetch the placeholder image but I have to refresh in order to see it.

This is the component from where I have the options to upload/delete/save

components/user-profile/profile-image-editor.tsx
https://paste.ec/paste/orvdPOku#JyMCbOcdu1CpJMV16jQ5xbWv0HtviZsbUdl6PAkdd+y

And this is the code which fetches the data:
src/app/[locale]/my-profile/fetch-user-data.tsx
https://paste.ec/paste/klFUoBDL#+oqh7-c5vCp4Ut3hURv6uGrLaEZt4hhOnsPCa4aqnv3

And this is the client code of the page:
src/app/[locale]/my-profile/client.tsx
https://paste.ec/paste/hbpQTaAq#d6nRClxG7g67MZVIfdrSeEFl7IeFPGaPQGlllcn1T0S

And the server code:

// src/app/[locale]/my-profile/page.tsx

import React from 'react';
import MyProfileClientPage from './client';
import { fetchUserData } from './fetch-user-data';

const MyProfilePage = async () => {
  const userData = await fetchUserData();

  if (!userData) {
    console.error('Failed to fetch user data');
    return <div>Error: Failed to fetch user data</div>;
  }

  return <MyProfileClientPage initialProfileImageUrl={userData.profileImageUrl} {...userData} />;
};

export default MyProfilePage;

Currently what happens when I delete an image:
- The image in profile page component doesn't update unless reloading
- The image in the user profile button in the top navbar doesn't update unless reloading

Currently what happens when I upload and save an image:
- The image in profile page component updates correctly without reloading
- The image in the user profile button in the top navbar doesn't update unless reloading

I didn't look at the links yet, but is the navbar a client or server component?

The top navigation bar (the parent of the user button component which holds the profile image) is a client component.

So you just need to trigger a re-render then for that component?

I see. Do I need to trigger a re-render of the top navigation bar or just of the user profile button ?

Whatever holds the profile picture.

The latter.

And should the trigger be made in the upload image component ?

you sure about that? Maybe the "new" code won't be there and then you can rerender 1000 times, but there won't be an update

@Sun bear is the new data already there, when you uploaded a new image and it really just needs a rerender or is there also stale data?

Let me show you how it works

By default the user data looks like this, notice that one of the columns is empty.

The default_profile_image column holds the placeholder image which is the image the users see if they haven't uploaded any profile picture or if they deleted it.

This is the placeholder image you see in the column

So when I click on upload and I select a new image you'll see this

At this time the user data in the database is still the same unless I click on "Save"

After I click on save this happens:

And the user data in the database looks like this

As you can see now the column on the right holds the path to the image uploaded by the user (but the image in the user profile button in the top navigation bar doesn't update unless I reload the page).

yea, I just checked the code, that you shared. Thanks for sharing. It looks like you don't use a clientside fetching library... Use a clientfetching library like react query or swr to be able to revalidate and refetch this data clientside. I am using react query, so I can only talk about that: when clicking the save button, your query client would invalidate the clientside cache for the picture and because of the invalidation it would be refetched automatically (in your whole app) and the image will be change. So please use a clientside fetching library

I see, I will try doing that then, thank you very much for your suggestion 🙏🏻

I haven't checked the code the OP posted, but if the image has successfully been uploaded to the server and the component is pulling from that you just need to re-fetch it / change the source if it is a url update, and have the component re-render.

yea, that's what I told him as well. But inside a useEffect with dependencies of user is not a good way to have control over clientside data

Of course you wouldn't "re-render" unless the update was done to begin with.

Also I'm not sure how to disable editing / deleting for the placeholder image. Normally when the user clicks on the profile image, it sould simply look like this (the initial window)

Cause currently editing seems to be enabled for the placeholder image as well (which should not be allowed)

Handle it with logic. Know when a user has an uploaded photo or not, if not then by default that means a placeholder is there and disable the editing options for it.

I know that but Claude doesn't seem to know how to do it.

It does this instead

I'll keep trying to make it understand what I want.

I would disable the click for the modal, when the placeholder is used

What I want is for it to disable that edit interface and to just show the image like this

https://nextjs-forum.com/post/1261618478650228898#message-1261636332141412405
As you said, your app is pretty big, so you might not want to update everything to use rq or swr, but you should at least do it for this part, to have the expected functionalty

Like without the editing UI

where is the problem for just saying:

{!isDefaultPicture && <ActionButtons />}

?

I'll try to do that.

Do I need to add that in the profile image editor component ?

I tried to find the specific part in your code snippets, that you shared but wow there is so much code I couldn't find it directly 💀

I think it's in here @B33fb0n3

The code for the component cause that is where I have the UI and the editing stuff code 😁

I guess I found it: https://paste.ec/paste/orvdPOku#JyMCbOcdu1CpJMV16jQ5xbWv0HtviZsbUdl6PAkdd+y
Line 142. And then you can just do it like this: https://nextjs-forum.com/post/1261618478650228898#message-1261641062544441364

if you need to know if you using the default one or the one that a user has uploaded, you can either use a method, that is inside your head, or (what I would do) check if the path begins with user/

So I just need to paste the code on that line ?

142 ?

Even if it's the photo the user has uploaded, the only additional button they should see is the "Delete" one, no editing still.

The editing stuff should only be availabe during the uploading process.

Once an image has been uploaded and saved it should no longer be editable. If they want to edit the image they need to re-upload it pretty much.

yea, 142 in the code you shared: (see attached)

oh ok, then show them whenever the user should see them and hide them, when the user shouldn't be able to see them

Maybe you want to build 2 different forms for it and reuse only the components

I'll have to see. I'll try and implement this first 😁

@B33fb0n3 I have checked back with Claude in regards with your suggestion, however this procedure seems highly invasive, I'm uncomfortable with refactoring that much code.

I was looking for a more isolated solution.

Step 1 - 3 is required and just setup stuff (you only need to insert 1 or two lines) and Step 4 is skipable, because useQuery already exists. Step 6 is also unnessary, because you already have your mutations. You only want to change the fetching part

Okay I will try that, thank you very much. I just don't want to mess things up or something so the less code I need to modify the better (I barely got it to work the way it does 😁)

I followed the advice but I am getting lots of errors now, I'm trying to fix them.

Well unfortunately it looks like Claude cannot help me with this because even the hook it tells me to create gives lots of errors.

I'm going to have to find another way to do what I want.

I think I've found a simple solution, not sure how optimal it is but it worked.

And here is the result

As you can see even when deleting the photo it correctly updates to the placeholder.

However I need to check why on the profile page it doesn't correctly update with the placeholder after deleting the user photo.

@Catla What do you think about this solution ?

Is it similar to what you recommended ?

I am out because of 2. (https://discord.com/channels/752553802359505017/843997308616966145/1240659614144528394). If u would've followed the approach with react query (also for the future), I could help more

Okay, no worries. Thank you very much for your help 😁

If you're willing to show me step by step how to update my code to make it use react query I'm willing to try again, because I tried doing it with the help of Claude and there were errors it didn't know how to fix, so I don't think it knows how to implement what you said unfortunately.

I won't guide you step by step though (because of 4. https://discord.com/channels/752553802359505017/843997308616966145/1240659614144528394 helpers usually don't have enough time at hand). Generating huge programms and huge logical parts by AI is a pretty bad idea, because normaly it does not work like expected. And if you don't know what you are doing, you can't solve them. That happend to you now. And I guess that will happen in the future with this code part as well: https://nextjs-forum.com/post/1261618478650228898#message-1261690242499612772

I am willing to provide you the the important steps with code, that you need to integrate, to make it working with react query

Whatever you can help with, I'll try and make it work, with the help of AI (since I don't know how to code myself).

I think that if the instructions are explicit enough the AI can actually take care of the rest, but you have to give me steps in such a way that it can't assume things up, otherwise I will probably run into the same issues it did when I tried earlier.

First thing you need to do is to add your rQueryClientProvider with your queryclient in your Providers (first image). If you don't know what a Provider is, take a look here and integrate that first: https://vercel.com/guides/react-context-state-management-nextjs#rendering-third-party-context-providers-in-server-components

Next, change your fetching from useEffect to useQuery (second image). You can use your data like this (third image).

After you done that, you can invalidate your query, when the data in the background changed: (fouth image). You can call this function everywhere. It don't need to be used in useMutation.

Done.

And because nobody know how to use a library, they documented all steps, that you need to know (and I now listed) here: https://tanstack.com/query/latest/docs/framework/react/quick-start

Are these the correct steps to take ?

I provided you the steps that you need to take and also showed you the code that you need to add. So either trust me and integrate the code that I shared or trust you AI.

Please have a bit of patience with me, I'm not ignoring your advice. It's just that I'm confused about what I have to do, and I don't understand what those images mean because the code it's not from my project. That's why I've tried using Claude to see if it understands it but I guess it didn't.

I can't read code so to me the images look confusing. I'm trying my best to understand what I need to change in my own code but this is very difficult for me.

The reason I asked if those steps are correct was because I wanted to know if Claude correctly understood the steps you've suggested or not. That is because in my case I only have 2 options to implement this since I don't know how to code:

1. Do it with Claude
2. Have someone else show me exactly what I need to do

And since I don't understand how to apply the steps you wrote I have to count on Claude to understand them.

In the meantime I did try implementing React Query with Claude and I also managed to fix the errors I had during the process but the user data wouldn't fetch because of a 404 api error. I reverted everything back and I'll most likely use that emitter instead for now because that works, since I don't know how to implement what you said, but thank you for your help nevertheless.

It's completely fine, if my steps are to confusing for you and is also absolutly fine to ask for help, or to ask again, but verifying a human answer with an answer of an AI is for me absolutly disrespectful. The effort I put into my answer is completely nullified. I feel as if you are neither taking my advice seriously nor accepting it. And then I can save myself the trouble. I haven't expected that from you.

As I said: It's absolutely fine to ask for help and also to ask about things and principles that you don't yet understand. That's good, because it's the only way to learn. Of course, this assumes that you really want to learn something and don't just want to get the functionality done. But I'm not 100% sure what exactly you want

Just to make sure, that this is the stuff you want:

That is what I want. The reason I didn't ask more questions because you said you didn't had time to get into details, so I assumed you didn't had time for more questions. I can take it step by step if that is the case and as you where I get stuck if that's okay with you.

Thing is I already have a providers file, what do I need to modify in here ?

//components/providers.tsx

"use client";
import useUserSessionStore from "../utilities/zustand/authState";
import { useEffect } from "react";

interface SessionProviderProps {
  session: any;
  children: React.ReactNode;
}

export default function SessionProvider({
  session,
  children,
}: SessionProviderProps) {
  const { setUser } = useUserSessionStore();

  useEffect(() => {
    if (session?.user) {
      setUser(session.user);
    } else {
      setUser(null);
    }
  }, [session, setUser]);

  return <>{children}</>;
}

Do i need to add the entire code from the first image you provided or just those 3 lines ?

And also I don't know at which line to add the new code.

Cause the code in the first image, as in its structure looks different from how my providers file is structured.

For example, I don't have a function app () { line

//components/providers.tsx

"use client";
import useUserSessionStore from "../utilities/zustand/authState";
import { useEffect } from "react";
useQuery,
useMutation,
useQueryClient,
QueryClient,
QueryClientProvider,
} from '@tanstack/react-query'

const queryClient = new QueryClient()

interface SessionProviderProps {
  session: any;
  children: React.ReactNode;
}

export default function SessionProvider({
  session,
  children,
}: SessionProviderProps) {
  const { setUser } = useUserSessionStore();

  useEffect(() => {
    if (session?.user) {
      setUser(session.user);
    } else {
      setUser(null);
    }
  }, [session, setUser]);

  return <>{children}</>;
<QueryClientProvider client={queryClient}>
</QueryClientProvider>
}

Is this how it needs to look ?

I'm just going to ask... Outside of React and Next.JS how well versed are you with programming? What is your currently ability to develop with JavaScript outside of this?

Reason being... there are skills you should really focus on developing that are transferable no matter the language you use, library, or framework. Using AI as a clutch is a very bad thing. I would take @B33fb0n3's advice and if you're unable to follow the code then you really need to re-evaluate why that is.

I'm not a programmer.

Okay, so how are you handling all of this? I just get the impression you're either using AI or internet sources to mash together potentially "workable" code.

But I try my best to follow best practices across my project in terms of coding.

The only reason I brought this up is because if you're not aiming to be proficient in JavaScript and programming in general you're going to hit non-stop road blocks.

It's a combination of guides, tutorials, AI and help from other people when I get stuck.

How long have you been coding in JavaScript?

I think I started coding on this project a year ago or so, could be 2 years.

(the NextJS side of it I mean)

Okay, so are you able without the help of a guide make a website in JavaScript that access the backend without using React or Next.JS? Nothing crazy, but at least a site that can pull data from the backend and deliver to the front end.

When you wrote earlier you cannot read code that was a bit alarming.

I don't think so, I don't know how to code as I've said.

You should really do a full on JavaScript course and suppliment that with building projects as you go - not follow along projects but stuff based on concepts you've learned. If you're unable to do that and be good at problem solving this is going to be a long nightmare for you

It's been a long nightmare already 😁

It really sucks working like this.

I would suggest you put this on halt and really go and do a full JavaScript course and build a bunch of stuff with JS.

Lol it isn't giving up, it is admitting you're not equiped skillwise right now for this.

If you want to really learn something, you might want to invest 3 hours of full learning stuff. I recommend you using crash courses, as they teach you basics (not projects) and you can create more stuff in the future with these basics. I recommend you these two:

JavaScript Crash Course - Tutorial for Complete Beginners
https://youtu.be/XIOLqoPHCJ4

Asynchronous JavaScript Crash Course (pretty important if you ask me)
https://youtu.be/exBgWAIeIeg

Yes, take those course and then start building stuff. Don't get trapped in tutorial hell either, build build build.

Also going through roadblocks is normal and fine, this is how you learn and why debugging is an important skill set. Learn to research and problem solve. Programming isn't just about memorizing syntax, but being able to use the tools (JS, React, NEXT.JS) to build with.

Otherwise just keep trying then. Nobody here can force you to take a step back, just giving some advice that I think would help you in the long run. If your goal is just to make something but not really invest in yourself to learn to do it then at that point hiring someone is probably the better option or finding a pre-built solution.

I already got this far I'm not gonna put the project on hold now. I have to keep moving forward with the project one way or another. I don't have the time to learn how to code, neither do I want to learn how to code since I'm not looking for a programming career or programming as a hobby.

While I do appreciate your advice, for me it's either do it this way or give up, and I don't want to give up.

Alright, well best of luck either way. 2 Years and not being able to read code isn't a good thing, and I think it is extremely unfair to ask for help in this way from @B33fb0n3 if you have zero intent to learn to code.

I am completely on @Catla side. Building a big project without the knowledge on code reading and solution thinking is a big mistake.

You say, you don't have time to learn how to code, but you have the time to struggle with simple things? That not how it works and it would be absolutly unfair against any other helper (including me).

All I did was asking for some help, I got offered some advice which I appreciate, but which I'm not experienced enough to apply, and that's okay. I've already found an alternative solution to my issue.

I was just asking if that's a good alternative or not, he insisted on using his suggestions, I've tried doing so multiple times but I couldn't manage to. I was very transparent about it too, as you can see, I also didn't try to hide that I don't know how to write/read code. I don't see what's unfair about it personally. I haven't forced anyone to help me or make demands, I simply asked for some help, and when I couldn't implement what was suggested I simply explained why and asked more questions.

So is my fault for you guys not being able to help me, and it's unfair because I asked for help in the first place ?

You know, I helped some people too in the past, and I don't recall the last time I told them actually to stop what they're doing, learn a bunch of stuff they don't need to learn and on top of that complain about how it's their fault for not understanding my advice and how unfair it is that they asked for help in the first place.

Look, if you don't like the way I go about things that's fine, but telling me it's unfair I'm asking for help just because you don't like it that you have to go into more details for helping me than you're used to is just ridiculous. Nobody is forcing you to go into details if you don't want to.

Besides that, the way I go about my project is my decision, and I have my own reasons for it.

And the last thing I'd like to add is the following, and this is I think the most important thing I'd like to say:
- You both came into my thread with some suggestions, which I wasn't able to apply, because of my lack of experience/knowledge.
- I was transparent and explained what I'm having issues with, and asked for more help
- You started complaining about my lack of experience/knowledge
- You started blaming me for asking for help and call it unfair for EVERY HELPER in here.

This is not helping anyone, this is wasting everyone's time, including yours. You've not only failed to help me at all, you've caused me to lose hours of my time for nothing, and you've also started attacking me and criticising the way I work.


With due respect, this is one of the most awful experiences I've had so far on this server, and if this is the way you think you're helping people then I don't need any of your help whatsoever, I'm better off without it.

@Catla @B33fb0n3

If your goal is to bring benefits with the app in the future, then good luck with that.

In my opinion, it will be a very, very long and painful path, and the success of this future benefit is uncertain. I also think that someone who doesn't want to learn anything new will fail sooner or later.

Nevertheless: only the best for the future.

Of course, this is a help channel and also the advice we have given you so far is valid for the future and for all future projects. To stay in the context of the thread the following:
Perhaps this message will serve as a solution to the problem, because: https://github.com/B33fb0n3/rq-profile-picture

this message was written before your conclusion message (see attached the timestamp and also the GitHub repo commit time)

First of all, nobody came here to insult you or to demean you in any way, And regarding

I don't recall the last time I told them actually to stop what they're doing, learn a bunch of stuff they don't need to learn and on top of that complain about how it's their fault for not understanding my advice and how unfair it is that they asked for help in the first place.

what everybody means to say is that if you make use of a framework or system that requires manual coding then its a smart decision to learn how to code, this can be done in various ways such as courses, books, etc. And since NextJS is a framework that requires you to write javascript/typescript code its almost impossible to create a functioning website without having knowledge of those coding languages, which is why the suggestions to learn those coding languages were made and doing so doesnt mean you 'give up' or stop working on the project.

Again, nobody here meant to insult you in any way, we are all here to help you with your problems. which doesnt mean we are going to write your code for you, which to be honest is basicly what you want us to do. Some people are fine with that, most aren't (this is also why the suggestion was made to learn how to code)

Regarding your issue, there are multiple ways to fix it.
1. You could revalidate your path after updating the profile picture which even tho its not the most efficient way to do it it will work.
2. You could use react context for it, save the current profile pic in a state within the context and add an useEffect somewhere in your navbar to listen for changes in your state

//ProfilePcContext.jsx
import React, { createContext, useState } from 'react';

export const ProfilePicContext = createContext();

export const ProfilePicProvider = ({ children }) => {
    const [profilePic, setProfilePic] = useState('/default-profile-pic.jpg');

    return (
        <ProfilePicContext.Provider value={{ profilePic, setProfilePic }}>
            {children}
        </ProfilePicContext.Provider>
    );
};

//Navbar.jsx
const Navbar = () => {
    const { profilePic } = useContext(ProfilePicContext);

    useEffect(() => {
        console.log('Profile picture updated:', profilePic);
    }, [profilePic]);

    return (
        <nav>
            <img src={profilePic} alt="Profile" style={{ width: '50px', height: '50px', borderRadius: '50%' }} />
            <h1>My Application</h1>
        </nav>
    );
};

Since this thread has gone quite long without a conclusion, also with a title [1] showing the unwillingness to continue the thread further, I will now lock this thread and change the existing title to this AI-generated title.

I hope everyone here has figured out one thing or two from this thread that will help them avoid this kind of heated and unnecessarily long (100+ messages) threads in the future.

Thank you for your cooperation.

[1] For archival purposes, the title at the time of writing is CLOSED due to awful experience with the so called "helpers"