Giter Club home page Giter Club logo

ftw-daily's Introduction

Sharetribe Go

CircleCI Code Climate

IMPORTANT: Sharetribe Go is no longer actively maintained.

Sharetribe's new marketplace builder, The New Sharetribe, replaces Sharetribe Go as the easiest, fastest way to build a marketplace. Learn more about what The New Sharetribe means for Sharetribe Go.

Sharetribe Go remains source-available under the Sharetribe Community Public License.

To build and launch a marketplace without writing a single line of code, and extend indefinitely with custom code and scale to any size, head to the SaaS version of The New Sharetribe.

Contents

Technology stack

  • Ruby 3.2.2
  • Ruby on Rails 6.1.7.3
  • MySQL 8.0
  • React + jQuery
  • Node.js 18.16 (for compiling JavaScript assets)
  • "what you see is what you get" Editor Mercury
  • Deploy: Custom Script (not using Mina or Cap3)
  • Server: Heroku
  • Image hosting: Amazon S3
  • Background job: delayed_job
  • Gems:
    • devise | Authentication
    • omniauth-facebook | Third party login: Facebook
    • haml and ERB | HTML templating
    • mysql2 | MySQL library for Ruby
    • paperclip | Image upload management
    • passenger | Web application server
    • react_on_rails | Integration of React + Webpack + Rails
    • factory_girl, capybara, rspec-rails, cucumber-rails, selenium-webdriver | Testing

Installation

Requirements

Before you get started, install the following:

  • Ruby. Version 3.2.2 is currently used and we don't guarantee everything works with other versions. If you need multiple versions of Ruby, RVM or rbenv is recommended.
  • RubyGems
  • Bundler: gem install bundler
  • Node. Version 18.16 is currently used and we don't guarantee everything works with other versions. If you need multiple versions of Node, consider using n, nvm, or nenv.
  • Git
  • A database. Only MySQL 8.0 has been tested, so we give no guarantees that other databases (e.g. PostgreSQL) work. You can install MySQL Community Server two ways:
    1. If you are on a Mac, use homebrew: brew install mysql (highly recommended). Also consider installing the MySQL Preference Pane to control MySQL startup and shutdown. It is packaged with the MySQL downloadable installer, but can be easily installed as a stand-alone.
    2. Download a MySQL installer from here
  • Sphinx. Version 2.1.4 has been used successfully, but newer versions should work as well. Make sure to enable MySQL support. If you're using OS X and have Homebrew installed, install it with brew install sphinx --with-mysql
  • Imagemagick. If you're using OS X and have Homebrew installed, install it with brew install imagemagick

Setting up the development environment

  1. Get the code. Clone this git repository and check out the latest release:

    git clone [email protected]:sharetribe/sharetribe.git
    cd sharetribe
    git checkout latest
  2. Install the required gems by running the following command in the project root directory:

    bundle install

    Note: libv8 might fail to build with Clang 7.3, in that case you can try installing V8 manually:

    brew tap homebrew/versions
    brew install v8-315
    
    gem install libv8 -v '3.16.14.13' -- --with-system-v8
    gem install therubyracer -- --with-v8-dir=/usr/local/opt/v8-315
    
    bundle install
  3. Install node modules:

    npm install && ( cd client && npm install )
  4. Create a database.yml file by copying the example database configuration:

    cp config/database.example.yml config/database.yml
  5. Add your database configuration details to config/database.yml. You will probably only need to fill in the password for the database(s).

  6. Create a config.yml file by copying the example configuration file:

    cp config/config.example.yml config/config.yml
  7. Create and initialize the database:

    bundle exec rake db:create db:structure:load
  8. Run Sphinx index:

    bundle exec rake ts:index

    Note: If your MySQL server is configured for SSL, update the config/thinking_sphinx.yml file and uncomment the mysql_ssl_ca lines. Configure correct SSL certificate chain for connection to your database over SSL.

  9. Start the Sphinx daemon:

    bundle exec rake ts:start
  10. Start the development server:

    foreman start -f Procfile.static
  11. Invoke the delayed job worker in a new console (open the project root folder):

    bundle exec rake jobs:work

Congratulations! Sharetribe should now be up and running for development purposes. Open a browser and go to the server URL (e.g. http://lvh.me:3000 or http://lvh.me:5000). Fill in the form to create a new marketplace and admin user. You should be now able to access your marketplace and modify it from the admin area.

Mailcatcher

Use Mailcatcher to receive sent emails locally:

  1. Install Mailcatcher:

    gem install mailcatcher
  2. Start it:

    mailcatcher
  3. Add the following lines to config/config.yml:

    development:
      mail_delivery_method: smtp
      smtp_email_address: "localhost"
      smtp_email_port: 1025
  4. Open http://localhost:1080 in your browser

Database migrations

To update your local database schema to the newest version, run database migrations with:

bundle exec rake db:migrate

Running tests

Tests are handled by RSpec for unit tests and Cucumber for acceptance tests.

Install the following extra dependencies:

  • Chromedriver. Make sure to install a driver version that matches your browser's.

Remember to follow all the steps listed in the Setting up the development environment paragraph before running tests because some tests depend on webpack assets.

  1. Navigate to the root directory of the sharetribe project

  2. Initialize your test database:

    bundle exec rake test:prepare

    This needs to be rerun whenever you make changes to your database schema.

  3. If Zeus isn't running, start it:

    zeus start
  4. To run unit tests, open another terminal and run:

    zeus rspec spec
  5. To run acceptance tests, open another terminal and run:

    zeus cucumber

    Note that running acceptance tests is slow and may take a long time to complete.

To automatically run unit tests when code is changed, start Guard:

bundle exec guard

Working with React, Webpack and Foreman

Some components are created with React (see documentation) and they need to be built with Webpack. We have Foreman Procfiles that can be used to run both Rails and Webpack:

  1. React component static build

    foreman start -f Procfile.static
  2. React component & hot loading styleguide (http://localhost:9001/)

    foreman start -f Procfile.hot
  3. If you need to debug the Rails parts of Sharetribe with Pry, it's not possible with Foreman due to a known compatibility issue. In this case we recommend running Rails with old-fashioned rails server and React builds with Foreman in a separate terminal. That way your binding.pry calls open nicely in the same window with the Rails process.

  4. React component static build, React client only

    foreman start -f Procfile.client-static
  5. React component & hot loading styleguide (http://localhost:9001/), React client only

    foreman start -f Procfile.client-hot

Setting up Sharetribe for production

Before starting these steps, perform steps 1-5 from above.

  1. Set secret_key_base

    Generate secret key

    rake secret

    Add the following lines to config/config.yml:

    production:
      secret_key_base: # add here the generated key

    (You can also set the secret_key_base environment variable, if you don't want to store the secret key in a file)

  2. Create the database:

    RAILS_ENV=production bundle exec rake db:create
  3. Initialize your database:

    RAILS_ENV=production bundle exec rake db:structure:load
  4. Run Sphinx index:

    RAILS_ENV=production bundle exec rake ts:index
  5. Start the Sphinx daemon:

    RAILS_ENV=production bundle exec rake ts:start
  6. Precompile the assets:

    RAILS_ENV=production NODE_ENV=production bundle exec rake assets:precompile
  7. Invoke the delayed job worker:

    RAILS_ENV=production bundle exec rake jobs:work
  8. In a new console, open the project root folder and start the server:

    bundle exec rails server -e production

The built-in WEBrick server (which was started in the last step above) should not be used in production due to performance reasons. A dedicated HTTP server such as unicorn is recommended.

It is not recommended to serve static assets from a Rails server in production. Instead, you should use a CDN (Content Delivery Network) service, such as Amazon CloudFront. To serve the assets from the CDN service, you need to change the asset_host configuration in the the config/config.yml file to point your CDN distribution.

You need to configure a couple scheduled tasks in order to properly run your marketplace in production. See the Scheduled tasks documentation.

For production use we recommend you to upgrade only when new version is released and not to follow the master branch.

Setting your domain

  1. In your database, change the value of the domain column in the communities table to match the hostname of your domain. For example, if the URL for your marketplace is http://mymarketplace.myhosting.com, then the domain is mymarketplace.myhosting.com.

  2. Change the value of the use_domain column to true (or 1) in the communities table.

  3. If you wish to enable HTTP Strict Transport Security (recommended), set also the hsts_max_age column in communities table to a non-zero number of seconds. For instance 31536000 (1 year).

Setting up S3

If you want to use S3 to host your images, you need to do a bit more configuration.

  1. Create a IAM role which has full S3 access. Save the AWS access and secret keys.

  2. In the S3 console, create two buckets, one for upload and one for permanent storage. For example your-sharetribe-images and your-sharetribe-images-tmp.

  3. Set the upload bucket (your-sharetribe-images-tmp) to have an expiration (for example, of 14 days) using lifecycle management

  4. Enable CORS on the upload bucket.

  5. Set the following configuration in your sharetribe config.yml: s3_bucket_name: "your-sharetribe-images" s3_upload_bucket_name: "your-sharetribe-images-tmp"

  6. Add your AWS keys to the sharetribe app. The best way to do that is via environment variables, rather than checking them into your config.yml. Set the aws_access_key_id and aws_secret_access_key environment variables to the values for the IAM user.

  7. (Optional) When you enable S3, uploaded images are linked directly to the S3 bucket. If you want to serve these assets through CDN, you can set the user_asset_host configuration option in addition to asset_host in config/config.yml.

Here's a sample CORS configuration that allows anyone to post to your bucket. Note that you may want to lock down the origin host more tightly, depending on your needs.

<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
    <CORSRule>
        <AllowedOrigin>*</AllowedOrigin>
        <AllowedMethod>GET</AllowedMethod>
        <AllowedMethod>POST</AllowedMethod>
        <MaxAgeSeconds>3000</MaxAgeSeconds>
        <AllowedHeader>*</AllowedHeader>
    </CORSRule>
</CORSConfiguration>
Troubleshooting S3 Setup
  • if you are having trouble uploading, look at the request using browser devtools and see what error statuses and messages are being sent.
  • double check that your AWS keys are being correctly set.
  • if you can upload images successfully, but the images aren't processed, make sure that the delayed-job worker is running.

Advanced settings

Default configuration settings are stored in config/config.default.yml. If you need to change these, use the config/config.yml file to override the defaults. You can also set configuration values to environment variables.

React components can be created using hot module replacement HMR technique in Styleguide (http://localhost:9001/) path in local development environment. Webpack is used to bundle React components for deployments and hot loading. Related webpack configs can be found from folder sharetribe/client/

Unofficial installation instructions

Use these instructions to set up and deploy Sharetribe for production in different environments. They have been put together by the developer community, and are not officially maintained by the Sharetribe core team. The instructions might be somewhat out of date.

If you have installation instructions that you would like to share, don't hesitate to share them at the Sharetribe Go community forum.

Payments

PayPal and Stripe are the two available payment gateways integrated.

PayPal payments are only available on marketplaces hosted at Sharetribe.com due to special permissions needed from PayPal. We hope to add support for PayPal payments to the source available version of Sharetribe Go in the future.

Stripe can be used in the source available version, as long as your country and currency are supported.

Enable Stripe

Starting from release 7.2.0, Stripe is supported.

Stripe API keys will be encrypted when stored so it is important to configure your own random encryption key. You should fill the app_encryption_key variable in the config/config.yml file with a long random string, unique to your project.

Stripe can be configured from the admin panel, in the "Payment settings" section. Instructions on how to get Stripe API keys can be found there.

If Stripe isn't automatically enabled in the admin panel after upgrading to 7.2.0, you should run the following commands in your Rails console, where <ID> is your marketplace ID (probably 1): TransactionService::API::Api.processes.create(community_id: <ID>, process: :preauthorize, author_is_seller: true) and TransactionService::API::Api.settings.provision(community_id: <ID>, payment_gateway: :stripe, payment_process: :preauthorize, active: true).

Custom Landing Page

Sharetribe Go includes a Custom Landing Page add-on and editor. You can learn more about it here.

The Custom Landing Page Editor should be available automatically, from v9.1.0. If this is not the case, you can find plenty of useful information in the Landing Pages for Idiots Like Me post written by Jeremy D Evans.

Versioning

Sharetribe follows Semantic Versioning where possible.

Given a version number MAJOR.MINOR.PATCH, increment the:

  • MAJOR version when you make incompatible API changes,
  • MINOR version when you add functionality in a backwards-compatible manner, and
  • PATCH version when you make backwards-compatible bug fixes.

See the document How Sharetribe applies Semantic Versioning to read more how Semantic Versioning is applied in practice.

Changes

See CHANGELOG.md for detailed list of changes between releases.

Upgrade

See UPGRADE.md for information about actions needed when upgrading.

For production use we recommend you to upgrade only when new version is released and not to follow the master branch.

Contribute

Would you like to make Sharetribe better?

See CONTRIBUTING.md for the steps to contribute.

Release

See RELEASE.md for information about how to make a new release.

Translation

Translations are available through YAML files in the /config/locales folder.

Bug tracker

Browse open issues and submit new ones in Github Issues.

We are dedicating the Github Issue only for bugs in the Sharetribe Go codebase. For general questions, start a new thread in the Sharetribe Go Community forum instead of opening a new Issue.

After you have opened a new issue, the team will handle it according to these instructions: How to handle Github Issues.

Documentation

More detailed technical documentation is located in docs/

Sharetribe Go Community forum

The Sharetribe Go Community forum is located at https://www.sharetribe.com/community/.

The forum is a great place to ask support and help regarding Sharetribe Go Community Edition, for example with issues during the installation.

License

Sharetribe Go is source-available under the Sharetribe Community Public License. See LICENSE for details.

ftw-daily's People

Contributors

anh-dinh-jh avatar anttisalmivaara avatar bladealslayer avatar chanthientukk9 avatar dependabot[bot] avatar ggdev avatar gnito avatar jannekoivistoinen avatar kpuputti avatar kusti avatar lyyder avatar maseh87 avatar milotiger avatar otterleyw avatar ovan avatar rap1ds avatar rdoh avatar rush1506 avatar schwerbelastung avatar shareoc avatar sktoiva avatar talater avatar thomasmalbaux avatar vsaarinen avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

ftw-daily's Issues

Convert remaining Redux Forms to 🏁 Final Form

Before releasing v1.0.0, we should get rid of Redux Form:

Convert:

  • EmailVerificationForm
  • LocationSearchForm
  • SendMessageForm
  • TopbarSearchForm

Convert and move to form folder:

  • SelectMultipleFilterForm
  • SelectMultipleFilterPlainForm

Mobile - Issues scrolling

Describe the bug A clear and concise description of what the bug is.

On a mobile (tested on ios 16 - chrome and safari across 2 devices) we are seeing an issue with a sticky scroll. This occurs on after selecting dates. We have a temporary fix in place with a hovering checkout button, however, the issue still persists. It allows you to scroll briefly before freezing out completely. I have replicated it on other sharetribe sites. Specifically Pairables.ca - wetrentals.com - wetrentals.ca and wetrentals.com.au

To Reproduce Steps to reproduce the behavior:

  1. On IOS Go to 'https://wetrentals.ca/l/seadoo-spark-trix-2022-90hp/6293e04e-9635-415d-8657-1cfd726d9771'
  2. Click on 'request to book'
  3. Select any dates
  4. Scroll a couple of times. The spacing is way off.
  5. Stop Scrolling
  6. Try to scroll again, see that it is not possible to scroll or move.

Expected behavior A clear and concise description of what you expected to happen.
Proper spacing and scrollability.

Screenshots If applicable, add screenshots to help explain your problem.

RPReplay_Final1659654288.MP4

Smartphone (please complete the following information):

  • Device: [12 Pro and XR]
  • OS: [16]
  • Browser [stock browser, safari and chrome]

Additional context Add any other context about the problem here.
Let me know if you have any questions

`sharetribe-scripts v6.0` and `GENERATE_SOURCEMAP=false`

Describe the bug

On the new templates using sharetribe-scripts v6.0, set GENERATE_SOURCEMAP = false, got an error:

create-react-app config structure changed, please check webpack.config.js and update to use the changed config

To Reproduce Steps to reproduce the behavior:

  1. Set GENERATE_SOURCEMAP = false
  2. Run command yarn dev or yarn build
  3. See error

Expected behavior

No errors

Reasons

sharetribe-scripts v6.0:

File: packages/react-scripts/config/sharetribeWebpackConfig.js

hasRules is false, which causes the configStructureKnown is false and then throws an error.

  const hasRules =
      config &&
      config.module &&
      config.module.rules &&
      config.module.rules.length === 2;
    
  ...

  const configStructureKnown = hasRules
        && hasOneOf
        && hasCssLoader
        && hasPlugins
        && hasOutput
        && hasOptimization;

  if (!configStructureKnown) {
    throw new Error(
      'create-react-app config structure changed, please check webpack.config.js and update to use the changed config'
    );
  }

Changes on FB react-scripts
PR: This
react-scripts PR: This

File: packages/react-scripts/config/webpack.config.js
Changes:

[
  // Handle node_modules packages that contain sourcemaps
  shouldUseSourceMap && {
    enforce: 'pre',
    exclude: /@babel(?:\/|\\{1,2})runtime/,
    test: /\.(js|mjs|jsx|ts|tsx|css)$/,
    loader: require.resolve('source-map-loader'),
  },
  ...
].filter(Boolean)

With this change: GENERATE_SOURCEMAP = false --> shouldUseSourceMap is false --> config.module.rules.length is 1 --> config.module.rules.length===2 is false --> configStructureKnown is false and then throws an error.

.env config

What do I put for these variables in env file?

`sharetribe-scripts v6.0` and webpack5 optimization config

Describe the bug Got error: routeConfiguration is not a function

To Reproduce Steps to reproduce the behavior:

  1. Set async to any thunk in *.duck.js, for example: searchListings in SearchPage.duck.js
  2. Run yarn build or yarn dev-server
  3. See error

image

Expected behavior It should work normally as expected

Causes In CRA v5.0, FB had already deleted the splitChunks part. Then that part was added again in this PR, which causes an error. Because by using webpack5.0, whenever we put async before any thunk, the main file will be split into 2 files 210.*.js and main.*.js. The 210 is placed before the main and then loadable-server - requireEntrypoint could only get the first one (210) to build.

image

Possible solutions

  • Change splitChunks from all to async
    image

  • Add the property name and value main
    image

  • Remove it again and make it as same as default

Sharetribe-scripts

You need to include sharetribe-scripts for the current documentation to work (package.json)

How to upgrade project to latest version of flex-template correctly?

Description I have a project with version 2.7 of flex-template-web. Now I want to upgrade to the latest version. Is there anything official way of doing it?

To Reproduce Steps to reproduce the behavior:

  1. Go to package.json.
  2. Change the version to 2.17.
  3. Save the change and run "yarn install".
  4. Still old versions of sharetribe SDK and scripts.

Expected behavior A clear script to upgrade to the latest version.

Screenshots
yarn.lock after installing dependecies:
image

Thanks!

Adding CA bank account - Freezing.

When on mobile (tried on iPhone 8 and iPhone 12) if in a new account and adding your first listing. On publish you are prompted to add your banking details. This will not allow you to scroll to the bottom and freezes.

  1. Go to 'WetRentals.ca"
  2. Click on 'Create account, add listing, ill out details and click publish'
  3. Scroll down to 'publish'
  4. See error

Expected behaviour Ability to add bank

Screenshots Attached

Desktop (please complete the following information):

  • OS: [e.g. iOS] 15.0

Smartphone (please complete the following information):

  • Device: iPhone 12
  • OS: 15
  • Browser Safari and Chrome

Additional context Add any other context about the problem here.

Bug.mp4

Yarn dev

Apples-MacBook-Air:calx apple$ yarn dev
yarn run v1.22.17
$ yarn && yarn env-check:common && yarn env-check:app-store
[1/5] 🔍 Validating package.json...
[2/5] 🔍 Resolving packages...
warning Resolution field "@types/[email protected]" is incompatible with requested version "@types/node@^12.12.6"
warning Resolution field "@types/[email protected]" is incompatible with requested version "@types/node@^12.12.6"
warning Resolution field "@types/[email protected]" is incompatible with requested version "@types/node@^12.12.6"
success Already up-to-date.
$ turbo run post-install
• Packages in scope: @calcom/app-store, @calcom/app-store-cli, @calcom/applecalendar, @calcom/caldavcalendar, @calcom/cli_base__app_name, @calcom/config, @calcom/core, @calcom/dailyvideo, @calcom/docs, @calcom/ee, @calcom/emails, @calcom/embed-core, @calcom/embed-react, @calcom/embed-snippet, @calcom/example-app, @calcom/exchange2013calendar, @calcom/exchange2016calendar, @calcom/giphy, @calcom/googlecalendar, @calcom/googlevideo, @calcom/hubspotothercalendar, @calcom/huddle01video, @calcom/jitsivideo, @calcom/lib, @calcom/metamask, @calcom/office365calendar, @calcom/office365video, @calcom/prisma, @calcom/slackmessaging, @calcom/spacebooking, @calcom/stripe, @calcom/stripepayment, @calcom/swagger, @calcom/tandemvideo, @calcom/tsconfig, @calcom/types, @calcom/ui, @calcom/vital, @calcom/web, @calcom/zapier, @calcom/zoomvideo, WipeMyCal
• Running post-install in 42 packages
@calcom/prisma:post-install: cache hit, replaying output 30683b14ad22f716
@calcom/prisma:post-install: yarn run v1.22.17
@calcom/prisma:post-install: $ yarn generate-schemas
@calcom/prisma:post-install: $ prisma generate && prisma format
@calcom/prisma:post-install: Environment variables loaded from .env
@calcom/prisma:post-install: Prisma schema loaded from schema.prisma
@calcom/prisma:post-install:
@calcom/prisma:post-install: ✔ Generated Prisma Client (3.14.0 | library) to ./../../node_modules/@prisma/client in 1.43s
@calcom/prisma:post-install:
@calcom/prisma:post-install: ✔ Generated Zod Schemas (0.5.4) to ./zod in 1.31s
@calcom/prisma:post-install: You can now start using Prisma Client in your code. Reference: https://pris.ly/d/client
@calcom/prisma:post-install: @calcom/prisma:post-install: import { PrismaClient } from '@prisma/client' @calcom/prisma:post-install: const prisma = new PrismaClient() @calcom/prisma:post-install:
@calcom/prisma:post-install: Prisma schema loaded from schema.prisma
@calcom/prisma:post-install: Formatted /Applications/XAMPP/xamppfiles/htdocs/calx/packages/prisma/schema.prisma in 529ms 🚀
@calcom/prisma:post-install: Done in 10.74s.

Tasks: 1 successful, 1 total
Cached: 1 cached, 1 total
Time: 874ms >>> FULL TURBO

$ husky install
husky - Git hooks installed
$ dotenv-checker --schema .env.example --env .env

[ DOTENV-CHECKER ] - Initializing checks for .env files consistency & sync...

📗 [ INFO ] ✅ Schema file (.env.example) checked successfully
🚧 [ WARN ] ⚠️ Environment file (.env) differs from .env.example

!! Alert !! The following key is not present in the ".env.example" file:
- LICENSE:'agree'

📗 [ INFO ] ✅ Environment file (.env) updated successfully
$ dotenv-checker --schema .env.appStore.example --env .env.appStore

[ DOTENV-CHECKER ] - Initializing checks for .env files consistency & sync...

📗 [ INFO ] ✅ Schema file (.env.appStore.example) checked successfully
📗 [ INFO ] ✅ Environment file (.env.appStore) checked successfully
$ turbo run dev --scope="@calcom/web"
• Packages in scope: @calcom/web
• Running dev in 1 packages
@calcom/web:dev: cache bypass, force executing 097306220a527c94
@calcom/web:dev: $ run-p app-store:watch next:dev
@calcom/web:dev: $ yarn workspace @calcom/app-store-cli watch --watch
@calcom/web:dev: $ next dev
@calcom/web:dev: ready - started server on 0.0.0.0:3000, url: http://localhost:3000
@calcom/web:dev: warning package.json: No license field
@calcom/web:dev: $ ts-node --transpile-only src/app-store.ts --watch --watch
@calcom/web:dev: error - Failed to load next.config.js, see more info here https://nextjs.org/docs/messages/next-config-error
@calcom/web:dev: Error: Please set NEXTAUTH_SECRET
@calcom/web:dev: at Object. (/Applications/XAMPP/xamppfiles/htdocs/calx/apps/web/next.config.js:17:41)
@calcom/web:dev: at Module._compile (internal/modules/cjs/loader.js:1085:14)
@calcom/web:dev: at Object.Module._extensions..js (internal/modules/cjs/loader.js:1114:10)
@calcom/web:dev: at Module.load (internal/modules/cjs/loader.js:950:32)
@calcom/web:dev: at Function.Module._load (internal/modules/cjs/loader.js:790:12)
@calcom/web:dev: at ModuleWrap. (internal/modules/esm/translators.js:199:29)
@calcom/web:dev: at ModuleJob.run (internal/modules/esm/module_job.js:183:25)
@calcom/web:dev: at async Loader.import (internal/modules/esm/loader.js:178:24)
@calcom/web:dev: at async Object.loadConfig [as default] (/Applications/XAMPP/xamppfiles/htdocs/calx/node_modules/next/dist/server/config.js:68:36)
@calcom/web:dev: at async NextServer.loadConfig (/Applications/XAMPP/xamppfiles/htdocs/calx/node_modules/next/dist/server/next.js:114:22)
@calcom/web:dev: info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
@calcom/web:dev: error Command failed with exit code 1.
@calcom/web:dev: ERROR: "next:dev" exited with 1.
@calcom/web:dev: error Command failed with exit code 1.
@calcom/web:dev: info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
@calcom/web:dev: Error: command finished with error: command (apps/web) yarn run dev exited (1)
command (apps/web) yarn run dev exited (1)

Tasks: 0 successful, 1 total
Cached: 0 cached, 1 total
Time: 3.869s

error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

JSON-LD Metadata is rendered duplicated - SEO

Describe the bug A clear and concise description of what the bug is.

Once the webpage is done rendering, the ``<script type="application/json+ld">...</script>``` templated through Helmet in Page component appears duplicated.

To Reproduce Steps to reproduce the behavior:

  1. Get ftw-daily runinng in production mode (also works in dev mode but less obvious)
  2. Open the devtools in your browser
  3. Notice that <script type="application/json+ld">...</script> appears both at the bottom of the header and the bottom of the served page.

Expected behavior A clear and concise description of what you expected to happen.

<script type="application/json+ld">...</script> should only appear once, this causes issues with Google Rich Results testing tools and furthermore, with SEO.

Desktop (please complete the following information):

  • OS: macOS 10.15.6
  • Browser : Safari : 13.x / 14.0 / Chrome 84.0.x

Smartphone (please complete the following information):

  • Device: iPhone SE (1st gen)
  • OS: iOS 14 Developper Beta 4
  • Browser : Safari
  • Version : 14

Googlebot also encounters the issue !!!

** Similar issues **

Even though ftw-daily uses react-helmet-async, there seems to be a bug in the way Hemet templates script tags

nfl/react-helmet#486
nfl/react-helmet#183 (comment)

Towards a fix*

Applying this patch mitigates the issue and therefore, json-ld metadata becomes valid for Google

diff --git a/src/components/Page/Page.js b/src/components/Page/Page.js
index 34243b6c..fd968404 100644
--- a/src/components/Page/Page.js
+++ b/src/components/Page/Page.js
@@ -43,6 +43,12 @@ class PageComponent extends Component {
     // handling both dragover and drop events.
     document.addEventListener('dragover', preventDefault);
     document.addEventListener('drop', preventDefault);
+
+    // Fix duplicate JSON-LD
+    const jsons = document.querySelectorAll('script[type="application/ld+json"]');
+    if (jsons.length > 0) {
+      jsons.item(0).remove();
+    }
   }
 
   componentWillUnmount() {

The conflict between `setPageScrollPosition` and `Loadable Component`

Describe the bug

The new feature - Loadable Components of ftw-daily v8.0.0 (#1414) has a conflict with the old function - setPageScrollPosition in Route.js. With the new "lazy" server-side rendering, this line doesn't work anymore as it can't find the correct element anymore, so the scrolling behavior is not triggered correctly. It still works perfectly if it's on the same page but it doesn't work if you are on another page.

const el = document.querySelector(location.hash);

To Reproduce

  1. Set an id="howitworks" to the list item - a parent of the component SectionHowItWorks
  2. Create a nav link - on the topbar that will navigate the user to LandingPage with hash: #howitworks
  3. Click the button. If the current page is also LandingPage, it scrolls to the section How It Works. Otherwise, it doesn't.

Expected behavior

  • The element must have been found correctly.
  • The page will scroll down to the correct section when clicking the button from another page.

Possible solutions

  • Solution 1: use setTimeout with time = 0ms to call the setPageScrollPosition, so the element from document.querySelector is existing now.
const handleLocationChanged = (dispatch, location) => {
  setTimeout(() => {
    setPageScrollPosition(location);
  }, 0);
  const url = canonicalRoutePath(routeConfiguration(), location);
  dispatch(locationChanged(location, url));
};
  • Solution 2: Don't use Loadable Component for the LandingPage ( of the example above ) or any page that requires the scrolling behavior due to the anchor. (Not recommended)

Unable to Publish Listing after Inputting Stripe's information

Describe the bug A clear and concise description of what the bug is.

I'm unable to proceed after inputting all of the stripe connect information after making a listing. I get an error saying 'Whoops try again'.

To Reproduce Steps to reproduce the behavior:

  1. Clone repo
  2. do quick start steps
  3. create account
  4. attempt to create listing
  5. Note, in the payment screen I added various debug payment options from stripe connect's testing docs, but none of them worked.

Expected behavior A clear and concise description of what you expected to happen.

The listing gets created.

Desktop (please complete the following information):

  • OS: [OSX]
  • Browser [safari]
  • Version [12.1]

The function 'routeConfiguration' does not work.

When attempting to access the current location using the build browser navigator function, an error is thrown stating that navigator is undefined. To resolve this issue, the following code was added: if (typeof navigator !== 'undefined'). However, after implementing this fix, the application now throws an error stating that routeConfiguration is not a function

image

Steps to reproduce the behaviour:

  1. Create a new file called useCurrentLocation.js with this code
import { types as sdkTypes } from '../util/sdkLoader';
const { LatLng } = sdkTypes;

export const useCurrentLocation = async () => {
  if (typeof navigator !== 'undefined') {
    if (!('geolocation' in navigator)) {
      throw new Error('Geolocation not available in the browser');
    }

    const options = {
      enableHighAccuracy: true,
      timeout: 5000,
      maximumAge: 0,
    };

    try {
      const position = await new Promise((resolve, reject) => {
        navigator?.geolocation?.getCurrentPosition(resolve, reject, options);
      });

      return new LatLng(position.coords.latitude, position.coords.longitude);
    } catch (error) {
      console.log('error->>>Location', error);
      return error.message;
    }
  } else {
    return;
  }
};

2.Call the function in Searchpage.duck.js to access the current Location

const { useCurrentLocation } = await import('../../hooks/useCurrentLocation');
 const getCurrentLocation = useCurrentLocation();
 async function fetchResults() {
  const latlng = await getCurrentLocation;
  console.log(latlng);
  const results = {
    address: '',
    origin: latlng,
    bounds: locationBounds(
      latlng == 'User denied Geolocation' ? null : latlng,
      config.maps.search.currentLocationBoundsDistance
    ),
  };
  return results;
}

Expected behavior This should run without error when npm run dev-server

Screenshots
image

Moment-timezone is undefined

Everything works fine but when I click on "Edit Profile" and navigate to Availability section below Pricing, it gives me a very strange error: TypeError: moment_timezone_builds_moment_timezone_with_data_10_year_range_min__WEBPACK_IMPORTED_MODULE_1___default(...)(...).clone(...).tz(...) is undefined
I am stuck on this for over a week now and can't find a solution. :(

yarn run dev is not working

D:\ftw-daily>yarn run dev
yarn run v1.22.4
$ yarn run config-check&&export NODE_ENV=development REACT_APP_DEV_API_SERVER_PORT=3500&&concurrently --kill-others "yarn run dev-frontend" "yarn run dev-backend"
$ node scripts/config.js --check
'export' is not recognized as an internal or external command,
operable program or batch file.
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

D:\ftw-daily>yarn run dev

LocationAutocompleteInputImpl causes massive amount of mapbox Temporary Geocoding API requests!

We just got a bill from Mapbox for 700k request on the temporary decoding API.

When you do a search in the search form that uses the LocationAutocompleteInput.js it makes a lot more autocompletion than attended. An autocompletion is done immediately and not after 1000ms.

The original code is here:

if (newValue.length >= 3) {
      if (this.shortQueryTimeout) {
        window.clearTimeout(this.shortQueryTimeout);
      }
      this.predict(newValue);
} else {
      this.shortQueryTimeout = window.setTimeout(() => {
        this.predict(newValue);
      }, DEBOUNCE_WAIT_TIME_FOR_SHORT_QUERIES);
}

The predict function is fired when the search form has more than 3 characters. when there is a query timeout it clears it and fires the predict function right away. ONLY when the search value is smaller than 3 characters a debounce prediction is done.

That means that every keystroke after 3 characters is causing one prediction what means that the number of requests is gigantic.

Expected behaviour
After a short amount of typing stop, a prediction is done.

Screenshots
After our business grows and we have more and more active user on the platform a day.
image

Additional context

My suggestion for this code is:

if (newValue.length >= 3) {
      if (this.shortQueryTimeout) {
        window.clearTimeout(this.shortQueryTimeout);
      }
      this.shortQueryTimeout = window.setTimeout(() => {
        this.predict(newValue);
      }, DEBOUNCE_WAIT_TIME_FOR_SHORT_QUERIES);
}

Misordered CSS causes SelectSingleFilterPopup buttons look glitch

Describe the bug

CSS group style for .menuLabel, .menuLabelSelected is declared previous individual elements and therefore gets overridden. This bug was introduced in #1349

To Reproduce Steps to reproduce the behavior:

Run any ftw-daily with a SelectSingleFilterPopup enabled

Screenshots
Screen Shot 2020-08-19 at 4 31 28 PM

Desktop:

  • OS: macOS 10.15.6
  • Browser : Safari : 13.x / 14.0 / Chrome 84.0.x

Smartphone :

  • Device: iPhone SE (1st gen)
  • OS: iOS 14 Developper Beta 4
  • Browser : Safari
  • Version : 14

Patch

Placing group rule after individual elements fixes the issue

diff --git a/src/components/SelectSingleFilter/SelectSingleFilterPopup.css b/src/components/SelectSingleFilter/SelectSingleFilterPopup.css
index b531595c..2527539b 100644
--- a/src/components/SelectSingleFilter/SelectSingleFilterPopup.css
+++ b/src/components/SelectSingleFilter/SelectSingleFilterPopup.css
@@ -8,17 +8,6 @@
   }
 }
 
-.menuLabel,
-.menuLabelSelected {
-  @apply --marketplaceSearchFilterLabelFontStyles;
-
-  padding: var(--marketplaceButtonSmallDesktopPadding);
-  width: auto;
-  height: auto;
-  min-height: 0;
-  border-radius: 4px;
-}
-
 .menuLabel {
   @apply --marketplaceButtonStylesSecondary;
 
@@ -43,6 +32,17 @@
   }
 }
 
+.menuLabel,
+.menuLabelSelected {
+  @apply --marketplaceSearchFilterLabelFontStyles;
+
+  padding: var(--marketplaceButtonSmallDesktopPadding);
+  width: auto;
+  height: auto;
+  min-height: 0;
+  border-radius: 4px;
+}
+
 .menuContent {
   margin-top: 7px;
   padding-top: 13px;

TypeError: sdk.images.upload is not a function

Now that image uploads use sdk.images.upload (as of #829), we are getting the above error when trying to add an image to a listing. It looks to me like the SDK should have images.upload defined OK. Are we missing something?

Many thanks!

We have just noticed that Stripe API has had a breaking change

Note: If you are using Stripe account created after 19th of February 2019 there might be problems saving the payout details in FTW

We found out that Stripe has updated their API 19.2.2019 and after that, the legal_entity parameter used in creating stripe account has been broken into 3 dictionaries of individual, company and business_type (https://stripe.com/docs/upgrades#api-changelog).

Currently, the API version depends on the specific Stripe account so if the user has created the Stripe account 19.2.2019 or later it's most likely using the newest version of the API. Because of this update, the parameter legal_entity is now unknown to API and it causes an error. This means saving payout details in FTW is not possible because creating new Stripe account fails.

Legal entity is passed to Stripe in function createStripeAccount in `user.duck.js'`` file. This should now be updated to correspond the current version of Stripe API. We will continue investigating the issue.

packages

You need to include 'inquirer' for config to run (package.json) - it's not being installed from the current master

Yarn run dev

image

Followed all the steps but the "yarn run dev" command failed. Maybe i need an other version of the "jose" package?
I'm working on Windows 10, is Linux really necessary?

Originally posted by @casaltenburg in #1330 (comment)

Persisting booking request details across authentication

Currently, if you start a booking without being signed in, the booking request details are not persisted for when you are eventually redirected to the checkout page. This means you have to sign in then fill in the booking form again.

The reason is this line: const hasNavigatedThroughLink = history.action === 'PUSH'
It returns false when the authentication redirects to the checkout page.

I've fixed it on our fork with const hasNavigatedThroughLink = history.action === 'PUSH' || history.action === 'REPLACE' instead.

I'd be interested if there's a better fix!

Bugsnag integration

We've been trying to hook up https://www.bugsnag.com/ to log errors from within the React app, but can't get it to work with the server-side rendering. Would really appreciate any advice on implementing this.

The bugsnag-react library (https://docs.bugsnag.com/platforms/browsers/react/) works by letting you wrap the App in a component, but creating the ErrorBoundary component seems to rely on the bugsnag function provided by bugsnag-js. The problem is that this function seems to rely on accessing window. This means that while we can wrap ClientApp (from app.js) in the ErrorBoundary, we can't wrap ServerApp.

Ultimately we're looking for a way to catch any and all errors from within React and log them to Bugsnag. I think we could use the existing log file written to support Raven, but that relies on calling .error() whenever we want to log an error, whereas the ErrorBoundary implementation catches all errors.

npm install fails

Hello,

I cloned the repo and simply tried to npm install:

$ npm i                                                                                                                          ↵ 1
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR! 
npm ERR! Found: [email protected]
npm ERR! node_modules/type-fest
npm ERR!   type-fest@"^0.5.2" from [email protected]
npm ERR!   node_modules/ansi-escapes
npm ERR!     ansi-escapes@"^4.2.1" from [email protected]
npm ERR!     node_modules/inquirer
npm ERR!       dev inquirer@"^7.3.3" from the root project
npm ERR!       1 more (react-dev-utils)
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peerOptional type-fest@"^0.13.1" from @pmmmwh/[email protected]
npm ERR! node_modules/@pmmmwh/react-refresh-webpack-plugin
npm ERR!   @pmmmwh/react-refresh-webpack-plugin@"0.4.2" from [email protected]
npm ERR!   node_modules/sharetribe-scripts
npm ERR!     sharetribe-scripts@"4.0.0" from the root project
npm ERR! 
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR! 
npm ERR! See /home/max/.npm/eresolve-report.txt for a full report.

npm ERR! A complete log of this run can be found in:
npm ERR!     /home/max/.npm/_logs/2021-02-09T18_02_02_628Z-debug.log
$ node -v                                                                                                                        ↵ 1
v15.7.0

Running WSL 2

Finding first blocked date between daterange

Describe the bug A clear and concise description of what the bug is.
https://github.com/sharetribe/ftw-daily/blob/master/src/components/FieldDateRangeInput/DateRangeInput.helpers.js#L39

It doesn't check/skips first day. So if first day is missing in timeslots, it still will return that daterange isn't blocked.

To Reproduce Steps to reproduce the behavior:

Pass to firstBlockedBetween function

  • list of timeslots (from 2nd to 5th march)
  • from date: (1st march)
  • to date: (5th march)

Expected behavior A clear and concise description of what you expected to happen.
It should mark 1st march as blocked date, as it isn't present in timeslots.

Additional context Add any other context about the problem here.

Maybe im missing full scope of what this function does, but this quick fix (increasing start date only on recursive call) fixed issue for me.

const firstBlockedBetween = (timeSlots, startDate, endDate) => {
  if (moment(startDate).isSame(endDate, 'date')) {
    return null;
  }

  return timeSlotsContain(timeSlots, startDate)
    ? firstBlockedBetween(timeSlots, moment(startDate).add(1, 'days'), endDate)
    : startDate;
};

Change in Google Maps pricing and potential impacts for costs

On July 16th, Google updated their pricing for the use of their Google Maps services. Maybe you’ve noticed it already or have been contacted by Google. You can learn more about it in this article and get an estimate of your monthly costs here.

This means that, if you use the Google Maps provided in the Flex Template for Web with your own Maps API Key, your Google Maps bill will most likely increase. The exact costs depend on quite a lot of parameters and on your volume, but in general this is a significant raise and costs might be in the thousands of $ quite fast, as you grow.

We’ve already started to work out different ways to limit the impact of Google’s decision on your business and growth.

What we are working on already

We started to make changes to the Flex Template for Web to reduce the number of calls to the Google Maps API:

We started to use session tokens on the LocationAutocompleteInput component and reduced place details calls to SKU basic data.
We also changed the map on ListingPage to be initially a static map (but if clicked it will be changed to a dynamic map). That map is also not loaded if a user doesn't scroll to that part of the page.

We are still experimenting what could be done to the dynamic map on SearchPage and if the current changes are reducing the costs enough.

What changes to your front end you should consider

ListingPage: think about using embedded map instead of static or dynamic map or at least move the map to the bottom of the main column.
SearchPage: think about adding a toggle for the map on SearchPage. We are also considering making this change to the Flex Template for Web.

We’ll continue to bring improvements about this in the coming days and weeks, so don’t hesitate to monitor the FTW repository and update your project from upstream.

What we are considering to do next

Even with optimized use of the Google Maps API, it might be quite challenging in the future to rely on this solution.

We are discussing with Google Partners to learn more, and are also considering other solutions.
Nothing is decided yet however we may consider integrating another map provider if one with a more reasonable pricing model is found.

What you should keep in mind

If you are now building customizations related to Google Maps, you might want to look at potential impacts on your Google Maps bills.

It’s also good to keep in mind that we may introduce other map providers in the future.

Let us know about your experience

If this raises any question or if you’d like to share your own experience with the Google Maps pricing change, feel free to share!

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.