Zbliża się koniec 2022 więc czas na krótkie podsumowanie.

Jest to pierwszy "pełny" rok mojego bloga (licząc od stycznia do grudnia). Z kolei pierwszego kwietnia minął pierwszy rok istnienia bloga. Mogę śmiało stwierdzić, że decyzja o prowadzeniu własnego bloga to była bardzo dobra decyzja! Dalej trzymam się zasady: minimum jeden wpis na tydzień.

Opublikowałem 90 wpisów.

Narysowałem 14 komiksów:

1. Cookie policy
2. It is not a bug, it is a feature!
3. CRUD Dev - It ain't much but it's honest work
4. Motivation vs Habit
5. Deep Work
6. Deployment on Friday
7. What color is it?
8. Big problem, small steps
9. "Is task ready?" Driven Development
10. Deadline
11. New code vs Old code
12. Code - The Good, The Bad, The Ugly
13. Technical debt
14. I am your father!

Dodałem nowy dział: Demo

Zapału do dalszego rozwoju bloga mi nie brakuje więc czas na nowy rok!

Zagnieżdżone dokumenty

Mongoose pozwala na dodawanie zagnieżdżonych dokumentów do kolekcji:

import { model, Schema } from 'mongoose';

export interface Tag {
    name: string;
    value: string;
}

export interface Product {
    title: string;
    description: string;
    tags: Tag[];
}

const ProductSchema = new Schema<Product>({
    title: { type: String, required: true },
    description: { type: String, required: true },
    tags: { type: [{
            name: { type: String, required: true },
            value: { type: String, required: true },
        }],
        default: () => []
    }
}, { versionKey: false });

export const ProductModel = model('Product', ProductSchema);

Kiedy dodamy do kolekcji nowy rekord:

const productToAdd: Product = {
    title: 'Some product',
    description: 'Lorem ipsum',
    tags: [
        { name: 'Tag 1', tag: 'tag1' },
        { name: 'Tag 2', tag: 'tag2' },
    ]
};

const addedProduct: Product = await ProductModel.create(productToAdd);
console.log(addedProduct);

Powstanie coś takiego:

{
    _id: '5c2dcec42161327d7bf6bd63',
    title: 'Some product',
    description: 'Lorem ipsum',
    tags: [
        { 
            _id: '5caa542e2161327d7bf6c086'  
            name: 'Tag 1',
            tag: 'tag1' 
        },
        { 
            _id: '5cb183c82161327d7bf6c097',
            name: 'Tag 2', 
            tag: 'tag2'
        },
    ]
};

Po utworzeniu nowego dokumentu do rekordu zostały dodane trzy pola: _id. Jak pozbyć się identyfikatorów w zagnieżdżonym dokumencie (tags), jeśli ich nie potrzebujemy?

Zapobieganie dodawania identyfikatorów

Rozwiązanie jest banalne. Wróćmy do definicji naszego modelu. Skupmy się problematycznym tags:

tags: { 
    type: [{
        _id: false, // Ustawiamy flagę
        name: { type: String, required: true },
        value: { type: String, required: true },
    }],
    default: () => []
}

Jak widać, wystarczy dodać pole: _id: false, aby pozbyć się niechcianych identyfikatorów!

Jak przekazać komponent do innego komponentu?

React pozwala na przekazywanie komponentu lub komponentów do już istniejącego.

Żeby przekazać komponent do innego komponentu, korzystamy ze specjalnej właściwości o nazwie children. Wykorzystujemy ją w komponencie nadrzędnym:

function Component1({ label, children }) {
    return (
        <div>
            <h2>{label}</h2>
            {children}
        </div>
    );
}

function Component2({ text }) {
    return <p>{text}</p>;
}

Następnie za pomocą składni JSX piszemy:

<Component1 label="Section 1">
    <Component2 text="Lorem ipsum..." />
</Component1>

Wyrenderuje:

<div>
    <h2>Section 1</h2>
    <p>Lorem ipsum...</p>
</div>

Możemy przekazać więcej niż jeden komponent:

<Component1 label="Section 1">
    <Component2 text="Lorem ipsum..." />
    <Component2 text="Etiam vel varius mi" />
    <Component2 text="Nullam metus orci" />
</Component1>

Jak stworzyć własny komponent?

Żeby stworzyć własny komponent, wystarczy napisać:

function Header() {
	return <h2>Some header</h2>
}

Jak widać, użyliśmy tutaj zwykłej funkcji i to wystarczy. Komponenty w React można stworzyć za pomocą funkcji i klas. W tym wpisie przedstawiamy przykłady komponentów stworzonych za pomocą funkcji.

Żeby go użyć, piszemy:

function App() {
	return (
		<div>
			<Header />
		</div>
	);
}

We fragmentach kodu korzystamy z JSX

Jak wyświetlić dane w komponencie?

Jeśli chcemy wyświetlić jakieś dane w komponencie, musimy użyć nawiasów klamrowych: { }

function Header() {
    const title = 'Some header';
    return <h2>{title}</h2>
}

Jak przekazać dane do komponentu?

Żeby przekazać dane do komponentu, korzystamy z obiektu, który nazywa się: props:

function Header(props) {
    return <h2>{props.title}</h2>
}

albo krócej:

function Header({ title }) {
    return <h2>{title}</h2>
}

Następnie:

function App() {
	return (
		<div>
			<Header title="My header" />
		</div>
	);
}

Jeśli wartość, którą chcemy przekazać, przechowujemy w zmiennej, to musimy użyć nawiasów klamrowych:

function App() {
    const myHeader = 'My header';

    return (
        <div>
            <Header title={myHeader} />
        </div>
    );
}

Do czego służy combineLatest?

Operator combineLatest przyjmuje jako parametr listę obiektów typu Observable. Jako wynik zwraca wartości wysłane przez te obiekty.

Żeby combineLatest zwrócił wynik, musi zostać spełniony jeden warunek: wszystkie przekazane do operatora obiekty Observable muszą wysłać swoje dane. Na przykład: przekazujemy do combineLatest dwa strumienie danych. Jeden strumień wysłał dane, ale drugi jeszcze nie. W tym przypadku combineLatest nie zwróci żadnych danych (patrz przykład 1).

Dodatkowo combineLatest zwróci kolejny raz dane, jeśli któryś ze strumieni także wysłał nową porcję danych (patrzy przykład 2). W tym przypadku wystarczy, że tylko jeden obiekt Observable wyemituje dane.

Przykłady użycia combineLatest

Przykład 1

import { of, combineLatest} from 'rxjs';
import { delay } from 'rxjs/operators';

combineLatest([
    of(1),
    of(2).pipe(delay(1000)),
    of(3).pipe(delay(2000)),
]).subscribe(console.log); // [1, 2, 3]

Jako wynik zwróci: [1, 2, 3] ale po 3 sekundach. Zauważ, że pierwszy strumień zwraca dane od razu, drugi po sekundzie, w końcu trzeci po dwóch sekundach. combineLatest wysyła dane, gdy wszystkie przekazane do niego obiekty Observable wyślą swoje dane.

Przykład 2

W HTML dodaj dwa input'y:

<input type="text" id="field1" />
<input type="text" id="field2" />

Kod:

import { fromEvent, combineLatest} from 'rxjs';
import { map } from 'rxjs/operators';

function createKeyupListener(inputId) {
    return fromEvent(document.getElementById(inputId), 'keyup').pipe(
        map((event) => event.target.value)
    );
}
const field1$ = createKeyupListener('field1');
const field2$ = createKeyupListener('field2');

combineLatest([
    field1$,
    field2$
]).pipe(
    map(([a, b]) => {
        return parseFloat(a) + parseFloat(b)
    })
).subscribe(console.log);

Gdy wpiszemy w jedno pole wartość nic się nie stanie. Wprowadzając dane do drugiego pola combineLatest wyemituje sygnał z przetworzonymi danymi. Jeśli ponownie wprowadzisz dane do któregoś pola to combineLatest od razu wyśle nowy wynik. Czyli tylko za pierwszym razem combineLatest czeka, aż wszystkie przekazane do niego strumienie wyślą dane. Później wystarczy, że nowe dane zostaną wyemitowane przez jeden ze strumieni.