@setoelkahfi / personal-website
Code Commits Issues Pulls Sessions CI/CD
testing
development feature/musik88-api feature/ssr-deployment main testing typescript
tsx 109 lines 2.69 KB
Raw
1 import React, { Component, CSSProperties } from 'react';
2 import ReactRotatingText from 'react-rotating-text';
3 import { FormattedMessage } from 'react-intl';
4 import Firebase from './Firebase';
5 import app from 'firebase/app';
6
7 const pStyle: CSSProperties = {
8 lineHeight: '32pt',
9 marginTop: '10pt',
10 fontSize: '20pt',
11 textDecoration: 'none',
12 outline: 'none',
13 };
14 const wordStyle = {
15 color: '#FECD01',
16 background: '#006BA8',
17 padding: '5px 8px',
18 MozBoxShadow: '0px 1px 1px #000',
19 WebkitBoxShadow: '0px 1px 1px #000',
20 boxShadow: '0px 1px 1px #000'
21 };
22
23 const initialValues: any = {
24 "en": ["an Android developer", "an iOS developer"],
25 "id": ["pengembang aplikasi Android", "pengembang aplikasi iOS"],
26 "se": ["är Android-utvecklare", "är iOS-utvecklare"]
27 };
28
29
30 type HomeProps = {
31 firebase: Firebase | null
32 }
33
34 type HomeState = {
35 pStyle: any,
36 wordStyle: any,
37 alterEgos: any
38 }
39
40 class Home extends Component<HomeProps, HomeState> {
41
42 whoAmIRef: app.database.Reference | undefined;
43
44 constructor(props: HomeProps) {
45 super(props);
46 this.whoAmIRef = this.props.firebase?.whoAmIRef();
47 this.state = {
48 pStyle: pStyle,
49 wordStyle: wordStyle,
50 alterEgos: initialValues[this.props.firebase?.language ?? 'en']
51 }
52 }
53
54 UNSAFE_componentWillMount() {
55 this.whoAmIRef?.on('value', (snapshot) => {
56 let items = snapshot?.val();
57 let whoAmI = [];
58 for (let item in items) {
59 whoAmI.push(items[item].content);
60 }
61 this.setState({
62 alterEgos: this.shuffle(whoAmI)
63 });
64 });
65 }
66
67 componentWillUnmount() {
68 this.whoAmIRef?.off();
69 }
70
71 shuffle(array: any[]) {
72 var currentIndex = array.length, temporaryValue, randomIndex;
73
74 // While there remain elements to shuffle...
75 while (0 !== currentIndex) {
76
77 // Pick a remaining element...
78 randomIndex = Math.floor(Math.random() * currentIndex);
79 currentIndex -= 1;
80
81 // And swap it with the current element.
82 temporaryValue = array[currentIndex];
83 array[currentIndex] = array[randomIndex];
84 array[randomIndex] = temporaryValue;
85 }
86
87 return array;
88 }
89
90 render() {
91 return (
92 <div>
93 <h1>
94 <FormattedMessage id="home.title"
95 defaultMessage="Hello, my name is {name}"
96 description="Welcome message"
97 values={{ name: 'Seto Elkahfi' }}/>
98 </h1>
99 <p style={this.state.pStyle}>
100 <FormattedMessage id="home.iam"
101 defaultMessage="I'm "
102 description="My self description"/>
103 <ReactRotatingText style={this.state.wordStyle} items={this.state.alterEgos}/></p>
104 </div>
105 );
106 }
107 }
108
109 export default Home;