diff --git a/modules/look/client-react/ui-antd/styles/index.less b/modules/look/client-react/ui-antd/styles/index.less index 1286cd9c7..70a095e4e 100644 --- a/modules/look/client-react/ui-antd/styles/index.less +++ b/modules/look/client-react/ui-antd/styles/index.less @@ -4,7 +4,7 @@ @import './antd-landing/antMotionStyle.less'; @import './scrollbar.less'; @import './layout.less'; - +@import './user.less'; diff --git a/modules/look/client-react/ui-antd/styles/user.less b/modules/look/client-react/ui-antd/styles/user.less new file mode 100644 index 000000000..1fae36464 --- /dev/null +++ b/modules/look/client-react/ui-antd/styles/user.less @@ -0,0 +1,66 @@ +.profile-view-card-cover { + height: 33vw; + width: 100%; + background-position: center; + background-size: cover; +} + +.profile-view-card-style { + margin-top: 54px; + border-radius: 0; + border: 0; + position: relative; +} + +.profile-view-avatar { + position: absolute; + top: -80px; + border: 5px solid white; +} + +.profile-view-edit-export-buttons { + position: absolute; + top: 24px; + right: 24px; +} + +.profile-view-export-button { + margin-right: 24px; +} + +.profile-view-user-about { + margin-bottom: 24px; +} + +/* +.profile-view-social-icons { + font-size: 40px; + color: rgba(65, 65, 60, 0.5); +} +.profile-view-portfolio-name { + font-size: 27px; +} + +.profile-view-portfolio-add-button { + position: absolute; + top: 24px; + right: 24px; +} + +profile-view-.portfolios { + margin-left: -12px; + margin-right: -12px; +} + +.profile-view-portfolio-col { + margin-bottom: 10px; + padding-left: 12px; + padding-right: 12px; +} + +.profile-view-portfolio-card { + position: relative; + cursor: pointer; + width: 100%; +} +*/ diff --git a/modules/user/client-react/components/ProfileView.web.jsx b/modules/user/client-react/components/ProfileView.web.jsx index bdc68aaf3..f5457d51f 100644 --- a/modules/user/client-react/components/ProfileView.web.jsx +++ b/modules/user/client-react/components/ProfileView.web.jsx @@ -1,207 +1,235 @@ -import React from 'react'; -import PropTypes from 'prop-types'; -import Helmet from 'react-helmet'; -import { Link } from 'react-router-dom'; -import { StripeSubscriptionProfile } from '@gqlapp/payments-client-react'; -import { translate } from '@gqlapp/i18n-client-react'; -import { - Card, - // CardGroup, - CardText, - // CardTitle, - PageLayout -} from '@gqlapp/look-client-react'; -import { Row, Col, Divider, Icon, Button, Spin as Loader } from 'antd'; -import UserVerificationsComponent from './verification/UserVerificationsComponent'; -import ProfileHeadComponent from './components/ProfileHeadComponent'; -// import UsersCardComponent from './UsersCardComponent'; -import settings from '../../../../settings'; -import AddressCardComponent from './components/AddressCardComponent'; -import userCardData from '../helpers/userCardData'; - -// To Do Abstract Out - -class ProfileView extends React.Component { - getUserId = () => { - let id = 0; - if (this.props.match) { - id = Number(this.props.match.params.id); - } else if (this.props.navigation) { - id = Number(this.props.navigation.state.params.id); - } - return id; - }; +import React, { Component } from "react"; +import PropTypes from "prop-types"; +import { PageLayout, Tooltip } from "@gqlapp/look-client-react"; +import { Avatar, Card, Button, Divider, Icon, Row, Col } from "antd"; +const { Meta } = Card; + +class ProfileView extends Component { render() { - const renderMetaData = t => { - return ( - + {/*Cover photo*/} + + + } + className="profile-view-card-style" + bodyStyle={{ + maxWidth: "1200px", + margin: "auto", + position: "inherit", + paddingTop: "104px", + }} + > + {/*Avatar*/} + + + + {/*Avatar description*/} + + {user.profile && user.profile.firstName && user.profile.lastName + ? user.profile.firstName + " " + user.profile.lastName + : "No Name Provided"} + } - ]} - /> - ); - }; - const { t } = this.props; - const { currentUser, currentUserLoading } = this.props; - - if (currentUserLoading && !currentUser) { - return ( - - {renderMetaData(t)} - - - ); - } else if (currentUser) { - return ( - - {renderMetaData(t)} - - - - -

- My Profile -
- - - -
-

- - {`${user.skillDisplay.skill || ""} ${user.userType.type}`}} + /> + +
+ + {/*edit and export buttons*/} +
+ + + + + +
+ + {/*about and socialmedia links*/} + + +
+ About Me!? Haha U already know! +
+ + {/*} + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +*/} + + + + info + + + {/* + + -> No One + + + + + -> Hyderabad + + + + + + -> My mind + + + + + + -> Telugu,Hindi,English + + + + + + + + + +

Portfolio

+ + +
+ +
+ + +
+
+ + + + + + } + actions={[ + , + , + ]} + > + - - - -
-

- {t('profile.card.group.name')}: -

- {currentUser.username} -
-
-

- {t('profile.card.group.about')}: -

- - - {currentUser.profile && currentUser.profile.about ? currentUser.profile.about : 'Not Provided'} - -
- -
-

- {t('profile.card.group.role')}: -

- - {currentUser.role ? currentUser.role : 'Not Provided'} -
- - {/* Portfolios */} -

- {t('profile.card.group.portfolios.title')} -

- {currentUser.portfolios && currentUser.portfolios.length !== 0 - ? currentUser.portfolios.map((portfolio, key) => ( -
- - {portfolio.platform} : {portfolio.portfolioUrl} - -
- )) - : 'Not Provided'} - - -
-

- {t('profile.card.group.email')}: -

- - {currentUser.email ? currentUser.email : 'Not Provided'} -
- -
-

- Mobile -

- - {currentUser.profile && currentUser.profile.mobile - ? currentUser.profile.mobile - : 'Not Provided'} - -
- - - -

- {t('profile.card.group.addresses.title')} -

- - {currentUser.addresses && currentUser.addresses.length !== 0 - ? currentUser.addresses.map((address, key) => ( - - - - )) - : 'Not Provided'} - - - {/* Credit card info (Stripe subscription module)*/} - {settings.stripe.subscription.enabled && - settings.stripe.subscription.publicKey && - currentUser.role === 'user' && } - - - - - - + + + } + actions={[ + , + , + ]} + > + + + + + + } + actions={[ + , + , + ]} + > + + - - ); - } else { - return ( - - {renderMetaData(t)} -

{t('profile.errorMsg')}

- - ); - } +*/} + + + ); } } ProfileView.propTypes = { - currentUserLoading: PropTypes.bool, - currentUser: PropTypes.object, - t: PropTypes.func, - match: PropTypes.object, - navigation: PropTypes.object + user: PropTypes.shape({ + username: PropTypes.string, + role: PropTypes.string, + profile: PropTypes.shape({ + firstName: PropTypes.string, + lastName: PropTypes.string, + cover: PropTypes.string, + avatar: PropTypes.string, + }), + }), }; -export default translate('user')(ProfileView); + +export default ProfileView; diff --git a/modules/user/client-react/containers/Profile.jsx b/modules/user/client-react/containers/Profile.jsx index 92933f546..27f632396 100644 --- a/modules/user/client-react/containers/Profile.jsx +++ b/modules/user/client-react/containers/Profile.jsx @@ -1,174 +1,20 @@ -import React from 'react'; -import { graphql } from 'react-apollo'; -import PropTypes from 'prop-types'; +import React from "react"; +import ProfileView from "../components/ProfileView"; -import { compose } from '@gqlapp/core-common'; - -import ProfileView from '../components/ProfileView'; - -import CURRENT_USER_QUERY from '../graphql/CurrentUserQuery.graphql'; - -const Profile = props => { - const { currentUser } = props; - const { profile } = currentUser; - const profile_data = { - id: currentUser.id, - username: currentUser.role, - role: currentUser.role, - isActive: currentUser.isActive, - email: currentUser.id, +const Profile = (props) => { + const user = { + username: "username", + role: "user", profile: { - firstName: profile.firstName, - lastName: profile.lastName, - isVerified: true, - isAvailable: true, - website: 'www.google.com', - about: 'web developer', - designation: 'dev', + firstName: "Yashwanth", + lastName: "Sambaraj", + cover: + "https://res.cloudinary.com/dpvrqxttb/image/upload/v1604566920/edgenus/image/nkzfil4lqjf556ipjwi5.png", avatar: - 'https://images.unsplash.com/photo-1518806118471-f28b20a1d79d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=700&q=80', - rating: 5, - responseTime: 35, - acceptanceRate: 35, - mobile: 8888888888, - flag: 'good' - }, - - photoId: { - image: - 'https://images.unsplash.com/photo-1518806118471-f28b20a1d79d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=700&q=80', - isVerified: true, - error: null - }, - addresses: [ - { - streetAddress1: 'aaaaaaaa', - streetAddress2: 'bbbbbbb', - city: 'ccccc', - state: 'dddddd', - pinCode: 'eeeeee' - }, - { - streetAddress1: 'wwaaaaaa', - streetAddress2: 'wwwbbbbb', - city: 'wwccc', - state: 'wwdddd', - pinCode: 'wweeee' - } - ], - - identification: { - type: 'government', - documentUrl: - 'https://images.unsplash.com/photo-1518806118471-f28b20a1d79d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=700&q=80', - isVerified: true, - error: null - }, - verification: { - isEmailVerified: true, - isMobileVerified: false, - isPhotoIdVerified: false, - isAddressVerified: false, - isIdVerified: true, - isReferred: false + "https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcQV9IZZN1faELpjixZnAeYWoESqnPoIpFiPcw&usqp=CAU", }, - endorsements: [ - { - id: 5, - username: 'laluch', - profile: { - firstName: 'of', - lastName: 'rebellion', - avatar: null - } - } - ], - endorsed: [ - { - id: 5, - username: 'laluch', - profile: { - firstName: 'of', - lastName: 'rebellion', - avatar: null - } - } - ], - followers: [ - { - id: 5, - username: 'laluch', - profile: { - firstName: 'of', - lastName: 'rebellion', - avatar: null - } - } - ], - following: [ - { - id: 5, - username: 'laluch', - profile: { - firstName: 'of', - lastName: 'rebellion', - avatar: null - } - } - ], - - portfolios: [ - { - platform: 'google', - portfolioUrl: 'www.google.com' - } - ], - // authCertificate { - // serial - // } - // authFacebook { - // fbId - // displayName - // } - // authGoogle { - // googleId - // displayName - // } - // authGithub { - // ghId - // displayName - // } - // authLinkedin { - // lnId - // displayName - // } - createdAt: currentUser.createdAt, - updatedAt: currentUser.updatedAt }; - - return ; -}; - -Profile.propTypes = { - currentUser: PropTypes.object - // shape({ - // id: PropTypes.number, - // role: PropTypes.string, - // isActive: PropTypes.bool, - // createdAt: PropTypes.string, - // updatedAt: PropTypes.string, - // profile: PropTypes.shape({ - // firstName: PropTypes.string, - // lastName: PropTypes.string - // }) - // }) + return ; }; -export default compose( - graphql(CURRENT_USER_QUERY, { - props({ data: { loading, error, currentUser } }) { - if (error) throw new Error(error); - return { loading, currentUser }; - } - }) -)(Profile); +export default Profile; diff --git a/package.json b/package.json index 13b07961b..8caac3be5 100644 --- a/package.json +++ b/package.json @@ -193,3 +193,4 @@ "watchpack": "https://github.com/Globegitter/watchpack" } } + diff --git a/yarn.lock b/yarn.lock index 2c9cca36f..b7bb844b4 100644 --- a/yarn.lock +++ b/yarn.lock @@ -22573,7 +22573,6 @@ react-native-view-shot@3.1.2: "react-native@https://github.com/expo/react-native/archive/sdk-35.0.0.tar.gz": version "0.59.8" - uid cf62758ae75b5df304836ad9971239abdb240587 resolved "https://github.com/expo/react-native/archive/sdk-35.0.0.tar.gz#cf62758ae75b5df304836ad9971239abdb240587" dependencies: "@babel/runtime" "^7.0.0" @@ -22940,7 +22939,7 @@ react@16.9.0: object-assign "^4.1.1" prop-types "^15.6.2" -react@^16.0.0, react@^16.8.3, react@^16.9.0: +react@^16.0.0, react@^16.8.3: version "16.13.1" resolved "https://registry.yarnpkg.com/react/-/react-16.13.1.tgz#2e818822f1a9743122c063d6410d85c1e3afe48e" integrity sha512-YMZQQq32xHLX0bz5Mnibv1/LHb3Sqzngu7xstSM+vrkE5Kzr9xE0yMByK5kMoTK30YVJE61WfbxIFFvfeDKT1w==