Update url-shortener project

zelark · zelark · commit 6f42863398b8 · 2024-02-08T15:30:05.000+03:00
Added: webserver, web API, and frontend.
diff --git a/url-shortener/bun.lockb b/url-shortener/bun.lockb
diff --git a/url-shortener/package-lock.json b/url-shortener/package-lock.json
diff --git a/url-shortener/package.json b/url-shortener/package.json
@@ -0,0 +1,15 @@
+{
+  "name": "url-shortener",
+  "version": "0.1.0",
+  "main": "index.js",
+  "directories": {
+    "test": "test"
+  },
+  "devDependencies": {
+    "shadow-cljs": "^2.27.2"
+  },
+  "dependencies": {
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  }
+}
diff --git a/url-shortener/project.clj b/url-shortener/project.clj
@@ -1,12 +1,29 @@
 (defproject url-shortener "0.1.0-SNAPSHOT"
   :description "URL shortener app"
 
-  :dependencies [[org.clojure/clojure "1.11.1"]]
+  :source-paths ["src" "resources"]
+  
+  :dependencies [;; Backend
+                 [org.clojure/clojure "1.11.1"]
+                 [ring/ring-jetty-adapter "1.11.0"]
+                 [ring/ring-json "0.5.1"]
+                 [compojure "1.7.1"]
+                 
+                 ;; Frontend
+                 [reagent "1.2.0"]
+                 [org.clojure/core.async "1.6.681"]
+                 [cljs-http "0.1.48"
+                  :exclusions [org.clojure/core.async
+                               com.cognitect/transit-cljs
+                               com.cognitect/transit-js]]
+                 [thheller/shadow-cljs "2.27.2"] ; Keep it synced with npm version!
+                 ]
 
   :main ^:skip-aot url-shortener.core
 
   :uberjar-name "url-shortener.jar"
 
   :resource-paths ["resources"]
 
-  :profiles {:uberjar {:aot :all}})
+  :profiles {:dev {:dependencies [[ring/ring-devel "1.11.0"]]}
+             :uberjar {:aot :all}})
diff --git a/url-shortener/resources/public/favicon.ico b/url-shortener/resources/public/favicon.ico
diff --git a/url-shortener/resources/public/index.html b/url-shortener/resources/public/index.html
@@ -0,0 +1,16 @@
+<!doctype html>
+<html>
+
+
+<head>
+  <meta charset="utf-8" />
+  <title>URL Shortener</title>
+  <link rel="stylesheet" href="https://unpkg.com/blocks.css/dist/blocks.min.css" />
+</head>
+
+<body>
+  <div id="root"></div>
+  <script src="/js/main.js"></script>
+</body>
+
+</html>
diff --git a/url-shortener/shadow-cljs.edn b/url-shortener/shadow-cljs.edn
@@ -0,0 +1,7 @@
+{:lein true
+ ; :source-paths and :dependencies are now ignored in this file
+ ; configure them via project.clj
+ :builds {:app {:target :browser
+                :output-dir "resources/public/js"
+                :modules {:main {:entries [url-shortener.frontend]
+                                 :init-fn url-shortener.frontend/init}}}}}
diff --git a/url-shortener/src/url_shortener/core.clj b/url-shortener/src/url_shortener/core.clj
@@ -1,63 +1,78 @@
 (ns url-shortener.core
-  (:require
-   [clojure.string :as string]))
+  (:require [clojure.string :as string]))
 
+;; Consts
+(def ^:const alphabet-size 62)
 
-(def symbols
-  "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789")
+(def alphabet
+  "0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz")
 
 
-;; =============================================================================
-;; Number -> String
-;; =============================================================================
-
-
-(defn get-idx [i]
-  (Math/floor (/ i 62)))
-
-
-(defn get-symbol-by-idx [i]
-  (get symbols (rem i 62)))
-
-
-(defn id->url [id]
-  (let [idx-sequence  (iterate get-idx id)
-        valid-idxs    (take-while #(> % 0) idx-sequence)
-        code-sequence (map get-symbol-by-idx valid-idxs)]
-    (string/join (reverse code-sequence))))
-
+;; Logic
+(defn- get-idx [i]
+  (Math/floor (/ i alphabet-size)))
 
+(defn- get-character-by-idx [i]
+  (get alphabet (rem i alphabet-size)))
 
+(defn int->id [id]
+  (if (< id alphabet-size)
+    (str (get-character-by-idx id))
+    (let [codes (->> (iterate get-idx id)
+                     (take-while pos?)
+                     (map get-character-by-idx))]
+      (string/join (reverse codes)))))
 
 (comment
- (get-idx 1000)
- (Math/floor (/ 1000 62))
-
- (take 10 (iterate get-idx 10))
- (take 10 (iterate get-idx 100))
- (take 10 (iterate get-idx 5000))
+  (int->id 0)                   ; => "0"
+  (int->id alphabet-size)       ; => "10"
+  (int->id 9999999999999)       ; => "2q3Rktod"
+  (int->id 9223372036854775807) ; => "AzL8n0Y58W7"
+  )
+
+(defn id->int [id]
+  (reduce (fn [id ch]
+            (+ (* id alphabet-size)
+               (string/index-of alphabet ch)))
+          0
+          id))
 
- (get-symbol-by-idx 5000)
+(comment
+  (id->int "0")       ; => 0
+  (id->int "z")       ; => 61
+  (id->int "clj")     ; => 149031
+  (id->int "Clojure") ; => 725410830262
+  )
 
- (id->url 12345) ;; "dnh"
- (id->url 3294233727)) ;;"dK6qQd"
 
+;; State
+(defonce ^:private *counter (atom 0))
+(defonce ^:private *mapping (ref {}))
 
-;; =============================================================================
-;; String -> Number
-;; =============================================================================
 
+;; API
+(defn shorten!
+  ([url]
+   (let [id (int->id (swap! *counter inc))]
+     (or (shorten! url id)
+         (recur url))))
+  ([url id]
+   (dosync
+    (when-not (@*mapping id)
+      (alter *mapping assoc id url)
+      id))))
 
-(defn url->id [url]
-  (let [url-symbols (seq url)]
-    (reduce
-     (fn [id symbol]
-       (+ (* id 62)
-          (string/index-of symbols symbol)))
-     0
-     url-symbols)))
+(defn url-for [id]
+  (@*mapping id))
 
+(defn list-all []
+  (mapv #(-> {:id (key %) :url (val %)}) @*mapping))
 
 (comment
- (url->id "dnh") ;; 12345
- (url->id "dK6qQd")) ;; 3294233727
+  (shorten! "http://clojurebook.com")
+  (shorten! "https://clojure.org" "clj")
+  (shorten! "http://id-already-exists.com" "clj")
+  (shorten! "https://clojurescript.org" "cljs")
+
+  (url-for "clj")
+  (list-all))
diff --git a/url-shortener/src/url_shortener/frontend.cljs b/url-shortener/src/url_shortener/frontend.cljs
@@ -0,0 +1,74 @@
+(ns url-shortener.frontend
+  (:require-macros [cljs.core.async.macros :refer [go]])
+  (:require [reagent.core :as reagent]
+            [reagent.dom.client :as rdomc]
+            [cljs-http.client :as http]
+            [cljs.core.async :refer [<!]]))
+
+(defonce *app-state (reagent/atom {:page :main
+                                   :short-url ""}))
+
+(defn header [text]
+  [:h2 {:style {:margin "8px 4px"}}
+   text])
+
+(defn short-page []
+  (let [short-url (:short-url @*app-state)]
+    [:<>
+     [header "Your short link"]
+     [:div {:style {:margin "16px 4px"}}
+      [:a {:target "_blank"
+           :href short-url}
+       short-url]]
+     [:button.block {:on-click (fn [_e]
+                                 (swap! *app-state assoc :page :main))}
+      "BACK"]]))
+
+(defn main-page []
+  (let [*input-value (reagent/atom "")]
+    (fn []
+      [:<>
+       [header "Shorten a long link"]
+       [:label {:for "url-input"
+                :style {:margin-left 4}}
+        "Paste a long URL"]
+       [:div {:style {:display "flex"}}
+        [:input.block.fixed {:id "url-input"
+                             :type "url"
+                             :placeholder "Example: http://super-long-link.com/"
+                             :style {:width "80%"}
+                             :value @*input-value
+                             :on-change (fn [e]
+                                          (reset! *input-value (-> e .-target .-value)))}]
+        [:button.block.accent
+         {:on-click (fn [_e]
+                      (when (seq @*input-value)
+                        (go (let [response (<! (http/post "/" {:json-params {:url @*input-value}}))]
+                              (if (:success response)
+                                (let [id        (-> response :body :id)
+                                      host      (.. js/window -location -href)
+                                      short-url (str host id)]
+                                  (js/console.log short-url)
+                                  (reset! *app-state {:short-url short-url
+                                                      :page :short}))
+                                (js/console.log "Something went wrong: " response))))))}
+         "SHORTEN IT"]]])))
+
+(defn app []
+  (let [page (:page @*app-state)]
+    [:div.card.fixed.block {:style {:margin "0 auto"
+                                    :font-family "Arial, serif"
+                                    :width "800px"}}
+     (case page
+       :main  [main-page]
+       :short [short-page]
+       [header "Page not found"])]))
+
+(defonce root-el
+  (rdomc/create-root (js/document.getElementById "root")))
+
+(defn ^:dev/after-load mountit []
+  (rdomc/render root-el [app]))
+
+(defn init []
+  (mountit))
diff --git a/url-shortener/src/url_shortener/main.clj b/url-shortener/src/url_shortener/main.clj
@@ -0,0 +1,46 @@
+(ns url-shortener.main
+  (:require [ring.adapter.jetty :as jetty]
+            [url-shortener.web :as web])
+  (:import [org.eclipse.jetty.server Server]))
+
+(set! *warn-on-reflection* true)
+
+(defn start-server
+  ([] (start-server {}))
+  ([opts]
+   (let [server (jetty/run-jetty #'web/handler opts)]
+     (println "Server started.")
+     server)))
+
+(defn stop-server [server]
+  (.stop ^Server server)
+  (println "Server stopped."))
+
+(defn -main [& _]
+  (let [server (start-server)]
+    (.addShutdownHook
+     (Runtime/getRuntime)
+     (Thread. ^Runnable #(stop-server server)))))
+
+(comment
+  (def server (start-server {:port 8000 :join? false}))
+  (stop-server server)
+  
+  (require '[clojure.java.shell :refer [sh]])
+  
+  (sh "curl" "-X" "POST"
+      "-H" "Content-Type: application/json"
+      "http://localhost:8000/"
+      "-d" "{\"url\": \"https://clojurescript.org/\"}")
+  
+  (sh "curl" "-X" "PUT"
+      "-H" "Content-Type: application/json"
+      "http://localhost:8000/clj"
+      "-d" "{\"url\": \"https://clojure.org/\"}")
+  
+  (sh "curl" "-i" "http://localhost:8000/clj")
+  
+  (sh "curl" "http://localhost:8000/list/")
+  )
+
+
diff --git a/url-shortener/src/url_shortener/web.clj b/url-shortener/src/url_shortener/web.clj
@@ -0,0 +1,63 @@
+(ns url-shortener.web
+  (:require [ring.middleware.json :as middleware.json]
+            [ring.middleware.params :as middleware.params]
+            [ring.middleware.resource :as middleware.resource]
+            [ring.middleware.keyword-params :as middleware.keyword-params]
+            [ring.util.response]
+            [compojure.core :as compojure]
+            [url-shortener.core :as shortener]))
+
+(defn retain
+  ([url]
+   (let [id (shortener/shorten! url)]
+     (ring.util.response/created id {:id id})))
+  ([url id]
+   (if-let [id (shortener/shorten! url id)]
+     (ring.util.response/created id {:id id})
+     {:status 409 :body {:error (format "Short URL %s is already taken" id)}})))
+
+(compojure/defroutes router
+  (compojure/GET "/" []
+    (ring.util.response/resource-response "index.html" {:root "public"}))
+  
+  (compojure/POST "/" [url]
+    (if (empty? url)
+      (ring.util.response/bad-request {:error "No `url` parameter provided"})
+      (retain url)))
+  
+  (compojure/PUT "/:id" [id url]
+    (if (empty? url)
+      (ring.util.response/bad-request {:error "No `url` parameter provided"})
+      (retain url id)))
+  
+  (compojure/GET "/:id" [id]
+    (if-let [url (shortener/url-for id)]
+      (ring.util.response/redirect url)
+      (ring.util.response/not-found {:error "Requested URL not fount."})))
+  
+  (compojure/GET "/list/" []
+    (ring.util.response/response {:urls (shortener/list-all)})))
+
+(def handler
+  (-> router
+      (middleware.resource/wrap-resource "public")
+      (middleware.params/wrap-params)
+      (middleware.keyword-params/wrap-keyword-params)
+      (middleware.json/wrap-json-params)
+      (middleware.json/wrap-json-response)))
+
+(comment
+  (handler {:uri "/"
+            :request-method :post
+            :params {:url "https://github.com/Clojure-Developer/Clojure-Developer-2023-10"}})
+
+  (handler {:uri "/clj"
+            :request-method :put
+            :params {:url "https://clojure.org"}})
+
+  (router {:uri "/list/"
+           :request-method :get})
+
+  (handler {:uri "/clj"
+            :request-method :get})
+  )
