WIP read initial data from client side
Seto Elkahfi committed
Aug 8, 2023 at 00:29 UTC
f85079918a183da2b11357774a89ca36a4a3a785
7 files changed
+57
-30
server/server.tsx
+3
-3
@@ -31,7 +31,7 @@ server.get('*', (req, res, next) => {
31
.fetchInitialData(req.path, firebase)
32
.then((initialData) => {
33
34
- console.log('data', initialData);
34
+ // console.log('data', JSON.stringify(initialData));
35
36
const app = ReactDOMServer.renderToString(
37
<StaticRouter location={req.url}>
@@ -40,7 +40,7 @@ server.get('*', (req, res, next) => {
40
);
41
42
const indexFile = path.resolve('./build/index.html');
43
- console.log('req.path', req.path);
43
+ // console.log('req.path', req.path);
44
45
fs.readFile(indexFile, 'utf8', (err, data) => {
46
if (err) {
@@ -56,7 +56,7 @@ server.get('*', (req, res, next) => {
56
.replace(
57
'<script id="initial-data"></script>',
58
`<script id="initial-data" type="application/json">
59
- window.__DATA__=${initialData}
59
+ window.__DATA__=${JSON.stringify(initialData)}
60
</script>`
61
)
62
);
src/components/About.tsx
+4
-4
@@ -23,11 +23,11 @@ class About extends Component<AboutProps, AboutState> {
23
super(props);
24
this.aboutRef = this.props.firebase?.aboutRef();
25
if (this.props.initialData) {
26
- console.log(this.props.initialData);
26
+ // console.log(this.props.initialData);
27
this.state = {
28
- contentMain: this.props.initialData['data']['contentMain'],
29
- contentSkills: this.props.initialData['data']['contentSkills'],
30
- updatedAt: this.props.initialData['data']['updatedAt']
28
+ contentMain: this.props.initialData.data['contentMain'],
29
+ contentSkills: this.props.initialData.data['contentSkills'],
30
+ updatedAt: this.props.initialData.data['updatedAt']
31
}
32
} else {
33
this.state = {
src/components/Home.tsx
+24
-9
@@ -5,7 +5,7 @@ import Firebase from './Firebase';
5
import app from 'firebase/app';
6
import axios from 'axios';
7
import { Button, Carousel, Spinner } from 'react-bootstrap';
8
-import { Link } from 'react-router-dom';
8
+import { InitialData } from '../shared/routes';
9
10
const pStyle: CSSProperties = {
11
lineHeight: '32pt',
@@ -35,6 +35,7 @@ const initialValues: any = {
35
36
type HomeProps = {
37
firebase: Firebase | null
38
+ initialData?: InitialData
39
}
40
41
type HomeState = {
@@ -54,18 +55,32 @@ class Home extends Component<HomeProps, HomeState> {
55
56
constructor(props: HomeProps) {
57
super(props);
57
- this.whoAmIRef = this.props.firebase?.whoAmIRef();
58
- this.state = {
59
- pStyle: pStyle,
60
- wordStyle: wordStyle,
61
- alterEgos: initialValues[this.props.firebase?.language ?? 'en'],
62
- files: []
58
+ if (props.initialData) {
59
+ console.log('HOME', this.props.initialData);
60
+ this.state = {
61
+ pStyle: pStyle,
62
+ wordStyle: wordStyle,
63
+ alterEgos: this.shuffle(props.initialData.data['whoAmI']),
64
+ files: props.initialData.data['carousel']
65
+ }
66
+ } else {
67
+ this.whoAmIRef = this.props.firebase?.whoAmIRef();
68
+ this.state = {
69
+ pStyle: pStyle,
70
+ wordStyle: wordStyle,
71
+ alterEgos: initialValues[this.props.firebase?.language ?? 'en'],
72
+ files: []
73
+ }
74
+
75
+ if (this.props.firebase)
76
+ this.props.firebase.onLanguageChangedCallback = this.onLanguageChangedCallback.bind(this)
77
}
64
- if (this.props.firebase)
65
- this.props.firebase.onLanguageChangedCallback = this.onLanguageChangedCallback.bind(this)
78
}
79
80
componentDidMount() {
81
+ if (this.props.initialData)
82
+ return;
83
+
84
this._updateTranslationIfNeeded()
85
axios.get(`/carousel`)
86
.then(res => {
src/components/Main.tsx
+1
-1
@@ -19,7 +19,7 @@ const contentStyle = {
19
20
const Main = (props: AppProps) => {
21
22
- console.log('MAIN', props.initialData);
22
+ // console.log('MAIN', props.initialData);
23
24
return (
25
<main style={mainStyle}>
src/index.tsx
+7
@@ -7,9 +7,16 @@ 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
+import { InitialData } from './shared/routes';
11
12
axios.defaults.baseURL = 'https://api.musik88.com/api/v1/';
13
14
+declare global {
15
+ interface Window { __DATA__?: InitialData; }
16
+}
17
+
18
+console.log('window.__DATA__', window.__DATA__);
19
+
20
hydrate(
21
<BrowserRouter>
22
<App firebase={new Firebase('en', firebaseInstance.database())} />
src/shared/api.ts
+16
-11
@@ -3,17 +3,22 @@ import Firebase from "../components/Firebase";
3
4
axios.defaults.baseURL = 'https://api.musik88.com/api/v1/';
5
6
-export const getCaraousel = () => {
7
- return axios.get(`/carousel`)
8
- .then(res => {
9
- console.log(res);
10
- const files = res.data.audio_files;
11
- const obj = {
12
- path: '/',
13
- data: files
14
- };
15
- return obj;
16
- })
6
+export const getHome = (path: string, firebase: Firebase) => {
7
+ return Promise.all([
8
+ firebase.whoAmIRef().once('value'),
9
+ axios.get(`/carousel`),
10
+ ]).then((values) => {
11
+ const whoAmI = values[0].val();
12
+ const files = values[1].data.audio_files;
13
+ const obj = {
14
+ path: path,
15
+ data: {
16
+ whoAmI: whoAmI,
17
+ carousel: files
18
+ }
19
+ };
20
+ return obj;
21
+ });
22
}
23
24
export const getAbout = (path: string, firebase: Firebase) => {
src/shared/routes.tsx
+2
-2
@@ -1,7 +1,7 @@
1
import Home from '../components/Home';
2
import About from '../components/About';
3
import React from 'react';
4
-import { getAbout, getCaraousel, getContact } from './api';
4
+import { getAbout, getHome, getContact } from './api';
5
import Contact from '../components/Contact';
6
import Cv from '../components/Cv';
7
import Firebase from '../components/Firebase';
@@ -24,7 +24,7 @@ const routes: Route[] = [
24
path: '/',
25
component: Home,
26
exact: true,
27
- fetchInitialData: (path, firebase) => getCaraousel()
27
+ fetchInitialData: getHome
28
},
29
{
30
path: '/about',