Merge pull request #32 from Mateiadrielrafael/develop

Release

README.md

@@ -12,6 +12,8 @@
 
 Tool to help beginners learn functional programming
 
+Check out the beta [here](https://lunarbox.netlify.app/) or take a look at our trello board [here](https://trello.com/b/iCgkCsQo/lunarbox)
+
 ## Documentation
 
 You can find the infoeducatie documentation (written in romanian) [here](./infoeducatie/documentatie.md)

_templates/purescript/help/index.ejs

@@ -3,9 +3,12 @@ message: |
 
   hygen {bold purescript component} [NAME] [-p | --page]
   hygen {bold purescript module} [NAME]
+  hygen {bold purescript render-function} [NAME]
   hygen {bold purescript help} 
 
-  component Gnerate a new halogen componen
-  module    Generate a new purescript module
-  help      Display a list of all commands
+
+  component       Gnerate a new halogen componen
+  module          Generate a new purescript module
+  render-function Generate a pure function taking some inputs and some actions and generating html.
+  help            Display a list of all commands
 ---

infoeducatie/documentatie.md

@@ -17,64 +17,7 @@ Proiectul a fost scis in [purescript](https://www.purescript.org/), un limbaj de
 
 ## Arhitectura
 
-Aplicatia ruleaza in monadul AppM:
-
-```haskell
-newtype AppM a
-  = AppM (ReaderT Config Aff a)
-```
-
-- Tranformerul RedaerT este necesar pentru a permite acesul de oriunde din aplicatie a unui Config global:
-
-  ```haskell
-  type UserEnv
-    = { currentUser :: Ref (Maybe Profile)
-        , userBus :: BusRW (Maybe Profile)
-        }
-
-  newtype Config
-    = Config
-    { devOptions :: DevOptions
-    , baseUrl :: BaseUrl
-    , user :: UserEnv
-    , pushStateInterface :: PushStateInterface
-    }
-  ```
-
-- Monadul Aff este necesar pentru rularea de cod asymc, cum ar fi function register
-  ```haskell
-  register :: forall m. MonadAff m => BaseUrl -> RegisterFields -> m (Either String Profile)
-  register baseUrl fields =
-    requestJson baseUrl
-        { endpoint: Register, method: Post $ Just $ encodeJson fields
-        }
-        *> profile baseUrl
-  ```
-
-Monadul AppM are instante pentru cateva typeclassuri care reprezinta capabilitati ale aplicatiei:
-
-- `ManageUser` permite lucrul cu utilizatori:
-
-  ```haskell
-  class
-      Monad m <= ManageUser m where
-
-      loginUser :: LoginFields -> m (Either String Profile)
-      registerUser :: RegisterFields -> m (Either String Profile)
-      getCurrentUser :: m (Maybe Profile)
-  ```
-
-- `ManageProjects` permite salvarea proiectelor in cloud:
-
-  ```haskell
-  class
-      Monad m <= ManageProjects m where
-
-      getProjects :: m (Either String ProjectList)
-      getProject :: forall a s m'. ProjectId -> m (Either String (State a s m'))
-      createProject :: forall a s m'. State a s m' -> m (Either String ProjectId)
-      saveProject :: forall a s m'. State a s m' -> m (Either String Unit)
-  ```
+TODO
 
 ## Portabilitate
 

public/styles/components/node-input.scss

@@ -16,6 +16,8 @@
   white-space: nowrap;
   overflow: hidden;
 
+  user-select: none;
+
   &:focus {
     filter: brightness(1.5);
   }

public/styles/components/node.scss

@@ -20,7 +20,7 @@ svg .node {
 }
 
 .node-input:hover:not(.unconnectable),
-.node-connection {
+.node-connection:hover {
   stroke-width: 9px;
 }
 

public/styles/components/tooltip.scss

@@ -8,6 +8,7 @@
     box-sizing: border-box;
 
     width: 100%;
+    display: block;
 
     position: absolute;
     z-index: 10;

public/styles/pages/editor.scss

@@ -63,7 +63,6 @@
   width: 0;
   height: 100vh;
   max-height: 100vh;
-  overflow-y: hidden;
 
   box-sizing: border-box;
   display: block;
@@ -85,6 +84,7 @@
 
 #editor > #panel.active {
   width: 30rem;
+  overflow: hidden;
 }
 
 .project-setting {

public/styles/pages/editor/add.scss

@@ -1,3 +1,4 @@
+@use "../../utils/utils";
 @import "../../theme.scss";
 
 #add-node-container > #create-input > button {
@@ -22,6 +23,28 @@
   }
 }
 
+#add-node-container #node-search-container {
+  display: flex;
+  align-items: center;
+
+  margin: 1rem;
+  margin-top: 0;
+  margin-bottom: 0;
+}
+
+#add-node-container #node-search-container #node-search-input {
+  @include utils.base-input;
+  flex-grow: 1;
+
+  margin: 0.6rem;
+  margin-right: 1rem;
+  margin-left: 0;
+
+  font-size: 1.3rem;
+
+  color: $on-primary;
+}
+
 #add-node-container {
   display: flex;
   flex-direction: column;
@@ -76,6 +99,7 @@
         flex-direction: column;
 
         height: 100%;
+        margin-left: 1rem;
         justify-content: space-evenly;
       }
 
@@ -100,9 +124,9 @@
 
       #node-text {
         display: flex;
+        flex-grow: 1;
         flex-direction: column;
         text-overflow: ellipsis;
-        width: calc(15rem - 100px);
 
         & > * {
           cursor: default;

public/styles/pages/home.scss

@@ -3,15 +3,15 @@
 @use "../utils/utils";
 @import "../theme.scss";
 
-#home {
-  /* 
+/* 
   The cool thing is the tangent is calculated at compile time. 
   Thx sass, rly cool.
   */
-  $angle: -7deg;
-  $tangent: math.tan($angle);
-  $bg-height: calc(50vh + #{$tangent} * -50vw);
+$angle: -7deg;
+$tangent: math.tan($angle);
+$bg-height: calc(50vh + #{$tangent} * -50vw);
 
+#home {
   @include utils.stack;
 
   background: $primary;
@@ -29,10 +29,20 @@
     height: $bg-height;
   }
 
+  #header {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: $bg-height;
+
+    #logo {
+      height: calc(#{$bg-height} - 20rem);
+    }
+  }
+
   #title-text {
     @include utils.center;
 
-    height: $bg-height;
     font-family: fonts.$oxanium;
 
     #title {
@@ -54,8 +64,9 @@
 
     #cta-text {
       color: $on-primary;
-      font-size: 3rem;
       filter: brightness(0.8);
+      max-width: 80vw;
+      text-align: center;
 
       #free {
         font-weight: bold;
@@ -67,6 +78,7 @@
       @include utils.center;
 
       flex-direction: row;
+      flex-wrap: wrap;
 
       button {
         font-family: fonts.$oxanium;
@@ -85,14 +97,54 @@
         filter: brightness(1.2);
       }
 
-      button#signup {
+      button#primary {
         color: white;
-        background: darken($secondary, 20%);
+        background: darken($secondary, 25%);
+      }
+
+      button#secondary {
+        background: darken($bright, 15%);
+      }
+
+      button#logout {
+        background: transparent;
+        color: $disabled;
+
+        &:hover {
+          box-shadow: none;
+        }
       }
 
-      button#login {
-        background: $bright;
+      &.user {
+        flex-direction: column;
+
+        button#logout {
+          margin: 0;
+
+          &:hover {
+            filter: brightness(1.5);
+          }
+        }
       }
     }
   }
 }
+
+#cta-text {
+  font-size: 3rem;
+}
+
+@media only screen and (max-width: 800px) {
+  #header {
+    flex-direction: column;
+  }
+
+  #cta-text {
+    font-size: 2.5rem;
+  }
+
+  #home > #header > #logo {
+    height: auto;
+    width: 20rem;
+  }
+}

public/styles/utils/_utils.scss

@@ -3,3 +3,4 @@
 // and then we can access stuff with utils.foo, utils.bar etc
 @import "./center.scss";
 @import "./stack.scss";
+@import "./input.scss";

public/styles/utils/input.scss

@@ -0,0 +1,6 @@
+// Very basic styles for most inputs
+@mixin base-input {
+  background: transparent;
+  outline: none;
+  border: none;
+}

src/Api/Utils.purs

@@ -1,35 +1,56 @@
 module Lunarbox.Api.Utils
   ( authenticate
   , mkRequest
+  , withBaseUrl
+  , logErrors
   ) where
 
 import Prelude
 import Control.Monad.Reader (class MonadAsk, asks)
+import Data.Argonaut (class DecodeJson, decodeJson)
 import Data.Either (Either(..))
 import Data.Lens (view)
 import Data.Maybe (Maybe(..))
 import Effect.Aff.Bus as Bus
 import Effect.Aff.Class (class MonadAff, liftAff)
-import Effect.Class (liftEffect)
+import Effect.Class (class MonadEffect, liftEffect)
 import Effect.Ref as Ref
-import Lunarbox.Api.Request (BaseUrl)
+import Lunarbox.Api.Request (BaseUrl, RequestOptions, requestJson)
 import Lunarbox.Config (Config, _baseUrl, _user)
 import Lunarbox.Control.Monad.Effect (print, printString)
 import Lunarbox.Data.Profile (Profile)
 
+-- Log the error from an Either
+logErrors :: forall b r m. MonadEffect m => Either String b -> (b -> m r) -> m r -> m r
+logErrors input binder default = case input of
+  Right result -> binder result
+  Left error -> printString error *> default
+
 -- Helper to make a request with the baseUrl from the reader monad
 mkRequest ::
   forall m b.
+  DecodeJson b =>
+  MonadAff m =>
+  MonadAsk Config m =>
+  RequestOptions ->
+  m (Maybe b)
+mkRequest options = do
+  baseUrl <- asks $ view _baseUrl
+  response <- requestJson baseUrl options
+  logErrors (response >>= decodeJson) (pure <<< Just) $ pure Nothing
+
+-- Perform a function with the current url from the global config
+withBaseUrl ::
+  forall m b.
+  DecodeJson b =>
   MonadAff m =>
   MonadAsk Config m =>
   (BaseUrl -> m (Either String b)) ->
   m (Maybe b)
-mkRequest req = do
+withBaseUrl req = do
   baseUrl <- asks $ view _baseUrl
   response <- req baseUrl
-  case response of
-    Right result -> pure $ Just result
-    Left error -> printString error *> pure Nothing
+  logErrors response (pure <<< Just) $ pure Nothing
 
 -- Helper to creating functions which request something which return a profile
 authenticate ::