Category: Angular

Caching data frontend- Angular interceptors for Observable–part 48

Now I want to cache data for fast loading site- if it comes next time with the same browser, should have some data returned fast – and then load from HTTP. So first return from cache, then make the request

So I need to create an HTTP interceptor to cache things-  fortunately, Angular already provide tutorial about this: https://angular.io/guide/http#intercepting-requests-and-responses  – see CachingInterceptor. And the question is how to return 2 results ( of the same type ) from the same function  ?  Fortunately, the answer is: Observable ! ( It took me a while to figure that intercept returns Observable …). Also, when making the http request, the code should also store the result for the next time.

So I need to combine the 2 observables, one from cache and one from HTTP result  – or I can use startWith ( to start with the value).

First, I wanted to put into a static dictionary ( key: url, value: value of the request) the data. It did not work. Why ? Because of this

 

static cache: Map<string, any> = new Map<string, any>();

//code for finding if we have something in the case

if (CachingInterceptor.cache.has(req.url)) {

//code to put into the cache

this.cache[req.url] = event.body; // Update the cache.

 

Can you spot the error ? ( Yes, I know: Dictionary in C# has tricked my mind)

Last line should be this:

CachingInterceptor.cache.set(url,event.body); // Update the cache.

Now the caching works – but only for local .  And only in memory .

You can find the commit at https://github.com/ignatandrei/InfoValutar/commit/2bde8130add59c84d11d7348ad0a88bb576e356a

And one hour passes...
(This is the result of 1 hour per day auto-challenge as a full cycle developer for an exchange rates application)
( You can see the sources at https://github.com/ignatandrei/InfoValutar/ )
NrPost 
1Start
2Reading NBR from internet
3Source control and build
4Badge and test
5CI and action
6Artifacts and dotnet try
7Docker with .NET Try
8ECB
9Intermezzo - Various implementations for programmers
10Intermezzo - similar code - options
11Plugin implementation
12GUI for console
13WebAPI
14Plugin in .NET Core 3
15Build and Versioning
16Add swagger
17Docker - first part
18Docker - second part
19Docker - build Azure
20Pipeline send to Docker Hub
21Play with Docker - online
22Run VSCode and Docker
23Deploy Azure
24VSCode see tests and powershell
25Code Coverage
26Database in Azure
27Sql In Memory or Azure
28Azure ConString, RSS
29Middleware for backward compatibility
30Identical Tables in EFCore
31Multiple Data in EFCore
32Dot net try again
33Start Azure Function
34Azure function - deploy
35Solving my problems
36IAsyncEnumerable transformed to IEnumerable and making Azure Functions works
37Azure functions - final
38Review of 37 hours
39Last Commit in AzureDevOps
40Create Angular WebSite
41Add static Angular to WebAPI .NET Core
42Docker for Angular
43Angular and CORS
44SSL , VSCode, Docker
45Routing in Angular
46RxJS for Routing
47RxJs Unsubscribe

RxJS–Unsubscribe automatically –part 47

I am searching for a simple method to unsubscribe from Observables. Some of methods are detailed here : https://blog.bitsrc.io/6-ways-to-unsubscribe-from-observables-in-angular-ab912819a78f

I do not want

  1. remember to unsubscribe
  2. being forced to use html ( the async pipe)
  3. take operator – I want later to cache first data and then make the http call
  4. first operator – same with 3
  5. decorator – seems ok.
  6. tsLint – no, can be easy to disable

 

So Decorator it is. More reading

https://www.typescriptlang.org/docs/handbook/decorators.html

https://netbasal.com/automagically-unsubscribe-in-angular-4487e9853a88

Added code the autoUnsub

export function AutoUnsub( constructor ) {

const original = constructor.prototype.ngOnDestroy;

console.log(‘from unsubscribe’);

constructor.prototype.ngOnDestroy = function() {

// tslint:disable-next-line: forin

for ( const prop in this ) {

const property = this[ prop ];

if ( property && (typeof property.unsubscribe === ‘function’) ) {

console.log(‘unsubscribe !’);

property.unsubscribe();

}

}

console.log(‘finish unsub’);

// tslint:disable-next-line: no-unused-expression

original && typeof original === ‘function’ && original.apply(this, arguments);

};

}

Modified code to make property of unsubscribe, e.g. from

this.banksService.GetBanksIds().subscribe(

it=>{

console.log(it.length);

this.banks=it;

},

err=> window.alert(“error:”+ JSON.stringify(err))

)

}

to

banksObs: Observable<string[]>;

//ommitted code

this.banksObs = this.banksService.GetBanksIds();

this.banksObs.subscribe(

it => {

console.log(it.length);

this.banks = it;

},

err => window.alert(‘error:’ + JSON.stringify(err))

);

Created also a new component, for programmers, in order to observe the unsubscribe moving from component to component,

See commit https://github.com/ignatandrei/InfoValutar/commit/66e358848652ce761cb6ef2d69a460f052b12e09

And one hour passes...
(This is the result of 1 hour per day auto-challenge as a full cycle developer for an exchange rates application)
( You can see the sources at https://github.com/ignatandrei/InfoValutar/ )
NrPost 
1Start
2Reading NBR from internet
3Source control and build
4Badge and test
5CI and action
6Artifacts and dotnet try
7Docker with .NET Try
8ECB
9Intermezzo - Various implementations for programmers
10Intermezzo - similar code - options
11Plugin implementation
12GUI for console
13WebAPI
14Plugin in .NET Core 3
15Build and Versioning
16Add swagger
17Docker - first part
18Docker - second part
19Docker - build Azure
20Pipeline send to Docker Hub
21Play with Docker - online
22Run VSCode and Docker
23Deploy Azure
24VSCode see tests and powershell
25Code Coverage
26Database in Azure
27Sql In Memory or Azure
28Azure ConString, RSS
29Middleware for backward compatibility
30Identical Tables in EFCore
31Multiple Data in EFCore
32Dot net try again
33Start Azure Function
34Azure function - deploy
35Solving my problems
36IAsyncEnumerable transformed to IEnumerable and making Azure Functions works
37Azure functions - final
38Review of 37 hours
39Last Commit in AzureDevOps
40Create Angular WebSite
41Add static Angular to WebAPI .NET Core
42Docker for Angular
43Angular and CORS
44SSL , VSCode, Docker
45Routing in Angular
46RxJS for Routing
47RxJs Unsubscribe

Routing angular with .net core and RxJs switchmap- part 46

Now the problem is that the route

 

works if I access first the index.html file, but it does not route when entered directly

Trying to get from SPATemplate

https://github.com/ignatandrei/InfoValutar/commit/a364dc57653ac2ba04ab0596f1540a8f9fdb73f6

However, this will redirect ALL routes to index.html – including swagger and API.  Trying to learn more – looking at the code.

I have observed that I have put

app.UseOpenApi();
app.UseSwaggerUi3();

after

this.route.params.pipe(

tap(rp => {

this.idBank = rp.id;

})

, switchMap((it) => this.bs.GetRates(it.id))

, tap(v => this.rates = v)

).subscribe();

What If I put first?

app.UseOpenApi();
app.UseSwaggerUi3();

app.UseSpa(spa =>

 

And it works! https://github.com/ignatandrei/InfoValutar/commit/726ebd07095ea62387d4eeebb017b4f6ae4ab8e6

What I need more, is to retrieve the exchange rates for today for the selected bank.

The code to retrieve the bank id was:

this.route.params.subscribe(rp => {

this.idBank = rp.id;

}

);

I can put into subscribe the next call, but it will be not so nice ( subscribe into subscribe into subscribe)

this.route.params.subscribe(rp => {

this.idBank = rp.id;

this.bs.GetRates(it.id).subscribe( ….)

}

)

 

Instead of this, I use switchMap , pipe and tap

this.route.params.pipe(

tap(rp => {

this.idBank = rp.id;

})

, switchMap((it) => this.bs.GetRates(it.id))

, tap(v => this.rates = v)

).subscribe();

To fast show data, I use the Json pipe from Angular

<ul>

<li *ngFor=”let rate of rates”>

{{rate | json}}

</li>

</ul>

Modifications at https://github.com/ignatandrei/InfoValutar/commit/a27c7c7beb4ea10b9f8a522b01d558c6003d5386

And one hour passes...
(This is the result of 1 hour per day auto-challenge as a full cycle developer for an exchange rates application)
( You can see the sources at https://github.com/ignatandrei/InfoValutar/ )
NrPost 
1Start
2Reading NBR from internet
3Source control and build
4Badge and test
5CI and action
6Artifacts and dotnet try
7Docker with .NET Try
8ECB
9Intermezzo - Various implementations for programmers
10Intermezzo - similar code - options
11Plugin implementation
12GUI for console
13WebAPI
14Plugin in .NET Core 3
15Build and Versioning
16Add swagger
17Docker - first part
18Docker - second part
19Docker - build Azure
20Pipeline send to Docker Hub
21Play with Docker - online
22Run VSCode and Docker
23Deploy Azure
24VSCode see tests and powershell
25Code Coverage
26Database in Azure
27Sql In Memory or Azure
28Azure ConString, RSS
29Middleware for backward compatibility
30Identical Tables in EFCore
31Multiple Data in EFCore
32Dot net try again
33Start Azure Function
34Azure function - deploy
35Solving my problems
36IAsyncEnumerable transformed to IEnumerable and making Azure Functions works
37Azure functions - final
38Review of 37 hours
39Last Commit in AzureDevOps
40Create Angular WebSite
41Add static Angular to WebAPI .NET Core
42Docker for Angular
43Angular and CORS
44SSL , VSCode, Docker
45Routing in Angular
46RxJS for Routing
47RxJs Unsubscribe

Displaying banks with Angular routing-part 45

Now I want to have a separate URL for each bank, like  https://infovalutar.azurewebsites.net/bank/ECB

For this I read routing in Angular, https://angular.io/tutorial/toh-pt5 .

However , a small problem : when we change URL , from

https://infovalutar.azurewebsites.net/bank/ECB

to

https://infovalutar.azurewebsites.net/bank/BNR

we should re-load component – or the component be aware of changing.

Reading

https://kamranahmed.info/blog/2018/02/28/dealing-with-route-params-in-angular-5/

makes me change from

this.idBank = this.route.snapshot.paramMap.get(‘id’);

to

this.route.params.subscribe(rp=> {

this.idBank = rp.id;

}

    );

Seems little to do, but I have had problems with changing the router-outlet – figuring where to put it. The creation of dashboard component and the routes

const routes: Routes = [

{ path: ”, redirectTo: ‘/dashboard’, pathMatch: ‘full’ },

{ path: ‘dashboard’, component: DashboardComponent },

{path:’bank/:id’,component:BankComponent}

]

were enough trouble.

And one hour passes...
(This is the result of 1 hour per day auto-challenge as a full cycle developer for an exchange rates application)
( You can see the sources at https://github.com/ignatandrei/InfoValutar/ )
NrPost 
1Start
2Reading NBR from internet
3Source control and build
4Badge and test
5CI and action
6Artifacts and dotnet try
7Docker with .NET Try
8ECB
9Intermezzo - Various implementations for programmers
10Intermezzo - similar code - options
11Plugin implementation
12GUI for console
13WebAPI
14Plugin in .NET Core 3
15Build and Versioning
16Add swagger
17Docker - first part
18Docker - second part
19Docker - build Azure
20Pipeline send to Docker Hub
21Play with Docker - online
22Run VSCode and Docker
23Deploy Azure
24VSCode see tests and powershell
25Code Coverage
26Database in Azure
27Sql In Memory or Azure
28Azure ConString, RSS
29Middleware for backward compatibility
30Identical Tables in EFCore
31Multiple Data in EFCore
32Dot net try again
33Start Azure Function
34Azure function - deploy
35Solving my problems
36IAsyncEnumerable transformed to IEnumerable and making Azure Functions works
37Azure functions - final
38Review of 37 hours
39Last Commit in AzureDevOps
40Create Angular WebSite
41Add static Angular to WebAPI .NET Core
42Docker for Angular
43Angular and CORS
44SSL , VSCode, Docker
45Routing in Angular
46RxJS for Routing
47RxJs Unsubscribe

Configure Angular Environment(local and remote) and CORS for .NET Core – part 43

I want to be capable to run Angular with data obtained from local .NET project in development – and from remote website in production. One of the techniques is detailed here

https://angular.io/guide/build

Generated service :

ng g s banks

Now I want to see that every modification of the Bankservice will re-compile. Tried in Docker to run

ng serve –host 0.0.0.0  –poll 200

but it does not show modifications of files changing.

The problem is that not show the files changing generated inside. Time to re-build the docker container for angular

docker container prune -f

docker images “vs*”

docker image rm <id of the prev image>

No modification. The problem was: the BankService was not referenced yet! If I refeerence to the BankComponent, the poll works!

Now let’s see if the Angular Web can access .NET Core WebAPI – no. I forgot to add CORS:

public void ConfigureServices(IServiceCollection services)
{
     services.AddCors(options =>
     {
         options.AddPolicy(“AllowedAll”,
         builder =>
         {
             builder
                 .AllowAnyHeader()
                 .AllowAnyOrigin()
                 .AllowAnyMethod();
         });

    });

// code

public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
{

    if (env.IsDevelopment())
     {
         app.UseDeveloperExceptionPage();
     }

    app.UseCors(“AllowedAll”);

and now it works – I can see in Angular Web App the banks.

The modifications are in

https://github.com/ignatandrei/InfoValutar/commit/2106328935b972a4411f5412ba3fc810a46399b8

Docker environment for Angular–part 42

Trying the alpine container from https://github.com/microsoft/vscode-dev-containers/tree/master/containers . It does not work – the error was that it cannot mount the binding folder . I figure that it was a Docker issue, https://blogs.msdn.microsoft.com/stevelasker/2016/06/14/configuring-docker-for-windows-volumes/ .

Then I had a problem with “ tarball data for @angular/compiler@8.2.14 seems to be corrupted” – delete package.json for this.

This is the result 

  1. in folder .devcontainer : A DockerFileAng file that have a new line, RUN npm install -g @angular/cli
  2. in folder .devcontainer : A devcontainer.json file that have “appPort”: [4200], “postCreateCommand”: “npm i && echo ‘you should run npm start'”,
  3. Modified package.json, “start”: “ng serve –host 0.0.0.0”, – in order to publish the port.

 

Now I can open from VSCode with Remote Extension  – and use there without installing on my PC anything but VSCode + Docker + Remote Extension

You can find the sources at https://github.com/ignatandrei/InfoValutar/commit/2aba3e9ed667d03728916a784a969e28b1026ec6

Adding Angular to WebAPI site-part 41

First, I want to add an index.html file – to see the result.

For this, I add to the startup:

public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
         //more code
app.UseDefaultFiles();
app.UseStaticFiles();

I also add an index.html into a wwwroot folder ( also created into the root)

You can see the modifications here: https://github.com/ignatandrei/InfoValutar/commit/4deb32528aee7b667f22a38c8e96899052cbfd4c

Now I want to compile the Angular application and add the index html generated by Angular to the wwwroot site

I create a powershell ( easy for me , because you can install dotnet tool powershell )

echo “starting build angular”
cd InfovalutarWebAng
npm i
ng build  –prod –build-optimizer
cd ..

$source= “InfovalutarWebAng/dist/InfovalutarWebAng/”
$dest= “InfoValutarWebAPI/wwwroot/”
echo “delete files”
Get-ChildItem -Path $dest -Include *.* -File -Recurse | foreach { $_.Delete()}
echo “copy files”
Get-ChildItem -Path $source | Copy-Item -Destination $dest

and put in Azure Devops pipelines

 
– powershell: |
       cd InfoValutar
       .\copyAng.ps1
   displayName: copy angular site to web api

Now commit in GitHub (https://github.com/ignatandrei/InfoValutar/comAmit/5208036a4cb1da719692966880236dc33b1b2e74 )and waiting to see if it works

The error is : “The term ‘ng’ is not recognized as the name of a cmdlet, function, script file, or

The term ‘ng’ is not recognized as the name of a cmdlet, function, script file, or operable program. Check the

spelling of the name, or if a path was included, verify that the path is correct and try again.

Adding

npm i -g @angular/cli

It works!

Web site–Angular- part 40

Creating  Angular app

ng new InfovalutarWebAng

Then customizing to add angular material

ng add @angular/material

and https://material.angular.io/guide/schematics#navigation-schematic 

ng generate @angular/material:nav banks

Delete everyhing in app component ( without

<div class=”content” role=”main”>

add

<app-banks></app-banks>

)

See if it works. If yes, move the router outlet and footer to app-banks.

Now, I want to solve the CD and to run in a container for the people that do not have Angular installed  – or do not want to.

Remember how it was for .NET Core , that I need just an Internet Connection , Docker and VSCode  ? http://msprogrammer.serviciipeweb.ro/2019/12/04/debug-application-under-vscode-and-dockerpart-22/ 

Now it does not work – cannot load application because some bug in .NET Core . Why ? I have been going to .NET Core 3.1 and not updated the docker file…

ARG DOTNETCORE_VERSION=3.1

Now it loads – however, saying that the methid has not an implementation. Solving later.

Now going to

https://github.com/microsoft/vscode-dev-containers

to find same for Angular…

After some attempts, I have this files into .devcontainer

devcontainer.json

// For format details, see https://aka.ms/vscode-remote/devcontainer.json or the definition README at
// https://github.com/microsoft/vscode-dev-containers/tree/master/containers/alpine-3.10-git
{
     “name”: “Angular”,
     “dockerFile”: “DockerfileAng”,   
     // Uncomment the next line to have VS Code connect as an existing non-root user in the container.
     // On Linux, by default, the container user’s UID/GID will be updated to match your local user. See
     // https://aka.ms/vscode-remote/containers/non-root for details on adding a non-root user if none exist.
     // “remoteUser”: “vscode”,

    // Uncomment the next line if you will use a ptrace-based debugger like C++, Go, and Rust
     // “runArgs”: [ “–cap-add=SYS_PTRACE”, “–security-opt”, “seccomp=unconfined” ],
    
     // Use ‘settings’ to set *default* container specific settings.json values on container create.
     // You can edit these settings after create using File > Preferences > Settings > Remote.
     “settings”: {
         // This dev container does include /bin/bash if you prefer to use it instead of ash.
         “terminal.integrated.shell.linux”: “/bin/ash”
     },

    // Use ‘appPort’ to create a container with published ports. If the port isn’t working, be sure
     // your server accepts connections from all interfaces (0.0.0.0 or ‘*’), not just localhost.
     // “appPort”: [],

    // Uncomment the next line to run commands after the container is created.
     // “postCreateCommand”: “uname -a”,

    // Add the IDs of extensions you want installed when the container is created in the array
     // below. Note that some extensions may not work in Alpine Linux due to glibc dependencies
     // in native code inside the extension. See https://aka.ms/vscode-remote/linux for details.
     “extensions”: [],
     “postCreateCommand”: “cd InfovalutarWebAng && npm i”,
     “overrideCommand”:true,
     “shutdownAction”: “stopContainer”
}

and DockerFileAng

#————————————————————————————————————-
# Copyright (c) Microsoft Corporation. All rights reserved.
# Licensed under the MIT License. See https://go.microsoft.com/fwlink/?linkid=2090316 for license information.
#————————————————————————————————————-
FROM alpine:3.10

# This Dockerfile adds a non-root user with sudo access. Use the “remoteUser”
# property in devcontainer.json to use it. On Linux, the container user’s GID/UIDs
# will be updated to match your local UID/GID (when using the dockerFile property).
# See https://aka.ms/vscode-remote/containers/non-root-user for details.
ARG USERNAME=vscode
ARG USER_UID=1000
ARG USER_GID=$USER_UID

# Install git, bash, dependencies, and add a non-root user
RUN apk add –no-cache git bash libgcc libstdc++ \
     #
     # Create a non-root user to use if preferred – see https://aka.ms/vscode-remote/containers/non-root-user.
     && addgroup -g $USER_GID $USERNAME \
     && adduser -S -s /bin/bash -u $USER_UID -G $USERNAME $USERNAME \
     # [Optional] Add sudo support for the non-root user
     && apk add –no-cache sudo \
     && echo $USERNAME ALL=\(root\) NOPASSWD:ALL > /etc/sudoers.d/$USERNAME\
     && chmod 0440 /etc/sudoers.d/$USERNAME

RUN apk add –update npm
RUN npm install -g @angular/cli

Now I can run in remote container and ng serve from remote container ( do not forget to be in Angular folder and forward port from VSCode !)

Angular Pipe to match and select words in a text

I needed two times the same pipe to match and select words in a text .

I maybe put later in a npm package, but until then , here it is

import { PipeTransform, Pipe } from '@angular/core';

@Pipe({ name: 'highlight' })
export class HighlightPipe implements PipeTransform {
  transform(text: string, search): string {
     // window.alert(text );
     //console.log(search );
    if (search && text) {
      let pattern = search.replace(/[\-\[\]\/\{\}\(\)\*\+\?\.\\\^\$\|]/g, '\\$&');
      pattern = pattern.split(' ').filter((t) => {
        return t.length > 0;
      }).join('|');
      const regex = new RegExp(pattern, 'gi');

      return text.replace(regex, (match) => `<b><i><strong>${match}</strong></i></b>`);
    } else {
      return text;
    }
  }
}

 

You can use by performing 3 steps:

  1.  Creating a highPipe.ts and copying the code above
  2. In File : app.module.ts , at @NgModule, ad declarations  add  HighlightPipe ( also,
    import {HighlightPipe} from ‘./highPipe’; )
  3. <span [innerHTML]=”name  | highlight: selectedText”></span>

Things to improve:

1. The regex should be a parameter ( with the default value seen below)

2. How to select the word should be a parameter also ( here is <b><i> )

 

BingoMeetings–4 steps to run in Docker both WebAPI and Site-part 22

Bingo is a small project, written in TypeScript , and developed with Alexandru Badita in launch break (one hour - more or less). You can find sources at https://github.com/alexandru360/PresentationBingoCards/ . Those are my blog posts for Bingo : ( scroll below for the post)
NrLink
1Create meeting
2Create Tests
3Finalize Create meeting
4Sharing meeting
5Keep Score
6Add obsolete
7Finalizing obsolete
8End meeting
9Dockerize tests
10Azure CI tests
11Yarn workspaces
12CLI
13Intermezzo - CLI improvements
14typescript compile run with node
15NestJS ,swagger and create a meeting
16Finalizing API
17Intermezzo - jest vs jasmine error
18Refactor WebAPI and test service
19Heroku Deploy NestJs
20Angular
21Deploy Angular to GitHub
22WebAPI and Web
23Documentation
24Documentation of the code
25Conclusions

(Now the actual blog post for Bingo Meetings project)

Now what I want to achieve is to run the WebAPI and Angular Site in docker. For this, we should compile the Angular site and copy into the WebAPI. Also, WebAPI should serve the index.html file generated by the Angular.

Those are the 4 steps:

1. Ensure that  the Angular routes and WebAPI routes should be different Solution: this is easy achieved by having /api prepended to the WebAPI routes)

2. The WebAPI should be configured as to build to different configurations: for our purpose, calling  root ( /). For docs ( https://alexandru360.github.io/PresentationBingoCards/ ) it should call official deploy http://bingo-meeting-api.herokuapp.com/api/ 

Solution: read about environment https://angular.io/guide/build . I have made a new environment dockerbuild  Rememeber to create a new environment.ts  + a new entry in angular.json to build this configuration + an entry in package.json to build it . Then modify the service to use environment( see the modifications at https://github.com/alexandru360/PresentationBingoCards/commit/6dafb0c0b005d46bc426d128f9caf5d53e039dfa ).

3. For NestJs to serve html file , add nest-middlewares/serve-static  , then add the following code in the appropiate places:

ServeStaticModule

.forRoot({

rootPath: join(__dirname, ‘..’, ‘dist’,’bingo-cards-ui’),

})],

ServeStaticMiddleware.configure(‘/test’ );

consumer.apply(ServeStaticMiddleware).forRoutes(‘/test’);

( see https://github.com/alexandru360/PresentationBingoCards/commit/6dafb0c0b005d46bc426d128f9caf5d53e039dfa )

4. In the docker compile the Angular , then copy the files into WebAPI folder, then run the WebAPI site . See https://github.com/alexandru360/PresentationBingoCards/blob/master/dockerize/docker_runwebapiweb.txt and https://github.com/alexandru360/PresentationBingoCards/blob/master/dockerize/build_RunWebApiWeb.bat

Andrei Ignat weekly software news(mostly .NET)

* indicates required

Please select all the ways you would like to hear from me:

You can unsubscribe at any time by clicking the link in the footer of our emails. For information about our privacy practices, please visit our website.

We use Mailchimp as our marketing platform. By clicking below to subscribe, you acknowledge that your information will be transferred to Mailchimp for processing. Learn more about Mailchimp's privacy practices here.