fix: resolve conflict

Signed-off-by: Amir Movahedi <[email protected]>
red-gold · May 23, 2021 · 58eb592 · 58eb592
2 parents 8c8f5c3 + d27e116
commit 58eb592
Show file tree

Hide file tree

Showing 24 changed files with 375 additions and 357 deletions.
diff --git a/.firebase/hosting.YnVpbGQ.cache b/.firebase/hosting.YnVpbGQ.cache
diff --git a/.gitignore b/.gitignore
@@ -27,4 +27,7 @@ src/components/AWS.tsx
 docker/config/.env.secrets
 ts-frontend/dist
 docker/mongodb/*
-docker/minio-persistence/*
+docker/minio-persistence/*
+
+.firebase/*
+ts-frontend/dist/*
diff --git a/package.json b/package.json
@@ -24,10 +24,11 @@
     "@craco/craco": "6.1.1",
     "@emotion/react": "^11.4.0",
     "@emotion/styled": "^11.3.0",
-    "@material-ui/core": "^5.0.0-alpha.33",
-    "@material-ui/icons": "^5.0.0-alpha.29",
-    "@material-ui/lab": "^5.0.0-alpha.33",
+    "@material-ui/core": "^5.0.0-alpha.34",
+    "@material-ui/icons": "^5.0.0-alpha.34",
+    "@material-ui/lab": "^5.0.0-alpha.34",
     "@types/react-router-dom": "^5.1.7",
+    "@types/validator": "^13.1.3",
     "axios": "^0.21.1",
     "classnames": "^2.2.6",
     "copy-to-clipboard": "^3.1.0",
@@ -121,6 +122,7 @@
     "typeface-roboto": "0.0.54",
     "use-bus": "^2.3.1",
     "uuid": "^3.3.2",
+    "validator": "^13.6.0",
     "web-vitals": "^1.1.1",
     "workbox-background-sync": "^6.1.5",
     "workbox-broadcast-update": "^6.1.5",

diff --git a/public/locales/translations/enjson_en.json b/public/locales/translations/enjson_en.json
@@ -133,7 +133,9 @@
         "twitterExampleLabel": "you twitter user name ex. twitter",
         "facebookExampleLabel": "your facebook page name ex. facebook",
         "chooseBirthday": "Pick your birthday",
-        "nothingToShowLabel": "🤷 Nothing to show! :("
+        "nothingToShowLabel": "🤷 Nothing to show! :(",
+        "fullNameInputError": "This field is required",
+        "webURLInputError": "Please enter a valid URL, e.g. https://telar.dev"
 
     },
     "people": {

diff --git a/src/components/chat/ChatComponent.tsx b/src/components/chat/ChatComponent.tsx
@@ -143,7 +143,9 @@ export class ChatComponent extends Component<IChatProps & WithTranslation, IChat
     /**
      * Handle toggle emoji
      */
-    handleToggleEmoji = () => {
+    handleToggleEmoji = (event: any) => {
+        event.stopPropagation();
+        event.preventDefault();
         if (this.state.emojiOpen) {
             this.handleCloseEmojiMenu();
         } else {
@@ -495,8 +497,10 @@ export class ChatComponent extends Component<IChatProps & WithTranslation, IChat
                                 disableUnderline
                                 fullWidth
                                 value={messageText}
+                                onClick={this.handleClickInput}
                                 onKeyDown={this.handleKeyPress}
                                 onChange={this.handleChange('messageText')}
+                                autoComplete="off"
                                 endAdornment={
                                     <InputAdornment position="end">
                                         <EmojiIcon className={classes.emojiIcon} onClick={this.handleToggleEmoji} />

diff --git a/src/components/editProfile/EditProfileComponent.tsx b/src/components/editProfile/EditProfileComponent.tsx
@@ -19,6 +19,9 @@ import { connectEditProfile } from './connectEditProfile';
 import MobileDialog from '../mobileDialog';
 import GalleryComponent from '../gallery';
 import DatePicker from '../datePicker';
+import { Map } from 'immutable';
+import isEmpty from 'validator/lib/isEmpty';
+import isURL from 'validator/lib/isURL';
 
 export class EditProfileComponent extends Component<IEditProfileProps & WithTranslation, IEditProfileState> {
     constructor(props: IEditProfileProps & WithTranslation) {
@@ -38,10 +41,6 @@ export class EditProfileComponent extends Component<IEditProfileProps & WithTran
              * User full name input value
              */
             fullNameInput: currentUser.get('fullName', ''),
-            /**
-             * Error message of full name input
-             */
-            fullNameInputError: '',
             /**
              * User banner address
              */
@@ -103,6 +102,11 @@ export class EditProfileComponent extends Component<IEditProfileProps & WithTran
              * User facebook id
              */
             accessUserList: currentUser && currentUser.get('accessUserList') ? currentUser.get('accessUserList') : [],
+
+            /**
+             * Input errors
+             */
+            errors: Map({}),
         };
 
         // Binding functions to `this`
@@ -196,6 +200,22 @@ export class EditProfileComponent extends Component<IEditProfileProps & WithTran
         });
     };
 
+    /**
+     * Validate inputs
+     */
+    validateInputs = () => {
+        let errors: Map<string, string> = Map({});
+        const { fullNameInput, webUrl } = this.state;
+        const { t } = this.props;
+        if (isEmpty(fullNameInput, { ignore_whitespace: true })) {
+            errors = errors.set('fullNameInput', t('profile.fullNameInputError'));
+        }
+        if (!isEmpty(fullNameInput, { ignore_whitespace: true }) && !isURL(webUrl, { require_protocol: true })) {
+            errors = errors.set('webUrl', t('profile.webURLInputError'));
+        }
+        this.setState({ errors });
+    };
+
     /**
      * Update profile on the server
      */
@@ -212,18 +232,11 @@ export class EditProfileComponent extends Component<IEditProfileProps & WithTran
             facebookId,
             accessUserList,
             permission,
+            errors,
         } = this.state;
         const { currentUser, update } = this.props;
 
-        if (fullNameInput.trim() === '') {
-            this.setState({
-                fullNameInputError: 'This field is required',
-            });
-        } else {
-            this.setState({
-                fullNameInputError: '',
-            });
-
+        if (!errors.size) {
             update({
                 fullName: fullNameInput,
                 tagLine: tagLineInput,
@@ -249,9 +262,14 @@ export class EditProfileComponent extends Component<IEditProfileProps & WithTran
         const target = event.target;
         const value = target.type === 'checkbox' ? target.checked : target.value;
         const name = target.name;
-        this.setState({
-            [name]: value,
-        });
+        this.setState(
+            {
+                [name]: value,
+            },
+            () => {
+                this.validateInputs();
+            },
+        );
     };
 
     /**
@@ -358,14 +376,14 @@ export class EditProfileComponent extends Component<IEditProfileProps & WithTran
                         {/* Edit user information box*/}
                         <div className={classes.box}>
                             <TextField
-                                error={!!this.state.fullNameInputError}
                                 id="fullNameInput"
                                 label={t('profile.fullName')}
                                 onChange={this.handleInputChange}
                                 name="fullNameInput"
                                 value={this.state.fullNameInput}
                                 fullWidth
-                                helperText={this.state.fullNameInputError}
+                                error={!!this.state.errors.get('fullNameInput')}
+                                helperText={this.state.errors.get('fullNameInput')}
                             />
                         </div>
                         <div className={classes.box}>
@@ -378,7 +396,6 @@ export class EditProfileComponent extends Component<IEditProfileProps & WithTran
                                 multiline
                                 maxRows={3}
                                 fullWidth
-                                helperText={this.state.fullNameInputError}
                             />
                         </div>
                         <div className={classes.box}>
@@ -428,6 +445,8 @@ export class EditProfileComponent extends Component<IEditProfileProps & WithTran
                                 value={webUrl}
                                 label={t('profile.webUrl')}
                                 fullWidth
+                                error={!!this.state.errors.get('webUrl')}
+                                helperText={this.state.errors.get('webUrl')}
                             />
                         </div>
                         <div className={classes.box}>

diff --git a/src/components/editProfile/IEditProfileState.ts b/src/components/editProfile/IEditProfileState.ts
@@ -1,17 +1,15 @@
 import { UserPermissionType } from 'core/domain/common/userPermissionType';
-
+import { Map } from 'immutable';
 export interface IEditProfileState {
     [key: string]: any;
+
+    errors: Map<string, string>;
+
     /**
      * Full name input value
      */
     fullNameInput: string;
 
-    /**
-     * Full name input error message
-     */
-    fullNameInputError: string;
-
     /**
      * Whether image editor is open
      */

diff --git a/src/components/findPeople/FindPeopleComponent.tsx b/src/components/findPeople/FindPeopleComponent.tsx
@@ -77,8 +77,6 @@ export function FindPeopleComponent() {
             {(loading || hasMorePeople) && (
                 <div ref={sentryRef} className={classes.skeletonRoot}>
                     <UserBoxSkeleton />
-                    <UserBoxSkeleton />
-                    <UserBoxSkeleton />
                 </div>
             )}
         </div>

diff --git a/src/components/findPeople/findPeopleStyles.ts b/src/components/findPeople/findPeopleStyles.ts
@@ -8,6 +8,7 @@ import { makeStyles } from '@material-ui/core/styles';
 export const useStyles = makeStyles(() => ({
     skeletonRoot: {
         display: 'flex',
-        justifyContent: 'space-between',
+        justifyContent: 'center',
+        alignItems: 'center',
     },
 }));
diff --git a/src/components/img/IImgComponentProps.ts b/src/components/img/IImgComponentProps.ts
@@ -2,7 +2,7 @@ export interface IImgComponentProps {
     /**
      * Image file name
      */
-    fileName: string;
+    fileName?: string;
 
     /**
      * Image style sheet
@@ -13,14 +13,4 @@ export interface IImgComponentProps {
      * Handle click event
      */
     onClick?: (event: any) => void;
-
-    /**
-     * Styles
-     */
-    classes?: any;
-
-    /**
-     * Translate to locale string
-     */
-    t?: (state: any) => any;
 }
diff --git a/src/components/img/IImgComponentState.ts b/src/components/img/IImgComponentState.ts