src/components/ObjectComponent.js


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

import React from "react";

class ObjectComponent extends React.Component {
    render() {
        console.log(this.props);
        let { user_presentation, ...rest } = this.props;
        return (
            <div className="object">
                <h1>
                    <a href={`/${this.props._id}`}>Scan {this.props._id}</a>
                </h1>
                <GenericTable data={rest} />
                <UserPresentation
                    description={user_presentation.description}
                    data={user_presentation.data}
                />
            </div>
        );
    }
}

function GenericTable(props) {
    return (
        <table>
            <tbody>
                {Object.entries(props.data).map(([key, value]) => {
                    return (
                        <tr key={key}>
                            <td>{key}</td>
                            <td>{value}</td>
                        </tr>
                    );
                })}
            </tbody>
        </table>
    );
}

function UserPresentation(props) {
    return (
        <div className="user-presentation">
            <div className="header">Scanner-unique data</div>
            {props.description && (
                <div className="description">{props.description}</div>
            )}
            <table>
                <tbody>
                    {Object.entries(props.data).map(
                        ([key, { data, display_name, description }]) => {
                            return (
                                <tr key={key}>
                                    <td>{display_name}</td>
                                    {description && (
                                        <td className="description">
                                            {description}
                                        </td>
                                    )}
                                    <td>{data.toString()}</td>
                                </tr>
                            );
                        }
                    )}
                </tbody>
            </table>
        </div>
    );
}

export default ObjectComponent;