Add cv and contact
Seto Elkahfi committed
Aug 8, 2023 at 15:31 UTC
c1ceacd862165e1fc6d45cbc90d91068c3b0b133
6 files changed
+64
-8
src/components/Contact.tsx
+16
-3
@@ -2,9 +2,11 @@ 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, Path } from '../shared/routes';
6
7
type ContactProps = {
7
- firebase: Firebase | null
8
+ firebase?: Firebase
9
+ initialData?: InitialData
10
}
11
12
type ContactState = {
@@ -18,11 +20,22 @@ class Contact extends Component<ContactProps, ContactState> {
20
constructor(props: ContactProps) {
21
super(props);
22
this.contactRef = this.props.firebase?.contactRef();
21
- this.state = {
22
- content: "Loading ..."
23
+ if (props.initialData?.path === Path.CONTACT) {
24
+ this.state = {
25
+ content: props.initialData?.data.content
26
+ }
27
+ } else {
28
+ this.state = {
29
+ content: "Loading ..."
30
+ }
31
}
32
}
33
+
34
componentDidMount() {
35
+ if (this.props.initialData?.path === Path.CONTACT) {
36
+ return;
37
+ }
38
+
39
this.contactRef?.on('value', (snapshot) => {
40
let items = snapshot?.val();
41
this.setState({
src/components/Cv.tsx
+16
-3
@@ -2,9 +2,11 @@ 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, Path } from '../shared/routes';
6
7
type CvProps = {
7
- firebase: Firebase | null
8
+ firebase?: Firebase
9
+ initialData?: InitialData
10
}
11
12
type CvState = {
@@ -18,11 +20,22 @@ class Cv extends Component<CvProps, CvState> {
20
constructor(props: CvProps) {
21
super(props);
22
this.cvRef = this.props.firebase?.cvRef();
21
- this.state = {
22
- content: "Loading ..."
23
+ if (props.initialData?.path === Path.CV) {
24
+ this.state = {
25
+ content: props.initialData?.data.content
26
+ }
27
+ } else {
28
+ this.state = {
29
+ content: "Loading ..."
30
+ }
31
}
32
}
33
+
34
componentDidMount() {
35
+ if (this.props.initialData?.path === Path.CV) {
36
+ return;
37
+ }
38
+
39
this.cvRef?.on('value', (snapshot) => {
40
let items = snapshot?.val();
41
this.setState({
src/components/FooterLinks.tsx
+10
@@ -41,6 +41,16 @@ const FooterLinks = () => (
41
defaultMessage="About"
42
description="About link" />
43
</Link>
44
+ <Link to='/cv' style={linkStyle}>
45
+ <FormattedMessage id="header.cv"
46
+ defaultMessage="CV"
47
+ description="CV link" />
48
+ </Link>
49
+ <Link to='/contact' style={linkStyle}>
50
+ <FormattedMessage id="header.contact"
51
+ defaultMessage="Contact"
52
+ description="Contact link" />
53
+ </Link>
54
</p>
55
</div>
56
</footer>
src/index.tsx
+4
-1
@@ -19,7 +19,10 @@ console.log('window.__DATA__', window.__DATA__);
19
20
hydrate(
21
<BrowserRouter>
22
- <App firebase={new Firebase('en', firebaseInstance.database())} initialData={window.__DATA__} />
22
+ <App
23
+ firebase={new Firebase('en', firebaseInstance.database())}
24
+ initialData={window.__DATA__}
25
+ />
26
</BrowserRouter>,
27
document.getElementById('root')
28
);
src/shared/api.ts
+12
@@ -44,4 +44,16 @@ export const getContact = (path: Path, firebase: Firebase) => {
44
data: snapshot.val()
45
}
46
});
47
+}
48
+
49
+export const getCv = (path: Path, firebase: Firebase) => {
50
+ return firebase
51
+ .cvRef()
52
+ .once('value')
53
+ .then((snapshot) => {
54
+ return {
55
+ path: path,
56
+ data: snapshot.val()
57
+ }
58
+ });
59
}
\ No newline at end of file
src/shared/routes.tsx
+6
-1
@@ -1,7 +1,7 @@
1
import Home from '../components/Home';
2
import About from '../components/About';
3
import React from 'react';
4
-import { getAbout, getHome, getContact } from './api';
4
+import { getAbout, getHome, getContact, getCv } from './api';
5
import Contact from '../components/Contact';
6
import Cv from '../components/Cv';
7
import Firebase from '../components/Firebase';
@@ -42,6 +42,11 @@ const routes: Route[] = [
42
path: Path.CONTACT,
43
component: Contact,
44
fetchInitialData: getContact
45
+ },
46
+ {
47
+ path: Path.CV,
48
+ component: Cv,
49
+ fetchInitialData: getCv
50
}
51
];
52