Path as enum
Seto Elkahfi committed
Aug 8, 2023 at 15:06 UTC
b6bb986476931d45f88dd0d1f4f5c1389a5e6f3d
5 files changed
+40
-24
server/server.tsx
+11
-5
@@ -5,7 +5,7 @@ import App from '../src/components/App'
5
import path from 'path';
6
import fs from 'fs';
7
import { StaticRouter, matchPath } from 'react-router-dom';
8
-import routes from '../src/shared/routes';
8
+import routes, { Path } from '../src/shared/routes';
9
import Firebase from '../src/components/Firebase';
10
import firebaseInstance from '../src/components/Firebase/config';
11
@@ -27,11 +27,18 @@ server.get('*', (req, res, next) => {
27
return next();
28
}
29
30
+ // We have check the for validity of the path,
31
+ // so we can cast it to Path.
32
+ const ourPath: Path = req.path as Path;
33
+ console.log('req.path', req.path);
34
+ console.log('ourPath', ourPath);
35
+
36
activeRoute
31
- .fetchInitialData(req.path, firebase)
37
+ .fetchInitialData(ourPath, firebase)
38
.then((initialData) => {
39
34
- // console.log('data', JSON.stringify(initialData));
40
+ console.log('data', initialData);
41
+ console.log('data, stringify', JSON.stringify(initialData));
42
43
const app = ReactDOMServer.renderToString(
44
<StaticRouter location={req.url}>
@@ -40,7 +47,6 @@ server.get('*', (req, res, next) => {
47
);
48
49
const indexFile = path.resolve('./build/index.html');
43
- // console.log('req.path', req.path);
50
51
fs.readFile(indexFile, 'utf8', (err, data) => {
52
if (err) {
@@ -55,7 +61,7 @@ server.get('*', (req, res, next) => {
61
)
62
.replace(
63
'<script id="initial-data"></script>',
58
- `<script id="initial-data">
64
+ `<script>
65
window.__DATA__=${JSON.stringify(initialData)}
66
</script>`
67
)
src/components/About.tsx
+6
-5
@@ -2,10 +2,10 @@ import React, { Component } from 'react';
2
import { FormattedMessage } from 'react-intl';
3
import Firebase from './Firebase';
4
import app from 'firebase/app';
5
-import { InitialData } from '../shared/routes';
5
+import { InitialData, Path } from '../shared/routes';
6
7
type AboutProps = {
8
- firebase: Firebase | null
8
+ firebase?: Firebase
9
initialData?: InitialData
10
}
11
@@ -22,14 +22,15 @@ class About extends Component<AboutProps, AboutState> {
22
constructor(props: AboutProps) {
23
super(props);
24
this.aboutRef = this.props.firebase?.aboutRef();
25
- if (this.props.initialData) {
26
- // console.log(this.props.initialData);
25
+ if (this.props.initialData?.path === Path.ABOUT) {
26
+ console.log('SERVER#ABOUT', 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']
31
}
32
} else {
33
+ console.log('CLIENT#ABOUT');
34
this.state = {
35
contentMain: "Loading ...",
36
contentSkills: "Loading ...",
@@ -39,7 +40,7 @@ class About extends Component<AboutProps, AboutState> {
40
}
41
42
componentDidMount() {
42
- if (this.props.initialData)
43
+ if (this.props.initialData?.path === Path.ABOUT)
44
return;
45
46
this.aboutRef?.on('value', (snapshot) => {
src/components/Home.tsx
+6
-5
@@ -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 { InitialData } from '../shared/routes';
8
+import { InitialData, Path } from '../shared/routes';
9
10
const pStyle: CSSProperties = {
11
lineHeight: '32pt',
@@ -34,7 +34,7 @@ const initialValues: any = {
34
35
36
type HomeProps = {
37
- firebase: Firebase | null
37
+ firebase?: Firebase
38
initialData?: InitialData
39
}
40
@@ -55,8 +55,8 @@ class Home extends Component<HomeProps, HomeState> {
55
56
constructor(props: HomeProps) {
57
super(props);
58
- if (props.initialData) {
59
- console.log('HOME', this.props.initialData);
58
+ if (props.initialData?.path === Path.HOME) {
59
+ console.log('SERVER#HOME', this.props.initialData);
60
this.state = {
61
pStyle: pStyle,
62
wordStyle: wordStyle,
@@ -64,6 +64,7 @@ class Home extends Component<HomeProps, HomeState> {
64
files: props.initialData.data['carousel']
65
}
66
} else {
67
+ console.log('CLIENT#HOME');
68
this.whoAmIRef = this.props.firebase?.whoAmIRef();
69
this.state = {
70
pStyle: pStyle,
@@ -78,7 +79,7 @@ class Home extends Component<HomeProps, HomeState> {
79
}
80
81
componentDidMount() {
81
- if (this.props.initialData)
82
+ if (this.props.initialData?.path === Path.HOME)
83
return;
84
85
this._updateTranslationIfNeeded()
src/shared/api.ts
+4
-3
@@ -1,9 +1,10 @@
1
import axios from "axios";
2
import Firebase from "../components/Firebase";
3
+import { Path } from "./routes";
4
5
axios.defaults.baseURL = 'https://api.musik88.com/api/v1/';
6
6
-export const getHome = (path: string, firebase: Firebase) => {
7
+export const getHome = (path: Path, firebase: Firebase) => {
8
return Promise.all([
9
firebase.whoAmIRef().once('value'),
10
axios.get(`/carousel`),
@@ -21,7 +22,7 @@ export const getHome = (path: string, firebase: Firebase) => {
22
});
23
}
24
24
-export const getAbout = (path: string, firebase: Firebase) => {
25
+export const getAbout = (path: Path, firebase: Firebase) => {
26
return firebase
27
.aboutRef()
28
.once('value')
@@ -33,7 +34,7 @@ export const getAbout = (path: string, firebase: Firebase) => {
34
});
35
}
36
36
-export const getContact = (path: string, firebase: Firebase) => {
37
+export const getContact = (path: Path, firebase: Firebase) => {
38
return firebase
39
.contactRef()
40
.once('value')
src/shared/routes.tsx
+13
-6
@@ -7,32 +7,39 @@ import Cv from '../components/Cv';
7
import Firebase from '../components/Firebase';
8
9
export interface Route {
10
- path: string;
10
+ path: Path;
11
component: React.ComponentType<any>;
12
exact?: boolean;
13
- fetchInitialData: (path: string, firebase: Firebase) => Promise<InitialData>;
13
+ fetchInitialData: (path: Path, firebase: Firebase) => Promise<InitialData>;
14
}
15
16
export type InitialData = {
17
data: any;
18
- path: string;
18
+ path: Path;
19
+}
20
+
21
+export enum Path {
22
+ HOME = '/',
23
+ ABOUT = '/about',
24
+ CONTACT = '/contact',
25
+ CV = '/cv'
26
}
27
28
// Desc: Routes for the application
29
const routes: Route[] = [
30
{
24
- path: '/',
31
+ path: Path.HOME,
32
component: Home,
33
exact: true,
34
fetchInitialData: getHome
35
},
36
{
30
- path: '/about',
37
+ path: Path.ABOUT,
38
component: About,
39
fetchInitialData: getAbout
40
},
41
{
35
- path: '/contact',
42
+ path: Path.CONTACT,
43
component: Contact,
44
fetchInitialData: getContact
45
}