fix firebase initialization
Seto Elkahfi committed
Aug 2, 2023 at 14:40 UTC
40253746d6a7b2aa3db0b2316419bea0166ef69c
5 files changed
+35
-28
server/server.tsx
+5
-1
@@ -6,6 +6,8 @@ import path from 'path';
6
import fs from 'fs';
7
import { StaticRouter, matchPath } from 'react-router-dom';
8
import routes from '../shared/routes';
9
+import Firebase from '../src/components/Firebase';
10
+import firebaseInstance from '../src/components/Firebase/config';
11
12
const server = express();
13
@@ -19,9 +21,11 @@ server.get('*', (req, res, next) => {
21
matchPath(route.path, req.url)
22
) || {}
23
24
+ const firebase = new Firebase('en', firebaseInstance.database());
25
+
26
const app = ReactDOMServer.renderToString(
27
<StaticRouter location={req.url}>
24
- <App />
28
+ <App firebase={firebase} />
29
</StaticRouter>
30
);
31
src/components/App.tsx
+4
-11
@@ -37,7 +37,9 @@ let i18nConfig = {
37
messages: messages_en
38
};
39
40
-type AppProps = {}
40
+type AppProps = {
41
+ firebase: Firebase
42
+}
43
44
type AppState = {
45
language: string
@@ -66,19 +68,10 @@ class App extends Component<AppProps, AppState> {
68
}
69
}
70
69
- createFirebaseContextIfNeeded(language: string): Firebase {
70
- if (this.firebase) {
71
- this.firebase.setLanguage(language);
72
- } else {
73
- this.firebase = new Firebase(language)
74
- }
75
- return this.firebase;
76
- }
77
-
71
render() {
72
return (
73
<IntlProvider locale={i18nConfig.language} messages={i18nConfig.messages}>
81
- <FirebaseContext.Provider value={this.createFirebaseContextIfNeeded(i18nConfig.language)}>
74
+ <FirebaseContext.Provider value={this.props.firebase}>
75
<Header onChangeLanguage={this.onChangeLanguage.bind(this)} />
76
<Main />
77
<FooterLinks />
src/components/Firebase/config.ts
new
+14
@@ -0,0 +1,14 @@
1
+import app from 'firebase/app';
2
+import 'firebase/database';
3
+
4
+// Initialize Firebase
5
+const config = {
6
+ apiKey: "AIzaSyBDMgSgpCGpPQVs2ziPm5igl2nL8I6jdeQ",
7
+ authDomain: "blazing-fire-5965.firebaseapp.com",
8
+ databaseURL: "https://blazing-fire-5965.firebaseio.com",
9
+ projectId: "blazing-fire-5965",
10
+ storageBucket: "blazing-fire-5965.appspot.com",
11
+ messagingSenderId: "1043865982157"
12
+ };
13
+
14
+export default !app.apps.length ? app.initializeApp(config) : app;
\ No newline at end of file
src/components/Firebase/firebase.ts
+9
-15
@@ -1,26 +1,20 @@
1
import app from 'firebase/app';
2
import 'firebase/database';
3
4
-// Initialize Firebase
5
-const config = {
6
- apiKey: "AIzaSyBDMgSgpCGpPQVs2ziPm5igl2nL8I6jdeQ",
7
- authDomain: "blazing-fire-5965.firebaseapp.com",
8
- databaseURL: "https://blazing-fire-5965.firebaseio.com",
9
- projectId: "blazing-fire-5965",
10
- storageBucket: "blazing-fire-5965.appspot.com",
11
- messagingSenderId: "1043865982157"
12
-};
13
-
4
class Firebase {
5
16
- db: app.database.Database;
17
- language: string;
6
+ db!: app.database.Database;
7
+ language!: string;
8
9
public onLanguageChangedCallback: (() => void) | null = null
10
+ private static instace: Firebase
11
+
12
+ constructor(language: string, db: app.database.Database) {
13
+
14
+ if (Firebase.instace)
15
+ return Firebase.instace
16
21
- constructor(language: string) {
22
- app.initializeApp(config);
23
- this.db = app.database();
17
+ this.db = db;
18
this.language = language;
19
}
20
src/index.tsx
+3
-1
@@ -5,12 +5,14 @@ import App from './components/App';
5
import 'bootstrap/dist/css/bootstrap.css';
6
import axios from 'axios';
7
import { BrowserRouter } from 'react-router-dom';
8
+import Firebase from './components/Firebase';
9
+import firebaseInstance from './components/Firebase/config';
10
11
axios.defaults.baseURL = 'https://api.musik88.com/api/v1/';
12
13
hydrate(
14
<BrowserRouter>
13
- <App />
15
+ <App firebase={new Firebase('en', firebaseInstance.database())} />
16
</BrowserRouter>,
17
document.getElementById('root')
18
);