prop-types -> jsdoc

1 files changed, 147 insertions, 163 deletions

diff --git a/vnext/src/ui/Settings.js b/vnext/src/ui/Settings.js
index cf6926f8..61ac91d4 100644
--- a/vnext/src/ui/Settings.js
+++ b/vnext/src/ui/Settings.js
@@ -1,17 +1,13 @@
 import React, { useState, useEffect, useRef } from 'react';
-import PropTypes from 'prop-types';
-import ReactRouterPropTypes from 'react-router-prop-types';
 
 import { me, updateAvatar } from '../api';
 
-import { UserType } from './Types';
-
 import Button from './Button';
 import Icon from './Icon';
 import UploadButton from './UploadButton';
 import Avatar from './Avatar';
 
-function ChangeAvatarForm({ visitor }) {
+function ChangeAvatarForm({ visitor, onChange }) {
     const [avatar, setAvatar] = useState('');
     const [preview, setPreview] = useState();
     const avatarInput = useRef();
@@ -37,7 +33,7 @@ function ChangeAvatarForm({ visitor }) {
         updateAvatar(avatarInput.current.files[0]).then(() => {
             avatarChanged('');
             me().then(visitor => {
-                this.props.onChange(visitor);
+                onChange(visitor);
             });
         });
     };
@@ -52,185 +48,173 @@ function ChangeAvatarForm({ visitor }) {
         </form>
     );
 }
-
+/*
 ChangeAvatarForm.propTypes = {
-    visitor: UserType.isRequired
+    visitor: UserType.isRequired,
+    onChange: PropTypes.func.isRequired
 };
+*/
+export default function Settings({ visitor, onChange }) {
 
-export default class Settings extends React.Component {
-    constructor(props) {
-        super(props);
-        this.state = {
-            settings: {
-            },
-            me: {}
-        };
-    }
-    componentDidMount() {
-        me().then(visitor => {
-            this.setState({
-                me: visitor
-            });
-        });
-    }
-
-    passwordChanged = (event) => {
-        let newState = update(this.state, {
-            settings: { password: { $set: event.target.value } }
-        });
-        this.setState(newState);
-    }
-    onSubmitPassword = (event) => {
+    let passwordChanged = (event) => {
+        console.log('password changed');
+    };
+    let onSubmitPassword = (event) => {
         if (event.preventDefault) {
             event.preventDefault();
         }
         console.log('password update');
-    }
-    emailChanged = (event) => {
-        let newState = update(this.state, {
-            me: { activeEmail: { $set: event.target.value } }
-        });
-        this.setState(newState);
+    };
+    let emailChanged = (event) => {
         console.log('email update');
-    }
-    disableTelegram = () => {
+    };
+    let disableTelegram = () => {
         console.log('telegram disable');
-    }
-    disableFacebook = (event) => {
+    };
+    let disableFacebook = (event) => {
         if (event.preventDefault) {
             event.preventDefault();
         }
         console.log('facebook disable');
-    }
-    enableFacebook = (event) => {
+    };
+    let enableFacebook = (event) => {
         if (event.preventDefault) {
             event.preventDefault();
         }
         console.log('facebook enable');
-    }
-    disableTwitter = () => {
+    };
+    let disableTwitter = () => {
         console.log('twitter disable');
-    }
+    };
+    let deleteJid = () => {
 
-    render() {
-        const { me, settings } = this.state;
-        return (
-            <div className="msg-cont">
-                <fieldset>
-                    <legend><Icon name="ei-user" size="m" />Changing your avatar</legend>
-                    <ChangeAvatarForm visitor={me} />
-                </fieldset>
-                <fieldset>
-                    <legend><Icon name="ei-unlock" size="m" />Changing your password</legend>
+    };
+    let addEmail = () => {
+
+    };
+    let deleteEmail = () => {
+
+    };
+    return (
+        <div className="msg-cont">
+            <fieldset>
+                <legend><Icon name="ei-user" size="m" />Changing your avatar</legend>
+                <ChangeAvatarForm visitor={visitor} onChange={onChange} />
+            </fieldset>
+            <fieldset>
+                <legend><Icon name="ei-unlock" size="m" />Changing your password</legend>
+                <form>
+                    <p>Change password: <input type="password" name="password" size="8"
+                        onChange={passwordChanged} />
+                        <Button onClick={onSubmitPassword}>Update</Button><br />
+                        <i>(max. length - 16 symbols)</i></p>
+                </form>
+            </fieldset>
+            <fieldset>
+                <legend><Icon name="ei-sc-telegram" size="m" />Telegram</legend>
+                {visitor.telegramName ? (
                     <form>
-                        <p>Change password: <input type="password" name="password" size="8" onChange={this.passwordChanged} />
-                            <Button onClick={this.onSubmitPassword}>Update</Button><br />
-                            <i>(max. length - 16 symbols)</i></p>
-                    </form>
-                </fieldset>
-                <fieldset>
-                    <legend><Icon name="ei-sc-telegram" size="m" />Telegram</legend>
-                    {me.telegramName ? (
-                        <form>
-                            <div>Telegram: <b> {me.telegramName} </b>&mdash;
+                        <div>Telegram: <b> {visitor.telegramName} </b> &mdash;
                                 <Button onClick={this.disableTelegram}>Disable</Button>
-                            </div>
-                        </form>
-                    ) : (
-                            <p>To connect Telegram account: send any text message to <a href="https://telegram.me/Juick_bot">@Juick_bot</a>
-                            </p>
-                        )}
-                </fieldset>
-                {me.jids && (
-                    <form>
-                        <fieldset>
-                            <legend>XMPP accounts
-                                </legend>
-                            <p>Your accounts:</p>
-                            <p>
-                                {
-                                    me.jids.map(jid =>
-                                        <React.Fragment key={jid}>
-                                            <label><input type="radio" name="delete" value={jid} />{jid}</label><br />
-                                        </React.Fragment>
-                                    )
-                                }
-                            </p>
-                            {
-                                me.jids && me.jids.length > 1 &&
-                                <p><Button onClick={this.deleteJid}>Delete</Button></p>
-                            }
-                            <p>To add new jabber account: send any text message to <a href="xmpp:juick@juick.com?message;body=login">juick@juick.com</a>
-                            </p>
-                        </fieldset>
+                        </div>
                     </form>
-                )}
-                <fieldset>
-                    <legend><Icon name="ei-envelope" size="m" />E-mail</legend>
-                    <form>
-                        <p>Add account:<br />
-                            <input type="text" name="account" />
-                            <input type="hidden" name="page" value="email-add" />
-                            <Button onClick={this.addEmail}>Add</Button>
+                ) : (
+                        <p>To connect Telegram account: send any text message to <a href="https://telegram.me/Juick_bot">@Juick_bot</a>
                         </p>
-                    </form>
-                    <form>
+                    )}
+            </fieldset>
+            {me.jids && (
+                <form>
+                    <fieldset>
+                        <legend>XMPP accounts
+                                </legend>
                         <p>Your accounts:</p>
                         <p>
                             {
-                                me.emails ? me.emails.map(email =>
-                                    <React.Fragment key={email}>
-                                        <label>
-                                            <input type="radio" name="account" value={email} />{email}
-                                        </label>
-                                        <br />
+                                visitor.jids.map(jid =>
+                                    <React.Fragment key={jid}>
+                                        <label><input type="radio" name="delete" value={jid} />{jid}</label><br />
                                     </React.Fragment>
-                                ) : '-'
+                                )
                             }
                         </p>
                         {
-                            me.emails && me.emails.length > 1 &&
-                            <Button onClick={this.deleteEmail}>Delete</Button>
+                            visitor.jids && visitor.jids.length > 1 &&
+                            <p><Button onClick={deleteJid}>Delete</Button></p>
                         }
-                    </form>
+                        <p>To add new jabber account: send any text message to <span><a href="xmpp:juick@juick.com?message;body=login">juick@juick.com</a></span>
+                        </p>
+                    </fieldset>
+                </form>
+            )}
+            <fieldset>
+                <legend><Icon name="ei-envelope" size="m" />E-mail</legend>
+                <form>
+                    <p>Add account:<br />
+                        <input type="text" name="account" />
+                        <input type="hidden" name="page" value="email-add" />
+                        <Button onClick={addEmail}>Add</Button>
+                    </p>
+                </form>
+                <form>
+                    <p>Your accounts:</p>
+                    <p>
+                        {
+                            visitor.emails ? visitor.emails.map(email =>
+                                <React.Fragment key={email}>
+                                    <label>
+                                        <input type="radio" name="account" value={email} />{email}
+                                    </label>
+                                    <br />
+                                </React.Fragment>
+                            ) : '-'
+                        }
+                    </p>
                     {
-                        me.emails &&
-                        <>
-                            {/** email_off **/}
-                            <form>
-                                You can receive notifications to email:<br />
-                                Sent to <select name="account" value={me.activeEmail || 'Disabled'} onChange={this.emailChanged}>
-                                    <option value="">Disabled</option>
-                                    {
-                                        me.emails.map(email =>
-                                            <option key={email} value={email}>
-                                                {email}
-                                            </option>
-                                        )
-                                    }
-                                </select>
-                            </form>
-                            {/** /email_off **/}
-                            <p>&nbsp;</p>
-                            <p>You can post to Juick via e-mail. Send your <u>plain text</u> messages to <span><a href="mailto:juick@juick.com">juick@juick.com</a></span>. You can attach one photo or video file.</p>
-                        </>
+                        visitor.emails && visitor.emails.length > 1 &&
+                        <Button onClick={deleteEmail}>Delete</Button>
                     }
-                </fieldset>
-                <fieldset>
-                    <legend><Icon name="ei-sc-facebook" size="m" />Facebook</legend>
-                    {me.facebookStatus && me.facebookStatus.connected ? (
-                        me.facebookStatus.crosspostEnabled ?
+                </form>
+                {
+                    visitor.emails &&
+                    <>
+                        {/** email_off **/}
+                        <form>
+                            You can receive notifications to email:<br />
+                            Sent to <select name="account" value={me.activeEmail || 'Disabled'} onChange={emailChanged}>
+                                <option value="">Disabled</option>
+                                {
+                                    visitor.emails.map(email =>
+                                        <option key={email} value={email}>
+                                            {email}
+                                        </option>
+                                    )
+                                }
+                            </select>
+                        </form>
+                        {/** /email_off **/}
+                        <p>&nbsp;</p>
+                        <p>You can post to Juick via e-mail. Send your <u>plain text</u> messages to <a href="mailto:juick@juick.com">juick@juick.com</a>.
+                        You can attach one photo or video file.</p>
+                    </>
+                }
+            </fieldset>
+            <fieldset>
+                <legend><Icon name="ei-sc-facebook" size="m" />Facebook</legend>
+                {
+                    visitor.facebookStatus && visitor.facebookStatus.connected ? (
+                        visitor.facebookStatus.crosspostEnabled ?
                             <form>
                                 <div>
-                                    Facebook: <b>Enabled</b> &mdash;
-                                    <Button onClick={this.disableFacebook}>Disable</Button>
+                                    Facebook: <b>Enabled</b>&mdash;
+                                    <Button onClick={disableFacebook}>Disable</Button>
                                 </div>
                             </form>
                             :
                             <form>
                                 <div>
-                                    Facebook: <b>Disabled</b> &mdash;
-                                    <Button onClick={this.enableFacebook}>Enable</Button>
+                                    Facebook: <b>Disabled</b>&mdash;
+                                    <Button onClick={enableFacebook}>Enable</Button>
                                 </div>
                             </form>
                     ) : (
@@ -240,29 +224,29 @@ export default class Settings extends React.Component {
                                 </a>
                             </p>
                         )}
-                </fieldset>
-                <fieldset>
-                    <legend><Icon name="ei-sc-twitter" size="m" />Twitter</legend>
-                    {me.twitterName ?
-                        <form action="/settings" method="post">
-                            <div>Twitter: <b>{me.twitterName}</b> &mdash;
+            </fieldset>
+            <fieldset>
+                <legend><Icon name="ei-sc-twitter" size="m" />Twitter</legend>
+                {visitor.twitterName ?
+                    <form action="/settings" method="post">
+                        <div>Twitter: <b>{visitor.twitterName}</b>&mdash;
             <input type="hidden" name="page" value="twitter-del" />
-                                <Button onClick={this.disableTwitter}>Disable</Button>
-                            </div>
-                        </form>
-                        :
-                        <p>Cross-posting to Twitter: <a href="/_twitter"><img src="//static.juick.com/twitter-connect.png"
-                            alt="Connect to Twitter" /></a></p>
-                    }
-                </fieldset>
+                            <Button onClick={disableTwitter}>Disable</Button>
+                        </div>
+                    </form>
+                    :
+                    <p>Cross-posting to Twitter: <a href="/_twitter"><img src="//static.juick.com/twitter-connect.png"
+                        alt="Connect to Twitter" /></a></p>
+                }
+            </fieldset>
 
-            </div>
-        );
-    }
+        </div>
+    );
 }
-
+/*
 Settings.propTypes = {
     visitor: UserType.isRequired,
     onChange: PropTypes.func.isRequired
 };
+*/