ContentProvider

Zarządza kontentem aplikacji.

ContentProvider.js

import React, { useState, useReducer, useEffect } from 'react';
import axios from 'axios';
import { getFromLS, setToLS } from 'utils/storage';

export const ContentContext = React.createContext({
  content: [],
  currentContent: [],
  contentType: [],
  error: [],
  setContentType: () => {},
});

const queries = {
  songs: 'https://kmendroch.lk.pl/api/songs',
  prayers: 'https://kmendroch.lk.pl/api/prayers',
};

const reducer = (state, action) => {
  return {
    ...state,
    [action.field]: action.value,
  };
};

const ContentProvider = ({ children }) => {
  const [content, dispatch] = useReducer(reducer, getFromLS('content'));
  const [error, setError] = useState('');
  const [currentContent, setCurrentContent] = useState([]);
  const [contentType, setContentType] = useState('songs');

  useEffect(() => {
    for (const query in queries) {
      axios
        .get(queries[query])
        .then(({ data }) => {
          dispatch({
            field: query,
            value: data.sort((a, b) => a.name.localeCompare(b.name)),
          });
        })
        .catch(() => {
          setError(`Błąd połączenia z internetem`);
        });
    }
  }, []);

  useEffect(() => {
    setTimeout(() => {
      setToLS('content', content);
    }, 1000);
  }, [content]);

  useEffect(() => {
    if (Object.keys(content).length === Object.keys(queries).length) {
      if (contentType === 'songs') setCurrentContent(content.songs);
      else if (contentType === 'prayers') setCurrentContent(content.prayers);
    }
  }, [contentType, content]);

  return (
    <ContentContext.Provider
      value={{
        content,
        currentContent,
        contentType,
        error,
        setContentType,
      }}
    >
      {children}
    </ContentContext.Provider>
  );
};

export default ContentProvider;