Untitled

import { useReducer, useEffect } from "react";
// import photos from "mocks/photos";
// import topics from "mocks/topics";

const ACTIONS = {
  ADD_FAV_PHOTO: 'ADD_FAV_PHOTO',
  DELETE_FAV_PHOTO: 'DELETE_FAV_PHOTO',
  TOGGLE_MODAL: 'TOGGLE_MODAL',
  SELECT_PHOTO: 'SELECT_PHOTO',
  SET_PHOTO_DATA: 'SET_PHOTO_DATA',
};

const reducer = (state, action) => {
  switch (action.type) {
  case ACTIONS.ADD_FAV_PHOTO:
    return {
      ...state,
      favPhotos: [...state.favPhotos, action.payload.photoId]};
  case ACTIONS.DELETE_FAV_PHOTO:
    return {
      ...state,
      favPhotos: state.favPhotos.filter((id) => id !== action.payload.photoId)};
  case ACTIONS.TOGGLE_MODAL:
    return {
      ...state, isShown: !state.isShown
    };
  case ACTIONS.SELECT_PHOTO:
    return {
      ...state, selectedPhoto: action.payload.selectedPhoto
    };
  case ACTIONS.SET_PHOTO_DATA:
    return {
      ...state, photoData: action.payload.photoData
    };
  default:
    return state;
  }
};

const useApplicationData = () => {
  
  const initialState = {
    favPhotos: [],
    isShown: false,
    selectedPhoto: null,
    photoData: [],
    topicData: []
  };

  const [state, dispatch] = useReducer(reducer, initialState);

  useEffect(() => {
    fetch('/api/photos')
      .then((res) => {
        if (!res.ok) {
          throw new Error(`Request failed with status: ${res.status}`);
        }
        // console.log('RES', res.data);
        return res;
      })
      .then((data) => {
        console.log('API Response:', data);
        dispatch({ type: ACTIONS.SET_PHOTO_DATA, payload: data });
      })
      .catch((error) => {
        console.error('API Error:', error);
      });
  }, [dispatch]);

  const toggleFav = (id) => {
    if (state.favPhotos.includes(id)) {
      dispatch({ type: ACTIONS.DELETE_FAV_PHOTO, payload: { photoId: id } });
    } else {
      dispatch({ type: ACTIONS.ADD_FAV_PHOTO, payload: { photoId: id } });
    }
  };

  const toggleModal = () => {
    dispatch({ type: ACTIONS.TOGGLE_MODAL });
  };
  
  const togglePhotoSelection = (photo) => {
    const { selectedPhoto } = state;
    const newSelectedPhoto = selectedPhoto === photo ? null : photo;
    dispatch({ type: ACTIONS.SELECT_PHOTO, payload: { selectedPhoto: newSelectedPhoto }});
  };

  return {
    // photos,
    // topics,
    state,
    dispatch,
    toggleFav,
    toggleModal,
    togglePhotoSelection,
  };
};

export default useApplicationData;