const [touchStart, setTouchStart] = useState(null)
const [touchEnd, setTouchEnd] = useState(null)

// the required distance between touchStart and touchEnd to be detected as a swipe
const minSwipeDistance = 50 

const onTouchStart = (e) => {
  setTouchEnd(null) // otherwise the swipe is fired even with usual touch events
  setTouchStart(e.targetTouches[0].clientX)
}

const onTouchMove = (e) => setTouchEnd(e.targetTouches[0].clientX)

const onTouchEnd = () => {
  if (!touchStart || !touchEnd) return
  const distance = touchStart - touchEnd
  const isLeftSwipe = distance > minSwipeDistance
  const isRightSwipe = distance < -minSwipeDistance
  if (isLeftSwipe || isRightSwipe) console.log('swipe', isLeftSwipe ? 'left' : 'right')
  // add your conditional logic here
}

import json

user_info_file_path = 'userinfo.json'

def save_user_info(chat_id, user_id, first_name, last_name, username):
    # Load existing user information from the file
    user_info = load_user_info()

    # Add or update user information
    user_info[user_id] = {
	"user_id": user_id,
	"username": username,
    "chat_id": chat_id,
    "first_name": first_name,
    "last_name": last_name
    }

    # Save the updated user information back to the file
    with open(user_info_file_path, 'w') as file:
        json.dump(user_info, file)

def load_user_info():
    try:
        # Load user information from the file
        with open(user_info_file_path, 'r') as file:
            return json.load(file)
    except FileNotFoundError:
        # If the file doesn't exist yet, return an empty dictionary
        return {}

import json
from telegram import Update
from telegram.ext import CallbackContext

def append_user_info_to_json(update: Update, context: CallbackContext, file_path='users.json'):
    user_info = {
        'chat_id': update.effective_chat.id,
        'first_name': update.effective_chat.first_name,
        'last_name': update.effective_chat.last_name,
        'username': update.effective_chat.username
    }

    try:
        # Load existing data
        with open(file_path, 'r') as file:
            data = json.load(file)
    except FileNotFoundError:
        # If the file doesn't exist, start a new list
        data = []

    # Append new data
    data.append(user_info)

    # Write updated data back to file
    with open(file_path, 'w') as file:
        json.dump(data, file, indent=4)


def start(update: Update, context: CallbackContext) -> None:
    # Append user info to JSON
    append_user_info_to_json(update, context)

const waitForSiblingElementToBeRemoved = (form) => {
    // This Element are where any errors would appear
    const input = form.querySelector(`input[type='submit']`);

    // This observer looks for the sibling of the input submit button that appears 
    // and then removes when the request is complete
    new MutationObserver((entries, observer) => {
      log('entries[0].removeNodes: ', entries[0].removedNodes);
      if (!entries[0].removedNodes[0]?.classList.contains('ajax-progress')) return; 
      observer.disconnect(); // should this be moved after sendEvent 
      window.setTimeout(() => {
        if (input.classList.contains('error')) return; 
        log('Email has been submitted');
        sendEvent('pjs_email_submitted');
      }, 0);
    }).observe(input.parentElement, { childList: true, subtree: true }); // should be actually have two separate observers for each input?
  };

window.optimizely.get('visitor')

// example of getting specific pjs segment (from tb440)
window.optimizely.get('visitor').custom['22521880007']

/* ----------------------------------------
Note: any modifications to these styles will be global 
---------------------------------------- */
.tippy-box {}
.tippy-content {}
.tippy-arrow {}

/* ----------------------------------------
You can also apply tooltip css overrides on the INTERIOR of your tooltips. Note: results may sometimes be unpredictable 😡
---------------------------------------- */
.tippy-box .style1 {
  font-family: courier;
  color: #0066FF;
  padding: 15px;
  display: inline-block;
}

<!-- jQuery -->
<script src="//code.jquery.com/jquery-latest.js"></script>
<!-- Popper -->
<script src="https://unpkg.com/@popperjs/core@2"></script>
<!-- Tippy -->
<script src="https://unpkg.com/tippy.js@6"></script>

<script language="javascript">
// This code will execute as soon as the document is loaded 
$(document).ready(function() {
    // Allow or disallow html in tooltips (default = false)
    tippy.setDefaultProps({allowHTML: true}); 
    // Transform elements
    let tooltip_elements = $('a[href^="#tooltip_"]');
    tooltip_elements.each(function(i){
        let link = $(this).attr('href');
        let tip = link.replace('#tooltip_', '');
        $(this).attr('data-tippy-content', tip);
        if (link.startsWith('#tooltip_')) {
          $(this).removeAttr('href').css('cursor', 'pointer');
        }
    });
    // Finally, call `tippy`
    tippy('[data-tippy-content]');
});</script>