From 75033ce7d11cc3d0fd287cca6796ac6737f9aca5 Mon Sep 17 00:00:00 2001 From: Syed Rasheduddin Date: Wed, 13 Oct 2021 00:30:18 +0530 Subject: [PATCH 1/8] feat(freelancer): add mock data --- components/profile/FreelancerCard/index.tsx | 6 +- components/profile/FreelancerCard/mockdata.js | 22 +++++++ pages/freelancer.tsx | 16 ++--- src/mocks/handlers.tsx | 58 ++----------------- 4 files changed, 39 insertions(+), 63 deletions(-) create mode 100644 components/profile/FreelancerCard/mockdata.js diff --git a/components/profile/FreelancerCard/index.tsx b/components/profile/FreelancerCard/index.tsx index 1cf30c1..efa3551 100644 --- a/components/profile/FreelancerCard/index.tsx +++ b/components/profile/FreelancerCard/index.tsx @@ -1,6 +1,6 @@ import React from 'react' -function FreelancerCard({ name, skills, experience, rate, currency, image }) { +function FreelancerCard({ name, skills, expInYears, hourlyRate, currency, image }) { return ( <>
@@ -10,11 +10,11 @@ function FreelancerCard({ name, skills, experience, rate, currency, image }) {

{name}

{skills.toString()}

-

{experience} year exp

+

{expInYears} year exp

{currency}

-

{rate}/hr

+

{hourlyRate}/hr

diff --git a/components/profile/FreelancerCard/mockdata.js b/components/profile/FreelancerCard/mockdata.js new file mode 100644 index 0000000..af93cdc --- /dev/null +++ b/components/profile/FreelancerCard/mockdata.js @@ -0,0 +1,22 @@ +const freelancers = [ + { + id: '1', + name: 'Souvik Basu', + skills: ['React ', 'Vue ', 'Angular'], + expInYears: 18, + hourlyRate: 500, + currency: 'INR', + image: 'https://pbs.twimg.com/profile_images/1439826328493068288/IyDqiBVT_400x400.jpg', + }, + { + id: '2', + name: 'Souvik Basu', + skills: ['React ', 'Vue ', 'Angular'], + expInYears: 18, + hourlyRate: 500, + currency: 'INR', + image: 'https://pbs.twimg.com/profile_images/1439826328493068288/IyDqiBVT_400x400.jpg', + }, +] + +export default freelancers diff --git a/pages/freelancer.tsx b/pages/freelancer.tsx index 2ba38fe..ac492c4 100644 --- a/pages/freelancer.tsx +++ b/pages/freelancer.tsx @@ -3,14 +3,14 @@ import React from 'react' import FreelancerCard from '../components/profile/FreelancerCard' -const GET_FREELANCER = gql` - query Freelancer { - freelancer { +const GET_FREELANCERS = gql` + query getFreelancers { + freelancers { id name skills - experience - rate + expInYears + hourlyRate currency image } @@ -18,12 +18,12 @@ const GET_FREELANCER = gql` ` function Freelancer() { - const { data } = useQuery(GET_FREELANCER) + const { data } = useQuery(GET_FREELANCERS) return (
- {data?.freelancer.map((freelancer) => ( + {data?.freelancers.map((freelancers) => ( // eslint-disable-next-line react/jsx-props-no-spreading - + ))}
) diff --git a/src/mocks/handlers.tsx b/src/mocks/handlers.tsx index 519790c..e084a29 100644 --- a/src/mocks/handlers.tsx +++ b/src/mocks/handlers.tsx @@ -2,60 +2,14 @@ import { graphql } from 'msw' +import freelancers from '../../components/profile/FreelancerCard/mockdata' + export const handlers = [ - graphql.query('Projects', (req, res, ctx) => - res( - ctx.data({ - projects: [ - { - name: 'react', - description: 'some desc some desc some dessc', - __typename: 'Projects', - priceRange: 'low', - }, - { - name: 'angular', - description: 'some desc some desc some dessc', - __typename: 'Projects', - priceRange: 'medium', - }, - { - name: 'vue', - description: 'some desc some desc some dessc', - __typename: 'Projects', - priceRange: 'high', - }, - ], - }) - ) -), - graphql.query('Freelancer', (req, res, ctx) => + graphql.query('getFreelancers', (req, res, ctx) => res( ctx.data({ - freelancer: [ - { - id: 1, - name: 'react', - description: 'some desc some desc some dessc', - __typename: 'Projects', - priceRange: 'low', - }, - { - id: 2, - name: 'angular', - description: 'some desc some desc some dessc', - __typename: 'Projects', - priceRange: 'medium', - }, - { - id: 3, - name: 'vue', - description: 'some desc some desc some dessc', - __typename: 'Projects', - priceRange: 'high', - }, - ], + freelancers, }) ) - ) -] \ No newline at end of file + ), +] From b6dadee1f7af0e9a265b89f53ef691870f1785a9 Mon Sep 17 00:00:00 2001 From: Syed Rasheduddin Date: Wed, 13 Oct 2021 00:42:35 +0530 Subject: [PATCH 2/8] feat(freelancer): add freelancers data --- components/profile/FreelancerCard/mockdata.js | 19 ++++++++++++++----- 1 file changed, 14 insertions(+), 5 deletions(-) diff --git a/components/profile/FreelancerCard/mockdata.js b/components/profile/FreelancerCard/mockdata.js index af93cdc..35a9765 100644 --- a/components/profile/FreelancerCard/mockdata.js +++ b/components/profile/FreelancerCard/mockdata.js @@ -10,12 +10,21 @@ const freelancers = [ }, { id: '2', - name: 'Souvik Basu', - skills: ['React ', 'Vue ', 'Angular'], - expInYears: 18, - hourlyRate: 500, + name: 'Syed Rasheduddin', + skills: ['React', 'Javascript'], + expInYears: 1, + hourlyRate: 400, currency: 'INR', - image: 'https://pbs.twimg.com/profile_images/1439826328493068288/IyDqiBVT_400x400.jpg', + image: 'https://avatars.githubusercontent.com/u/64092741?v=4', + }, + { + id: '3', + name: 'Hussam Khatib', + skills: ['React', 'Graphql'], + expInYears: 1, + hourlyRate: 400, + currency: 'INR', + image: 'https://ca.slack-edge.com/TFM2TLDGT-U020ZS8SWR0-fd73a8b50eb3-512', }, ] From 82f9f51ca4545be2ff092c171478c3e4155f8687 Mon Sep 17 00:00:00 2001 From: Syed Rasheduddin Date: Wed, 20 Oct 2021 15:56:45 +0530 Subject: [PATCH 3/8] feat(freelancer): add list of freelancer and their profile --- components/profile/Avatar/index.tsx | 13 +- components/profile/Bio/index.tsx | 9 +- components/profile/Contacts/index.tsx | 9 +- components/profile/ContriesICanWork/index.tsx | 9 +- .../DeveloperCommunityInvolement/index.tsx | 9 +- components/profile/Education/index.tsx | 9 +- components/profile/FreelancerCard/index.tsx | 30 +- components/profile/Heading/index.tsx | 6 +- components/profile/Hobbies/index.tsx | 9 +- components/profile/Languages/index.tsx | 9 +- .../profile/ProfessinalExperience/index.tsx | 9 +- components/profile/Profile/index.tsx | 13 +- components/profile/ProfileMain/index.tsx | 8 +- components/profile/ProfileSidebar/index.tsx | 16 +- components/profile/Skills/index.tsx | 9 +- components/profile/Sport/index.tsx | 9 +- components/profile/UserNameTitle/index.tsx | 25 +- package-lock.json | 27498 +++++++++++++++- package.json | 2 +- pages/freelancer.tsx | 40 +- tailwind.config.js | 2 +- 21 files changed, 27544 insertions(+), 199 deletions(-) diff --git a/components/profile/Avatar/index.tsx b/components/profile/Avatar/index.tsx index 22bd6c6..53ba113 100644 --- a/components/profile/Avatar/index.tsx +++ b/components/profile/Avatar/index.tsx @@ -1,7 +1,6 @@ /* eslint-disable jsx-a11y/label-has-associated-control */ // import Axios from 'axios' import { gql, useMutation, useQuery } from '@apollo/client' -import { useUser } from '@auth0/nextjs-auth0' import IconButton from '@material-ui/core/IconButton' import { createStyles, makeStyles } from '@material-ui/core/styles' import DeleteIcon from '@material-ui/icons/Delete' @@ -40,14 +39,12 @@ const UPDATE_USER = gql` } ` -const Avatar = () => { +const Avatar = ({ data, display, userId }) => { const classes = useStyles() const [edit, setEdit] = useState(false) const [popUp, setPopup] = useState(false) const [picture, setPicture] = useState(null) - const { user } = useUser() - const userId = user?.sub?.split('|')[1] - const { loading, data } = useQuery(GET_USER, { + const { loading } = useQuery(GET_USER, { variables: { _id: userId }, }) const [updateUserPicture, { error }] = useMutation(UPDATE_USER) @@ -83,8 +80,8 @@ const Avatar = () => { } useEffect(() => { - if (data?.user?.picture) { - setPicture(data.user.picture) + if (data?.picture) { + setPicture(data.picture) setEdit(false) } else setEdit(true) }, [data]) @@ -94,7 +91,7 @@ const Avatar = () => { return (
- {edit ? ( + {edit || display ? (