Skip to content

Commit 09498a3

Browse files
author
Robin Ury
committed
Initial commit of vanilla client codebase
0 parents  commit 09498a3

12 files changed

+5777
-0
lines changed

‎.gitignore

+18
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
# See https://help.github.com/ignore-files/ for more about ignoring files.
2+
3+
# dependencies
4+
/node_modules
5+
6+
# testing
7+
/coverage
8+
9+
# production
10+
/build
11+
12+
# misc
13+
.DS_Store
14+
.env
15+
npm-debug.log*
16+
yarn-debug.log*
17+
yarn-error.log*
18+

‎README.md

+2
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
# lexsur-client
2+
> Modern audience interaction

‎package.json

+19
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
{
2+
"name": "lexsur3",
3+
"version": "0.1.0",
4+
"private": true,
5+
"dependencies": {
6+
"react": "^15.5.4",
7+
"react-dom": "^15.5.4",
8+
"socket.io": "^2.0.1"
9+
},
10+
"devDependencies": {
11+
"react-scripts": "0.9.5"
12+
},
13+
"scripts": {
14+
"start": "react-scripts start",
15+
"build": "react-scripts build",
16+
"test": "react-scripts test --env=jsdom",
17+
"eject": "react-scripts eject"
18+
}
19+
}

‎public/favicon.ico

24.3 KB
Binary file not shown.

‎public/index.html

+31
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1">
6+
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
7+
<!--
8+
Notice the use of %PUBLIC_URL% in the tag above.
9+
It will be replaced with the URL of the `public` folder during the build.
10+
Only files inside the `public` folder can be referenced from the HTML.
11+
12+
Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
13+
work correctly both with client-side routing and a non-root public URL.
14+
Learn how to configure a non-root public URL by running `npm run build`.
15+
-->
16+
<title>React App</title>
17+
</head>
18+
<body>
19+
<div id="root"></div>
20+
<!--
21+
This HTML file is a template.
22+
If you open it directly in the browser, you will see an empty page.
23+
24+
You can add webfonts, meta tags, or analytics to this file.
25+
The build step will place the bundled scripts into the <body> tag.
26+
27+
To begin the development, run `npm start`.
28+
To create a production bundle, use `npm run build`.
29+
-->
30+
</body>
31+
</html>

‎src/App.css

+24
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
.App {
2+
text-align: center;
3+
}
4+
5+
.App-logo {
6+
animation: App-logo-spin infinite 20s linear;
7+
height: 80px;
8+
}
9+
10+
.App-header {
11+
background-color: #222;
12+
height: 150px;
13+
padding: 20px;
14+
color: white;
15+
}
16+
17+
.App-intro {
18+
font-size: large;
19+
}
20+
21+
@keyframes App-logo-spin {
22+
from { transform: rotate(0deg); }
23+
to { transform: rotate(360deg); }
24+
}

‎src/App.js

+141
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,141 @@
1+
import React, { Component } from 'react';
2+
import './App.css';
3+
import io from 'socket.io-client'
4+
5+
class Socketz {
6+
constructor() {
7+
this.io = io('localhost:3030');
8+
this.id = this.io.id
9+
this.initSocket = this.initSocket.bind(this);
10+
this.ask = this.ask.bind(this);
11+
this.nick = this.nick.bind(this);
12+
}
13+
initSocket (callback, idhandler, userhandler) {
14+
this.io.on('assignment', idhandler)
15+
this.io.on('newQuestion', callback)
16+
this.io.on('newUser', userhandler)
17+
}
18+
ask (question) { this.io.emit('questionAsked', question) }
19+
nick (newName) { this.io.emit('nameChanged', newName) }
20+
}
21+
const Socket = new Socketz();
22+
23+
class QuestionForm extends React.Component {
24+
constructor(props) {
25+
super(props);
26+
this.state = {
27+
author: this.props.author,
28+
userId: this.props.uid,
29+
question: '',
30+
};
31+
this.handleBlur = this.handleBlur.bind(this);
32+
this.handleChange = this.handleChange.bind(this);
33+
this.handleSubmit = this.handleSubmit.bind(this);
34+
}
35+
36+
handleBlur(event) {
37+
// console.log(event.target.name + ' ' + event.target.value)
38+
Socket.nick(this.state.author)
39+
}
40+
41+
handleChange(event) {
42+
const name = event.target.name;
43+
const value = event.target.value;
44+
this.setState({
45+
[name]: value
46+
});
47+
}
48+
49+
handleSubmit(event) {
50+
Socket.ask({text:this.state.question});
51+
this.setState({question: ''})
52+
this.props.updateQuestions()
53+
event.preventDefault();
54+
}
55+
56+
render() {
57+
return (
58+
<form onSubmit={this.handleSubmit}>
59+
<label>
60+
Name:
61+
<input ref={(input) => { this.nameInput = input }}
62+
type="text" name="author" value={this.state.author}
63+
onChange={this.handleChange} onBlur={this.handleBlur} />
64+
</label>
65+
<label>
66+
Question:
67+
<input ref={(input) => { this.qInput = input }}
68+
type="text" name="question" value={this.state.question}
69+
onChange={this.handleChange} />
70+
</label>
71+
<input type="submit" value="Submit" />
72+
</form>
73+
);
74+
}
75+
}
76+
77+
function QuestionList(props) {
78+
let questions = props.questions;
79+
let users = props.users
80+
if (!questions) {
81+
return null;
82+
}
83+
const listItems = questions.map((question) =>
84+
<li key={question.id}>{users[question.author] + '\t asks \t' + question.text}</li>
85+
);
86+
return (
87+
<ul>{listItems}</ul>
88+
);
89+
}
90+
91+
92+
class Lex extends Component {
93+
constructor() {
94+
super()
95+
this.state = {
96+
username: 'Anonymous', // TODO
97+
userId: '', // This initialization is required
98+
newQuestionText: 'Enter a question',
99+
questions: [],
100+
users: []
101+
}
102+
this.updateQuestions = this.updateQuestions.bind(this)
103+
this.setId = this.setId.bind(this)
104+
this.updateUsers = this.updateUsers.bind(this)
105+
Socket.initSocket(this.updateQuestions,this.setId,this.updateUsers)
106+
}
107+
/* function addNewQuestion () {
108+
this.questions.push({author: this.userId, text: this.newQuestionText, votes: 0})
109+
Socket.ask({author: this.userId, text: this.newQuestionText})
110+
this.newQuestionText = ''
111+
},*/
112+
updateQuestions (newQuestions) {
113+
this.setState({
114+
questions: newQuestions
115+
})
116+
console.log(newQuestions)
117+
}
118+
setId (newId) {
119+
this.setState({
120+
userId: newId
121+
})
122+
console.log(newId)
123+
}
124+
updateUsers (newUsers) {
125+
this.setState({
126+
users: newUsers
127+
})
128+
console.log(newUsers)
129+
}
130+
131+
render() {
132+
return (
133+
<div>
134+
<QuestionForm author={this.state.username} update={this.updateQuestions} />
135+
<QuestionList questions={this.state.questions} users={this.state.users}/>
136+
</div>
137+
);
138+
}
139+
}
140+
141+
export default Lex;

‎src/App.test.js

+8
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
import React from 'react';
2+
import ReactDOM from 'react-dom';
3+
import App from './App';
4+
5+
it('renders without crashing', () => {
6+
const div = document.createElement('div');
7+
ReactDOM.render(<App />, div);
8+
});

‎src/index.css

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
body {
2+
margin: 0;
3+
padding: 0;
4+
font-family: sans-serif;
5+
}

‎src/index.js

+9
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
import React from 'react';
2+
import ReactDOM from 'react-dom';
3+
import App from './App';
4+
import './index.css';
5+
6+
ReactDOM.render(
7+
<App />,
8+
document.getElementById('root')
9+
);

‎src/logo.svg

+7
Loading

0 commit comments

Comments
 (0)