@setoelkahfi / personal-website
Code Commits Issues Pulls Sessions CI/CD
feature/musik88-api
development feature/musik88-api feature/ssr-deployment main testing typescript
tsx 144 lines 3.68 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 } from 'react-bootstrap';
8 import { Link } from 'react-router-dom';
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 "se": ["är Android-utvecklare", "är iOS-utvecklare"]
30 };
31
32
33 type HomeProps = {
34 firebase: Firebase | null
35 }
36
37 type HomeState = {
38 pStyle: any,
39 wordStyle: any,
40 alterEgos: any,
41 files: any[]
42 }
43
44 class Home extends Component<HomeProps, HomeState> {
45
46 whoAmIRef: app.database.Reference | undefined;
47
48 constructor(props: HomeProps) {
49 super(props);
50 this.whoAmIRef = this.props.firebase?.whoAmIRef();
51 this.state = {
52 pStyle: pStyle,
53 wordStyle: wordStyle,
54 alterEgos: initialValues[this.props.firebase?.language ?? 'en'],
55 files: []
56 }
57 }
58
59 componentDidMount() {
60 this.whoAmIRef?.on('value', (snapshot) => {
61 let items = snapshot?.val();
62 let whoAmI = [];
63 for (let item in items) {
64 whoAmI.push(items[item].content);
65 }
66 this.setState({
67 alterEgos: this.shuffle(whoAmI)
68 });
69 });
70
71 axios.get(`/splitfire`)
72 .then(res => {
73 const files = res.data.audio_files;
74 this.setState({ files });
75 })
76 }
77
78 componentWillUnmount() {
79 this.whoAmIRef?.off();
80 }
81
82 shuffle(array: any[]) {
83 var currentIndex = array.length, temporaryValue, randomIndex;
84
85 // While there remain elements to shuffle...
86 while (0 !== currentIndex) {
87
88 // Pick a remaining element...
89 randomIndex = Math.floor(Math.random() * currentIndex);
90 currentIndex -= 1;
91
92 // And swap it with the current element.
93 temporaryValue = array[currentIndex];
94 array[currentIndex] = array[randomIndex];
95 array[randomIndex] = temporaryValue;
96 }
97
98 return array;
99 }
100
101 render() {
102 const { files } = this.state;
103
104 let caraoselContent: any = 'Loading SplitFire AI...';
105 if (files.length > 0) {
106 caraoselContent = <Carousel>
107 {files.slice(0, 3).map(item => (
108 <Carousel.Item key={item.id} style={{ padding: '20px' }}>
109 <img
110 className="d-block w-100"
111 src={`https://img.youtube.com/vi/${item.youtube_video_id}/hqdefault.jpg`}
112 alt="First slide"
113 />
114 <Carousel.Caption>
115 <Link to={{ pathname: `/splitfire/${item.id}` }}>
116 <Button variant="dark">{item.filename}</Button>
117 </Link>
118 </Carousel.Caption>
119 </Carousel.Item>
120 ))}
121 </Carousel>
122 }
123
124 return (
125 <div>
126 <h1>
127 <FormattedMessage id="home.title"
128 defaultMessage="Hello, my name is {name}"
129 description="Welcome message"
130 values={{ name: 'Seto Elkahfi' }} />
131 </h1>
132 <p style={this.state.pStyle}>
133 <FormattedMessage id="home.iam"
134 defaultMessage="I'm "
135 description="My self description" />
136 <ReactRotatingText style={this.state.wordStyle} items={this.state.alterEgos} /></p>
137 <h2>SplitFire AI</h2>
138 {caraoselContent}
139 </div>
140 );
141 }
142 }
143
144 export default Home;