@setoelkahfi / personal-website
Code Commits Issues Pulls Sessions CI/CD
development
development feature/musik88-api feature/ssr-deployment main testing typescript
tsx 193 lines 5.27 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 import axios from 'axios';
7 import { Button, Carousel, Spinner } from 'react-bootstrap';
8 import { InitialData, Path } from '../shared/routes';
9
10 const pStyle: CSSProperties = {
11 lineHeight: '32pt',
12 marginTop: '10pt',
13 fontSize: '20pt',
14 textDecoration: 'none',
15 outline: 'none',
16 };
17 const wordStyle = {
18 color: '#FECD01',
19 background: '#006BA8',
20 padding: '5px 8px',
21 MozBoxShadow: '0px 1px 1px #000',
22 WebkitBoxShadow: '0px 1px 1px #000',
23 boxShadow: '0px 1px 1px #000'
24 };
25
26 const initialValues: any = {
27 "en": ["an Android developer", "an iOS developer"],
28 "id": ["pengembang aplikasi Android", "pengembang aplikasi iOS"],
29 "sv": ["är Android-utvecklare", "är iOS-utvecklare"],
30 "es": ["an Android developer", "an iOS developer"],
31 "de": ["an Android developer", "an iOS developer"],
32 "fr": ["an Android developer", "an iOS developer"],
33 };
34
35
36 type HomeProps = {
37 firebase?: Firebase
38 initialData?: InitialData
39 }
40
41 type HomeState = {
42 pStyle: any,
43 wordStyle: any,
44 alterEgos: any,
45 files: any[]
46 }
47
48 class Home extends Component<HomeProps, HomeState> {
49
50 whoAmIRef: app.database.Reference | undefined
51
52 onLanguageChangedCallback = () => {
53 // console.log("onLanguageChangedCallback")
54 }
55
56 constructor(props: HomeProps) {
57 super(props);
58 if (props.initialData?.path === Path.HOME) {
59 console.log('SERVER#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 console.log('CLIENT#HOME');
68 this.whoAmIRef = this.props.firebase?.whoAmIRef();
69 this.state = {
70 pStyle: pStyle,
71 wordStyle: wordStyle,
72 alterEgos: initialValues[this.props.firebase?.language ?? 'en'],
73 files: []
74 }
75
76 if (this.props.firebase)
77 this.props.firebase.onLanguageChangedCallback = this.onLanguageChangedCallback.bind(this)
78 }
79 }
80
81 componentDidMount() {
82 if (this.props.initialData?.path === Path.HOME)
83 return;
84
85 this._updateTranslationIfNeeded()
86 axios.get(`/carousel`)
87 .then(res => {
88 console.log(res);
89 const files = res.data.audio_files;
90 this.setState({ files });
91 })
92 .catch(error => {
93 console.log(error);
94 });
95 }
96
97 componentWillUnmount() {
98 this.whoAmIRef?.off();
99 if (this.props.firebase)
100 this.props.firebase.onLanguageChangedCallback = null
101 }
102
103 _updateTranslationIfNeeded() {
104 this.whoAmIRef?.on('value', (snapshot) => {
105 let items = snapshot?.val();
106 let whoAmI = [];
107 for (let item in items) {
108 whoAmI.push(items[item].content);
109 }
110 this.setState({
111 alterEgos: this.shuffle(whoAmI)
112 });
113 })
114 }
115
116 shuffle(array: any[]) {
117 var currentIndex = array.length, temporaryValue, randomIndex;
118
119 // While there remain elements to shuffle...
120 while (0 !== currentIndex) {
121
122 // Pick a remaining element...
123 randomIndex = Math.floor(Math.random() * currentIndex);
124 currentIndex -= 1;
125
126 // And swap it with the current element.
127 temporaryValue = array[currentIndex];
128 array[currentIndex] = array[randomIndex];
129 array[randomIndex] = temporaryValue;
130 }
131
132 return array;
133 }
134
135 render() {
136 const { files } = this.state
137
138 let caraoselContent: any = <div>
139 <p>
140 <FormattedMessage id="home.loading"
141 defaultMessage="Loading SplitFire AI..."
142 description="Loading message"/>
143 </p>
144 <Spinner animation='grow' variant="danger"></Spinner>
145 </div>
146
147 if (files.length > 0) {
148 caraoselContent = <div>
149 <h2>SplitFire AI</h2>
150 <p>
151 <FormattedMessage id="splitfire.whatIs"
152 defaultMessage="I'm an artificial intelligence software that can split your favorite music to its separate components."
153 description="Explanation message"/>
154 </p>
155 <Carousel>
156 {files.slice(0, 5).map(item => (
157 <Carousel.Item key={item.id} style={{ padding: '20px' }}>
158 <img
159 className="d-block w-100"
160 src={item.image_url}
161 alt="First slide"
162 />
163 <Carousel.Caption>
164 <a href={`https://splitfire.ai/split/${item.id}`} target={`__blank`}>
165 <Button variant="dark">{item.name}</Button>
166 </a>
167 </Carousel.Caption>
168 </Carousel.Item>
169 ))}
170 </Carousel>
171 </div>
172 }
173
174 return (
175 <div>
176 <h1>
177 <FormattedMessage id="home.title"
178 defaultMessage="Hello, my name is {name}"
179 description="Welcome message"
180 values={{ name: 'Seto Elkahfi' }} />
181 </h1>
182 <p style={this.state.pStyle}>
183 <FormattedMessage id="home.iam"
184 defaultMessage="I'm "
185 description="My self description" />
186 <ReactRotatingText style={this.state.wordStyle} items={this.state.alterEgos} /></p>
187 {caraoselContent}
188 </div>
189 );
190 }
191 }
192
193 export default Home;