Skip to content

Commit f7f53dd

Browse files
daffldaffl
committed
Update TypeScript chat and JavaScript frontend to latest
1 parent 61a9115 commit f7f53dd

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

78 files changed

+2671
-1880
lines changed

‎README.md‎

Lines changed: 54 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -6,54 +6,77 @@
66
77
## About
88

9-
This project uses [Feathers](http://feathersjs.com), a framework for real-time applications and REST APIs. It contains the chat application created in [the Feathers guide](https://docs.feathersjs.com/guides/) and a frontend in plain JavaScript.
9+
This repository includes the TypeScript and JavaScript API server from the [official Feathers chat guide](https://dove.feathersjs.com/guides/basics/generator.html) as well as chat frontend examples for different frameworks.
1010

11-
![The Feathers chat application](https://docs.feathersjs.com/assets/img/feathers-chat.91960785.png)
11+
## API server
1212

13-
Other chat frontends can be found at:
13+
### TypeScript
1414

15-
- TypeScript: [feathersjs/feathers-chat-ts](https://github.com/feathersjs/feathers-chat-ts)
16-
- React: [feathersjs-ecosystem/feathers-chat-react](https://github.com/feathersjs-ecosystem/feathers-chat-react)
17-
- React Native: [feathersjs-ecosystem/feathers-react-native-chat](https://github.com/feathersjs-ecosystem/feathers-react-native-chat)
18-
- Angular: [feathersjs-ecosystem/feathers-chat-angular](https://github.com/feathersjs-ecosystem/feathers-chat-angular)
19-
- VueJS with Vuex: [feathers-plus/feathers-chat-vuex](https://github.com/feathers-plus/feathers-chat-vuex)
15+
The TypeScript version of the chat API server can be found in the [typescript folder](./typescript/). To start it install the dependencies like this:
2016

21-
> __Important:__ This project requires NodeJS 10 or later.
17+
```
18+
cd typescript
19+
npm install
20+
```
2221

23-
## Getting Started
22+
Then compile the source code and run the database migration which will initialize an SQLite datbase in the `feathers-chat.sqlite` file.
2423

25-
Getting up and running is as easy as 1, 2, 3.
24+
```
25+
npm run compile
26+
npm run migrate
27+
```
2628

27-
1. Make sure you have [NodeJS](https://nodejs.org/) and [npm](https://www.npmjs.com/) installed.
28-
2. Install your dependencies
29+
It can now be started with:
2930

30-
```
31-
cd path/to/feathers-chat
32-
npm install
33-
```
31+
```
32+
npm start
33+
```
3434

35-
3. Start your app
35+
Or in development mode with
3636

37-
```
38-
npm start
39-
```
37+
```
38+
npm run dev
39+
```
4040

41-
## Testing
41+
### JavaScript
4242

43-
Simply run `npm test` and all your tests in the `test/` directory will be run.
43+
The JavaScript version of the chat API server can be found in the [javascript folder](./javascript/). To start it install the dependencies like this:
4444

45-
## Scaffolding
45+
```
46+
cd javascript
47+
npm install
48+
```
4649

47-
Feathers has a powerful command line interface. Here are a few things it can do:
50+
Then run the database migration which will initialize an SQLite datbase in the `feathers-chat.sqlite` file.
4851

4952
```
50-
$ npm install -g @feathersjs/cli # Install Feathers CLI
53+
npm run migrate
54+
```
55+
56+
It can now be started with:
5157

52-
$ feathers generate service # Generate a new Service
53-
$ feathers generate hook # Generate a new Hook
54-
$ feathers help # Show all commands
5558
```
59+
npm start
60+
```
61+
62+
Or in development mode with
63+
64+
```
65+
npm run dev
66+
```
67+
68+
## Frontend
69+
70+
### Plain JavaScript
71+
72+
A plain JavaScript frontend can be found in the [public](./public/) folder which is hosted statically by both, the TypeScript and JavaScript [api server](#api-server).
73+
74+
### React
75+
76+
The React chat frontend example in the [react](./react/) folder uses create-react-app, TypeScript and the typed client available in the [TypeScript API server](#typescript).
77+
78+
The TypeScript API server needs to be compiled and then running in order for this example to work.
5679

57-
## Help
80+
### VueJS
5881

59-
For more information on all the things you can do with Feathers visit [docs.feathersjs.com](http://docs.feathersjs.com).
82+
TBD

typescript-api/public/client.js renamed to public/client.js

Lines changed: 14 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -10,19 +10,18 @@ client.configure(feathers.socketio(socket))
1010
client.configure(feathers.authentication())
1111

1212
// Login screen
13-
const loginHTML = `<div class="login flex min-h-screen bg-neutral justify-center items-center">
13+
const loginTemplate = (error) => `<div class="login flex min-h-screen bg-neutral justify-center items-center">
1414
<div class="card w-full max-w-sm bg-base-100 px-4 py-8 shadow-xl">
1515
<div class="px-4"><i alt="" class="h-32 w-32 block mx-auto i-logos-feathersjs invert"></i>
16-
<h1
17-
class="text-5xl font-bold text-center my-5 text-transparent bg-clip-text bg-gradient-to-br from-orange-500 to-red-900">
16+
<h1 class="text-5xl font-bold text-center my-5 bg-clip-text bg-gradient-to-br">
1817
Feathers Chat
1918
</h1>
2019
</div>
2120
<form class="card-body pt-2">
22-
<div class="alert alert-error justify-start">
21+
${error ? `<div class="alert alert-error justify-start">
2322
<i class="i-feather-alert-triangle"></i>
24-
<span class="flex-grow">API Error Message</span>
25-
</div>
23+
<span class="flex-grow">${error.message}</span>
24+
</div>` : ''}
2625
<div class="form-control">
2726
<label for="email" class="label"><span class="label-text">Email</span></label>
2827
<input type="text" name="email" placeholder="enter email" class="input input-bordered">
@@ -37,7 +36,8 @@ const loginHTML = `<div class="login flex min-h-screen bg-neutral justify-center
3736
</div>
3837
</div>`
3938

40-
const chatHTML = `<div class="drawer drawer-mobile"><input id="drawer-left" type="checkbox" class="drawer-toggle">
39+
// Main chat view
40+
const chatTemplate = () => `<div class="drawer drawer-mobile"><input id="drawer-left" type="checkbox" class="drawer-toggle">
4141
<div class="drawer-content flex flex-col">
4242
<div class="navbar w-full">
4343
<div class="navbar-start">
@@ -48,7 +48,7 @@ const chatHTML = `<div class="drawer drawer-mobile"><input id="drawer-left" type
4848
<div class="navbar-center flex flex-col">
4949
<p>Feathers Chat</p>
5050
<label for="drawer-right" class="text-xs cursor-pointer">
51-
<span class="online-count">0</span> Users
51+
<span class="online-count">0</span> User(s)
5252
</label>
5353
</div>
5454
<div class="navbar-end">
@@ -87,16 +87,16 @@ const addUser = user => {
8787

8888
if(userList) {
8989
// Add the user to the list
90-
userList.innerHTML += `<li>
91-
<a class="">
90+
userList.innerHTML += `<li class="user">
91+
<a>
9292
<div class="avatar indicator">
9393
<div class="w-6 rounded"><img src="${user.avatar}" alt="${user.email}"></div>
9494
</div><span>${user.email}</span>
9595
</a>
9696
</li>`
9797

9898
// Update the number of users
99-
const userCount = document.querySelectorAll('.user-list li').length
99+
const userCount = document.querySelectorAll('.user-list li.user').length
100100

101101
document.querySelector('.online-count').innerHTML = userCount
102102
}
@@ -127,17 +127,13 @@ const addMessage = message => {
127127
}
128128

129129
// Show the login page
130-
const showLogin = (error) => {
131-
if(document.querySelectorAll('.login').length && error) {
132-
document.querySelector('.heading').insertAdjacentHTML('beforeend', `<p>There was an error: ${error.message}</p>`)
133-
} else {
134-
document.getElementById('app').innerHTML = loginHTML
135-
}
130+
const showLogin = () => {
131+
document.getElementById('app').innerHTML = loginTemplate()
136132
}
137133

138134
// Shows the chat page
139135
const showChat = async () => {
140-
document.getElementById('app').innerHTML = chatHTML
136+
document.getElementById('app').innerHTML = chatTemplate()
141137

142138
// Find the latest 25 messages. They will come with the newest first
143139
const messages = await client.service('messages').find({

‎public/index.html‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<title>feathers-chat</title>
5+
<meta name="description" content="A Feathers chat application" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1" />
7+
<link href="https://cdn.jsdelivr.net/npm/daisyui@2.18.1/dist/full.css" rel="stylesheet" type="text/css" />
8+
<link rel="stylesheet" href="https://dove.feathersjs.com/feathers-chat.css" />
9+
</head>
10+
11+
<body>
12+
<div id="app" data-theme="dracula"></div>
13+
<script src="https://unpkg.com/@feathersjs/client@^5.0.0-pre.24/dist/feathers.js"></script>
14+
<script src="/socket.io/socket.io.js"></script>
15+
<script type="module" src="client.js"></script>
16+
</body>
17+
</html>

react-chat/.gitignore renamed to react/.gitignore

File renamed without changes.

react-chat/README.md renamed to react/README.md

File renamed without changes.

react-chat/package-lock.json renamed to react/package-lock.json

File renamed without changes.

react-chat/package.json renamed to react/package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@
1313
"@types/node": "^16.11.45",
1414
"@types/react": "^18.0.15",
1515
"@types/react-dom": "^18.0.6",
16-
"feathers-chat": "file:../typescript-api",
16+
"feathers-chat": "file:../typescript",
1717
"react": "^18.2.0",
1818
"react-dom": "^18.2.0",
1919
"react-scripts": "5.0.1",

react-chat/public/favicon.ico renamed to react/public/favicon.ico

File renamed without changes.

react-chat/public/index.html renamed to react/public/index.html

File renamed without changes.

react-chat/public/logo192.png renamed to react/public/logo192.png

File renamed without changes.

0 commit comments

Comments
 (0)