> For the complete documentation index, see [llms.txt](https://optimal-it.gitbook.io/parafiaskoczow/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://optimal-it.gitbook.io/parafiaskoczow/dla-programistow/parafia-skoczow/providers/firebaseprovider.md).

# FirebaseProvider

Pobiera dane do utworzenia playlist z Firebase Real Time Database.

{% code title="FirebaseProvider.js" lineNumbers="true" %}

```javascript
import React, { useState } from 'react';
import { initializeApp } from 'firebase/app';
import { getDatabase, ref, onValue } from 'firebase/database';

export const FirebaseContext = React.createContext({
  playlists: [],
});

const firebaseConfig = {
  apiKey: '',
  authDomain: '',
  databaseURL: '',
  projectId: '',
  storageBucket: '',
  messagingSenderId: '',
  appId: '',
  measurementId: '',
};

const FirebaseProvider = ({ children }) => {
  const app = initializeApp(firebaseConfig);
  const db = getDatabase(app);
  const distanceRef = ref(db, '/');
  const [playlists, setPlaylists] = useState([]);

  // Fetches data immediately after a change occurs in the database
  onValue(distanceRef, (snapshot) => {
    let data = [];
    let value = snapshot.val();
    for (const key in value) {
      // Convert ISO string to a Date object
      value[key].day = new Date(value[key].day);
      data.push(value[key]);
    }

    // Updates the data if a change has occurred
    if (JSON.stringify(data) !== JSON.stringify(playlists)) {
      setPlaylists(data);
    }
  });

  return (
    <FirebaseContext.Provider
      value={{
        playlists,
      }}
    >
      {children}
    </FirebaseContext.Provider>
  );
};

export default FirebaseProvider;
```

{% endcode %}