Merge pull request #11 from firstcontributions/profile

add user details

Author: Roshan Jossy

package.json

@@ -9,6 +9,7 @@
     "relay": "relay-compiler"
   },
   "dependencies": {
+    "@react-icons/all-files": "^4.1.0",
     "next": "12.0.10",
     "node-fetch": "^3.2.0",
     "react": "17.0.2",

schema/schema.graphql

@@ -45,6 +45,16 @@ type BadgeEdge {
 	cursor: String!
 }
 
+type GitContributionStats {
+	issues: Int!
+	pullRequests: Int!
+}
+
+input GitContributionStatsInput {
+	issues: Int!
+	pullRequests: Int!
+}
+
 type Issue implements Node {
 	body: String!
 	commentCount: Int!
@@ -68,27 +78,47 @@ type IssueEdge {
 	cursor: String!
 }
 
+type Reputation {
+	value: Float!
+}
+
+input ReputationInput {
+	value: Float!
+}
+
 type User implements Node {
+	avatar: String!
 	badges(first: Int, last: Int, after: String, before: String): BadgesConnection!
+	bio: String!
+	gitContributionStats: GitContributionStats!
 	handle: String!
 	id: ID!
 	issuesFromLastRepo(first: Int, last: Int, after: String, before: String): IssuesConnection!
 	issuesFromOtherRecentRepos(first: Int, last: Int, after: String, before: String): IssuesConnection!
 	name: String!
 	relevantIssues(first: Int, last: Int, after: String, before: String): IssuesConnection!
+	reputation: Reputation!
 	timeCreated: Time!
 	timeUpdated: Time!
 }
 
-input CreateUserInput {
+input UserInput {
+	avatar: String!
+	bio: String! 
+	gitContributionStats: GitContributionStatsInput!
 	handle: String!
-	name: String!
+	name: String! 
+	reputation: ReputationInput!
 }
-
 input UpdateUserInput {
-	name: String!
+	id: ID!
+	bio: String 
+	gitContributionStats: GitContributionStatsInput
+	name: String 
+	reputation: ReputationInput
 }
 
 type Mutation { 
-	createUser(user: CreateUserInput!): User!
+	createUser(user:UserInput!): User! 
+	updateUser(user: UpdateUserInput!): User!
 }

src/components/Badge.tsx

@@ -0,0 +1,27 @@
+import React, { ReactNode } from "react";
+
+type LayoutProps = {
+sidebarContentLeft: ReactNode
+ children: ReactNode
+  sidebarContentRight: ReactNode
+}
+
+export default function Layout ({sidebarContentLeft, children, sidebarContentRight}: LayoutProps) {
+    return (
+        <div className="mx-auto bg-gray-100 p-4 px-20">
+        <div className="grid grid-cols-9 gap-10">
+            <aside className="col-span-2">
+                {sidebarContentLeft}
+            </aside>
+            <main className="col-span-5">
+                {children}
+            </main>
+            <aside className="col-span-2">
+                {sidebarContentRight}
+            </aside>
+        </div>
+        <div>
+        </div>
+        </div>
+    )
+}

src/components/Layout.tsx

@@ -0,0 +1,14 @@
+import Button from "./Button";
+import Card from "./Card";
+
+const Login = () => (
+   <Card>
+    <a href={encodeURI("http://api.firstcontributions.com/v1/auth/redirect?origin=http://app.firstcontributions.com")}>
+        <Button>
+            Login with github
+        </Button>
+    </a>
+   </Card>
+)
+
+export default Login

src/components/Login.tsx

@@ -0,0 +1,23 @@
+import { graphql, useFragment } from "react-relay"
+import CircularProgress from './CircularProgress'
+import { DiAndroid } from '@react-icons/all-files/di/DiAndroid'
+
+const Badge = ({badge}: any) => {
+    const data = useFragment(
+        graphql`
+            fragment Badge_node on Badge {
+                displayName
+                progressPercentageToNextLevel
+            }
+        `, badge
+    )
+
+    return (
+        <>
+            <h4>{data.displayName}</h4>
+            <DiAndroid  className="w-10 h-10 text-green-600 "/>
+        </>
+    )
+}
+
+export default Badge

src/components/UserDetails.tsx

@@ -1,5 +1,5 @@
 import { useFragment, graphql, usePaginationFragment } from "react-relay"
-import { Badge_node$data } from "../queries/__generated__/Badge_node.graphql"
+import { Badge_node$data } from "../../../queries/__generated__/Badge_node.graphql"
 import Badge from "./Badge"
 
 const BadgeList = ({user}: any) => {

src/components/UserDetails/Badges/Badge.tsx

@@ -0,0 +1,46 @@
+import { useState } from "react";
+import { graphql, useFragment, useMutation } from "react-relay";
+
+
+const Bio = ({user}) => {
+
+    const data = useFragment(
+        graphql`
+            fragment Bio_user on User {
+                id
+                bio
+            }
+        `, user
+    );
+    
+    const [bio, setBio] = useState(data.bio);
+
+    const [commitMutation, isMutationInFlight] = useMutation(
+        graphql`
+          mutation BioUpdateMutation($input: UpdateUserInput!) {
+            updateUser(user:$input) {
+                id
+                bio
+            }
+          }
+        `
+    );
+    const onChange = (evt) => setBio(evt.target.textContent); 
+    const onSubmit = () => {
+        console.log(bio);
+        commitMutation({
+            variables: {
+              input: {id: data.id, bio: bio},
+            },
+        })
+    }
+
+    return (
+        <p contentEditable={true} onInput={onChange} onBlur={onSubmit}>
+            {data.bio}
+        </p>
+    )
+}
+
+
+export default Bio