diff --git a/src/common/contributor-dashboard/ContributorPlay.jsx b/src/common/contributor-dashboard/ContributorPlay.jsx new file mode 100644 index 0000000000..8ae8525f54 --- /dev/null +++ b/src/common/contributor-dashboard/ContributorPlay.jsx @@ -0,0 +1,83 @@ +import { useState, useEffect } from 'react'; +import { Link } from 'react-router-dom'; +import { BsPlayCircleFill } from 'react-icons/bs'; +import thumbPlay from 'images/thumb-play.png'; +import Shimmer from 'react-shimmer-effect'; +import userImage from 'images/user.png'; +import Like from 'common/components/Like/Like'; +import { useUserId, useAuthenticated } from '@nhost/react'; +import countByProp from 'common/utils/commonUtils'; + +const PlayThumbnail = ({ play }) => { + const [cover, setCover] = useState(null); + const isAuthenticated = useAuthenticated(); + const userId = useUserId(); + + const likeObject = () => { + const { play_like } = play; + const number = countByProp(play_like, 'liked', true); + if (isAuthenticated) { + const liked = play_like.find((i) => i.user_id === userId)?.liked; + + return { liked, number }; + } + + return { liked: false, number }; + }; + + useEffect(() => { + // Set the cover image + // if it is passed as a meta data + if (play.cover) { + setCover(play.cover); + } else { + // if it is not passed as a meta data + // check in the play folder for a cover image + // with the name cover.png + import(`plays/${play.slug}/cover.png`) + .then((Cover) => { + setCover(Cover.default); + }) + .catch((err) => { + // if there is no cover image, set a default image + setCover(thumbPlay); + + return { + success: false, + error: err, + message: `Cover image not found for the play ${play.name}. Setting the default cover image...` + }; + }); + } + }, [play]); + + return ( +
  • + +
    + + + +
    + +
    +
    {play.name}
    + +
    +
    + +
    +
    +
    +
    +
    + +
    Play now
    +
    Playing..
    +
    + +
    • + ); +}; + +export default PlayThumbnail; diff --git a/src/common/contributor-dashboard/index.js b/src/common/contributor-dashboard/index.js new file mode 100644 index 0000000000..4f93f121c0 --- /dev/null +++ b/src/common/contributor-dashboard/index.js @@ -0,0 +1,200 @@ +import { Helmet } from 'react-helmet'; +import useContributors from 'common/hooks/useContributors'; +import { useUserData, useAuthenticationStatus } from '@nhost/react'; +import { NHOST } from 'common/const'; +import { getAllBadgesByUserId, getUserByEmail } from 'common/services/badges'; +import './tablist.css'; +import { useEffect, useState } from 'react'; +import { submit } from 'common/services/request'; +import Badge from 'common/badges-dashboard/Badge'; +import BadgeDetails from 'common/badges-dashboard/BadgeDetails'; +import useGitHub from 'common/hooks/useGitHub'; +import { useParams } from 'react-router-dom'; +import ContributorPlay from './ContributorPlay'; +import { FetchContributorInfoFilterByEmail } from 'common/services/request/query/fetch-contributor-info-filter-by-email'; +// import { startFetchMyQuery } from 'common/services/request/query/fetch-contributor-info-filter-by-email'; +import { ReactComponent as ImageOops } from 'images/img-oops.svg'; + +const ContributorDashboard = () => { + const TabList = ['Badges', 'Play', 'Contribution']; + + const params = useParams(); + const [allBadges, setAllBadges] = useState([]); + const [userInfo, setUserInfo] = useState({}); + const [loadingUserInfo, setLoadingUserInfo] = useState(true); + const [loadingPlay, setLoadingPlay] = useState(true); + const [plays, setPlays] = useState([]); + const [paramId, setparamId] = useState(); + const [selectedBadge, setSelectedBadge] = useState(); + const [loadingBadges, setLoadingBadges] = useState(true); + const [selectedTab, setSelectedTab] = useState(TabList[0]); + + const { data, error, isLoading } = useGitHub('Abhishek-90'); + // console.log('params: ', params); + // console.log('userinfo: '); + const onBadgeClicked = (badge) => { + setSelectedBadge(badge); + }; + + const getContributorInfoByEmail = async () => { + setLoadingUserInfo(true); + setLoadingPlay(true); + try { + // console.log('Hi'); + const result = await submit(FetchContributorInfoFilterByEmail('holaniabhishek90@gmail.com')); + // console.log(result); + // const result = await startFetchMyQuery(); + // console.log(result); + if (result) { + setLoadingUserInfo(false); + setUserInfo(result[0]); + + // console.log(result.meta_user_profile[0]); + // console.log('plays: ', result[0].plays); + getBadgesInfo(result[0].id); + setPlays(result[0].plays); + setLoadingPlay(false); + } + } catch (e) { + // console.log('error: ', e); + return []; + } + }; + + const getBadgesInfo = async (id) => { + setLoadingBadges(true); + const allBadgesResult = await getAllBadgesByUserId(id); + if (allBadgesResult) { + // console.log(allBadgesResult); + setAllBadges(allBadgesResult); + setLoadingBadges(false); + } + }; + + // getContributorInfoByEmail(); + + useEffect(() => { + getContributorInfoByEmail(); + }, []); + + const handleTabSelect = (tab) => { + setSelectedTab(tab); + }; + + return ( +
    + + ReactPlay - UserProfile + + + {/* */} + + {/* */} + + {/* */} + {/* */} + + +
    +
    + {data ? ( +
    +
    +
    +

    {data.name}

    + {/*

    + {userInfo.users_user_profile_map && userInfo.users_user_profile_map.email} +

    */} +

    + {userInfo.users_user_profile_map && + userInfo.users_user_profile_map.plays[0].github} +

    +

    {data.followers} Followers

    {' '} +

    {data.following} Followings

    +

    {data.bio}

    +

    {data.company}

    +
    +
      + {TabList.map((tab, index) => ( +
      +

      handleTabSelect(tab)} + > + {tab} ( + {tab === TabList[0] + ? allBadges.length + : tab === TabList[1] + ? plays.length + : ''} + ) +

      +
      + ))} +
    + {!loadingBadges && selectedTab === TabList[0] ? ( +
    + {!allBadges || !allBadges.length ? ( +
    + +

    No badges yet

    +

    + No worry, there are many more avenues to earn a bouquet of them +

    +
    + ) : ( +
    + {allBadges.map((badge, bi) => { + return ( + onBadgeClicked(badge.badge_id_map)} + /> + ); + })} +
    + )} +
    + ) : null} + {!loadingPlay && selectedTab === TabList[1] && ( +
    + {' '} +
    +
      + {plays.map((play, index) => ( + + ))} +
    +
    +
    + )} + {selectedTab === TabList[2] && ( +
    +

    Contribution

    +
    + )} +
    + {selectedBadge && ( + setSelectedBadge()} /> + )} +
    + ) : ( +

    User not found

    + )} +
    +
    +
    + ); +}; + +export default ContributorDashboard; diff --git a/src/common/contributor-dashboard/tablist.css b/src/common/contributor-dashboard/tablist.css new file mode 100644 index 0000000000..9dcd6ff82b --- /dev/null +++ b/src/common/contributor-dashboard/tablist.css @@ -0,0 +1,11 @@ +.list-tab { + margin: 0 20%; + padding: 1.6rem 2rem; + list-style: none; + display: flex; + flex-direction: row; + flex-wrap: wrap; + grid-gap: 10%; + justify-content: center; + cursor: pointer; +} diff --git a/src/common/home/AllContributors.jsx b/src/common/home/AllContributors.jsx new file mode 100644 index 0000000000..6325ae4065 --- /dev/null +++ b/src/common/home/AllContributors.jsx @@ -0,0 +1,45 @@ +import useContributors from 'common/hooks/useContributors'; + +function AllContributors() { + const { data, error, isLoading } = useContributors(true); + + return ( +
    +

    + + Big Thanks + +
    to All Contributors! +

    +
      + {isLoading &&
    • Loading...
      • } + {error &&
    • Error: {error.message}
      • } + {data && + data.map((contributor) => ( +
    • + + {contributor.login} + +
      • + ))} +
    +
    + ); +} + +export default AllContributors; diff --git a/src/common/home/Contributors.jsx b/src/common/home/Contributors.jsx index 3703b4df44..41d50339d8 100644 --- a/src/common/home/Contributors.jsx +++ b/src/common/home/Contributors.jsx @@ -1,7 +1,12 @@ import useContributors from 'common/hooks/useContributors'; +import { useNavigate } from 'react-router-dom'; const Contributors = () => { const { data, error, isLoading } = useContributors(true); + const navigate = useNavigate(null); + const handleSeeAllContributors = () => { + navigate('/allcontributors'); + }; return ( <> @@ -38,6 +43,7 @@ const Contributors = () => { ))} + ); }; diff --git a/src/common/routing/RouteDefs.jsx b/src/common/routing/RouteDefs.jsx index 70746ecfad..a188ac8067 100644 --- a/src/common/routing/RouteDefs.jsx +++ b/src/common/routing/RouteDefs.jsx @@ -12,6 +12,8 @@ import { LeaderBoard, PageNotFound } from 'common'; +import AllContributors from 'common/home/AllContributors'; +import ContributorDashboard from 'common/contributor-dashboard/index'; import PlayList from 'common/playlists/PlayList'; import { BrowserRouter, Route, Routes } from 'react-router-dom'; import { NhostClient, NhostReactProvider } from '@nhost/react'; @@ -28,6 +30,7 @@ const RouteDefs = () => { path: '/', title: 'ReactPlay - One app to learn, create, and share ReactJS projects.' }, + { path: '/allcontributors', title: ' All Contributorss' }, { path: '/plays', title: 'ReactPlay - Plays' }, { path: '/ideas', title: 'ReactPlay - Ideas' }, { path: '/tech-stacks', title: 'ReactPlay - Tech Stacks' }, @@ -65,6 +68,10 @@ const RouteDefs = () => { */} + } path="/allcontributors" /> + } path="/allcontributors"> + } path=":id" /> + } path="/contributors"> } path=":email"> } path="badges" /> diff --git a/src/common/services/request/query/fetch-contributor-info-filter-by-email.js b/src/common/services/request/query/fetch-contributor-info-filter-by-email.js new file mode 100644 index 0000000000..6eee0066bf --- /dev/null +++ b/src/common/services/request/query/fetch-contributor-info-filter-by-email.js @@ -0,0 +1,168 @@ +export const FetchContributorInfoFilterByEmail = (email) => { + return { + display: 'user', + name: 'user', + function: 'users', + where: + // { users_user_profile_map: { email: { _eq: 'holaniabhishek90@gmail.com' } } }, + { + clause: { + conditions: [ + { + field: 'email', + operator: 'eq', + value: email + } + ] + } + }, + + return: [ + 'avatarUrl', + 'displayName', + 'email', + 'id', + { + plays: [ + 'blog', + 'component', + 'cover', + 'created_at', + 'description', + 'dev_mode', + 'featured', + 'github', + 'id', + 'language', + 'level_id', + 'name', + 'path', + { play_like: ['id', 'liked', 'play_id'] }, + { play_tags: ['play_id', 'tag_id'] }, + 'slug', + 'style', + 'video' + ] + } + ] + }; +}; + +// avatarUrl +// displayName +// email +// id +// plays { +// blog +// component +// cover +// created_at +// description +// dev_mode +// featured +// github +// id +// language +// level_id +// name +// owner_user_id +// path +// play_like { +// created_at +// id +// liked +// play_id +// } +// play_tags { +// play_id +// tag_id +// } +// slug +// style +// video +// } +/* +This is an example snippet - you should consider tailoring it +to your service. +*/ + +// async function fetchGraphQL(operationsDoc, operationName, variables) { +// const result = await fetch( +// 'https://rgkjmwftqtbpayoyolwh.hasura.ap-southeast-1.nhost.run/v1/graphql', +// { +// method: 'POST', +// body: JSON.stringify({ +// query: operationsDoc, +// variables: variables, +// operationName: operationName +// }) +// } +// ); + +// return await result.json(); +// } + +// const operationsDoc = ` +// query MyQuery { +// meta_user_profile( +// where: {users_user_profile_map: {email: {_eq: "holaniabhishek90@gmail.com"}}} +// ) { +// bio +// create_at +// github +// id +// photo_link +// resume_link +// social_links +// users_user_profile_map { +// avatarUrl +// displayName +// email +// plays { +// id +// dev_mode +// github +// language +// blog +// video +// slug +// style +// owner_user_id +// name +// description +// component +// path +// level { +// id +// name +// } +// cover +// featured +// play_like { +// liked +// } +// } +// } +// } +// } +// `; + +// function fetchMyQuery() { +// return fetchGraphQL(operationsDoc, 'MyQuery', {}); +// } + +// export async function startFetchMyQuery() { +// const { errors, data } = await fetchMyQuery(); + +// if (errors) { +// // handle those errors like a pro + +// console.error(errors); +// } + +// // do something great with this precious data + +// // console.log(data); + +// return data; +// }