Имплементација на случаи на употреба

На следната табела се прикажани сработените кориснички сценарија:

ID	Use Case
1	Регистрација
2	Најава
3	Преглед на почетната страна
4	Филтрирање производи
5	Пребарување производи
6	Преглед на панелот на направени нарачки
7	Уреди производ
8	Смени статус на нарачка
9	Додавање во кошничка
10	Поднесување нарачка
11	Преглед на мои нарачки
12	Разгледај продукт
13	Остави оценка (rating, review)

Нерегистриран Корисник

Use Case ID: 1 – Регистрација

Корисникот го кликнува копчето за регистрација со што се извршува основна валидација на формата на клиентска страна (ако станува збор за купувач, последната селекција од регистрацијата не треба да биде селектирана).
Потоа аuthContext праќа POST барање до backend (аuth.js/register). По успешен одговор од серверот, аuthContext ја зачувува корисничката информација во својот локален state и ја запишува во localStorage за постојана сесија и побрзо ажурирање.

На серверот се извршува повторна валидација и проверка дали веќе постои корисник со дадените податоци. Ако валидацијата е успешна, backend креира нов запис во табелата users и враќа информации за корисникот. На серверот се валидира, проверува дали корисникот постои, хешира лозинка и креира запис во датабазата.

Use Case ID: 2 – Најава

Корисникот притиска „Log in“ копче на страницата.


Клиентот повикува login() од аuthContext, која потоа праќа POST барање /api/auth/login до backend. Кај фронтенд, при успех кај серверот, аuthContext ја обновува состојбата (и запишува во localStorage-за повторно вчитување по refresh).

Backend контролер ја верификува лозинката, креира JWT токен и враќа user + token.

Најавен Корисник

Use Case ID: 3 – Преглед на почетната страна

За да ги преземе информациите за продуктите од backend-от ја повикува функцијата fetchProducts.
Вackend-от креира база каде ќе ги зачувува податоците за продуктите и потоа тие ги враќа назад на frontent-от во вид на јson формат.

Use Case ID: 4 – Филтрирање производи

Корисникот внесува текст во полето за пребарување и/или избира категорија.
По избраната категорија со функцијата handleCategoryChange се повикува fetchCategories(filters) од ProductContext. ProductContext праќа HTTP GET и се поврзува со backend-от и на ист принцип како кај Home ги земa продуктите, само што сега го зачувува филтерот и после од базата каде што се наоѓаат сите продукти ги избера само оние кои ја имаат таа категорија (тоа id). Kонтекстот го ажурира products и loading. Home компонентата се ререндерира и прикажува филтрираните резултати.

Use Case ID: 5 – Пребарување производи

Принципот на функционирање е ист како и кај филтрирање, само што наместо fetchCategories() се повикува fetchProduct().

Use Case ID: 6 – Преглед на панелот на направени нарачки

Ги прикажува сите нарачки кои кои содржат производи од логираниот продавач. Се прави GET повик кон backend (коментар кажува /orders/admin/all) и се добиваат нарачките. По добивање, може да се применува клиентско филтрирање со помош на функцијата useCallback се филтрира со зависност филтер по статус (all, pending, confirmed, processing, shipped, delivered, cancelled).

Use Case ID: 7 – Уреди производ

Use Case ID: 8 – Смени статус на нарачка

Eve kako izgleda backend-ot za da se smeni statusot.

Use Case ID: 9 – Додавање во кошничка

Порака и изглед на кошничката по додавањето продукти.

Use Case ID: 10 – Поднесување нарачка

Поднесување на нарачката и приказ на историјата на нарачки.

Use Case ID: 11 – Преглед на мои нарачки

Прво се појавува можност за разгледување нарачката, која е во состојба на чекање (pending).

Use Case ID: 12 – Разгледај продукт

Use Case ID: 13 – Остави оценка (rating, review)