Add display user page

api/src/graphql/users.sdl.js

@@ -15,6 +15,7 @@ export const schema = gql`
   type Query {
     users: [User!]!
     user(id: String!): User
+    userName(userName: String!): User
   }
 
   input CreateUserInput {

api/src/services/users/users.js

@@ -10,6 +10,12 @@ export const user = ({ id }) => {
   })
 }
 
+export const userName = ({ userName }) => {
+  return db.user.findOne({
+    where: { userName },
+  })
+}
+
 export const createUser = ({ input }) => {
   return db.user.create({
     data: input,

web/src/Routes.js

@@ -12,6 +12,13 @@ import { Router, Route, Private } from '@redwoodjs/router'
 const Routes = () => {
   return (
     <Router>
+      <Route path="/" page={HomePage} name="home" />
+      {/* <Route path="/blah/*" page={PartsPage} name="home" /> */}
+      <Route notfound page={NotFoundPage} />
+
+      <Route path="/u/{userName}" page={UserPage2} name="user" />
+
+      {/* GENERATED ROUTES BELOW, probably going to clean these up and delete most of them, but the CRUD functionality is useful for now */}
       <Route path="/part-reactions/new" page={NewPartReactionPage} name="newPartReaction" />
       <Route path="/part-reactions/{id}/edit" page={EditPartReactionPage} name="editPartReaction" />
       <Route path="/part-reactions/{id}" page={PartReactionPage} name="partReaction" />
@@ -28,9 +35,6 @@ const Routes = () => {
       <Route path="/users/{id}/edit" page={EditUserPage} name="editUser" />
       <Route path="/users/{id}" page={UserPage} name="user" />
       <Route path="/users" page={UsersPage} name="users" />
-      <Route path="/" page={HomePage} name="home" />
-      {/* <Route path="/blah/*" page={PartsPage} name="home" /> */}
-      <Route notfound page={NotFoundPage} />
     </Router>
   )
 }

web/src/components/Button/Button.js

@@ -0,0 +1,17 @@
+import Svg from 'src/components/Svg'
+
+const Button = ({onClick, children}) => {
+  return (
+    <div>
+      <button
+        className="flex items-center bg-indigo-200 bg-opacity-50 rounded-xl p-2 px-6 text-indigo-600"
+        onClick={onClick}
+      >
+        {children}
+        <Svg className="w-6 ml-4" name="pencil" />
+      </button>
+    </div>
+  )
+}
+
+export default Button

web/src/components/Button/Button.stories.js

@@ -0,0 +1,10 @@
+import Button from './Button'
+
+export const generated = () => {
+  return <>
+    button with icon
+    <Button>click Me </Button>
+  </>
+}
+
+export default { title: 'Components/Button' }

web/src/components/Button/Button.test.js

@@ -0,0 +1,11 @@
+import { render } from '@redwoodjs/testing'
+
+import Button from './Button'
+
+describe('Button', () => {
+  it('renders successfully', () => {
+    expect(() => {
+      render(<Button />)
+    }).not.toThrow()
+  })
+})

web/src/components/ImageUploader/ImageUploader.js

@@ -51,15 +51,15 @@ export default function ImageUploader({ onImageUpload, imageUrl, aspectRatio, cl
 
   const { getRootProps, getInputProps, isDragActive } = useDropzone({ onDrop });
   return (
-    <div className={'relative border-dashed overflow-hidden border-indigo-500 '+ (!imageUrl ? 'border ' : '') + className} style={{paddingBottom: `${1/aspectRatio*100}%`}}>
+    <div className={'relative overflow-hidden '+ (!imageUrl && isEditable ? 'border ' : '') + className} style={{paddingBottom: `${1/aspectRatio*100}%`}}>
       <div className="absolute w-full h-full" {...getRootProps()}>
         {cloudinaryId && isEditable && <button className="absolute z-10 w-full inset-0 bg-indigo-900 opacity-50 flex justify-center items-center">
           <Svg name="pencil" strokeWidth={2} className="text-gray-300 h-48 w-48" />
         </button>}
         {isEditable && <input {...getInputProps()} />}
-        {(cloudinaryId || !isEditable) && <div className="relative overflow-hidden">
+        {(cloudinaryId || !isEditable) && <div className="relative overflow-hidden w-full h-full">
           <CloudinaryImage
-            className="object-cover w-full h-full mt-px rounded shadow overflow-hidden"
+            className="object-cover w-full h-full rounded shadow overflow-hidden"
             cloudName="irevdev"
             publicId={cloudinaryId || 'CadHub/eia1kwru54g2kf02s2xx'}
             width="600"

web/src/components/Svg/Svg.js

@@ -15,7 +15,7 @@ const Svg = ({name, className: className2, strokeWidth = 2}) => {
     </svg>
   }
 
-  return <div className={"h-10 w-10 " + className2}>
+  return <div className={className2 || "h-10 w-10"}>
     {svgs[name]}
   </div>
 }

web/src/components/User2Cell/User2Cell.js

@@ -0,0 +1,61 @@
+import User from 'src/components/User'
+import {Fragment} from 'react'
+import ImageUploader from 'src/components/ImageUploader'
+import Button from 'src/components/Button'
+import Editor from "rich-markdown-editor";
+
+export const QUERY = gql`
+  query FIND_USER_BY_ID($userName: String!) {
+    user: userName(userName: $userName) {
+      id
+      userName
+      email
+      createdAt
+      updatedAt
+      image
+      bio
+    }
+  }
+`
+
+export const Loading = () => <div>Loading...</div>
+
+export const Empty = () => <div>User not found</div>
+
+export const Success = ({ user }) => {
+  const {userName, email} = user
+  const keyValueDisplay = Object.entries({userName, name: email}) // TODO add name field to user
+  return (
+    <>
+      <div className="max-w-2xl mx-auto mt-20 ">
+        <div className="flex" >
+          <div className="w-40 flex-shrink-0">
+            <ImageUploader
+              className="rounded-half rounded-br-lg shadow-md border-2 border-gray-200 border-solid"
+              aspectRatio={1}
+              imageUrl={user.image === 'abc' ? '': user.image}
+            />
+          </div>
+          <div className="ml-6 flex flex-col justify-between">
+            <div className="grid items-center" style={{gridTemplateColumns: 'auto 1fr'}}>
+              {keyValueDisplay.map(([property, value]) => (<Fragment key={property}>
+                <span className="capitalize text-gray-500 text-sm align-middle">{property}:</span>
+                <span className="pl-2 text-indigo-800 font-medium text-xl mb-px pb-px align-middle">{value}</span>
+              </Fragment>))}
+            </div>
+            <Button>Edit Profile</Button>
+          </div>
+        </div>
+        <div className="mt-10">
+          <h3 className="text-3xl text-gray-500 font-ropa-sans">Bio:</h3>
+          <div name="description" className="markdown-overrides rounded-lg shadow-md bg-white p-12 my-6 min-h-md">
+            <Editor
+              defaultValue={user.bio}
+              readOnly
+            />
+          </div>
+        </div>
+      </div>
+    </>
+  )
+}

web/src/layouts/MainLayout/MainLayout.js

@@ -16,11 +16,9 @@ const MainLayout = ({ children }) => {
           <ul className="flex items-center">
             <li>
               <Link to={routes.home()}>
-                <Tooltip title="We need a logo!" >
-
-                <img src={logo} style={{marginLeft : '50px'}}/>
-
-                </Tooltip>
+                <div className="rounded-full overflow-hidden ml-12">
+                  <img src={logo}/>
+                </div>
               </Link>
             </li>
             <li>

web/src/pages/UserPage2/UserPage2.js

@@ -0,0 +1,12 @@
+import MainLayout from 'src/layouts/MainLayout'
+import User2Cell from 'src/components/User2Cell'
+
+const UserPage = ({ userName }) => {
+  return (
+    <MainLayout>
+      <User2Cell userName={userName} />
+    </MainLayout>
+  )
+}
+
+export default UserPage