/* eslint-disable no-console */
/* eslint-disable react/no-multi-comp */
import {
    component,
    service,
    store,
    inject,
    isClient,
    isServer,
    login,
    allow,
    React,
    style,
    setTheme,
} from 'fire';

if (isClient()) {
    // This is running on the client.
}
else if (isServer()) {
    // This is running on the server.
}

setTheme({
    magenta: `#f0f`,
});

@service
export class MyService {
    @login
    login(email) {
        if (email === `martijn@ff00ff.nl`) {
            return { id: 123 };
        }

        // TODO: Throw some error. Maybe use boom.errors?
    }

    @allow((payload) => () => payload && payload.id === 123)
    getItems() {
        return [
            `Item #1`,
            `Item #2`,
            `Item #3`,
        ];
    }
}

@inject(MyService, `myService`)
@store
class MyStore {
    items = [];

    get numberOfItems() {
        return this.items.length;
    }

    async loadItems() {
        const response = await this.myService.getItems();
        this.items = await response.json();
    }
}

@style((theme) => ({
    button: {
        background: theme.magenta,
    },
}))
@inject(MyService, `myService`)
@component(`/login`, { error: 401 })
export class Login extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            email: ``,
        };
    }

    handleChange = (event) => {
        this.setState({
            email: event.currentTarget.value,
        });
    }

    handleSubmit = (event) => {
        event.preventDefault();

        const {
            email,
        } = this.state;

        // TODO: How to handle errors?
        this.props.myService.login(email);
    };

    render() {
        const {
            classes,
        } = this.props;

        return (
            <form onSubmit={this.handleSubmit}>
                <h1>Login</h1>
                <input type="email" onChange={this.handleChange} />
                <button className={classes.button}>Submit</button>
            </form>
        );
    }
}

@inject(MyStore, `myStore`)
@component(`/`)
export default class App extends React.Component {
    componentDidMount() {
        this.props.myStore.loadItems();
    }

    render() {
        const {
            items,
            numberOfItems,
        } = this.props.myStore;

        return (
            <div>
                <h1>Hello, world!</h1>

                <p>There are {numberOfItems} items</p>
                {items.map((item) => <p key={item}>{item}</p>)}
            </div>
        );
    }
}

@@ -1,36 +1,4 @@
-/* eslint-disable no-console */%0A
 /* e
@@ -51,24 +51,22 @@
     
-component
+startup
 ,%0A    
-s
+S
 ervi
@@ -77,15 +77,47 @@
     
-s
+S
 tore,%0A
+    Switch,%0A    Route,%0A    Log,%0A
     
@@ -226,16 +226,96 @@
 fire';%0A%0A
+const log = new Log(%60fire:canary%60);%0A%0Alog.info(%60START%60);%0A%0A/*%0Astartup(() =%3E %7B%0A    
 if (isCl
@@ -320,32 +320,36 @@
 Client()) %7B%0A    
+    
 // This is runni
@@ -366,18 +366,79 @@
 client.%0A
-%7D%0A
+        // log.info(%60We're running on the client.%60);%0A    %7D%0A    
 else if 
@@ -452,24 +452,28 @@
 er()) %7B%0A    
+    
 // This is r
@@ -494,17 +494,81 @@
 server.%0A
-%7D
+        // log.info(%60We're running on the server.%60);%0A    %7D%0A%7D);%0A*/
 %0A%0AsetThe
@@ -602,32 +602,32 @@
 );%0A%0A
-@s
+class MyS
 ervice
-%0Aexport class My
+ extends 
 Serv
@@ -1035,15 +1035,8 @@
 e%60)%0A
-@store%0A
 clas
@@ -1045,16 +1045,30 @@
 MyStore 
+extends Store 
 %7B%0A    it
@@ -1223,24 +1223,56 @@
 getItems();%0A
+%0A        if (response.ok) %7B%0A    
         this
@@ -1299,24 +1299,100 @@
 nse.json();%0A
+        %7D%0A        else %7B%0A            this.history.push(%60/login%60);%0A        %7D%0A
     %7D%0A%7D%0A%0A@st
@@ -1505,52 +1505,8 @@
 e%60)%0A
-@component(%60/login%60, %7B error: 401 %7D)%0Aexport 
 clas
@@ -1790,16 +1790,22 @@
 Submit =
+ async
  (event)
@@ -1915,81 +1915,185 @@
     
-// TODO: How to handle errors?%0A        this.props.myService.login(email);
+const response = await this.props.myService.login(email);%0A%0A        if (response.ok) %7B%0A            this.props.history.push(%60/%60);%0A        %7D%0A        else %7B%0A            //%0A        %7D
 %0A   
@@ -2477,39 +2477,8 @@
 e%60)%0A
-@component(%60/%60)%0Aexport default 
 clas
@@ -2904,28 +2904,289 @@
   %3C/div%3E%0A        );%0A    %7D%0A%7D%0A
+%0Aclass Router extends React.Component %7B%0A    render() %7B%0A        return (%0A            %3CSwitch%3E%0A                %3CRoute path=%22/login%22 component=%7BLogin%7D /%3E%0A                %3CRoute path=%22/%22 component=%7BApp%7D /%3E%0A            %3C/Switch%3E%0A        );%0A    %7D%0A%7D%0A%0Astartup(Router);%0A

upgrade to latest version