From 7532cab20b0f086bdb351278f0c09289183cf913 Mon Sep 17 00:00:00 2001
From: Kurt Hutten <kurt@kurthutten.com>
Date: Wed, 30 Dec 2020 09:20:26 +1100
Subject: [PATCH 1/4] Make start hacking button link to draft

---
 .../LandingSection/LandingSection.js          | 24 +++++++------------
 1 file changed, 8 insertions(+), 16 deletions(-)

diff --git a/web/src/components/LandingSection/LandingSection.js b/web/src/components/LandingSection/LandingSection.js
index 4dcd5f5..0156516 100644
--- a/web/src/components/LandingSection/LandingSection.js
+++ b/web/src/components/LandingSection/LandingSection.js
@@ -7,19 +7,12 @@ import {
 } from './mockEditorParts'
 import Svg from 'src/components/Svg'
 import OutBound from 'src/components/OutBound'
-import ReactGA from 'react-ga'
 import LoginModal from 'src/components/LoginModal'
 import { useState } from 'react'
+import { routes, Link } from '@redwoodjs/router'
 
 const LandingSection = () => {
   const [isLoginModalOpen, setIsLoginModalOpen] = useState(false)
-  const recordedLogin = async () => {
-    ReactGA.event({
-      category: 'login',
-      action: 'landing section CTA',
-    })
-    setIsLoginModalOpen(true)
-  }
   return (
     <div className="mt-16">
       <div className="relative p-4 shadow-md">
@@ -163,14 +156,13 @@ const LandingSection = () => {
             </OutBound>{' '}
             with more integrations coming soon.
           </p>
-          <button
-            className="bg-texture bg-purple-800 text-center w-full py-6 rounded-b-md border border-indigo-300 border-opacity-0 hover:border-opacity-100 hover:shadow-xl"
-            onClick={recordedLogin}
-          >
-            <span className="font-bold text-2xl text-indigo-200">
-              Start Hacking Now
-            </span>
-          </button>
+          <Link to={routes.draftPart()}>
+            <div className="bg-texture bg-purple-800 text-center w-full py-6 rounded-b-md border border-indigo-300 border-opacity-0 hover:border-opacity-100 hover:shadow-xl">
+              <span className="font-bold text-2xl text-indigo-200">
+                Start Hacking Now
+              </span>
+            </div>
+          </Link>
         </div>
       </div>
       <div className="flex justify-center mt-64 pt-20 mb-32">
-- 
2.39.5


From 8a87ddf0957e9b56ac2a085d2f10efaa90e58dbd Mon Sep 17 00:00:00 2001
From: Kurt Hutten <kurt@kurthutten.com>
Date: Wed, 30 Dec 2020 11:14:00 +1100
Subject: [PATCH 2/4] Make title save able from draft

---
 web/src/components/IdeToolbar/IdeToolbar.js | 77 +++++++++++++++------
 1 file changed, 54 insertions(+), 23 deletions(-)

diff --git a/web/src/components/IdeToolbar/IdeToolbar.js b/web/src/components/IdeToolbar/IdeToolbar.js
index c9fd12c..f923188 100644
--- a/web/src/components/IdeToolbar/IdeToolbar.js
+++ b/web/src/components/IdeToolbar/IdeToolbar.js
@@ -26,21 +26,10 @@ const IdeToolbar = ({
   const [isLoginModalOpen, setIsLoginModalOpen] = useState(false)
   const { isAuthenticated, currentUser } = useAuth()
   const showForkButton = !(canEdit || isDraft)
+  const [title, setTitle] = useState('untitled-part')
 
   const { addMessage } = useFlash()
-  const [forkPart] = useMutation(FORK_PART_MUTATION, {
-    onCompleted: ({ forkPart }) => {
-      navigate(
-        routes.ide({
-          userName: forkPart?.user?.userName,
-          partTitle: forkPart?.title,
-        })
-      )
-      addMessage(`Part created with title: ${forkPart?.title}.`, {
-        classes: 'rw-flash-success',
-      })
-    },
-  })
+  const [forkPart] = useMutation(FORK_PART_MUTATION)
 
   const handleClick = ({ event, whichPopup }) => {
     setAnchorEl(event.currentTarget)
@@ -52,21 +41,42 @@ const IdeToolbar = ({
     setWhichPopup(null)
   }
 
-  const handleSave = () => {
-    if (isDraft && isAuthenticated)
-      forkPart({
-        variables: {
-          input: {
-            userId: currentUser.sub,
-            title: 'draft',
-            code,
-          },
+  const saveFork = () =>
+    forkPart({
+      variables: {
+        input: {
+          userId: currentUser.sub,
+          title,
+          code,
         },
+      },
+    })
+
+  const handleSave = async () => {
+    if (isDraft && isAuthenticated) {
+      const { data } = await saveFork()
+      navigate(
+        routes.ide({
+          userName: data?.forkPart?.user?.userName,
+          partTitle: data?.forkPart?.title,
+        })
+      )
+      addMessage(`Part created with title: ${data?.forkPart?.title}.`, {
+        classes: 'rw-flash-success',
       })
-    else if (isAuthenticated) onSave()
+    } else if (isAuthenticated) onSave()
     else recordedLogin()
   }
 
+  const handleSaveAndEdit = async () => {
+    const { data } = await saveFork()
+    const {
+      user: { userName },
+      title: partTitle,
+    } = data?.forkPart || { user: {} }
+    navigate(routes.part({ userName, partTitle }))
+  }
+
   const recordedLogin = async () => {
     ReactGA.event({
       category: 'login',
@@ -135,6 +145,27 @@ const IdeToolbar = ({
           </span>
         )}
       </Button>
+      {isDraft && (
+        <div className="flex items-center">
+          <Button
+            iconName={'save'}
+            className="ml-3 shadow-md hover:shadow-lg border-indigo-600 border-2 border-opacity-0 hover:border-opacity-100 bg-indigo-800 text-indigo-200 mr-"
+            shouldAnimateHover
+            onClick={handleSaveAndEdit}
+          >
+            Save & Edit Profile
+          </Button>
+          <div className="ml-4 text-indigo-300">title:</div>
+          <input
+            className="rounded ml-4 px-2"
+            value={title}
+            onChange={({ target }) =>
+              setTitle(target?.value.replace(/([^a-zA-Z\d_:])/g, '-'))
+            }
+          />
+          <div className="w-px ml-4 bg-pink-400 h-10"></div>
+        </div>
+      )}
       <div>
         <Button
           iconName="logout"
-- 
2.39.5


From fff0956746b3021c7dc7e0fd02491d5a9cb66363 Mon Sep 17 00:00:00 2001
From: Kurt Hutten <kurt@kurthutten.com>
Date: Wed, 30 Dec 2020 11:21:58 +1100
Subject: [PATCH 3/4] Add cancel button to part profile

---
 web/src/components/PartProfile/PartProfile.js | 17 +++++++++++++++++
 web/src/components/Svg/Svg.js                 | 15 +++++++++++++++
 2 files changed, 32 insertions(+)

diff --git a/web/src/components/PartProfile/PartProfile.js b/web/src/components/PartProfile/PartProfile.js
index 4d879b6..8a91baa 100644
--- a/web/src/components/PartProfile/PartProfile.js
+++ b/web/src/components/PartProfile/PartProfile.js
@@ -130,6 +130,23 @@ const PartProfile = ({
               >
                 {isEditable ? 'Save Details' : 'Edit Details'}
               </Button>
+              {isEditable && (
+                <Button
+                  className="mt-4 ml-auto shadow-md hover:shadow-lg bg-indigo-200 relative z-20 w-full justify-end"
+                  shouldAnimateHover
+                  iconName="x"
+                  onClick={() =>
+                    navigate(
+                      routes.part({
+                        userName: userPart.userName,
+                        partTitle: part?.title,
+                      })
+                    )
+                  }
+                >
+                  Cancel
+                </Button>
+              )}
               <Button
                 className="mt-4 ml-auto shadow-md hover:shadow-lg bg-red-200 relative z-20 w-full justify-end"
                 shouldAnimateHover
diff --git a/web/src/components/Svg/Svg.js b/web/src/components/Svg/Svg.js
index 0629ae7..0fdc4a6 100644
--- a/web/src/components/Svg/Svg.js
+++ b/web/src/components/Svg/Svg.js
@@ -322,6 +322,21 @@ const Svg = ({ name, className: className2, strokeWidth = 2 }) => {
         />
       </svg>
     ),
+    x: (
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        fill="none"
+        viewBox="0 0 24 24"
+        stroke="currentColor"
+      >
+        <path
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth={strokeWidth}
+          d="M6 18L18 6M6 6l12 12"
+        />
+      </svg>
+    ),
   }
 
   return <div className={className2 || 'h-10 w-10'}>{svgs[name]}</div>
-- 
2.39.5


From 62b26b969e02aba3b2f5a3ae3e893ef7da83335f Mon Sep 17 00:00:00 2001
From: Kurt Hutten <kurt@kurthutten.com>
Date: Wed, 30 Dec 2020 12:45:47 +1100
Subject: [PATCH 4/4] Get parts on profile to update when user saves a new part

---
 .../components/EditUserCell/EditUserCell.js   |  4 +--
 web/src/components/IdePartCell/IdePartCell.js |  9 +++++++
 web/src/components/IdeToolbar/IdeToolbar.js   | 14 ++++++++--
 web/src/components/PartCell/PartCell.js       |  4 +--
 .../PartsOfUserCell/PartsOfUserCell.js        |  9 +------
 web/src/helpers/hooks/useUser.js              | 22 ++++++++++++++++
 web/src/layouts/MainLayout/MainLayout.js      | 26 +++++--------------
 7 files changed, 55 insertions(+), 33 deletions(-)
 create mode 100644 web/src/helpers/hooks/useUser.js

diff --git a/web/src/components/EditUserCell/EditUserCell.js b/web/src/components/EditUserCell/EditUserCell.js
index e678b4d..4fdf029 100644
--- a/web/src/components/EditUserCell/EditUserCell.js
+++ b/web/src/components/EditUserCell/EditUserCell.js
@@ -26,9 +26,9 @@ const UPDATE_USER_MUTATION = gql`
   }
 `
 
-export const Loading = () => <div>Loading...</div>
+export const Loading = () => <div className="h-screen">Loading...</div>
 
-export const Empty = () => <div>Empty</div>
+export const Empty = () => <div className="h-full">Empty</div>
 
 export const Failure = ({ error }) => <div>Error: {error.message}</div>
 
diff --git a/web/src/components/IdePartCell/IdePartCell.js b/web/src/components/IdePartCell/IdePartCell.js
index bc91be8..581a032 100644
--- a/web/src/components/IdePartCell/IdePartCell.js
+++ b/web/src/components/IdePartCell/IdePartCell.js
@@ -1,6 +1,8 @@
 import { useMutation, useFlash } from '@redwoodjs/web'
 import { navigate, routes } from '@redwoodjs/router'
 import IdeCascadeStudio from 'src/components/IdeCascadeStudio'
+import { QUERY as UsersPartsQuery } from 'src/components/PartsOfUserCell'
+import useUser from 'src/helpers/hooks/useUser'
 
 export const QUERY = gql`
   query FIND_PART_BY_USENAME_TITLE($partTitle: String!, $userName: String!) {
@@ -45,12 +47,19 @@ export const Empty = () => <div>Part not found</div>
 
 export const Success = ({ part, refetch }) => {
   const { addMessage } = useFlash()
+  const { user } = useUser()
   const [updatePart, { loading, error }] = useMutation(UPDATE_PART_MUTATION, {
     onCompleted: () => {
       addMessage('Part updated.', { classes: 'rw-flash-success' })
     },
   })
   const [forkPart] = useMutation(FORK_PART_MUTATION, {
+    refetchQueries: [
+      {
+        query: UsersPartsQuery,
+        variables: { userName: user?.userName },
+      },
+    ],
     onCompleted: ({ forkPart }) => {
       navigate(
         routes.ide({
diff --git a/web/src/components/IdeToolbar/IdeToolbar.js b/web/src/components/IdeToolbar/IdeToolbar.js
index f923188..01160f0 100644
--- a/web/src/components/IdeToolbar/IdeToolbar.js
+++ b/web/src/components/IdeToolbar/IdeToolbar.js
@@ -11,6 +11,8 @@ import ImageUploader from 'src/components/ImageUploader'
 import Svg from '../Svg/Svg'
 import LoginModal from 'src/components/LoginModal'
 import { FORK_PART_MUTATION } from 'src/components/IdePartCell'
+import { QUERY as UsersPartsQuery } from 'src/components/PartsOfUserCell'
+import useUser from 'src/helpers/hooks/useUser'
 
 const IdeToolbar = ({
   canEdit,
@@ -27,9 +29,17 @@ const IdeToolbar = ({
   const { isAuthenticated, currentUser } = useAuth()
   const showForkButton = !(canEdit || isDraft)
   const [title, setTitle] = useState('untitled-part')
+  const { user } = useUser()
 
   const { addMessage } = useFlash()
-  const [forkPart] = useMutation(FORK_PART_MUTATION)
+  const [forkPart] = useMutation(FORK_PART_MUTATION, {
+    refetchQueries: [
+      {
+        query: UsersPartsQuery,
+        variables: { userName: userNamePart?.userName || user?.userName },
+      },
+    ],
+  })
 
   const handleClick = ({ event, whichPopup }) => {
     setAnchorEl(event.currentTarget)
@@ -145,7 +155,7 @@ const IdeToolbar = ({
           </span>
         )}
       </Button>
-      {isDraft && (
+      {isDraft && isAuthenticated && (
         <div className="flex items-center">
           <Button
             iconName={'save'}
diff --git a/web/src/components/PartCell/PartCell.js b/web/src/components/PartCell/PartCell.js
index b86c934..0bef362 100644
--- a/web/src/components/PartCell/PartCell.js
+++ b/web/src/components/PartCell/PartCell.js
@@ -97,9 +97,9 @@ const DELETE_PART_MUTATION = gql`
   }
 `
 
-export const Loading = () => <div>Loading...</div>
+export const Loading = () => <div className="h-screen">Loading...</div>
 
-export const Empty = () => <div>Empty</div>
+export const Empty = () => <div className="h-full">Empty</div>
 
 export const Failure = ({ error }) => <div>Error: {error.message}</div>
 
diff --git a/web/src/components/PartsOfUserCell/PartsOfUserCell.js b/web/src/components/PartsOfUserCell/PartsOfUserCell.js
index ebb26a4..ac06ada 100644
--- a/web/src/components/PartsOfUserCell/PartsOfUserCell.js
+++ b/web/src/components/PartsOfUserCell/PartsOfUserCell.js
@@ -24,14 +24,7 @@ export const QUERY = gql`
 export const Loading = () => <div>Loading...</div>
 
 export const Empty = () => {
-  return (
-    <div className="rw-text-center">
-      {'No parts yet. '}
-      <Link to={routes.draftPart()} className="rw-link">
-        {'Create one?'}
-      </Link>
-    </div>
-  )
+  return <div className="rw-text-center">No parts yet.</div>
 }
 
 export const Success = ({
diff --git a/web/src/helpers/hooks/useUser.js b/web/src/helpers/hooks/useUser.js
new file mode 100644
index 0000000..390633b
--- /dev/null
+++ b/web/src/helpers/hooks/useUser.js
@@ -0,0 +1,22 @@
+import { useQuery } from '@redwoodjs/web'
+import { useAuth } from '@redwoodjs/auth'
+
+const QUERY = gql`
+  query FIND_USER_BY_ID($id: String!) {
+    user: user(id: $id) {
+      id
+      image
+      userName
+      name
+    }
+  }
+`
+
+export default function () {
+  const { currentUser } = useAuth()
+  const { data, loading } = useQuery(QUERY, {
+    skip: !currentUser?.sub,
+    variables: { id: currentUser?.sub },
+  })
+  return { user: data?.user, loading }
+}
diff --git a/web/src/layouts/MainLayout/MainLayout.js b/web/src/layouts/MainLayout/MainLayout.js
index 48db716..d9cd537 100644
--- a/web/src/layouts/MainLayout/MainLayout.js
+++ b/web/src/layouts/MainLayout/MainLayout.js
@@ -1,7 +1,7 @@
 import { useState, useEffect } from 'react'
 import { Link, routes, navigate } from '@redwoodjs/router'
 import { useAuth } from '@redwoodjs/auth'
-import { Flash, useQuery, useFlash } from '@redwoodjs/web'
+import { Flash, useFlash } from '@redwoodjs/web'
 import Tooltip from '@material-ui/core/Tooltip'
 import Popover from '@material-ui/core/Popover'
 import { getActiveClasses } from 'get-active-classes'
@@ -10,28 +10,16 @@ import { useLocation } from '@redwoodjs/router'
 import LoginModal from 'src/components/LoginModal'
 import ReactGA from 'react-ga'
 
-export const QUERY = gql`
-  query FIND_USER_BY_ID($id: String!) {
-    user: user(id: $id) {
-      id
-      image
-      userName
-      name
-    }
-  }
-`
 import Svg from 'src/components/Svg'
 import ImageUploader from 'src/components/ImageUploader'
+import useUser from 'src/helpers/hooks/useUser'
 
 let previousSubmission = ''
 
 const MainLayout = ({ children, shouldRemoveFooterInIde }) => {
   const { logOut, isAuthenticated, currentUser, client } = useAuth()
   const { addMessage } = useFlash()
-  const { data, loading } = useQuery(QUERY, {
-    skip: !currentUser?.sub,
-    variables: { id: currentUser?.sub },
-  })
+  const { user, loading } = useUser()
   const [isLoginModalOpen, setIsLoginModalOpen] = useState(false)
   const [isOpen, setIsOpen] = useState(false)
   const [anchorEl, setAnchorEl] = useState(null)
@@ -154,7 +142,7 @@ const MainLayout = ({ children, shouldRemoveFooterInIde }) => {
                     <ImageUploader
                       className="rounded-full object-cover"
                       aspectRatio={1}
-                      imageUrl={data?.user?.image}
+                      imageUrl={user?.image}
                       width={80}
                     />
                   )}
@@ -188,14 +176,14 @@ const MainLayout = ({ children, shouldRemoveFooterInIde }) => {
               }}
             >
               <div className="p-4 w-48">
-                <Link to={routes.user({ userName: data?.user?.userName })}>
+                <Link to={routes.user({ userName: user?.userName })}>
                   <h3 className="text-indigo-800" style={{ fontWeight: '500' }}>
-                    Hello {data?.user?.name}
+                    Hello {user?.name}
                   </h3>
                 </Link>
                 <hr />
                 <br />
-                <Link to={routes.user({ userName: data?.user?.userName })}>
+                <Link to={routes.user({ userName: user?.userName })}>
                   <div className="text-indigo-800">Your Profile</div>
                 </Link>
                 <a href="#" className="text-indigo-800" onClick={logOut}>
-- 
2.39.5