Programming and Web Development Help: November 2021

Wednesday 24 November 2021

Automatically Unsubscribe in Angular Component

  

  let isFunction = fn => typeof fn === "function";

  const doUnsubscribe = subscription => {
    subscription &&
      isFunction(subscription.unsubscribe) &&
      subscription.unsubscribe();
  };

  const doUnsubscribeIfArray = subscriptionsArray => {
    Array.isArray(subscriptionsArray) &&
      subscriptionsArray.forEach(doUnsubscribe);
  };

  export function AutoUnsubscribe({
    blackList = [],
    arrayName = "",
    event = "ngOnDestroy"
  } = {}) {
    return function(constructor: Function) {
      const original = constructor.prototype[event];

      if (!isFunction(original)) {
        throw new Error(
          `${
            constructor.name
          } is using @AutoUnsubscribe but does not implement ${event}`
        );
      }

      constructor.prototype[event] = function() {
        isFunction(original) && original.apply(this, arguments);
        if (arrayName) {
          doUnsubscribeIfArray(this[arrayName]);
          return;
        }
        for (let propName in this) {
          if (blackList.includes(propName)) continue;
          const property = this[propName];
          doUnsubscribe(property);
        }
      };
    };
  } 

  //@AutoUnsubscribe()  // use if direct property 
  @AutoUnsubscribe({    // use if you have array of subscriptions
    arrayName:"subscriptions"
  })
  @Component({
    selector: 'inbox'
  })
  export class InboxComponent {
    one: Subscription;
    two: Subscription;
    subscription: [];
    constructor( private store: Store<any>, private element : ElementRef ) {}

    ngOnInit() {
      this.one = store.select("data").subscribe(data => // do something);
      this.two = Observable.interval.subscribe(data => // do something);

    // this.subscriptions = [
    //   onResizeSubscription,
    //   deploymentSubscription,
    //   patientIdSubscription,
    //   createQuestionnaireLoadedSubscription,
    //   errorCreateQeustionnaireSubscription,
    // ];
   }

     // This method must be present, even if empty.
     ngOnDestroy() {
      // We'll throw an error if it doesn't
     }
  }

Sunday 21 November 2021

Are observables synchronous or asynchronous?

1.Synchronous observable:

Observables are lazy Push collections of multiple values.

In our async operator we've used setTimeout, this setTimeout will assure that the main thread will not get blocked because setTimeout
is a browser API and our code will be moved to the event loop.

 
 const simpleBlockingOperator =
  (noOfLoops: number) =>
  <T>(source: Observable<T>): Observable<T> => {
    return new Observable((observable) => {
      source.subscribe({
        next: (no) => {
          let loops = 0;
          while (loops !== noOfLoops) {
            loops++;
          }
          console.log("Done loooping" + loops, " ", noOfLoops);
          return observable.next(no);
        },
        error: (error) => observable.error(error),
        complete: () => observable.complete(),
      });
    });
  };

  2.Asynchronous observable:

 const simpleNonBlockingOperator =
  (noOfLoops: number) =>
  <T>(source: Observable<T>): Observable<T> => {
    return new Observable((observable) => {
      source.subscribe({
        next: (no) => {
          setTimeout(() => {
            let loops = 0;
            while (loops !== noOfLoops) {
              loops++;
            }
            console.log("Done loooping" + loops, " ", noOfLoops);
            return observable.next(no);
          }, 0);
        },
        error: (error) => observable.error(error),
        complete: () => observable.complete(),
      });
    });
  };
  

Sunday 14 November 2021

Cut-Paste or Copy-Paste not working on Ubuntu 20.04 on using right-click context menu

set ubuntu new drive permissions

Cut-Paste or Copy-Paste not working on Ubuntu 20.04 on using right-click context menu ?

sudo chown -v $USER:$USER /media/hp/e7582b74-0571-4a0d-b36f-e1ec8cb67c6f