// actions/index.js
export const actions = {
  profile: {
    PROFILE_FETCHING: "PROFILE_FETCHING",
    PROFILE_FETCHED: "PROFILE_FETCHED",
    PROFILE_FETCH_ERROR: "PROFILE_FETCH_ERROR",
    PROFILE_UPDATED: "PROFILE_UPDATED",
    IMAGE_UPDATED: "IMAGE_UPDATED",
  },
};

// reducers/profileReducer.js
const initialState = {
  user: null,
  posts: [],
  loading: false,
  error: null,
};
 
const profileReducer = (state, action) => {
  switch (action.type) {
    case actions.profile.PROFILE_FETCHING:
      return { ...state, loading: true, error: null };
    case actions.profile.PROFILE_FETCHED:
      return {
        ...state,
        user: action.data.user,
        posts: action.data.posts,
        loading: false,
      };
    case actions.profile.PROFILE_FETCH_ERROR:
      return { ...state, error: action.error, loading: false };
    case actions.profile.PROFILE_UPDATED:
      return { ...state, user: action.data, loading: false };
    case actions.profile.IMAGE_UPDATED:
      return {
        ...state,
        user: { ...state.user, avatar: action.data.avatar },
        loading: false,
      };
    default:
      return state;
  }
};
 
export { initialState, profileReducer };

// context/ProfileContext.js
import React, { createContext, useContext, useReducer } from "react";
import { profileReducer, initialState } from "../reducers/profileReducer";
 
const ProfileContext = createContext();
 
export const ProfileProvider = ({ children }) => {
  const [state, dispatch] = useReducer(profileReducer, initialState);
 
  return (
    <ProfileContext.Provider value={{ state, dispatch }}>
      {children}
    </ProfileContext.Provider>
  );
};
 
export const useProfile = () => useContext(ProfileContext);

import { useEffect } from "react";
import { actions } from "../actions";
import { useProfile } from "../context/ProfileContext";
import { useAuth } from "../hooks/useAuth";
import useAxios from "../hooks/useAxios";
import ProfileInfo from "../components/Profile/ProfileInfo";
import Posts from "../components/Profile/MyPosts";
 
const ProfilePage = () => {
  const { state, dispatch } = useProfile();
  const { auth } = useAuth();
  const { api } = useAxios();
 
  useEffect(() => {
    dispatch({ type: actions.profile.PROFILE_FETCHING });
    const fetchProfile = async () => {
      try {
        const response = await api.get(`/profile/${auth.user.id}`);
        dispatch({
          type: actions.profile.PROFILE_FETCHED,
          data: response.data,
        });
      } catch (error) {
        dispatch({
          type: actions.profile.PROFILE_FETCH_ERROR,
          error: error.message,
        });
      }
    };
 
    fetchProfile();
  }, [auth.user.id, api]);
 
  if (state.loading) return <div>Loading...</div>;
  if (state.error) return <div>Error: {state.error}</div>;
 
  return (
    <div>
      <ProfileInfo />
      <Posts posts={state.posts} />
    </div>
  );
};
 
export default ProfilePage;

import { useRef } from "react";
import useAxios from "../../hooks/useAxios";
import useProfile from "../../hooks/useProfile";
import { actions } from "./../../actions/index";
 
const ProfileImage = () => {
  const { state, dispatch } = useProfile();
  const { api } = useAxios();
  const fileUploaderRef = useRef();
 
  const handleImageUpload = (event) => {
    event.preventDefault();
 
    fileUploaderRef.current.addEventListener("change", updateImageDisplay);
    fileUploaderRef.current.click();
  };
 
  const updateImageDisplay = async () => {
    try {
      const formData = new FormData();
      for (const file of fileUploaderRef.current.files) {
        formData.append("avatar", file);
      }
 
      const response = await api.post(
        `${import.meta.env.VITE_SERVER_BASE_URL}/profile/${
          state?.user?.id
        }/avatar`,
        formData
      );
      if (response.status === 200) {
        dispatch({
          type: actions.profile.IMAGE_UPDATED,
          data: response.data,
        });
      }
    } catch (err) {
      dispatch({
        type: actions.profile.DATA_FETCH_ERROR,
        error: err.message,
      });
    }
  };
 
  return (
    <div className="relative mb-8 max-h-[180px] max-w-[180px] rounded-full lg:mb-11 lg:max-h-[218px] lg:max-w-[218px]">
      <img
        className="max-w-full rounded-full"
        src={`${import.meta.env.VITE_SERVER_BASE_URL}/${state?.user?.avatar}`}
        alt={state?.user?.firstName}
      />
 
      <form id="form" encType="multipart/form-data">
        <button
          className="flex-center absolute bottom-4 right-4 h-7 w-7 rounded-full bg-black/50 hover:bg-black/80"
          onClick={handleImageUpload}
          type="submit"
        >
          <img src="./assets/icons/edit.svg" alt="Edit" />
        </button>
        <input id="file" type="file" ref={fileUploaderRef} hidden />
      </form>
    </div>
  );
};
 
export default ProfileImage;

import { useRef } from "react";
import useAxios from "../../hooks/useAxios";
import useProfile from "../../hooks/useProfile";
import { actions } from "./../../actions/index";

const ProfileImage = () => {
  const { state, dispatch } = useProfile();
  const { api } = useAxios();
  const fileUploaderRef = useRef();

const handleImageUpload = (event) => {
  event.preventDefault();
 
  fileUploaderRef.current.addEventListener("change", updateImageDisplay);
  fileUploaderRef.current.click();
};

const updateImageDisplay = async () => {
  try {
    const formData = new FormData();
    for (const file of fileUploaderRef.current.files) {
      formData.append("avatar", file);
    }
 
    const response = await api.post(
      `${import.meta.env.VITE_SERVER_BASE_URL}/profile/${
        state?.user?.id
      }/avatar`,
      formData
    );
    if (response.status === 200) {
      dispatch({
        type: actions.profile.IMAGE_UPDATED,
        data: response.data,
      });
    }
  } catch (err) {
    dispatch({
      type: actions.profile.DATA_FETCH_ERROR,
      error: err.message,
    });
  }
};

return (
  <div className="relative mb-8 max-h-[180px] max-w-[180px] rounded-full lg:mb-11 lg:max-h-[218px] lg:max-w-[218px]">
    <img
      className="max-w-full rounded-full"
      src={`${import.meta.env.VITE_SERVER_BASE_URL}/${state?.user?.avatar}`}
      alt={state?.user?.firstName}
    />
 
    <form id="form" encType="multipart/form-data">
      <button
        className="flex-center absolute bottom-4 right-4 h-7 w-7 rounded-full bg-black/50 hover:bg-black/80"
        onClick={handleImageUpload}
        type="submit"
      >
        <img src="./assets/icons/edit.svg" alt="Edit" />
      </button>
      <input id="file" type="file" ref={fileUploaderRef} hidden />
    </form>
  </div>
);

export default ProfileImage;

import { useState } from "react";
import { useProfile } from "../../context/ProfileContext";
import { actions } from "../../actions";
 
const Bio = () => {
  const { state, dispatch } = useProfile();
  const [editMode, setEditMode] = useState(false);
  const [bio, setBio] = useState(state.user?.bio);
 
  const handleBioSave = async () => {
    dispatch({ type: actions.profile.PROFILE_FETCHING });
 
    try {
      const response = await api.patch(`/profile/${state.user.id}`, { bio });
      dispatch({ type: actions.profile.PROFILE_UPDATED, data: response.data });
      setEditMode(false);
    } catch (error) {
      dispatch({
        type: actions.profile.PROFILE_FETCH_ERROR,
        error: error.message,
      });
    }
  };
 
  return (
    <div>
      {!editMode ? (
        <p>{state.user?.bio}</p>
      ) : (
        <textarea value={bio} onChange={(e) => setBio(e.target.value)} />
      )}
      <button onClick={() => setEditMode(!editMode)}>
        {editMode ? "Save" : "Edit"}
      </button>
    </div>
  );
};
 
export default Bio;

import { ProfileProvider } from "./context/ProfileContext";
 
function App() {
  return (
    <ProfileProvider>
      <Routes>
        <Route path="/profile" element={<ProfilePage />} />
      </Routes>
    </ProfileProvider>
  );
}
 
export default App;