In a reagent app created using luminus via
lein new luminus asdf +cljs
How can I execute a function once an element, say :div.container in the snippet below, has been shown?
(defn about-page []
[:div.container
[:div.row
[:div.col-md-12
"this is the story of asdf... work in progress"]]])
I just read the friendly manual :) and found that the luminus generated app is no different from standard reagent.
Changing above about-page function as follows does the trick. about-page-rendered is
(defn about-page-render []
[:div.container
[:div.row
[:div.col-md-12
"this is the story of asdf... work in progress"]]])
(defn about-page-rendered []
(do-what-ever-is-necessary))
(defn about-page []
(r/create-class {:reagent-render about-page-render
:component-did-mount about-page-rendered}))
Related
I'm trying to create a state called items however my code gives an error and I'm unsure of why when I try to access the items and iterate over them. What am I doing wrong here?
(def items (r/atom ["test" "test2"]))
(defn home-page []
[:div#main
[:section.section
[:h1#s-one-greeting "Hello, I'm testing"]
[:h2#s-one-greeting-two "blah blah blah"]]
[:section.section
[:p "Work history"]
[:p "yada"]
[:p "yada"]
[:ul
(for [item items]
^{:key item} [:li "item " item])]]])
You are accessing items without derefing it. So you are trying to for loop over the reagent atom which doesn't work. Just switch it to (for [item #items] ...) and you should be fine.
The routes created with the default reagent template look like this:
;; -------------------------
;; Routes
(def router
(reitit/router
[["/" :index]
["/items"
["" :items]
["/:item-id" :item]]
["/about" :about]]))
If I change the path of one ("/about" to "/test" below), why does it no longer work? There must be something else driving the routing, but I can't seem to figure out what.
;; -------------------------
;; Routes
(def router
(reitit/router
[["/" :index]
["/items"
["" :items]
["/:item-id" :item]]
["/test" :about]]))
This is the default reagent template (lein new reagent...) and I haven't changed anything else in the code. Any help would be greatly appreciated.
Edit - Some additional detail
I poked around in the repl a little bit in this function (from the default template):
(defn init! []
(clerk/initialize!)
(accountant/configure-navigation!
{:nav-handler
(fn [path]
(let [match (reitit/match-by-path router path)
current-page (:name (:data match))
route-params (:path-params match)]
(reagent/after-render clerk/after-render!)
(session/put! :route {:current-page (page-for current-page)
:route-params route-params})
(clerk/navigate-page! path)
))
:path-exists?
(fn [path]
(boolean (reitit/match-by-path router path)))})
(accountant/dispatch-current!)
(mount-root))
Everything looks ok to me. In fact, executing the below steps in the repl successfully navigated the browser to the correct page. I still can't enter the URL directly though.
app:problem.core=> (require '[reitit.frontend :as reitit])
nil
app:problem.core=> (reitit/match-by-path router "/test")
{:template "/test",
:data {:name :about},
:result nil,
:path-params {},
:path "/test",
:query-params {},
:parameters {:path {}, :query {}}}
app:problem.core=> (def match (reitit/match-by-path router "/test"))
#'problem.core/match
app:problem.core=> (:name (:data match))
:about
app:problem.core=> (:path-params match)
{}
app:problem.core=> (def current-page (:name (:data match)))
#'problem.core/current-page
app:problem.core=> (page-for current-page)
#'problem.core/about-page
app:problem.core=> (session/put! :route {:current-page (page-for current-page) :route-params {}})
{:route {:current-page #'problem.core/about-page, :route-params {}}}
app:problem.core=>
It looks like you changed the routes on client-side, in src/cljs/<project_name>/core.cljs, but did not change them server side in src/clj/<project_name>/handler.clj (look under the def app near the bottom of the file).
If your new to developing web applications with Clojure, I'd recommend looking at Luminus, rather than using the Reagent template. It's a much more batteries included-approach, with a lot more documentation. The book "Web Development With Clojure" is written by the same author (who is also a contributor to Reagent), and is also recommended reading.
Hi I'm not an experienced developer and am working my way through this great book Living Clojure: An introduction and training plan for developers by Carin Meier
I'd appreciate your help with an issue I'm stuck on in Chapter 7 (Creating Web Applications with Clojure).
It's walked me through the following sections okay:
Creating a Web Server with Compojure
Using JSON with the Cheshire Library and Ring
Using Clojure in Your Browser with ClojureScript
Browser-Connected REPL
Making HTTP Calls with ClojureScript and cljs-http
But in the section...
DOM Control with ClojureScript and Enfocus...
...I've got to the middle of page 130, ("...Save your edits, and your cljsbuild will recompile your ClojureScript...") but the lein cjsbuild auto, which detects the changes, fails on the attempted compile.
These are the various files I've set up
project.clj
(defproject cheshire-cat "0.1.0-SNAPSHOT"
:description "FIXME: write description"
:url "http://example.com/FIXME"
:min-lein-version "2.0.0"
:dependencies [[org.clojure/clojure "1.10.0"]
[compojure "1.6.1"]
[ring/ring-defaults "0.3.2"]
[ring/ring-json "0.5.0"]
[org.clojure/clojurescript "1.10.597"]
[cljs-http "0.1.46"]
[org.clojure/core.async "0.5.527"]
[enfocus "2.1.1"]]
:plugins [[lein-ring "0.12.5"]
[lein-cljsbuild "1.1.7"]]
:ring {:handler cheshire-cat.handler/app}
:profiles
{:dev {:dependencies [[javax.servlet/servlet-api "2.5"]
[ring/ring-mock "0.4.0"]]}}
:cljsbuild {
:builds [{
:source-paths ["src-cljs"]
:compiler {
:output-to "resources/public/main.js"
:optimizations :whitespace
:pretty-print true}}]})
src / cheshire_cat / handler.clj
(ns cheshire-cat.handler
(:require [compojure.core :refer :all]
[compojure.route :as route]
[ring.middleware.defaults :refer [wrap-defaults site-defaults]]
[ring.middleware.json :as ring-json]
[ring.util.response :as rr]))
(defroutes app-routes
(GET "/" [] "Hello World")
(GET "/cheshire-cat" []
(rr/response {:name "Cheshire Cat" :status :grinning}))
(route/not-found "Not Found"))
(def app
(-> app-routes
(ring-json/wrap-json-response)
(wrap-defaults site-defaults)))
src-cljs / core.cljs
(ns cheshire-cat.core
(:require-macros [cljs.core.async.macros :refer [go]])
(:require [clojure.browser.repl :as repl]
[cljs-http.client :as http]
[cljs.core.async :refer [<!]]
[enfocus.core :as ef]))
(defn ^:export init []
(repl/connect "http://localhost:9000/repl")
(go
(let [response (<! (http/get "/cheshire-cat"))
body (:body response)]
(ef/at "#cat-name" (ef/content (:name body)))
(ef/at "#status" (ef/content (:status body))))))
resources / public / cat.html
<!DOCTYPE html>
<html>
<head>
<title>Cheshire Cat</title>
</head>
<body>
<div id="cat-name">Name</div>
<div id="status">Status</div>
<script type="text/javascript" src="main.js"></script>
<script type="text/javascript">cheshire_cat.core.init()</script>
</body>
</html>
Terminal
On one tab, I've started a server on port 3000 using lein ring server
Another tab is watching for changes before compiling ClojureScript using lein cljsbuild auto
It's here that I'm running into trouble. I'll paste the verbose response below. I tried adding a dependency of domina into the project.clj file, but that didn't help so I removed it again.
Many thanks in advance.
Garys-MacBook-Pro:cheshire-cat garyhudson$ lein cljsbuild auto
Watching for changes before compiling ClojureScript...
Compiling ["resources/public/main.js"] from ["src-cljs"]...
WARNING: domina is a single segment namespace at line 1 file:/Users/garyhudson/.m2/repository/domina/domina/1.0.3/domina-1.0.3.jar!/domina.cljs
WARNING: Protocol DomContent is overwriting function nodes in file file:/Users/garyhudson/.m2/repository/domina/domina/1.0.3/domina-1.0.3.jar!/domina.cljs
WARNING: Protocol DomContent is overwriting function single-node in file file:/Users/garyhudson/.m2/repository/domina/domina/1.0.3/domina-1.0.3.jar!/domina.cljs
WARNING: *debug* not declared dynamic and thus is not dynamically rebindable, but its name suggests otherwise. Please either indicate ^:dynamic *debug* or change the name at line 111 file:/Users/garyhudson/.m2/repository/domina/domina/1.0.3/domina-1.0.3.jar!/domina.cljs
WARNING: Use of undeclared Var goog.dom/query at line 15 file:/Users/garyhudson/.m2/repository/domina/domina/1.0.3/domina-1.0.3.jar!/domina/css.cljs
WARNING: Use of undeclared Var goog.dom/query at line 19 file:/Users/garyhudson/.m2/repository/domina/domina/1.0.3/domina-1.0.3.jar!/domina/css.cljs
Compiling ["resources/public/main.js"] failed.
clojure.lang.ExceptionInfo: failed compiling file:target/cljsbuild-compiler-0/enfocus/core.cljs
compiler.cljc:1717 cljs.compiler$compile_file$fn__3955.invoke
compiler.cljc:1677 cljs.compiler$compile_file.invokeStatic
compiler.cljc:1653 cljs.compiler$compile_file.invoke
closure.clj:653 cljs.closure/compile-file
closure.clj:631 cljs.closure/compile-file
closure.clj:727 cljs.closure/fn
closure.clj:721 cljs.closure/fn
closure.clj:549 cljs.closure/fn[fn]
closure.clj:700 cljs.closure/compile-from-jar
closure.clj:690 cljs.closure/compile-from-jar
closure.clj:737 cljs.closure/fn
closure.clj:721 cljs.closure/fn
closure.clj:549 cljs.closure/fn[fn]
closure.clj:1088 cljs.closure/compile-sources[fn]
LazySeq.java:42 clojure.lang.LazySeq.sval
LazySeq.java:51 clojure.lang.LazySeq.seq
Cons.java:39 clojure.lang.Cons.next
RT.java:709 clojure.lang.RT.next
core.clj:64 clojure.core/next
core.clj:3142 clojure.core/dorun
core.clj:3148 clojure.core/doall
core.clj:3148 clojure.core/doall
closure.clj:1084 cljs.closure/compile-sources
closure.clj:1073 cljs.closure/compile-sources
closure.clj:3012 cljs.closure/build
closure.clj:2920 cljs.closure/build
api.clj:208 cljs.build.api/build
api.clj:189 cljs.build.api/build
api.clj:195 cljs.build.api/build
api.clj:189 cljs.build.api/build
compiler.clj:61 cljsbuild.compiler/compile-cljs[fn]
compiler.clj:60 cljsbuild.compiler/compile-cljs
compiler.clj:48 cljsbuild.compiler/compile-cljs
compiler.clj:168 cljsbuild.compiler/run-compiler
compiler.clj:129 cljsbuild.compiler/run-compiler
form-init2776313306215562422.clj:1 user/eval838[fn]
form-init2776313306215562422.clj:1 user/eval838[fn]
LazySeq.java:42 clojure.lang.LazySeq.sval
LazySeq.java:51 clojure.lang.LazySeq.seq
RT.java:531 clojure.lang.RT.seq
core.clj:137 clojure.core/seq
core.clj:3133 clojure.core/dorun
core.clj:3148 clojure.core/doall
core.clj:3148 clojure.core/doall
form-init2776313306215562422.clj:1 user/eval838
form-init2776313306215562422.clj:1 user/eval838
Compiler.java:7176 clojure.lang.Compiler.eval
Compiler.java:7166 clojure.lang.Compiler.eval
Compiler.java:7635 clojure.lang.Compiler.load
Compiler.java:7573 clojure.lang.Compiler.loadFile
main.clj:452 clojure.main/load-script
main.clj:454 clojure.main/init-opt
main.clj:454 clojure.main/init-opt
main.clj:485 clojure.main/initialize
main.clj:519 clojure.main/null-opt
main.clj:516 clojure.main/null-opt
main.clj:598 clojure.main/main
main.clj:561 clojure.main/main
RestFn.java:137 clojure.lang.RestFn.applyTo
Var.java:705 clojure.lang.Var.applyTo
main.java:37 clojure.main.main
Caused by: clojure.lang.Compiler$CompilerException: Syntax error macroexpanding clojure.core/ns at (enfocus/macros.clj:1:1).
Compiler.java:6971 clojure.lang.Compiler.checkSpecs
Compiler.java:6987 clojure.lang.Compiler.macroexpand1
Compiler.java:7074 clojure.lang.Compiler.macroexpand
Compiler.java:7160 clojure.lang.Compiler.eval
Compiler.java:7635 clojure.lang.Compiler.load
RT.java:381 clojure.lang.RT.loadResourceScript
RT.java:372 clojure.lang.RT.loadResourceScript
RT.java:463 clojure.lang.RT.load
RT.java:428 clojure.lang.RT.load
core.clj:6126 clojure.core/load[fn]
core.clj:6125 clojure.core/load
core.clj:6109 clojure.core/load
RestFn.java:408 clojure.lang.RestFn.invoke
core.clj:5908 clojure.core/load-one
core.clj:5903 clojure.core/load-one
core.clj:5948 clojure.core/load-lib[fn]
core.clj:5947 clojure.core/load-lib
core.clj:5928 clojure.core/load-lib
RestFn.java:142 clojure.lang.RestFn.applyTo
core.clj:667 clojure.core/apply
core.clj:5985 clojure.core/load-libs
core.clj:5969 clojure.core/load-libs
RestFn.java:137 clojure.lang.RestFn.applyTo
core.clj:667 clojure.core/apply
core.clj:6007 clojure.core/require
core.clj:6007 clojure.core/require
RestFn.java:408 clojure.lang.RestFn.invoke
analyzer.cljc:4106 cljs.analyzer$ns_side_effects$fn__2653.invoke
analyzer.cljc:4105 cljs.analyzer$ns_side_effects.invokeStatic
analyzer.cljc:4077 cljs.analyzer$ns_side_effects.invoke
analyzer.cljc:4201 cljs.analyzer$analyze_STAR_$fn__2706.invoke
PersistentVector.java:343 clojure.lang.PersistentVector.reduce
core.clj:6827 clojure.core/reduce
core.clj:6810 clojure.core/reduce
analyzer.cljc:4201 cljs.analyzer$analyze_STAR_.invokeStatic
analyzer.cljc:4191 cljs.analyzer$analyze_STAR_.invoke
analyzer.cljc:4220 cljs.analyzer$analyze.invokeStatic
analyzer.cljc:4203 cljs.analyzer$analyze.invoke
compiler.cljc:1535 cljs.compiler$emit_source.invokeStatic
compiler.cljc:1508 cljs.compiler$emit_source.invoke
compiler.cljc:1620 cljs.compiler$compile_file_STAR_$fn__3924.invoke
compiler.cljc:1428 cljs.compiler$with_core_cljs.invokeStatic
compiler.cljc:1417 cljs.compiler$with_core_cljs.invoke
compiler.cljc:1604 cljs.compiler$compile_file_STAR_.invokeStatic
compiler.cljc:1597 cljs.compiler$compile_file_STAR_.invoke
compiler.cljc:1702 cljs.compiler$compile_file$fn__3955.invoke
Caused by: clojure.lang.ExceptionInfo: Call to clojure.core/ns did not conform to spec.
alpha.clj:705 clojure.spec.alpha/macroexpand-check
alpha.clj:697 clojure.spec.alpha/macroexpand-check
AFn.java:156 clojure.lang.AFn.applyToHelper
AFn.java:144 clojure.lang.AFn.applyTo
Var.java:705 clojure.lang.Var.applyTo
Compiler.java:6969 clojure.lang.Compiler.checkSpecs
Here is the clue you need:
Caused by: clojure.lang.Compiler$CompilerException: Syntax error
macroexpanding clojure.core/ns at (enfocus/macros.clj:1:1).
....
Caused by: clojure.lang.ExceptionInfo: Call to clojure.core/ns did
not conform to spec.
So it is a problem in the enfocus library, not your code.
IMHO the enfocus library is a bit old these days. I think you would be better served using the figwheel.main lib for the CLJS code: https://figwheel.org/
Note that this is basically Figwheel 2.0, but under a new name. It is much better than the original Figwheel.
Go through the tutorial at figwheel.org, and build your CLJS code in a separate project directory from your back-end code.
Also, be sure to use the Clojure CLI/Deps to build the CLJS project (i.e. not Leiningen). CLI/Deps is much easier to use for ClojureScript projects than Leiningen.
https://clojure.org/guides/deps_and_cli
https://clojure.org/reference/deps_and_cli
When defining a compojure handler e.g. by using the defroutes macro, I can do something like this:
(defroutes home-routes
(GET "/myhome/:id" [ id ] (home-page)))
(defn home-page [ id ]
( ... do something ... ))
So I know how to pass a piece of the path parameter. But imagine I want to return a HAL+JSON object with a selflink. How would I get defroutes to pass the whole URI to the home-page function?
The Ring request map contains all the necessary information to construct a "selflink". Specifically, :scheme, :server-name, :server-port, and :uri values can be assembled into full request URL. When I faced this problem I created Ring middleware that adds the assembled request URL to the Ring request map. I could then use the request URL in my handlers as long as I pass the request map (or some subset of it) into the handler. The following snippet shows one way of implementing this:
(defroutes app-routes
(GET "/myhome/:id" [id :as {:keys [self-link]}] (home-page id self-link))
(route/resources "/")
(route/not-found "Not Found"))
(defn wrap-request-add-self-link [handler]
(fn add-self-link [{:keys [scheme server-name server-port uri] :as r}]
(let [link (str (name scheme) "://" server-name ":" server-port uri)]
(handler (assoc r :self-link link)))))
(def app
(-> app-routes
handler/site
wrap-request-add-self-link))
I have a rather simple problem I thought. I have a luminus web project with clojurescript and cljs-ajax. What I do is an ajax request to my server and in my error-handler I want to parse a json string to display a specific error message. I just cannot get it working.
This is my code:
Clojurescript:
(defn error-handler [response]
(js/alert (aget response "message")))
; (js/alert (:message response ))) neither works here
(defn test-connection []
(POST "/url"
{:params (get-form-data)
:response-format :json
:handler succ-handler
:error-handler error-handler}))
And my serverside code:
(defn connect-jira []
{:body {:message "No connection to JIRA. Please check your details."}}
)
(defroutes jira-routes
(POST "url" []
(connect-jira)))
What is the idiomatic way to return a custom error message and parse that with clojurescript?
Update
I tracked my problem down some more. There is a difference between the success and the error handler of the POST request. Lets say my server side looks like this:
(defn connect-jira []
{:status 200 :body {:message "No connection to JIRA. Please check your details."}})
And my success handler like this:
(defn succ-handler [{:keys [message]}]
(.log js/console message))
Then its all fine, the correct messages is logged to the console.
But if my server side looks like this (different statu):
(defn connect-jira []
{:status 500 :body {:message "No connection to JIRA. Please check your details."}})
I call the error handler on cljs side
(defn err-handler [{:keys [message]}]
(.log js/console message))
But the message is "null"
I also tried to overwrite the status-text on server side, but did not succeed. So, how do I pass a message to the error handler from server side?
Are you using this library for your AJAX calls?
https://github.com/yogthos/cljs-ajax
If so, your error handler would need to look something more like this:
(defn err-handler [{:keys [response]}]
(.log js/console (:message response)))