Category Archives: javascript

Symbols in JS, and why

March 11, 2020javascriptadmin

ref –

https://www.keithcirkel.co.uk/metaprogramming-in-es6-symbols/
https://flaviocopes.com/javascript-symbols/
https://medium.com/intrinsic/javascript-symbols-but-why-6b02768f4a5c
https://javascript.info/symbol

Basics info

A symbol represents a unique identifier.
A value of this type can be created using Symbol():

1 2	// id is a new symbol let id = Symbol();

Upon creation, we can give the symbol a description (also called a symbol name) , mostly useful for debugging purposes:

1 2	// id is a symbol with the description "id" let id = Symbol("id");

Symbols are guaranteed to be unique. Even if we create many symbols with the same description, they are different values. The description is just a label that doesn’t affect anything.

For instance, here are two symbols with the same description – they are not equal:

let id1 = Symbol("id");

let id2 = Symbol("id");

alert(id1 == id2); // false

…But if we used a string “id” instead of a symbol for the same purpose, then there would be a conflict:

let user = { name: "John" };

// Our script uses "id" property

user.id = "Our id value";

// ...Another script also wants "id" for its purposes...

user.id = "Their id value"

// Boom! overwritten by another script!

“Hidden” properties

Symbols allow us to create hidden properties of an object, that no other part of code can accidentally access or overwrite.

For instance, if we’re working with user objects, that belong to third-party code. We’d like to add identifiers to them.

Let’s use a symbol key for it:

let user = {

};

let id = Symbol("id"); // key

user[id] = 1; // use key to assign value

alert( user[id] ); // we can access the value using the symbol as the key

What’s the benefit of using Symbol(“id”) over a string “id”?

As user objects belong to another code, and that code also works with them, we shouldn’t just add any fields to it. That’s unsafe. Notice the public use of string “name” to change user object value.

1	user["name"] = "grover"

But a symbol cannot be accessed accidentally, the third-party code (hidden away in some module) cannot be accessed by us.

Also, imagine that another script wants to have its own identifier inside ‘user’, for its own purposes. That may be another JavaScript library so that the scripts are completely unaware of each other.

Then that script can create its own Symbol(“id”), like this:

let id = Symbol("id"); // another script's id

user[id] = "another script's id value"; // use that symbol to put in value

Now, there will be no conflict between the original and other id values, because symbols are always different, even if they have the same name.

…But if we used a string “id” instead of a symbol for the same purpose, then there would be a conflict:

let user = { name: "John" };

// Our script uses "id" property

user.id = "Our id value";

// ...Another script also wants "id" for its purposes...

user.id = "Their id value"

// Boom! overwritten by another script!

Symbols in a literal

If we want to use a symbol in an object literal {…}, we need square brackets around it.

Like this:

let id = Symbol("id");

let user = {

[id]: 123 // not "id: 123"

};

That’s because we need the value from the variable id as the key, not the string “id”.

Symbols are skipped by for…in

For…in iterates through all the indexes of an object/array.
However, symbolic properties do not participate in for..in loop.

For instance:

let id = Symbol("id");

let user = {

age: 30,

[id]: 123

};

for (let key in user) alert(key); // name, age (no symbols)

// the direct access by the symbol works

alert( "Direct: " + user[id] );

Object.keys(user) also ignores them.

That’s a part of the general “hiding symbolic properties” principle.

If another script or a library loops over our object, it won’t unexpectedly access a symbolic property.

In contrast, Object.assign copies both string and symbol properties:

let id = Symbol("id");

let user = {

[id]: 123

};

let clone = Object.assign({}, user);

alert( clone[id] ); // 123

There’s no paradox here. That’s by design. The idea is that when we clone an object or merge objects, we usually want all properties to be copied (including symbols like id).

Other Stuff

object keys could only be strings

If we ever attempt to use a non-string value as a key for an object, the value will be coerced to a string. We can see this feature here:

const obj = {};

obj.foo = 'foo';

obj['bar'] = 'bar';

obj[2] = 2;

obj[{}] = 'someobj';

console.log(obj);

// { '2': 2, foo: 'foo', bar: 'bar',

'[object Object]': 'someobj' }

A symbol is a primitive which cannot be recreated

They are useful in situations where disparate libraries want to add properties to objects without the risk of having name collisions.

For example:

function lib1tag(obj) {

obj.id = 42;

}

function lib2tag(obj) {

obj.id = 369;

}

By making use of symbols, each library can generate their required symbols upon instantiation. Then the symbols can be checked on objects, and set to objects, whenever an object is encountered.

const library1property = Symbol('lib1');

function lib1tag(obj) {

obj[library1property] = 42;

}

const library2property = Symbol('lib2');

function lib2tag(obj) {

obj[library2property] = 369;

}

For this reason, it would seem that symbols do benefit JavaScript.
However, you may be wondering, why can’t each library simply generate a random string, or use a specially namespaced string, upon instantiation?

const library1property = uuid(); // random approach

function lib1tag(obj) {

obj[library1property] = 42;

}

const library2property = 'LIB2-NAMESPACE-id'; // namespaced approach

function lib2tag(obj) {

obj[library2property] = 369;

}

Well, you’d be right. This approach is actually pretty similar to the approach with symbols. Unless two libraries would choose to use the same property name, then there wouldn’t be a risk of overlap.

Object.keys() does not return symbols

Here is an example of using a symbol as a key within an object:

const obj = {}; // create literal object

const sym = Symbol(); // create symbol sym

obj[sym] = 'foo'; // use symbol sym as property

obj.bar = 'bar'; // use bar as property

console.log(obj); // { bar: 'bar' } notice here only bar shows

console.log(sym in obj); // true

console.log(obj[sym]); // foo, specifically using the symbol will show the value

console.log(Object.keys(obj)); // ['bar'], however, you do not see symbols as propertyes in keys

Notice how they are not returned in the result of Object.keys(). This is, again, for the purpose of backward compatibility. Old code isn’t aware of symbols and so this result shouldn’t be returned from the ancient Object.keys() method.

function tryToAddPrivate(o) {

o[Symbol('Pseudo Private')] = 42;

}

const obj = { prop: 'hello' }; // create our literal object

tryToAddPrivate(obj); // insert into function so we can add our symbol

console.log(Reflect.ownKeys(obj)); // [ 'prop', Symbol(Pseudo Private) ]

console.log(obj[Reflect.ownKeys(obj)[1]]); // 42

In addition to that, Symbols do not show up on an Object using for in, for of or Object.getOwnPropertyNames – the only way to get the Symbols within an Object is Object.getOwnPropertySymbols:

var fooSym = Symbol('foo');

var myObj = {};

myObj['foo'] = 'bar';

myObj[fooSym] = 'baz';

Object.keys(myObj); // -> [ 'foo' ]

Object.getOwnPropertyNames(myObj); // -> [ 'foo' ]

Object.getOwnPropertySymbols(myObj); // -> [ Symbol(foo) ]

assert(Object.getOwnPropertySymbols(myObj)[0] === fooSym);

This means Symbols give a whole new sense of purpose to Objects – they provide a kind of hidden under layer to Objects – not iterable over, not fetched using the already existing Reflection tools and guaranteed not to conflict with other properties in the object!

Symbols are completely unique…

By default, each new Symbol has a completely unique value. If you create a symbol (var mysym = Symbol()) it creates a completely new value inside the JavaScript engine. If you don’t have the reference for the Symbol, you just can’t use it.
This also means two symbols will never equal the same value, even if they have the same description.

Well, there’s a small caveat to that – as there is also another way to make Symbols that can be easily fetched and re-used: Symbol.for(). This method creates a Symbol in a “global Symbol registry”. Small aside: this registry is also cross-realm, meaning a Symbol from an iframe or service worker will be the same as one generated from your existing frame:

var myObj = {}; // literal object

var fooSym = Symbol.for('foo'); // symbol 'foo'

var otherSym = Symbol.for('foo'); // symbol 'foo'

// Since Symbol 'foo' was already declared and unique, declaring another gets you that same Symbol.

// Now, fooSym and otherSym references the same Symbol

myObj[fooSym] = 'baz'; // Symbol('foo') has value 'baz'

myObj[otherSym] = 'bing'; // Symbol('foo') has value 'bing'

// use symbols for values

console.log(myObj[fooSym]) // bing

console.log(myObj[otherSym]) // bing

console.log(fooSym === otherSym); // true

console.log(myObj[fooSym] === 'bing'); // true

console.log(myObj[otherSym] === 'bing'); // true

Cross Realm

Problem:

// Cross-Realm

iframe = document.createElement('iframe');

iframe.src = String(window.location);

document.body.appendChild(iframe);

assert.notEqual(iframe.contentWindow.Symbol, Symbol);

assert(iframe.contentWindow.Symbol.for('foo') === Symbol.for('foo'));

// Some symbols are created

const symbol1 = Symbol.for('Geeks');

const symbol2 = Symbol.for(123);

const symbol3 = Symbol.for("gfg");

const symbol4 = Symbol.for('789');

// Getting the same symbols if found

// in the global symbol registry

// otherwise a new created and returned

console.log(symbol1);

console.log(symbol2);

console.log(symbol3);

console.log(symbol4);

main usage

Macros
As a unique value where you’d probably normally use a String or Integer:
Let’s assume you have a logging library, which includes multiple log levels such as logger.levels.DEBUG, logger.levels.INFO, logger.levels.WARN and so on. In ES5 code you’d like make these Strings (so logger.levels.DEBUG === ‘debug’), or numbers (logger.levels.DEBUG === 10). Both of these aren’t ideal as those values aren’t unique values, but Symbols are! So logger.levels simply becomes:

log.levels = {

DEBUG: Symbol('debug'),

INFO: Symbol('info'),

WARN: Symbol('warn'),

};

log(log.levels.DEBUG, 'debug message');

log(log.levels.INFO, 'info message');

A place to put metadata values in an Object

You could also use them to store custom metadata properties that are secondary to the actual Object. Think of this as an extra layer of non-enumerability (after all, non-enumerable keys still come up in Object.getOwnProperties). Let’s take our trusty Collection class and add a size reference, which is hidden behind the scenes as a Symbol (just remember that Symbols are not private – and you can – and should – only use them in for stuff you don’t mind being altered by the rest of the app):

var size = Symbol('size');

class Collection {

constructor() {

this[size] = 0;

}

add(item) {

this[this[size]] = item;

this[size]++;

}

static sizeOf(instance) {

return instance[size];

}

var x = new Collection();

assert(Collection.sizeOf(x) === 0);

x.add('foo');

assert(Collection.sizeOf(x) === 1);

assert.deepEqual(Object.keys(x), ['0']);

assert.deepEqual(Object.getOwnPropertyNames(x), ['0']);

assert.deepEqual(Object.getOwnPropertySymbols(x), [size]);

WeakSet and Set in JS

March 9, 2020javascriptadmin

Generally, references to objects are strongly held in JavaScript, meaning that as long you have a reference to the object, it won’t be garbage-collected.

const ref = { x: 42, y: 51 };

// As long as you have access to `ref` (or any other reference to the

// same object), the object won’t be garbage-collected.

Here, the literal object has retain count of 1 because ref is pointing to it.

A Set can hold characters, numbers, symbols, and objects.

const ws = new Set();

let ref = { x: 42, y: 51 }; // literal object has retain count 1 because 'ref' is pointing to it

ws.add(ref); // now literal object has retain count 2

ws.add('a');

// both Set and ref is pointing to the literal object {}

Primitive values are not referenced, rather it literal values.
If we were to add an object, it will be strongly referenced.
That’s why for Sets, we can add them all. It goes with the meaning of Set, which is strongly hold on to the values/objects.

Let’s test this with some code.

Set

<head>

</head>

<body>

</body>

//const ws = new WeakSet();

const ws = new Set();

let objectA = {}; // literal object A

let objectB = {}; // literal object B

ws.add(objectA);

ws.add(objectB);

objectB = null;

document.querySelector("#haha").onclick = function () {

console.log(ws);

}

</script>

</html>

Double click on the index.html to run it. Click the button and you’ll see the Set’s data being displayed. The Set has a weak reference to the objects we declared. Since our output is currently displayed, there is a strong reference to the Set data structure. In order to demonstrate our Set and weak Set, we must get rid of any external references.

et’s clear the console so that we let the JS engine know to get rid of this string reference.

Once the console is empty, let’s click on the Performance tab. This way, the garbage collector will collect any JS objects with zero references on them.

Now go back to the console, click on the button, and look at the Set’s data output. There are still two objects in there. That is because Set has a strong reference to our objects. These objects still has a retain count of 1. Thus, when the garbage collector saw this, it didn’t garbage collect.

Set
0: value: {}
1: value: {}
__proto__: Set

When we point objectB away to null, the literal object decreases its retain count to 1. It is still pointed to by Set. Thus, when the garbage collector comes around, it sees that the object is still valid at 1. Thus, it will not collect.

WeakSet

Currently, WeakMaps and WeakSets are the only way to kind-of-weakly reference an object in JavaScript. When it references an object, it does not increment an object’s retain count. Thus, adding an object as a key to a WeakMap or WeakSet doesn’t prevent it from being garbage-collected.

Now let’s replace our Set with a WeakSet.

const ws = new WeakSet();

...

</script>

Run the index.html and clear the console of any output. Click on Performance tan and click on the garbage icon to run the garbage collector.

Because our Weakset weakly retains our literal object B, and reference B already pointed it away to null, the retain count lowers to 0. Hence when our garbage collector runs, it will see that literal object B’s retain count is 0, and collects it.

Push the button again and we see that our Set only has literal Object A.

WeakSet
0: value: {}
__proto__: WeakSet

Due to this characteristic, WeakSet only makes sense if it is working with objects. Thus, they only take objects. If you were to try to set a primitive value, it will give you an error.

Because WeakMpa’s reference does not increase the retain count, when we re-point our objectB reference to null, the literal object decreases from 1 to 0. Thus, when the garbage collector comes, it’ll see that this object is 0 and collects it.

this context (strict, non-strict, arrow)

February 24, 2020javascriptadmin

es5

In non-strict environment, the ‘this’ keyword is bound to the context that is calling it
Context refers to the object to which a function belongs.

// es 5

function Greetings() {

// When it is inside of an object’s method, the context is the instance because it is the instance that is calling the method.

this.print = function() {

console.log('print', this); // instance Greetings {...} because the instance is calling print

}

Yet when ‘this’ is inside of a function:

either stand-alone function
or within another method

it will always refer to the window/global object

// es 5

function Greetings() {

this.print = function() { // method

console.log('print', this); // instance Greetings {...} because the instance is calling print

function inner() { // within another method

// console.log('inner', this) // global

}

inner();

}

stand-alone

function Greetings() {

console.log('standalone -----> ', this); // global

function haha() {

console.log('standalone haha ------> ', this); // global

}

haha();

}

Greetings();

…within method

var obj = {

hoho: function() { // method

//console.log(this); // obj

function hehe() { // within method

//console.log(this); // global

function haha() { // within method

console.log(this); // global

}

haha();

}

hehe();

}

obj.hoho();

Use strict

However, if you were to use strict mode, ‘this’ inside functions that are standalone, or within a method, would reference undefined

'use strict'

function Greetings() {

console.log('standalone -----> ', this); // undefined

}

Greetings();

standalone functions within functions.
functions within methods

'use strict'

function Greetings() {

function haha() {

console.log('standalone haha ------> ', this); // due to strict: undefined

}

haha();

return {

print : function() { // method

console.log('print -->', this); // calling instance

function hehe () {

console.log('hehe', this); // undefined

}

hehe();

}

let g = new Greetings(); // create instance

g.print();

es6

With arrow functions, ‘this’ is lexically bound. It means that it uses ‘this’ from the code that contains the arrow function. In other words, it always uses ‘this’ from the parent scope.

class Greetings

In the class Greetings, for the constructor function’s this, we see that the parent scope’s ‘this’ is class Greetings. Thus, the ‘this’ references the instance Greetings.

In the method ‘print’, the parent scope is the constructor function. The constructor function’s ‘this’ is the instance (Greetings).

In the private method ‘haha’, the parent scope is also the constructor function. The constructor function’s ‘this’ is the instance (Greetings).

in setTimeout, the callback function’s ‘this’ parent scope is the private function haha. As mentioned above, private function haha’s context is the instance (Greetings).

In the next example, we are executing a callback. We are using an es5 function. es5 function ‘this’ references the object that is calling it. In our case, the setTimeout’s context is executing this callback function. Thus, ‘this’ references a Timeout instance.

Finally, we have the method ‘print2’. Since its an arrow function, its parent scope is class Greetings. Hence its ‘this’ references the instance (Greetings).

class Greetings {

constructor() {

console.log('Greetings', `constructor`);

console.log('Greetings constructor', this); // instance

var name = "default";

// public

this.print = () => {

console.log('Greetings:print -- ', this); // instance

haha();

}

// private

const haha = () => {

console.log('Greetings', 'private function haha')

console.log(this) // instance

// notice use of es6 arrow function

setTimeout(() => {

console.log('Greetings:haha', 'using es6 arrow function')

console.log(this); // instance

console.log(`hello ${name}`); // 'hello default'

}, 2000);

}

// callback

// notice use of es5 function

setTimeout(function() {

console.log('Greetings', 'using es5 function')

console.log(this); // Timeout

console.log(`hello ${name}`); // 'hello default'

}, 2000);

}

// public

print2 = () => {

console.log('Greetings:print2 -- ', this); // instance

}

let f = new Greetings();

f.print2();

f.print();

Literal Object bracket is NOT lexical scope

Our arrow function uses ‘this’ from the lexical scope that contains the arrow function. In the case of arrow function x, bar is the literal object that contains our arrow function.

It is NOT a lexical scope

Hence, bar’s this comes from the lexical scope that is the global scope. Global scope’s this is {}. Hence that is what the ‘this’ is inside of arrow function x.

console.log('global', this); // {}

let bar = () => {

console.log("--- obj calling function bar --- ")

console.log(this) // {}

var x = () => {

console.log(" --- in arrow function --- ")

console.log(this) // {}

};

return x;

}

let x = bar();

x();

In this example, we have a literal object. Then we have es5 function bar. The ‘this’ is bound to the calling context, which is literal obj. That is the ‘this’ inside function bar is ‘obj’.

Then, inside function bar, we have es6 arrow function. Arrow function says ‘this’ is bound to its lexical parent. Hence, since its lexical parent is bar’s this, it references literal obj. Thus that’s why in arrow function x, the ‘this’ also references ‘obj’.

var obj = {

// function reference 'bar'

bar: function() {

console.log("--- obj calling function bar --- ")

console.log(this) // references the outer literal object 'obj'

var x = () => {

console.log(" --- in arrow function --- ")

console.log(this) // references the outer literal object 'obj'

};

// returns a reference to a function

return x;

}

}; // object literal

let x = obj.bar();

x();

output:

— obj calling function bar —
{ bar: [Function: bar] }
— in arrow function —
{ bar: [Function: bar] }

ref – https://stackoverflow.com/questions/31095710/methods-in-es6-objects-using-arrow-functions

Our arrow function uses ‘this’ from the code that contains the arrow function The containing code is the literal object.
Since the literal object itself has no ‘this’, we cannot say it will log profile. Instead, the ‘this’ of literal object ‘profile’ is the global scope. And ‘this’ at global scope is {}

Lots of times, I would mistakenly believe that it should be literal object ‘profile’. That would be true in es5 function because it binds ‘this’ to the calling object as shown in the above example.

However, since we’re dealing with es6 arrow function, we bind ‘this’ to the parent scope’s this. NOT the parent object.

Hence, we cannot bind it to the literal object profile. We can only bind it to profile’s ‘this’.

Literal objects do not have ‘this’ context. So profile’s this defaults to global {} because literal object profile is at the global scope.

// es6

// One of the biggest points of the new function syntax was that it treats this differently.

// It's defined by the lexical environment in which the function was created,

// which means the 'this' value where you create the profile variable will be the 'this' value of the function.

// In other words, it won't be referencing the profile object.

const profile = { // 'this' context of profile is outer 'this'

getName: () => {

console.log(this); // {}, it is actually 'this' at the global scope

return this.name;

}

};

click handlers

<button

onclick =

"test(event, result => {

console.log(this); // the DOM element button

})"

test

</button>

means that when the element is clicked, the function ‘test’ is fired. But this function test is bound as an event handler, so ‘this’ is set to the reference to the button DOM element.

In test function’s definition, the this is the global obj, as it is when any function that’s not an event handler or an object method is.

1
2
3
4
5
6

  <script>
    function test(evt, cb) {
      console.log(this); // global (window)
      cb('haha');
    }
  </script>

Deep Copy a JS object/array using recrusion

February 15, 2020javascriptadmin

Check if its of type ‘object’

Arrays and objects are both of type “Object”, so if the inObject is neither an array nor object, we exit because we only deep copy objects and arrays.

1
2
3
4
5
6
7
8
9

const myDeepCopy = inObject => {
    console.log('-- myDeepCopy --', inObject)

    if (typeof inObject !== "object" || inObject === null) {
        return inObject;
    }
...
...
}

Initialize to [] or {} depending on whether its an array or object

Initialization Phase. If the incoming object is an array, we initialize to an empty array [].
If its an object, we initialize our source to empty literal object {}

1
2
3
4
5
6
7
8
9

    let outObject;

    if (Array.isArray(inObject)) {
        console.log('incoming object is an array!')
        outObject = []
    } else {
        console.log('incoming object is an object!')
        outObject = {};
    }

iterate over the index/key

Now that we have a correctly initialized empty data structure, we go on to doing the copying.
In JS, using for (key in obj) works for both object/arrays.

If its an array, each key is the element index
If its an object, then its key/value as is

1
2
3
4
5
6
7
8
9

    for (key in inObject) {
        console.log('key', key)
        console.log('value', inObject[key])

        let value = inObject[key]

        // typically, we'd do this
        outObject[key] = value
   }

Hence, say we create an array pass it in. Since all elements in the array are primitives, we do normal copying via assignment operator (=)

-- myDeepCopy -- [ 'a', 'b', 'c', 'd', 'e' ] incoming object is an array! key 0 value a key 1 value b key 2 value c key 3 value d key 4 value e outObject [ 'a', 'b', 'c', 'd', 'e' ]

But! there’s a problem

If one of the values is an object, we’d be doing a shallow copy because the assignment operator (=) simply points the array[i] or obj[i] reference to the object.

1

outObject[key] = value  // re-pointing our reference

This means we’re simply just pointing our outObject[key] to the same object value (inObject[key]) is pointing to. Hence, we dont’ have our own copy.
Let’s look at a test case here:

1
2
3
4
5
6
7
8
9
10
11

let obj = {
    name: 'ricky',
    age: 40,
    luckyNumbers: [6, 8]
}

let destObj = myDeepCopy(obj)
obj.luckyNumbers[0] = 8 // change first element to 8

console.log('src object', obj)
console.log('destination obj', destObj)

In our test, we have our src obj change its array luckyNumbers. However, we see the same change in our destination object. This proves that the two arrays’ luckyNumbers reference are pointing to the same array. This is an example of shallow copy.

-- myDeepCopy -- { name: 'ricky', age: 40, luckyNumbers: [ 6, 8 ] } incoming object is an object! key name value ricky key age value 40 key luckyNumbers value [ 6, 8 ] outObject { name: 'ricky', age: 40, luckyNumbers: [ 6, 8 ] } src object { name: 'ricky', age: 40, luckyNumbers: [ 8, 8 ] } destination obj { name: 'ricky', age: 40, luckyNumbers: [ 8, 8 ] }

In order to make our own copy, we use recursion and let our ‘Initialization Phase’
create the deep initial object first, then copy over the primitives one by one.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

const myDeepCopy = inObject => {
    if (typeof inObject !== "object" || inObject === null) {
        return inObject;
    }

    let outObject;
    if (Array.isArray(inObject)) {
        outObject = []
    } else {
        outObject = {};
    }

if (typeof value === 'object' && value !== null) {
    outObject[key] = myDeepCopy(value) // use recursion to do deep copy if its an objs/arrays
} else {
    outObject[key]= value // copy over primitives
}
...
...

where recursion executes myDeepCopy with array luckyNumbers [6, 8].
Then in that myDeepCopy, we allocate our own array to use during the Initialization Phase. We don’t want to share with others

1
2
3
4
5

if (Array.isArray(inObject)) {
        outObject = []
    } else {
        outObject = {};
    }

Now when you run your test code, you’ll see that changes do the source won’t affect the destination:

-- myDeepCopy -- { name: 'ricky', age: 40, luckyNumbers: [ 6, 8 ] } incoming object is an object! key name value ricky key age value 40 key luckyNumbers value [ 6, 8 ] -- myDeepCopy -- [ 6, 8 ] incoming object is an array! key 0 value 6 key 1 value 8 outObject [ 6, 8 ] outObject { name: 'ricky', age: 40, luckyNumbers: [ 6, 8 ] } src object { name: 'ricky', age: 40, luckyNumbers: [ 8, 8 ] } destination obj { name: 'ricky', age: 40, luckyNumbers: [ 6, 8 ] }

Full Source

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66

// given an array or object
const myDeepCopy = inObject => {

    console.log('-- myDeepCopy --', inObject)


    // array and objects are both of type "Object"
    // so if the inObject is neither an array nor object,
    // we exit because we only deep copy objects and arrays
    if (typeof inObject !== "object" || inObject === null) {
        return inObject;
    }

    // Initialization Phase. If incoming object is an array, we initialize to empty array []
    // if its an object, we initialize our source to empty literal object {}
    let outObject;

    if (Array.isArray(inObject)) {
        console.log('incoming object is an array!')
        outObject = []
    } else {
        console.log('incoming object is an object!')
        outObject = {};
    }

    // if its an array, each key is the element index
    // if its an object, then its key/value as is
    for (key in inObject) {
        console.log('key', key)
        console.log('value', inObject[key])

        let value = inObject[key]

        // typically, we'd do this
        //outObject[key] = value

        // But! there's a problem
        // if value is an object, we're doing a shallow copy here. Which means we're simply just pointing our
        // outObject[key] to the same object inObject[key] is pointing to. Hence, we don't have our own copy.

        // in order to make our own copy, we use recursion and let our 'Initialization Phase'
        // create the deep initial object first

        // check if value is object, is referencing valid data
        if (typeof value === 'object' && value !== null) {
            outObject[key] = myDeepCopy(value) // if objects, we must deep copy and allocate our own objs
        } else {
            outObject[key]= value // primitves just copy like so
        }
    }

    console.log('outObject', outObject)
    return outObject
}

let obj = {
    name: 'ricky',
    age: 40,
    luckyNumbers: [6, 8]
}

let destObj = myDeepCopy(obj)
obj.luckyNumbers[0] = 8

console.log('src object', obj)
console.log('destination obj', destObj)

DNY client (12 – basic site)

February 10, 2020javascript, Node JS, Reactadmin

dnyNodeAPI-basic-site
npm install to install all node modules
Then, npm run dev to run the server

dny-client-basic-site
npm install to install all node modules
Then, npm run start to run the client

So far we have a basic site with these functionalities:

Create a user

POST on http://localhost:8080/signup
body: JSON.stringify(user)

src/auth/index.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

export const SignUpUser = user => {
    return fetch('http://localhost:8080/signup', {
        method: "POST",
        mode: "cors",
        headers: {
            Accept : "application/json",
            "Content-Type": "application/json",
            'Access-Control-Allow-Origin':'*'
        },
        body: JSON.stringify(user),
    })
    .then(response => {
        return response.json()
    })
    .catch(err => {
        return err
    })
}

src/user/Signup.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

clickSubmit = event => {
        event.preventDefault()
        const { name, email, password } = this.state
        const user = { name, email, password }

        SignUpUser(user)
        .then(data => {
            console.log('data', data)

            if (data.error) {
                this.setState({ error: data.error })
            } else {
                this.setState({
                    name: "",
                    email: "",
                    password: "",
                    error: "",
                    open: true
                })
            }
        })
    }

When the user successfully creates an account, we will show a link to sign in.

Authenticate a user

POST on http://localhost:8080/signin
body: JSON.stringify(user)

We first use the email and password to try to get user user data and a token back, which are both packaged into a object called ‘data’. Once we get the data, we pass it into AuthenticateUser, which will store it via localStorage at property ‘jwt’. Thus, we can always access the value at property ‘jwt’. We get this value, which has properties token and user, which we can use.

src/user/Signup.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

clickSubmit = event => {
        event.preventDefault()
        this.setState({ loading: true })
        const { email, password } = this.state
        const user = { email, password }

        SignInUser(user).then(data => {
            this.setState({loading:false})
            if (data.error) {
                this.setState({ error: data.error })
            } else {
                console.log('Signin.js - let authenticate it')
                console.log('data received is: ', data)
                // 1) authenticate
                AuthenticateUser(data, () => {
                    // 2) redirect to profile page
                    this.setState({ redirectToReferer: true})
                })
            }
        })
    }

Once we get the token and user data successfully into the localStorage, we redirect to the main page.
The main page’s component is Home

Also, we have a Menu for navigation and showing/hiding of links according to authentication.

Menu

Basically, we use IsAuthenticated to read localStorage’s jwt value. If it’s available, we show what we want to show, like the sign-out link, user’s name, id.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

{!IsAuthenticated() && (
            <>
                <li className="nav-item">
                    <Link className="nav-link" style={isActive(history, "/signin")} to="/signin">Sign In</Link>
                </li>
                <li className="nav-item">
                    <Link className="nav-link" style={isActive(history, "/signup")} to="/signup">Sign Up</Link>
                </li>
            </>)}

            {IsAuthenticated() && (
            <>
                <li className="nav-item">
                    <a className="nav-link"
                        style={(isActive(history, "/signout"), {cursor: "pointer" })}
                        onClick={() => SignOutUser( () => history.push('/') )}
                    >
                        Sign Out
                    </a>
                </li>
                <li className="nav-item">
                    <Link
                        className="nav-link"
                        to={`/user/${IsAuthenticated().user._id}`}
                        style={isActive(history, `/user/${IsAuthenticated().user._id}`)}
                    >
                    {`${IsAuthenticated().user.name}'s profile`}
                    </Link>
                </li>
            </>)}

User Profile

GET on http://localhost:8080/user/${userId}

The main idea is that we must give the userId so the backend knows which user to fetch. We also need to give a token so that the backend can authenticate it.

There is a situation where if you’re on someone else’s (say tom’s) profile, and you click on the user profile (john) link in the Menu, the Profile’s component render function will be called first, which will fetch and render tom’s data again. But soon after, your click on john’s profile link will trigger john’s data to be fetched also. Hence, there will two fetches.

Edit user profile

PUT on http://localhost:8080/user/${userId}
body: user

Editing is basically about updating the user on the backend.

1
2
3
4
5
6
7
8
9
10

UpdateUser(userId, token, this.userData).then(data => {
                if (data.error) {
                    this.setState({ error: data.error, loading: false })
                } else {
                    updateLocalStorageUser(data, () => {
                        this.setState({ redirectToProfile: true, loading: false })
                    })

                }
            })

Once we update the user, we must remember to update the localStorage with the latest retrieved user data.

Delete user profile

1
2
3
4
5
6
7
8
9
10
11
12
13

removeUser(userId, token)
        .then(data => {
            if (data.error) {
                console.log(data.error)
            } else {
                // signout user
                // we provide callback for next() in SignOutUser
                SignOutUser( () => console.log('User is deleted')) ;

                // redirect
                this.setState({ redirect: true });
            }
        })

removeUser does a fetch for Delete on http://localhost:8080/user/${userId}
where SignOutUser does a fetch for GET on http://localhost:8080/signout

Here, we tell the backend to clear cookie for this particular client. Cookies are stored per-user on the user’s machine. A cookie is usually just a bit of information. Cookies are usually used for simple user settings colours preferences ect. No sensitive information should ever be stored in a cookie.

View all users

GET on http://localhost:8080/users

DNY client (11 – Profile Photo Display)

February 9, 2020javascript, Node JS, Reactadmin

Server side

First we put in the route

routes/user.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

const express = require('express')
const {
    // other code
    userPhoto,
} = require('../controllers/user')
const { requireSignin } = require("../controllers/auth");

// other code

// photo route
router.get("/user/photo/:userId", userPhoto)

// other code

module.exports = router;

Then we implement the function responder for when the user goes to /user/photo/:userId

Since we already retrieved the user object at function userById, everything is already in req.profile
We simply check for the image data, and then set the content type.

controllers/user.js

1
2
3
4
5
6
7
8
9
10
11
12

exports.userPhoto = (req, res, next) => {

    console.log('content type', req.profile.photo.contentType)
    if (req.profile.photo.data) {
        // sets the format of the image
        res.set("Content-Type", req.profile.photo.contentType);

        // sends the photo data
        return res.send(req.profile.photo.data);
    }
    next();
}

Client Side

we create a photoUrl so that our image control has a src.

src/user/EditProfile.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

    render() {
        const { id, name, email, password, redirectToProfile, error, loading } = this.state

        if (redirectToProfile) {
            return <Redirect to={`/user/${id}`} />
        }

        const photoUrl = data._i`http://localhost:8080/user/photo/${data._id}` : DefaultImage,
        // cache image issue
        return (
            <div className="container">
                <h2 className="mt-5 mb-5">Edit Profile</h2>
                <div
                    className="alert alert-danger"
                    style={{ display: error ? "" : "none" }}
                >
                    {error}
                </div>

                {loading ? (
                    <div className="jumbotron text-center">
                        <h2>Loading...</h2>
                    </div>
                ) : ("")}

                <img src={photoUrl} alt={name} />
                {this.renderEditForm(name, email, password)}
            </div>
        )
    }
}

export default EditProfile

However, there is an issue. The browser cache images and when you try to upload another image, and you come back to this page, the browser will be showing the old image.

In this situation, simply give the latest time and append it to the URL

1
2
3
4
5
6

<img style={{height: "200px", width: 'auto'}}
     className="img-thumbnail"
     alt={user.name}
     src={`http://localhost:8080/user/photo/${user._id}?${new Date().getTime()}`}
     onError={i =>(i.target.src=`${DefaultProfile}`)}
/>

DNY client (9 – Edit Users)

February 7, 2020javascript, Node JS, Reactadmin

We first create our EditProfile component

src/user/EditProfile.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

import React, { Component } from 'react';
import { IsAuthenticated } from '../auth';
import { Redirect } from 'react-router-dom';
import { getUserInfo, UpdateUser } from './apiUser';

class EditProfile extends Component {
  constructor() {
        super()
        this.state = {}
    }

  render() {
        return (
            <div className="container">
                <h2 className="mt-5 mb-5">Edit Profile</h2>
            </div>
        )
    }
}

export default EditProfile

Then, we add a Route to our EditProfile component. Whenever this link is clicked, it hits our EditProfile component.
src/MainRouter.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

...
...
import EditProfile from './user/EditProfile'

const MainRouter = () => (
    <div>
        <Menu />
        <Switch>
            <Route exact path="/" component={Home} />
            <Route exact path="/users" component={Users} />
            <Route exact path="/signup" component={Signup} />
            <Route exact path="/signin" component={Signin} />
            <Route exact path="/user/:userId" component={Profile} />
            <Route exact path="/user/edit/:userId" component={EditProfile} />
        </Switch>
    </div>
)

export default MainRouter;

Make sure we implement UpdateUser fetch operation, which does a PUT operation on the server for a particular user. That way, we can tell the server to update this particular user with this particular data.

Remember that when we give the user data in body, we need to stringify it. The server does not take objects as data. It takes a string.
If you were to send a body, the updateUser function on the server side won’t be triggered and it will be hard to debug. So make sure you always JSON stringify body data.

src/user/apiUser.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

export const UpdateUser = async (userId, token, user) => {
    return await fetch(`http://localhost:8080/user/${userId}`, {
        method: "PUT",
        mode: "cors",
        headers: {
            Accept : "application/json",
            "Content-Type": "application/json",
            Authorization: `Bearer ${token}`,
            'Access-Control-Allow-Origin':'*'
        },
        body: JSON.stringify(user) // remember to json stringify this or else, server side can't receive such data
    })
    .then(response => {
        return response.json()
    })
    .catch(err => {
        return err
    })
}

EditProfile component source

Editing forms is about presenting a html form with textfield controls. We then put our state’s value in the textfield’s value property. Our state has already been updated with the latest value from the server via the initUserID function when the component was loaded.

1
2
3
4
5
6
7
8
9
10
11
12

renderEditForm = (name, email, password) => {
        return (<form>
            <div className="form-group">
                <label className="text-muted">Name</label>
                <input
                    onChange={this.handleChange("name")}
                    type="text"
                    className="form-control"
                    value={name || ""} />
            </div>
...
...

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163

import React, { Component } from 'react';
import { IsAuthenticated } from '../auth';
import { Redirect } from 'react-router-dom';
import { getUserInfo, UpdateUser } from './apiUser';

// 1) get user information from backend based on user id

class EditProfile extends Component {

    constructor() {
        super()
        this.state = {
            redirectToProfile: false,
            password: "",
            email: "",
            name: "",
            id: "",
            error: "",
        }
    }


    handleChange = (name) => (event) => {
        this.setState({ [name] : event.target.value })
    }

    // in our Node API
    // auth.js - router.post('/signup', userSignupValidator, signup)

    clickUpdate = event => {
        event.preventDefault()

        if (this.isValid()) {
            const { name, email, password } = this.state

            const user = {
                name,
                email,
                password: password || undefined
            }

            const userId = this.props.match.params.userId;
            const token = IsAuthenticated().token;

            UpdateUser(userId, token, user).then(data => {
                console.log('clickUpdate', data)

                if (data.error) {
                    this.setState({ error: data.error })
                } else {
                    this.setState({
                    redirectToProfile: true
                    })

                }
            })
        }
    }

    renderEditForm = (name, email, password) => {
        return (<form>
            <div className="form-group">
                <label className="text-muted">Name</label>
                <input
                    onChange={this.handleChange("name")}
                    type="text"
                    className="form-control"
                    value={name || ""} />
            </div>

            <div className="form-group">
                <label className="text-muted">Email</label>
                <input
                    onChange={this.handleChange("email")}
                    type="email"
                    className="form-control"
                    value={email || ""}
                />

            </div>

            <div className="form-group">
                <label className="text-muted">Password</label>
                <input
                    onChange={this.handleChange("password")}
                    type="password "
                    className="form-control"
                    value={password || ""}
                />
            </div>

            <button onClick={this.clickUpdate} className="btn btn-raised btn-primary">Update</button>
        </form>);
    }

    initUserID = userId => {
        let token = IsAuthenticated().token
        getUserInfo(userId, token)
        .then(data => {
            if (data.error) {
                 this.setState({ redirectToSignin: true })
            } else {
                this.setState({
                    id: data._id,
                    name: data.name,
                    email: data.email
                })
            }
        })
    }

    componentDidMount() {
        console.log('user/EditProfile.js', 'componentDidMount');
        const userId = this.props.match.params.userId
        this.initUserID(userId)
    }

    isValid = () => {
        const { name, email, password } = this.state
        if (name.length == 0) {
            this.setState({ error: "name is required"})
            return false
        }

        if (!/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/.test(email)) {
            this.setState({ error: "Email is required"})
            return false
        }

        if (password.length >= 1 && password.length <= 5) {
            this.setState({ error: "Password must be at least 6 characters"})
            return false
        }

        return true;
    }

    render() {
        const { id, name, email, password, redirectToProfile, error } = this.state

        if (redirectToProfile) {
            return <Redirect to={`/user/${id}`} />
        }

        return (
            <div className="container">
                <h2 className="mt-5 mb-5">Edit Profile</h2>
                <div
                    className="alert alert-danger"
                    style={{ display: error ? "" : "none" }}
                >
                {error}
            </div>

                {this.renderEditForm(name, email, password)}
            </div>
        )
    }
}

export default EditProfile

DNY client (8 – Delete Users)

February 6, 2020javascript, Node JS, Reactadmin

Client Side

removeUser tells the server side to look for the user with the specific ID. Then, remove that user from the database.

user/apiUser.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

export const removeUser = async (userId, token) => {
    console.log(`removeUser', '1) remove user for user id: ${userId} from the server` )
    return await fetch(`http://localhost:8080/user/${userId}`, {
        method: "DELETE",
        mode: "cors",
        headers: {
            Accept : "application/json",
            "Content-Type": "application/json",
            Authorization: `Bearer ${token}`,
            'Access-Control-Allow-Origin':'*'
        }
    })
    .then(response => {
        console.log('removeUser', '3) response received')
        return response.json()
    })
    .catch(err => {
        this.setState({ redirectToSignin: true })
        return err
    })
}

auth/index.js

SignOutUser first looks at the client’s local storage. It removes the jwt key/value.
Then it tells the server to clear the cookie for this client.

Cookies are stored per-user on the users machine. A cookie is usually just a bit of information. Cookies are usually used for simple user settings colours preferences ect.

Cookies can be cleared through the browser’s settings via a “clear cookie” button. A cookie file can also be opened by the user when they go through your temporary Internet files history and can locate your cookie there. They can then open it and look at the contents. Hence, No sensitive information should ever be stored in a cookie.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

// next is just a callback
export const SignOutUser = (next) => {
    console.log('SignOutUser - clear cookie for this client!')

    if (typeof window !== "undefined") localStorage.removeItem("jwt")
    next()

    // tells server to clear cookie
    return fetch("http://localhost:8080/signout", {
        method: "GET"
    }).then(response => {
        console.log('signout', response)
        return response.json()
    }).catch(err => console.log(err))
}

We use server calls for removing the user and clearing the cookie in our DeleteUser functionality. After deleting is complete, we simply redirect the user to the home screen.

user/DeleteUser.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55

import React, { Component } from 'react';
import { IsAuthenticated } from '../auth';
import { removeUser } from './apiUser';
import { SignOutUser } from '../auth';
import { Redirect } from 'react-router-dom';

class DeleteUser extends Component {

    state = {
        redirect: false
    }

    deleteAccount = () => {
        console.log('delete this account!!!');
        const token = IsAuthenticated().token;
        const userId = this.props.userId

        console.log(`deleting user ID ${userId} with token ${token}`)

        removeUser(userId, token)
        .then(data => {
            if (data.error) {
                console.log(data.error)
            } else {
                // signout user
                // we provide callback for next() in SignOutUser
                SignOutUser( () => console.log('User is deleted')) ;

                // redirect
                this.setState({ redirect: true });
            }
        })
    }

    deleteConfirm = () => {
        let answer = window.confirm("Are you sure you want to Delete your account?")
        if (answer) {
            this.deleteAccount();
        }
    }

    render() {
        if (this.state.redirect) {
            return <Redirect to="/" />
        }

        return (
            <button onClick={this.deleteConfirm} className="btn btn-raised btn-danger">
                Delete Profile
            </button>
        );
    }
}

export default DeleteUser

Server side

controllers/user.js

1
2
3
4
5
6
7
8
9
10
11
12
13

exports.deleteUser = (req, res, next) => {
    console.log(`controllers/user.js -- deleteUser -- `)
    let user = req.profile;

    user.remove((err, user) => {
        if (err) { return res.json({ error: err }) }

        console.log('deleteUser', 'no errors, going to delete' );
        user.hashed_password = undefined
        user.salt = undefined
        res.json({message: `User ${user.name} deleted succesfully`})
    })
}

DNY client (7 – Users)

February 5, 2020javascript, Node JS, Reactadmin

Create the User file under user folder.

Include it into the router.

Then put it into the menu.

user/Users.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59

import React, { Component } from "react";
import { getUserList } from "./apiUser";
import DefaultProfile from '../images/default-profile.png';
import { Link } from 'react-router-dom';

class Users extends Component {

    constructor() {
        super()
        this.state = {
            users: []
        }
    }

    componentDidMount() {
        getUserList().then(data => {
             if (data.error) {
                console.log(data.error)
             } else {
                this.setState({users:data})
             }
        })
    }

    renderUsers = users => (
        <div className="row">
            {users.map((user, i) => (
                <div className="card col-md-4" key={user._id}>
                    <img
                        className="card-img-top"
                        src={DefaultProfile}
                        alt={user.name}
                        style={{width: '100%', height: '15vw', objectFit: 'cover' }}
                    />
                    <div className="card-body">
                        <h5 className="card-title">{user.name}</h5>
                        <p className="card-text">{user.email}</p>
                        <Link
                            to={`/user/${user._id}`}
                            className="btn btn-primary">View Profile
                        </Link>
                    </div>
                </div>
             ))}
        </div>
    );

    render() {
        const { users } = this.state
        return (
            <div className="container">
                <h2 className="mt-5 mb-5"> Users </h2>
                {this.renderUsers(users)}
            </div>
        );
    }
}

export default Users;

The result is a list of users.

Props Change on Users

1) Go the users list http://localhost:3000/users
2) Click on View Profile link of any user. You’ll get to the profile page of that user with that user’s data.
3) If you were to click on your own profile link above, the component data wouldn’t change. This is because the URL is part of prop. Since you’ve changed the URL, you’re changing the prop. This change happens at this.props.match.params.userId.

This is the props of the component and when it changes, we need to fetch data for the profile user again. However, in our Profile component, we only do this for when componentDidMount. Thus, we need to implement fetch data in a component hook called componentDidUpdate like so:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

class Profile extends Component {

    // etc

    componentDidMount() {
        const userId = this.props.match.params.userId
        this.initUserID(userId)
    }

    // componentWillReceiveProps is required if you want to update the state values with new props values,
    // this method will get called whenever any change happens to props values.

    // However, "componentWillReceiveProps()" has been deprecated.
    // You should use, "componentDidUpdate(prevProps, prevState, snapshot)".

    //https://stackoverflow.com/questions/46113044/when-to-use-componentwillreceiveprops-lifecycle-method?r=SearchResults
    //https://reactjs.org/docs/react-component.html#componentdidupdate

    componentDidUpdate(prevProps) {
        // Typical usage (don't forget to compare props):
        if (this.props.match.params.userId !== prevProps.match.params.userId) {
          console.log('user/Profile.js', 'componentDidUpdate');
          const userId = this.props.match.params.userId
          this.initUserID(userId)
        }
      }

    // other code
}

user/Profile.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104

import React, { Component } from 'react';
import { IsAuthenticated } from '../auth';
import { Redirect, Link} from 'react-router-dom';
import { getUserInfo } from './apiUser';
import DefaultProfile from '../images/default-profile.png'

class Profile extends Component {

    constructor() {
        super()
        this.state = {
           user: "",
           redirectToSignin: false
        }
    }

    initUserID = userId => {
        let token = IsAuthenticated().token
        console.log('0) get user info')
        getUserInfo(userId, token)
        .then(data => {
            console.log('4) callback for logging and presentation')
            if (data.error) {
                 this.setState({ redirectToSignin: true })
            } else { this.setState({ user: data }) }
        })
        console.log('2) finish him!!!')
    }

    componentDidMount() {
        console.log('user/Profile.js', 'componentDidMount');
        const userId = this.props.match.params.userId
        this.initUserID(userId)
    }

    // componentWillReceiveProps is required if you want to update the state values with new props values,
    // this method will get called whenever any change happens to props values.

    // However, "componentWillReceiveProps()" has been deprecated.
    // You should use, "componentDidUpdate(prevProps, prevState, snapshot)".

    //https://stackoverflow.com/questions/46113044/when-to-use-componentwillreceiveprops-lifecycle-method?r=SearchResults
    //https://reactjs.org/docs/react-component.html#componentdidupdate

    componentDidUpdate(prevProps) {
        // Typical usage (don't forget to compare props):
        if (this.props.match.params.userId !== prevProps.match.params.userId) {
          console.log('user/Profile.js', 'componentDidUpdate');
          const userId = this.props.match.params.userId
          this.initUserID(userId)
        }
      }


    // when route parameter changes, we need to capture that change
    // make another fetch request so that our data can be updated
    // current when componet mounts, it fetches that time.
    render() {
        const { user, redirectToSignin } = this.state
        if (redirectToSignin) return <Redirect to="/signin" />
        return (
            <div className="container">
                <div cl assName="row">
                    <div className="col-md-6">
                        <h2 className="mt-5 mb-5">Profile</h2>
                        <img
                            className="card-img-top"
                            src={DefaultProfile}
                            alt={user.name}
                            style={{width: '100%', height: '15vw', objectFit: 'cover' }}
                        />

                        <ul>
                            <li>Hi, {user.name}</li>
                            <li>{user._id}</li>
                            <li>{user.email}</li>
                            <li>{user.created && `Joined on ${new Date(user.created).toDateString()}`}</li>
                        </ul>
                    </div>

                    <div className="col-md-6">
                        {/* if the authenticated user is same as getUserInfo's id */}
                        {IsAuthenticated().user &&
                            IsAuthenticated().user._id === user._id &&
                        (<div className="d-line-block mt-5">
                            <Link className="btn btn-raised btn-success mr-5"
                            to={`/user/edit/${user._id}`}>
                                Edit Profile
                            </Link>
                            <button className="btn btn-raised btn-danger"
                            to={`/user/delete/${user._id}`}>
                                Delete Profile
                            </button>
                        </div>)
                        }
                    </div>

                </div>
            </div>
        );
    }
}

export default Profile

DNY client (6 – Profile Page)

February 2, 2020javascript, Node JS, Projects, Reactadmin

src/user/Profile.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

import React, { Component } from 'react';

class Profile extends Component {

    constructor() {
        super()
        this.state = {

        }
    }

    render() {
        return (
            <div className="container">
                <h2 className="mt-5 mb-5">Profile</h2>
            </div>
        );
    }
}

export default Profile

Notice when we added our Profile page, the path is /user/:userId.
This says whenever we have a URL in that format, we’ll hit the Profile component.

src/MainRouter.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

import React from 'react'
import {Route, Switch} from 'react-router-dom'
import Home from './core/Home'
import Signup from './user/Signup'
import Signin from './user/Signin'
import Profile from './user/Profile'
import Menu from './core/Menu'

const MainRouter = () => (
    <div>
        <Menu />
        <Switch>
            <Route exact path="/" component={Home} />
            <Route exact path="/signup" component={Signup} />
            <Route exact path="/signin" component={Signin} />
            <Route exact path="/user/:userId" component={Profile} />
        </Switch>
    </div>
)

export default MainRouter;

Use the user object you get from localStorage. Inside that object, you’ll get the user object. Access the _id of the user and use it for the url parameter when we click on the profile link.

src/core/Menu.js

1
2
3
4
5

    <li className="nav-item">
        <Link to={`user/${IsAuthenticated().user._id}`}>
          {`${IsAuthenticated().user.name}'s profile`}
        </Link>
    </li>

When fetching data from Server

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68

import React, { Component } from 'react';
import { IsAuthenticated} from '../auth';
import { Redirect } from 'react-router-dom';

class Profile extends Component {

    constructor() {
        super()
        this.state = {
           user: "",
           redirectToSignin: false
        }
    }

    getUserInfo = async (userId, token) => {
        console.log(`1) get user info for user id: ${userId}` )
        return await fetch(`http://localhost:8080/user/${userId}`, {
            method: "GET",
            mode: "cors",
            headers: {
                Accept : "application/json",
                "Content-Type": "application/json",
                Authorization: `Bearer ${token}`,
                'Access-Control-Allow-Origin':'*'
            }
        })
        .then(response => {
            console.log('3) response received')
            return response.json()
        })
        .catch(err => {
            this.setState({ redirectToSignin: true })
            return err
        })
    }


    componentDidMount() {
        const userId = this.props.match.params.userId
        let token = IsAuthenticated().token
        console.log('0) get user info')
        this.getUserInfo(userId, token).then(response => {
            console.log('4) callback for logging and presentation')
            this.setState({ user: response })
        })

        console.log('2) finish him!!!')
    }

    render() {
        const { user, redirectToSignin } = this.state

        if (redirectToSignin) return <Redirect to="/signin" />
        return (
            <div className="container">
                <h2 className="mt-5 mb-5">Profile</h2>
                <ul>
                    <li>Hi, {user.name}</li>
                    <li>{user._id}</li>
                    <li>{user.email}</li>
                    <li>{`Joined on ${new Date(user.created).toDateString()}`}</li>
                </ul>
            </div>
        );
    }
}

export default Profile

Posts navigation

← Older posts

Newer posts →