Add display user page

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>
+    </>
+  )
+}