feat: being able to edit and start tutorials from the projects page

lunarcast · Jul 20, 2020 · 6a0d064 · 6a0d064
1 parent 337c095
commit 6a0d064
Show file tree

Hide file tree

Showing 4 changed files with 34 additions and 4 deletions.
diff --git a/public/styles/pages/projects.scss b/public/styles/pages/projects.scss
@@ -109,6 +109,14 @@
   margin-right: 1rem;
 }
 
+.project__data-icon--clickable {
+  transition: transform $transition-time;
+}
+
+.project__data-icon--clickable:hover {
+  transform: scale(1.4);
+}
+
 .project--new {
   @include utils.center;
   background: $primary;

diff --git a/src/AppM.purs b/src/AppM.purs
@@ -116,14 +116,22 @@ instance manageProjectsAppM :: ManageProjects AppM where
       [ { id: TutorialId 0
         , name: "A sample tutorial"
         , completed: false
+        , own: true
         }
       , { id: TutorialId 1
         , name: "Another tutorial"
         , completed: false
+        , own: false
         }
       , { id: TutorialId 2
         , name: "Actually completed this"
         , completed: true
+        , own: false
+        }
+      , { id: TutorialId 7
+        , name: "A tutorial I can edit"
+        , completed: false
+        , own: true
         }
       ]
 

diff --git a/src/Component/Projects.purs b/src/Component/Projects.purs
@@ -68,6 +68,8 @@ data Action
   | OpenProject ProjectId
   | DeleteProject ProjectId MouseEvent
   | DeleteTutorial TutorialId MouseEvent
+  | EditTutorial' TutorialId MouseEvent
+  | StartTutorial TutorialId
   | CreateProject
   | CreateTutorial
   | CloneProject ProjectId
@@ -124,6 +126,11 @@ component =
       case response of
         Right cloneId -> navigate $ Project cloneId
         Left err -> modify_ _ { projectList = Failure err }
+    EditTutorial' id event -> do
+      liftEffect $ stopPropagation $ MouseEvent.toEvent event
+      navigate $ EditTutorial id
+    StartTutorial id -> do
+      navigate $ Tutorial id
     DeleteProject id event -> do
       liftEffect $ stopPropagation $ MouseEvent.toEvent event
       oldProjects <- gets $ preview $ _projectList <<< _Success
@@ -187,7 +194,7 @@ component =
               ]
           , whenElem (not isExample) \_ ->
               HH.div
-                [ className "project__data-icon"
+                [ className "project__data-icon project__data-icon--clickable"
                 , onClick $ Just <<< DeleteProject id
                 ]
                 [ icon "delete"
@@ -243,17 +250,23 @@ component =
         $ [ newProject CreateTutorial ]
         <> (mkItem <$> tutorials)
       where
-      mkItem { name, completed, id } =
-        HH.div [ className "project", onClick $ const $ Just CreateTutorial ]
+      mkItem { name, completed, id, own } =
+        HH.div [ className "project", onClick $ const $ Just $ StartTutorial id ]
           [ HH.div [ className "project__name no-overflow" ] [ HH.text name ]
           , HH.div [ className "project__data" ]
               [ whenElem completed \_ ->
                   HH.div
                     [ className "project__data-icon"
                     ]
                     [ icon "verified" ]
+              , whenElem own \_ ->
+                  HH.div
+                    [ className "project__data-icon project__data-icon--clickable"
+                    , onClick $ Just <<< EditTutorial' id
+                    ]
+                    [ icon "edit" ]
               , HH.div
-                  [ className "project__data-icon"
+                  [ className "project__data-icon project__data-icon--clickable"
                   , onClick $ Just <<< DeleteTutorial id
                   ]
                   [ icon "delete"

diff --git a/src/Data/ProjectList.purs b/src/Data/ProjectList.purs
@@ -31,6 +31,7 @@ type TutorialOverview
   = { name :: String
     , id :: TutorialId
     , completed :: Boolean
+    , own :: Boolean
     }
 
 -- | Stuff we get from the server to render on the projects page