Get maps working again

Author: cjavdev

.gitignore

@@ -35,3 +35,6 @@
 yarn-debug.log*
 .yarn-integrity
 dump.rdb
+
+/app/assets/builds/*
+!/app/assets/builds/.keep

Gemfile

@@ -1,23 +1,32 @@
 source 'https://rubygems.org'
 git_source(:github) { |repo| "https://github.com/#{repo}.git" }
 
-ruby '2.7.2'
+ruby '3.1.2'
 
-# Bundle edge Rails instead: gem 'rails', github: 'rails/rails', branch: 'main'
-gem 'rails', '~> 7.0.0.alpha2'
+gem 'rails', github: 'rails/rails', branch: 'main'
+
+gem 'sprockets-rails'
 
 # Use postgresql as the database for Active Record
 gem 'pg', '~> 1.1'
+
 # Use Puma as the app server
 gem 'puma', '~> 5.0'
-# Use SCSS for stylesheets
-gem 'sass-rails', '>= 6'
-# Transpile app-like JavaScript. Read more: https://github.com/rails/webpacker
-gem 'webpacker', '~> 5.0'
-# Turbolinks makes navigating your web application faster. Read more: https://github.com/turbolinks/turbolinks
-gem 'turbolinks', '~> 5'
+
+gem "jsbundling-rails"
+
+gem "turbo-rails"
+
+gem "stimulus-rails"
+
 # Build JSON APIs with ease. Read more: https://github.com/rails/jbuilder
 gem 'jbuilder', '~> 2.7'
+
+# Use SCSS for stylesheets
+gem 'sass-rails', '>= 6'
+
+
+
 # Use Redis adapter to run Action Cable in production
 # gem 'redis', '~> 4.0'
 # Use Active Model has_secure_password
@@ -27,15 +36,13 @@ gem 'jbuilder', '~> 2.7'
 # gem 'image_processing', '~> 1.2'
 
 # Reduces boot times through caching; required in config/boot.rb
-gem 'bootsnap', '>= 1.4.4', require: false
-
+gem 'bootsnap', require: false
 
 # Authentication
 gem 'devise'
 gem 'omniauth-google-oauth2'
 gem 'omniauth-rails_csrf_protection'
 
-
 group :development, :test do
   # Call 'byebug' anywhere in the code to stop execution and get a debugger console
   gem 'byebug', platforms: [:mri, :mingw, :x64_mingw]
@@ -59,15 +66,10 @@ end
 # Windows does not include zoneinfo files, so bundle the tzinfo-data gem
 gem 'tzinfo-data', platforms: [:mingw, :mswin, :x64_mingw, :jruby]
 
-gem "stimulus-rails", "~> 0.6.0"
-
 gem "tailwindcss-rails", "~> 0.4.3"
 gem 'image_processing', '~> 1.2'
 gem 'stripe'
 gem 'resque'
-
 gem "validates_overlap", "~> 1.0"
-
 gem "pagy", "~> 5.10"
-
 gem "noticed", "~> 1.5"

Gemfile.lock

@@ -0,0 +1,2 @@
+web: bin/rails server -p 3000
+js: yarn build --watch

Procfile.dev

@@ -1,2 +1,3 @@
 //= link_tree ../images
 //= link_directory ../stylesheets .css
+//= link_tree ../builds

app/assets/builds/.keep

@@ -0,0 +1,14 @@
+// Entry point for the build script in your package.json
+// import * as ActiveStorage from "@rails/activestorage"
+import "@hotwired/turbo-rails"
+import "./channels"
+import "./controllers"
+
+// ActiveStorage.start()
+console.log("here")
+window.initMap = () => {
+  console.log('initMap was called');
+  const event = new Event("MapLoaded")
+  event.initEvent("map-loaded", true, true);
+  window.dispatchEvent(event)
+}

app/assets/config/manifest.js

@@ -1,5 +1,3 @@
-// Load all the channels within this directory and all subdirectories.
-// Channel files must be named *_channel.js.
+import { createConsumer } from "@rails/actioncable"
 
-const channels = require.context('.', true, /_channel\.js$/)
-channels.keys().forEach(channels)
+export default createConsumer()

app/javascript/application.js

@@ -12,6 +12,7 @@ export default class extends Controller {
   }
 
   initGoogle() {
+    console.log('init google')
     const myLatLng = { lat: -25.363, lng: 131.044 };
     const map = new google.maps.Map(this.mapTarget, {
       zoom: 4,
@@ -21,6 +22,7 @@ export default class extends Controller {
   }
 
   addMarkers(map) {
+    console.log('adding markers')
     Array.from(this.listingsTarget.children).forEach((listing) => {
       if(listing.dataset.lat) {
         new google.maps.Marker({

app/javascript/channels/index.js

@@ -9,7 +9,7 @@
     <%= stylesheet_link_tag "inter-font", "data-turbo-track": "reload" %>
     <%= stylesheet_link_tag "tailwind", "data-turbo-track": "reload" %>
     <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
-    <%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
+    <%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
     <script src="https://maps.googleapis.com/maps/api/js?key=<%= Rails.application.credentials.google[:maps] %>&libraries=places&callback=initMap" async defer data-turbolinks-eval="false"></script>
   </head>
 

app/javascript/controllers/listing_map_controller.js

@@ -0,0 +1,9 @@
+#!/usr/bin/env bash
+
+if ! foreman version &> /dev/null
+then
+  echo "Installing foreman..."
+  gem install foreman
+fi
+
+foreman start -f Procfile.dev "$@"

app/javascript/packs/application.js

@@ -15,7 +15,10 @@
     state: Faker::Address.state,
     country: 'US',
     status: [:draft, :published].sample,
+    nightly_price: 12000,
+    cleaning_fee: 5000,
   )
+  puts "New listing: #{listing.id}"
 end
 
 
@@ -36,6 +39,8 @@
       state: Faker::Address.state,
       country: 'US',
       status: [:draft, :published].sample,
+      nightly_price: 12000,
+      cleaning_fee: 5000,
     )
   end
 end

app/views/layouts/application.html.erb

@@ -2,19 +2,16 @@
   "name": "clearbnb",
   "private": true,
   "dependencies": {
-    "@hotwired/stimulus": "^3.0.0",
+    "@hotwired/stimulus": "^3.0.1",
+    "@hotwired/turbo-rails": "^7.1.3",
     "@rails/actioncable": "^7.0.0",
     "@rails/activestorage": "^7.0.0",
-    "@rails/ujs": "^7.0.0",
-    "@rails/webpacker": "5.4.3",
     "el-transition": "^0.0.7",
-    "turbolinks": "^5.2.0",
-    "webpack": "^4.46.0",
-    "webpack-cli": "^3.3.12",
+    "esbuild": "^0.14.49",
     "yarn": "^1.22.17"
   },
   "version": "0.1.0",
-  "devDependencies": {
-    "webpack-dev-server": "^3"
+  "scripts": {
+    "build": "esbuild app/javascript/*.* --bundle --sourcemap --outdir=app/assets/builds --public-path=assets"
   }
 }