jacekschae / learn-reagent-course-files Goto Github PK

View Code? Open in Web Editor NEW

86.0 4.0 54.0 52 KB

:cinema: Learn Reagent course files for building GIGGIN app

Home Page: https://www.learnreagent.com

CSS 17.06% HTML 1.19% Clojure 81.75%

clojurescript reagent shadow-cljs firebase

learn-reagent-course-files's People

Contributors

Stargazers

Watchers

learn-reagent-course-files's Issues

Cannot start the server on windows.

I was going through the second lesson 02 App Setup in the series and tried to start the server by running npm run dev after installing all the npm packages, it failed to start.

> npm run dev

> [email protected] dev C:\Users\xyz\Desktop\projects\learn-reagent-course-files-master\giggin
> shadow-cljs watch app;

shadow-cljs - config: C:\Users\xyz\Desktop\projects\learn-reagent-course-files-master\giggin\shadow-cljs.edn  cli version: 2.4.12  node: v10.5.0
shadow-cljs - starting ...
No config for build "app;" found.
Build id required.

I followed the same instructions on Ubuntu and it worked as expected. Are there different projects setups for windows and other Unix environments. Is there a way to fix this on windows.

Reagent video 20 Firebase Setup with Firebase 9.23.0 needs clj->js for config

Using the latest, as of today, 9.23.0 version of Firebase with this course requires a slight change to wrap the config object in the clj->js function so that the firebase/initializeApp function can recognize the configuration object as a proper JSON object.

(ns giggin.fb.init
  (:require ["firebase/app" :as firebase]
            ["firebase/database"]
            ["firebase/auth"]))

(defn firebase-init
  []
  (let [config (clj->js {:apiKey "myapikey"
                         :authDomain "mydomain.firebaseapp.com"
                         :projectId "mydomain"
                         :storageBucket "mydomain.appspot.com"
                         :messagingSenderId "1234123412341234"
                         :appId "1:123412341234:web:1234123c41234c123c"
                         :measurementId "G-SD78DF8DDF8"})
        app (firebase/initializeApp config)]))

nrepl Error Spacemacs

Current doing the course, but it seems like I get some weird error while on Episode 7.

No application has connected to the REPL server. Make sure your JS environment has loaded your compiled ClojureScript code.

It seems you may have had a similar issue as well: thheller/shadow-cljs#269. Did you ever find out what the cause of this was?

When I write:
(shadow.cljs.devtools.api/nrepl-select :app) it actually works and I get [:selected :app].

But when I input:

(ns giggin.state
             (:require [reagent.core :as r]))'

I get the error No application has connected to the REPL server. Make sure your JS environment has loaded your compiled ClojureScript code.

Unable to build a production build for a derivative project

Hi @jacekschae,

I've been learning a lot from your videos and to take the next step I decided to build a simple snake game for myself here https://github.com/abhi18av/luminus-snake/tree/b2.0.0

The thing is as of now, only the npm run dev works fine and not the npm run release. The latter throws the error ReferenceError: snake is not defined in the console. Could you guide me a bit here please?

`gigs` returns a function in `14 Gig Editor` but it was never added

13 Checkout Modal does mention at the end that components that hold state should return a function and changes checkout-modal.cljs to do so. But gigs does not return a function last time it shows up at the end of 12 Refactor Functions, and then it does at the start of 14 Gig Editor without the video saying it should change.

This causes a subtle bug later. Near the end of 15 Save Gig we add (reset! modal false) to the insert-gig function so that clicking save also closes the modal. But this doesn't change any behaviour if you haven't added the function return to gigs (like I didn't) since the previous swap triggers a rerender and resets modal anyway.

Add license to package.json to eliminate warning.

npm WARN [email protected] No license field.

Cannot invoke Object.getClass() because target is null

Hi!

I do this:

Clone the repo.
cd into the gigging directory
executes "npm install"
executes "npm run dev"

The last step returns this:

❯ npm run dev

> [email protected] dev /Users/joakimtengstrand/source/learn-reagent-course-files/giggin
> shadow-cljs watch app

shadow-cljs - config: /Users/joakimtengstrand/source/learn-reagent-course-files/giggin/shadow-cljs.edn  cli version: 2.8.52  node: v14.18.1
shadow-cljs - HTTP server available at http://localhost:3000
shadow-cljs - server version: 2.8.52 running at http://localhost:9630
shadow-cljs - nREPL server started on port 3333
shadow-cljs - watching build :app
[:app] Configuring build.
[:app] Compiling ...
[:failed-to-compare "^4.1.0" "4.1.1" #error {
 :cause "Cannot invoke \"Object.getClass()\" because \"target\" is null"
 :via
 [{:type java.lang.NullPointerException
   :message "Cannot invoke \"Object.getClass()\" because \"target\" is null"
   :at [clojure.lang.Reflector invokeInstanceMethod "Reflector.java" 97]}]
 :trace
 [[clojure.lang.Reflector invokeInstanceMethod "Reflector.java" 97]
  [shadow.cljs.devtools.server.npm_deps$make_engine invokeStatic "npm_deps.clj" 39]
  [shadow.cljs.devtools.server.npm_deps$make_engine invoke "npm_deps.clj" 32]
  [shadow.cljs.devtools.server.npm_deps$fn__15193$fn__15194 invoke "npm_deps.clj" 46]
  [clojure.lang.Delay deref "Delay.java" 42]
  [clojure.core$deref invokeStatic "core.clj" 2320]
  [clojure.core$deref invoke "core.clj" 2306]
  [shadow.cljs.devtools.server.npm_deps$fn__15193$fn__15196 invoke "npm_deps.clj" 52]
  [shadow.build.targets.browser$check_npm_versions$fn__23840$fn__23841 invoke "browser.clj" 789]
  [clojure.core.protocols$iter_reduce invokeStatic "protocols.clj" 49]
  [clojure.core.protocols$fn__8138 invokeStatic "protocols.clj" 75]
  [clojure.core.protocols$fn__8138 invoke "protocols.clj" 75]
  [clojure.core.protocols$fn__8088$G__8083__8101 invoke "protocols.clj" 13]
  [clojure.core$reduce invokeStatic "core.clj" 6828]
  [clojure.core$reduce invoke "core.clj" 6810]
  [shadow.build.targets.browser$check_npm_versions$fn__23840 invoke "browser.clj" 781]
  [shadow.build.targets.browser$check_npm_versions invokeStatic "browser.clj" 780]
  [shadow.build.targets.browser$check_npm_versions invoke "browser.clj" 762]
  [shadow.build.targets.browser$process invokeStatic "browser.clj" 817]
  [shadow.build.targets.browser$process invoke "browser.clj" 801]
  [clojure.lang.Var invoke "Var.java" 384]
  [shadow.build$process_stage$fn__12388 invoke "build.clj" 143]
  [shadow.build$process_stage invokeStatic "build.clj" 140]
  [shadow.build$process_stage invoke "build.clj" 132]
  [shadow.build$compile invokeStatic "build.clj" 395]
  [shadow.build$compile invoke "build.clj" 384]
  [shadow.cljs.devtools.server.worker.impl$build_compile invokeStatic "impl.clj" 314]
  [shadow.cljs.devtools.server.worker.impl$build_compile invoke "impl.clj" 300]
  [shadow.cljs.devtools.server.worker.impl$fn__13413 invokeStatic "impl.clj" 695]
  [shadow.cljs.devtools.server.worker.impl$fn__13413 invoke "impl.clj" 686]
  [clojure.lang.MultiFn invoke "MultiFn.java" 234]
  [shadow.cljs.devtools.server.util$server_thread$fn__13085$fn__13086$fn__13094 invoke "util.clj" 285]
  [shadow.cljs.devtools.server.util$server_thread$fn__13085$fn__13086 invoke "util.clj" 284]
  [shadow.cljs.devtools.server.util$server_thread$fn__13085 invoke "util.clj" 257]
  [clojure.lang.AFn run "AFn.java" 22]
  [java.lang.Thread run "Thread.java" 832]]}]
...

Versions:

npm -v
6.14.15

node -v
v14.18.1

I've also tried the latest version of node, but then tried to downgrade to 14.

Maybe you have any ideas?

/Joakim

Calva and Shadow cljs

I'm not sure what issue is here. Is it a npm run vs jack-in issue? I'm using VS Code and Calva and things were fine checking the blank page on localhost:3000 to begin with, then when I completed the components section (#4) and tried it I got the message at the bottom of the screen. I also may be misunderstanding the purpose of Jacking-In and the REPL.

It seems like there may be a REPL running that I'm unaware of, or how to kill.

Any help is much appreciated.

Runtime error: "A component is changing a controlled input of type checkbox to be uncontrolled."

Heya, if you click on "Add gig" using the 17-refactor-gigs increment, the chrome console will list this error message:

warning.js:34 Warning: A component is changing a controlled input of type checkbox to be uncontrolled. Input elements should not switch from controlled to uncontrolled (or vice versa). Decide between using a controlled or uncontrolled input element for the lifetime of the component. More info: https://fb.me/react-controlled-components
    in input (created by ReagentInput)
    in ReagentInput (created by giggin.components.gig_editor.gig_editor)
    in label (created by giggin.components.gig_editor.gig_editor)
    in div (created by giggin.components.gig_editor.gig_editor)
    in div (created by giggin.components.gig_editor.gig_editor)
    in div (created by giggin.components.gig_editor.gig_editor)
    in div (created by giggin.components.gig_editor.gig_editor)
    in giggin.components.gig_editor.gig_editor (created by giggin.components.gigs.gigs)
    in div (created by giggin.components.gigs.gigs)
    in main (created by giggin.components.gigs.gigs)
    in giggin.components.gigs.gigs (created by giggin.core.app)
    in div (created by giggin.core.app)
    in giggin.core.app

This seems to be related to the sold-out checkbox. If I remove I don't get the error. I don't get the error if I click to edit an existing gig either, but I do get it when clicking cancel after trying to edit an existing gig.

So I suppose it's related to the default :gig {} value, where a checkbox should either be true or false but there are times where it's undefined here.

Can't install npm package firebase version 4.13.1

In episode 20 https://www.jacekschae.com/courses/learn-reagent-pro/21653-javascript-interop/57060-20-firebase-setup at about 2:22 the video asks the viewer to install firebase version 4.13.1 however, when I try, I get this error:

$ npm install --save [email protected]
npm WARN deprecated [email protected]: core-js@<3 is no longer maintained and not recommended for usage due to the number of issues. Please, upgrade your dependencies to the actual version of core-js@3.

> [email protected] install /home/jakescruggs/projects/learn-reagent-course-files/giggin/node_modules/grpc
> node-pre-gyp install --fallback-to-build --library=static_library

node-pre-gyp ERR! Tried to download(403): https://storage.googleapis.com/grpc-precompiled-binaries/node/grpc/v1.10.1/node-v64-linux-x64-glibc.tar.gz 
node-pre-gyp ERR! Pre-built binaries not found for [email protected] and [email protected] (node-v64 ABI, glibc) (falling back to source compile with node-gyp) 
node-pre-gyp ERR! Pre-built binaries not installable for [email protected] and [email protected] (node-v64 ABI, glibc) (falling back to source compile with node-gyp) 
node-pre-gyp ERR! Hit error Connection closed while downloading tarball file 
make: Entering directory '/home/jakescruggs/projects/learn-reagent-course-files/giggin/node_modules/grpc/build'
  CXX(target) Release/obj.target/grpc/deps/grpc/src/core/lib/surface/init.o
make: Entering directory '/home/jakescruggs/projects/learn-reagent-course-files/giggin/node_modules/grpc/build'
  CXX(target) Release/obj.target/grpc/deps/grpc/src/core/lib/surface/init.o
rm: cannot remove './Release/.deps/Release/obj.target/grpc/deps/grpc/src/core/lib/surface/init.o.d.raw': No such file or directory
make: *** [grpc.target.mk:396: Release/obj.target/grpc/deps/grpc/src/core/lib/surface/init.o] Error 1
make: Leaving directory '/home/jakescruggs/projects/learn-reagent-course-files/giggin/node_modules/grpc/build'
  CXX(target) Release/obj.target/grpc/deps/grpc/src/core/lib/avl/avl.o
gyp ERR! build error 
gyp ERR! stack Error: `make` failed with exit code: 2
gyp ERR! stack     at ChildProcess.onExit (/usr/lib/node_modules/npm/node_modules/node-gyp/lib/build.js:191:23)
gyp ERR! stack     at ChildProcess.emit (events.js:198:13)
gyp ERR! stack     at Process.ChildProcess._handle.onexit (internal/child_process.js:248:12)
gyp ERR! System Linux 5.3.0-7625-generic
gyp ERR! command "/usr/bin/node" "/usr/lib/node_modules/npm/node_modules/node-gyp/bin/node-gyp.js" "build" "--fallback-to-build" "--library=static_library" "--module=/home/jakescruggs/projects/learn-reagent-course-files/giggin/node_modules/grpc/src/node/extension_binary/node-v64-linux-x64-glibc/grpc_node.node" "--module_name=grpc_node" "--module_path=/home/jakescruggs/projects/learn-reagent-course-files/giggin/node_modules/grpc/src/node/extension_binary/node-v64-linux-x64-glibc"
gyp ERR! cwd /home/jakescruggs/projects/learn-reagent-course-files/giggin/node_modules/grpc
gyp ERR! node -v v10.18.1
gyp ERR! node-gyp -v v5.0.5
gyp ERR! not ok 
node-pre-gyp ERR! build error 
node-pre-gyp ERR! stack Error: Failed to execute '/usr/bin/node /usr/lib/node_modules/npm/node_modules/node-gyp/bin/node-gyp.js build --fallback-to-build --library=static_library --module=/home/jakescruggs/projects/learn-reagent-course-files/giggin/node_modules/grpc/src/node/extension_binary/node-v64-linux-x64-glibc/grpc_node.node --module_name=grpc_node --module_path=/home/jakescruggs/projects/learn-reagent-course-files/giggin/node_modules/grpc/src/node/extension_binary/node-v64-linux-x64-glibc' (1)
node-pre-gyp ERR! stack     at ChildProcess.<anonymous> (/home/jakescruggs/projects/learn-reagent-course-files/giggin/node_modules/grpc/node_modules/node-pre-gyp/lib/util/compile.js:83:29)
node-pre-gyp ERR! stack     at ChildProcess.emit (events.js:198:13)
node-pre-gyp ERR! stack     at maybeClose (internal/child_process.js:982:16)
node-pre-gyp ERR! stack     at Process.ChildProcess._handle.onexit (internal/child_process.js:259:5)
node-pre-gyp ERR! System Linux 5.3.0-7625-generic
node-pre-gyp ERR! command "/usr/bin/node" "/home/jakescruggs/projects/learn-reagent-course-files/giggin/node_modules/grpc/node_modules/.bin/node-pre-gyp" "install" "--fallback-to-build" "--library=static_library"
node-pre-gyp ERR! cwd /home/jakescruggs/projects/learn-reagent-course-files/giggin/node_modules/grpc
node-pre-gyp ERR! node -v v10.18.1
node-pre-gyp ERR! node-pre-gyp -v v0.7.0
node-pre-gyp ERR! not ok 
Failed to execute '/usr/bin/node /usr/lib/node_modules/npm/node_modules/node-gyp/bin/node-gyp.js build --fallback-to-build --library=static_library --module=/home/jakescruggs/projects/learn-reagent-course-files/giggin/node_modules/grpc/src/node/extension_binary/node-v64-linux-x64-glibc/grpc_node.node --module_name=grpc_node --module_path=/home/jakescruggs/projects/learn-reagent-course-files/giggin/node_modules/grpc/src/node/extension_binary/node-v64-linux-x64-glibc' (1)
  CXX(target) Release/obj.target/grpc/deps/grpc/src/core/lib/backoff/backoff.oexec install script
In file included from ../deps/grpc/src/core/lib/backoff/backoff.h:22,
                 from ../deps/grpc/src/core/lib/backoff/backoff.cc:19:
../deps/grpc/src/core/lib/iomgr/exec_ctx.h:22:10: fatal error: grpc/support/atm.h: No such file or directory
   22 | #include <grpc/support/atm.h>
      |          ^~~~~~~~~~~~~~~~~~~~
compilation terminated.
make: *** [grpc.target.mk:396: Release/obj.target/grpc/deps/grpc/src/core/lib/backoff/backoff.o] Error 1
make: Leaving directory '/home/jakescruggs/projects/learn-reagent-course-files/giggin/node_modules/grpc/build'
gyp ERR! build error 
gyp ERR! stack Error: `make` failed with exit code: 2
gyp ERR! stack     at ChildProcess.onExit (/usr/lib/node_modules/npm/node_modules/node-gyp/lib/build.js:191:23)
gyp ERR! stack     at ChildProcess.emit (events.js:198:13)
gyp ERR! stack     at Process.ChildProcess._handle.onexit (internal/child_process.js:248:12)
gyp ERR! System Linux 5.3.0-7625-generic
gyp ERR! command "/usr/bin/node" "/usr/lib/node_modules/npm/node_modules/node-gyp/bin/node-gyp.js" "build" "--fallback-to-build" "--library=static_library" "--module=/home/jakescruggs/projects/learn-reagent-course-files/giggin/node_modules/grpc/src/node/extension_binary/node-v64-linux-x64-glibc/grpc_node.node" "--module_name=grpc_node" "--module_path=/home/jakescruggs/projects/learn-reagent-course-files/giggin/node_modules/grpc/src/node/extension_binary/node-v64-linux-x64-glibc"
gyp ERR! cwd /home/jakescruggs/projects/learn-reagent-course-files/giggin/node_modules/grpc
gyp ERR! node -v v10.18.1
gyp ERR! node-gyp -v v5.0.5
gyp ERR! not ok 
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] install: `node-pre-gyp install --fallback-to-build --library=static_library`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the [email protected] install script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above

Reagent 21 Firebase Database: regenerator-runtime/runtime required in order to use the realtime database.

I found that I had to npm i -s regenerator-runtime and (:require ["regenerator-runtime/runtime"] prior to the ["firebase/database" :as fb] dependency in order to get rid of the following error:

"Uncaught ReferenceError: regeneratorRuntime is not defined"

It looks like the Firebase Realtime database library uses the Regenerator library to generate some of their functions and thus is required when using the latest version of Firebase (9.23.0).

Fabulous Course - Comment section?

Another Fab course, thanks!

Sorry for the issue, can't seem to find anywhere to add comments!

upsert-gig inserts nil id

I'm getting an error in the browser console for duplicate keys, I believe it's because in upsert-gig, id is only set to random-uuid inside the map but the key for the assoc remains nil.

I think it should something like:

upsert-gig (fn [{:keys [id title desc price img sold-out]}]
                     (let [id (or id (str "gig-" (random-uuid)))]
                       (swap! state/gigs assoc id {:id id
                                                   :title (str/trim title)
                                                   :desc (str/trim desc)
                                                   :img (str/trim img)
                                                   :price (js/parseInt price)
                                                   :sold-out sold-out}))
                       (toggle-modal {:active false :gig {}}))

use a more recent shadow-cljs version

Currently the project uses 2.3.30, which pulls in an old version of nrepl, causing integration issues with cider: clojure-emacs/cider#2652

Updating to 2.8.39 solves the issue with cider.

How to setup CORS settings

I am trying to follow the reagent videos. The Gigs Image URLs are not loading due to CORS errors. Please advise where to configure CORS settings

The tag <tag> is unrecognized in this browser. If you meant to render a React component, start its name with an uppercase letter.

Hello Jacek,

I'm stuck on video 04 First Components because of the following warnings:

warning.js:34 Warning: The tag <gigs> is unrecognized in this browser. If you meant to render a React component, start its name with an uppercase letter.

warning.js:34 Warning: The tag <orders> is unrecognized in this browser. If you meant to render a React component, start its name with an uppercase letter.

Since those components are not rendered properly, the style.css isn't applied to those components.

Do you have any pointers on how to fix this?

Thanks.

Can't interact with shadow.cljs because Java cannot find the shadow.cljs.devtools.api/nrepl-select class

See here: jasongilman/proto-repl#308

"for" over orders in orders.cljs

the code
(for [[id quant] @state/orders]
leaves me wondering because I was under the impression Clojure maps are not guaranteed to be returned in any specific order, so how can you use a list comprehension on a map with certainty that you will get the correct values?

Bug: Learn Reagent Pro: upsert-gig on the gigs.cljs

Hey @jacekschae , I've noticed a small bug in the 16th video (Update Gig) at minute 4:56 where we refactor insert-gig to upsert-gig.

The way to replicate the bug is to create a gig, and then, after saving it, update it.

So the problem has to do with the id of the map, which goes empty when we create a new gig.

For me one solution could be:

But I don't know if you have a better solution.

I could open a PR but I'm still doing the course, so I don't know if you fix it sometime after. Besides that, this needs to be fixed in all the branches from 17 up.

Modified code for Firebase 9: Lessons 22 & 24

I noticed that Lessons 20 and 21 include updated instructions for using Firebase 9 but later lessons do not. I wanted to see if I could figure it out to develop my js interop skills.

For Lesson 22, the following is working for me:

(ns giggin.fb.db
  (:require 
    ["firebase/database" :refer (getDatabase onValue ref set)]
    [clojure.string :as s]
    [giggin.state :as state]))

(defn db-ref
  [path]
  (let [db (getDatabase)]
    (ref db (s/join "/" path))))

(defn db-save!
  [path value]
  (set (db-ref path) value))

(defn db-subscribe 
  [path]
  (onValue (db-ref path) (fn [^js snapshot]
                            (reset! state/gigs 
                                    (js->clj (.val snapshot) :keywordize-keys true)))))

The changes include using onValue instead of .on, removing "value", and providing a type hint for snapshot to provide some extern support for advanced compilation with shadow-cljs for the type of (.val snapshot). I used this for reference:
https://firebase.google.com/docs/database/web/read-and-write?authuser=0#read_data
https://shadow-cljs.github.io/docs/UsersGuide.html#externs

Bug in the add new gig

Adding a gig doesn't default to a new id. As a result, when modifying the newly added gig it simply creates a new one instead.

(ns giggin.components.gigs
  (:require [giggin.state :as state]
            [giggin.helpers :refer [format-price]]
            [giggin.components.gig-editor :refer [gig-editor]]
            [reagent.core :as r]
            [clojure.string :as str]))

(defn gigs
  []
  (let [modal        (r/atom {:active false})
        values       (r/atom {:id       nil
                              :title    ""
                              :desc     ""
                              :price    0
                              :img      ""
                              :sold-out false})
        add-to-order #(swap! state/orders update % inc)
        toggle-modal (fn
                       [{:keys [active gig]}]
                       (swap! modal assoc :active active)
                       (reset! values gig))
        upsert-gig   (fn [{:keys [id title desc price img sold-out]}]
                       (swap! state/gigs assoc id {:id       (or id (str "gig-" (random-uuid)))
                                                   :title    (str/trim title)
                                                   :desc     (str/trim desc)
                                                   :img      (str/trim img)
                                                   :price    (js/parseInt price)
                                                   :sold-out sold-out})
                       (toggle-modal {:active false
                                      :gig    {}}))]
    (fn
      []
      [:main
       [:div.gigs
        [:button.add-gig
         {:on-click #(toggle-modal {:active true
                                    :gig    {:id (str "gig-" (random-uuid))}})}
         [:div.add__title
          [:i.icon.icon--plus]
          [:p "Add gig"]]]
        [gig-editor modal values upsert-gig toggle-modal]
        (for [{:keys [id img title price desc]
               :as   gig} (vals @state/gigs)]
          [:div.gig {:key id}
           [:img.gig__artwork.gig__edit {:src      img
                                         :alt      title
                                         :on-click #(toggle-modal {:active true
                                                                   :gig    gig})}]
           [:div.gig__body
            [:div.gig__title
             [:div.btn.btn--primary.float--right.tooltip
              {:data-tooltip "Add to order"
               :on-click     #(add-to-order id)}
              [:i.icon.icon--plus]] title]
            [:p.gig__price (format-price price)]
            [:p.gig__desc desc]]])]])))

I modified the add gig click to default the id key to a new random-uuid

jacekschae / learn-reagent-course-files Goto Github PK

learn-reagent-course-files's People

Contributors

Stargazers

Watchers

Forkers

learn-reagent-course-files's Issues

Recommend Projects

Recommend Topics

Recommend Org

Jobs