broker 1.4.1

Real-time Zero-Code API Server
Documentation 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91

import React from 'react';
import { makeStyles } from '@material-ui/core/styles';
import Card from '@material-ui/core/Card';
import { useSSE, SSEProvider } from 'react-hooks-sse';
import CardContent from '@material-ui/core/CardContent';
import Typography from '@material-ui/core/Typography';
import { useForm } from "react-hook-form";
import {DebounceInput} from 'react-debounce-input';

const useStyles = makeStyles({
  card: {
    minWidth: 275,
    position: "absolute",
    top: "50%",
    left: "50%", 
    backgroundColor: "yellow",
    transform: "translateX(-50%) translateY(-50%)"
  },
  title: {
    fontSize: 25,
  },
});

const Comments = () => {
  const state = useSSE('user', {
    initialState: {
      data: {
        value: null,
      },
    },
    stateReducer(state, changes) {
      return changes;
    },
    parser(input) {
      return JSON.parse(input);
    },
  });

  return <p>{state.data.user !== null && <span>{state.data.user}</span>}</p>;
};

function App() {
  const classes = useStyles();
  const sseEndpoint = process.env.REACT_APP_EVENTS;
  const apiEndpoint = process.env.REACT_APP_API;
  const { handleSubmit, register, errors } = useForm();
  const onSubmit = values => {
    const ts = Math.round((new Date()).getTime() / 1000);
    const v = `{"event": "user", "published": false, "timestamp": ${ts}, "data": {"user": "${values.user}"}}`;
    fetch(apiEndpoint, {
      method: 'post',
      mode: 'cors',
      headers: {
        'Content-Type': 'application/json'
      },
      body: v
    }).then(response => {
      return response.json();
    }, err => {
      console.log(err);
    });
  };

  return (
    <div>
      <Card className={classes.card}>
       <CardContent>
        <Typography className={classes.title} color="textSecondary" gutterBottom component={'span'} variant={'body2'}>
          What is your name?&nbsp;
            <SSEProvider endpoint={sseEndpoint} options={{withCredentials: false}}>
              <Comments />
            </SSEProvider>
          </Typography>
          <form>
              <label htmlFor="user">Name: </label>
              <DebounceInput
                name="user"
                minLength={2}
                debounceTimeout={500}
                onChange={handleSubmit(onSubmit)}
                inputRef={register({})}
              />
              {errors.user && errors.user.message}
          </form>
        </CardContent>
      </Card>
    </div>
  );
}

export default App;