Shocked Specification Discussion

[syaau]

Properties:

1. Connection Props
   Starts a new connection (when any one changes). No connection is made when either of them is falsy.

   • url: null | string
     Remote endpoint (Ex: http://example.com/your-app/params)
   • ident: null | {}
     User identification token. Ex: { type: 'fb', token: 'asdfsfkljsdfjasldf' }
   • network: boolean
     Network online status
   • clearIdent: () => void
     A callback invoked when the server doesn't identify the ident value sent over for identification

2. Communication Props

• api: { [string]: API }
  API structure available for execution on the shocked instance.
• context: any
  Client context to match with server

3. Synchronization Props

   • dispatch: (state, action) => void
     The dispatch method to synchronize server state with client. This should be the dispatch method of your redux or redux compatible stores.

   • sync: () => Promise<void>
     A synchronization function that is invoked as soon as the connection goes online. Use this opportunity to synchronize all offline data with the server

4. Configuration Props

   • retryInterval: number default: 1000
     Number of milliseconds before which reconnection attempts are not made. Reconnection attempts are made whenever the connection is terminated, unless the connection has been rejected by the server (4001).

Example

function offlineSynchronizer() {
	  
}

async function sync() {
  // First Commit and then perform other synchronizations
  
	// Extract synchronization records
  const toSync = db.getRecords();
  
  // Return context to commit
  return null;
}

export default function YourApp() {
  // Use simple helpers to get network status
  const network = useNetStatus();
  
  // Use authentication library to extract the session information
  const { token, logout } = useAuth();
  
  // Extract parameters from session
  const user = 
  const sessionId = session && session.id;
  const url = session && `ws://example.com/your-app/${session.params}`;
  
  // If there isn't any session available, may be show a Login screen
  const body = session ? <Home /> : <Login />;
  
  return (
    <Shocked
      url={url}
      network={network}
      ident={token}
      clearIdent={logout}
      
      context={currentLodgeId}
      dispatch={store.dispatch}
      
      sync={sync}
    >
      {body}
    </Shocked>
  );
}

[syaau]

@karkipy Test the specification from next branch

[syaau]

useNetInfo Implementation for react-native

function useNetStatus() {
  const [online, setOnline] = useState(false);
  
  const handler = useCallback((info) => {
    setOnline(info.type !== 'none');
  }, [setOnline]);
  
  useEffect(() => {
    NetInfo.getConnectionInfo().then(handler);
    NetInfo.addEventListener('connectionChange', handler);
	
    return () => {
      NetInfo.removeEventListener('connectionChange', handler);
    };
  });
  
  return online;
}

[syaau]

Defining api on the client side

Case 1: The api doesn't support offline execution

const myRemoteApi = null;

Case 2: The api supports offline execution

const offlineDB = new SomeXYZOfflineDatabase();
const myRemoteApi = (session) => {
  const sync = offlineDB.registerSync(MY_REMOTE_API_ID, (token) => {
    const payload = offlineDB.retrievePayload(token);
    return session.myRemoteApi(payload);
  });
  return async (payload) => {
    // Add sync token for synchronization later
    await sync(someTokenFromPayload);

    // Perform offline operation
    return offlineDB.consumeApiOffline(payload);
  };
}