Parris Khachi parris

## Nginx config for NextJS + Websocket server
worker_processes  1;

events {
  worker_connections  1024;
}

http {

    sendfile off;
    keepalive_timeout 65;

## Drag-Drop+Reparenting-Solution-React.md

      
              1 file
            
          
              0 forks
            
          
              0 comments
            
          
              0 stars
            
          
                parris
                / Drag-Drop+Reparenting-Solution-React.md
            
            
              Last active
              November 15, 2018 03:15
            
              
                Drag/Drop + Reparenting in React
              
          
    React has fairly good support for most drag/drop scenarios except for the case where the dragged component will change parent elements. In that case, touchmove events will stop firing. Without React you'd normally just do something more imparative and just manually move an object around without destory it. In React you likely rely more on state/props to render your scenes; therefore, things become vaguely intractable. Even if your touchmove events are attached to document.body or window (etc) your touchmove event will still not fire.
I've read some discussions on the matter here:

facebook/react#3965
facebook/react#13113

Solution

I recently needed to address this in a codebase I work on. I just wanted to report some findings and success I had working around this particular issue. I found this workaround (and I have no idea why it works) https://stackoverflow.com/questions/33298828/touch-move-event-dont-fire-after-touch-start-target-is-removed

  
## Delete all Facebook test users (node js)
/**
 *  This will delete facebook test users for the specified appId.
 *  Usage node ./script/dumpFacebookTestUsers.js [appId] [appSecret]
 *
 *  Copyright 2018 Brigade and Parris Khachi
 *
 *  Licensed under the Apache License, Version 2.0 (the "License");
 *  you may not use this file except in compliance with the License.
 *  You may obtain a copy of the License at
 *

## simple-group-membership.sql
create type user_role as enum ('hatch_anonymous', 'hatch_contributor', 'hatch_admin');
create type group_member_role as enum ('group_person', 'group_admin');

create table person (
	id serial not null
		constraint person_pkey
			primary key
);

create table "group" (

## Login.js
// src/apps/Login.js
import { React, Form, clientCookies, gql } from 'fervor/lib';

import Template from '../components/Template';
import styles from './styles/about.scss';

const authenticate = gql`
mutation Authenticate($login: AuthenticateInput!) {
  authenticate(input: $login) {
    jwtToken

## logout.spec.coffee
Parse = require '../../core/parse'
TestUtils = require('react/addons').addons.TestUtils

logoutView = require './logout'
mediator = require '../../core/mediator'

describe 'LogoutView', ->

    beforeEach ->
        @container = @document.createElement 'div'

## browserify.coffee
gulp = require 'gulp'
browserify = require 'gulp-browserify'
rename = require 'gulp-rename'

gulp.task 'js', ->
  gulp.src('./public/src/app.coffee', { read: false })
    .pipe(browserify({
        transform: ['coffee-reactify'],
        extensions: ['.coffee'],
    }))

## .bash_profile
#make sure to run: git config --global color.ui true

function parse_git_branch() {
    git branch 2> /dev/null | sed -e '/^[^*]/d' -e 's/* \(.*\)/\*\1/'
}

case "$TERM" in
  xterm-*color) color_prompt=yes;;
esac

## XMLParser.js
function xmlParser(node) {
    var i = 0;
    var attrs = node.attributes;
    var nodes = node.childNodes;
    var jsNode = new Object();

    for(i;i<attrs.length;i++){
        jsNode[attrs[i].name] = attrs[i].value;
    }

## spec_helper.coffee
jsdom = require 'jsdom'

require 'mocha-sinon'

# move into beforeEach and flip global.window.close on to improve
# cleaning of environment during each test and prevent memory leaks
document = jsdom.jsdom('<html><body></body></html>', jsdom.level(1, 'core'))

beforeEach ->
    @document = document
	worker_processes 1;

	events {
	worker_connections 1024;
	}

	http {

	sendfile off;
	keepalive_timeout 65;
	create type user_role as enum ('hatch_anonymous', 'hatch_contributor', 'hatch_admin');
	create type group_member_role as enum ('group_person', 'group_admin');

	create table person (
	id serial not null
	constraint person_pkey
	primary key
	);

	create table "group" (
	// src/apps/Login.js
	import { React, Form, clientCookies, gql } from 'fervor/lib';

	import Template from '../components/Template';
	import styles from './styles/about.scss';

	const authenticate = gql`
	mutation Authenticate($login: AuthenticateInput!) {
	authenticate(input: $login) {
	jwtToken
	Parse = require '../../core/parse'
	TestUtils = require('react/addons').addons.TestUtils

	logoutView = require './logout'
	mediator = require '../../core/mediator'

	describe 'LogoutView', ->

	beforeEach ->
	@container = @document.createElement 'div'
	gulp = require 'gulp'
	browserify = require 'gulp-browserify'
	rename = require 'gulp-rename'

	gulp.task 'js', ->
	gulp.src('./public/src/app.coffee', { read: false })
	.pipe(browserify({
	transform: ['coffee-reactify'],
	extensions: ['.coffee'],
	}))
	#make sure to run: git config --global color.ui true

	function parse_git_branch() {
	git branch 2> /dev/null \| sed -e '/^[^]/d' -e 's/ \(.\)/\\1/'
	}

	case "$TERM" in
	xterm-*color) color_prompt=yes;;
	esac
	function xmlParser(node) {
	var i = 0;
	var attrs = node.attributes;
	var nodes = node.childNodes;
	var jsNode = new Object();

	for(i;i<attrs.length;i++){
	jsNode[attrs[i].name] = attrs[i].value;
	}
	jsdom = require 'jsdom'

	require 'mocha-sinon'

	# move into beforeEach and flip global.window.close on to improve
	# cleaning of environment during each test and prevent memory leaks
	document = jsdom.jsdom('<html><body></body></html>', jsdom.level(1, 'core'))

	beforeEach ->
	@document = document