@iamntz
Day 1: Astazi am inceput sa clonez Youtube. Pana acum am partea de header.
Nu ma focusez deocamdata pe responsive. Vreau sa ajung la o varianta cat de cat decenta.
-just jsx and css
#mainChallange am novie sa practic sa las video tutorialele si sa lucrez singur.
sper sa reusesc sa duc la capat acest challange
@github: GitHub - cojoclaudiu/yt_project
@netlify: https://tender-fermat-e1769a.netlify.app/
Pentru ceva mai mult context: am avut ieri o scurtă discuție cu Claudiu despre „ce curs de react să mai urmeze”.
L-am întrebat dacă este dispus să accepte două provocări:
Un nene zice că 20h sunt suficiente pentru a deveni un „începător eficient” într-un domeniu, eu zic că 30-40h sunt suficiente pentru a decide dacă este un drum ce merită urmat sau nu în viitor.
Una peste alta, Claudiu a acceptat provocarea. I-am sugerat să posteze aici zilnic, în forma unui standup meeting:
Și asta din două motive:
Spor la treabă!
Vezi cum faci să ai mereu un ID pentru key. Nu index, nu altceva. Am scris aici de ce.
Mi se pare că ar avea mai mult sens să împarți componentele în module.
E.g. acum ai în components/header/ patru componente: Header, Logo, RgtMenu (?!?) și SearchHeader. Toate astea importă stilurile din styles/components/*.css
Eu le-aș împărți pe module separate:
components/Header/Header.jsx
components/Header/header.module.css
components/Identity/Identity.jsx
components/Identity/identity.module.css
Etc.
Asa, mai pe fuga:
in App.js, Categories si inca cateva, poti sa omiti return cu arrow function
fii consistent cu function vs variabila ( in Logo.jsx ai putea sa faci const Logo = props => … ), si in general cu codul scris (ai in unele locuri single quotes la string si in altele double)
Altfel, arata binisor, daca momentan inveti 
spor
@sebi am scos return si am modificat arrow function in Logo.jsx
-cat despre single si double qoutes am sa adaug in curand sau la final un .prettierconfig ca sa imi faca update in toate filele.
@iamntz am zis sa nu mai stau sa adaug id-ul in .json si sa folosesc name-index dar intentionez sa transform “a” elemnt in cand o sa folosesc Routes iar in atunci am sa adaug si url path la categorie in headerCategories.json si am sa adaug si un id unic.
RgtMenu(?!?) - right menu
La partea cu styles ma gandeam sa am toate fisirerele css intr-un singur loc.
Toate astea importă stilurile din
styles/components/*.css
Aici te referi ca o sa afecteze din punct de vedere al performantei si este o imbunatatire daca le impart in module separate?
Nu este o problemă de performanță, pentru că nu încarci toate stilurile ci le încarci în module.
Are sens din punct de vedere al modularizării. E.g. dacă ai un alt proiect la care ai putea refolosi SearchBar, de exemplu, ce are mai mult sens?
components/SearchBar saustyles/components/search.module.css
(idem și dacă vrei sa ștergi un modul sau să-l redenumești)
Make sense. Multumesc am sa fac update la foldere.
Update:
-am adaugat a context provider pentru sidebar.
-onClick pe “hamburger” menu si de acolo vreau sa randez doua componente separat, by default este true
Am decis sa folosesc doua componente separate pentru sidebar deoarece sunt meniul deschis difera considerabil de cel inchis.
Daca poate cineva sa arunce o privire la context provider pentru ca nu sunt sigur daca il folosesc cum trebuie.
Day 2:
00:33 - working on sidebar, I’ve pushed changes on github the changes are live on netlify
off-topic:
over 30 hours on fasting, no food, just water, coffee and some vitamins
–vreau sa vad daca pot sa rezist 3 zile fara mancare
Ce-i drept, cred ca au intrat atat de mult in reflex incat uitam ca mai exista si o documentatie oficiala.
–update 12:13
Sidebar-ul este gata.
Ce am invatat nou?
scrollbar-color: #CBCBCB transparent;
prima culoare este track-ul de la sidebar si transparent este background-ul
Ce urmeaza sa fac?
Ma gandesc sa implementez video-uri pe prima pagina folosid Youtube Api.
import './styles/app.css';
import React from 'react';
import Header from './components/Header/Header';
Incearca sa te obisnuiesti sa mentii o consistenta la extensia fisierelor, iti va fi mai usor pe termen lung + arata mai profi (unde randezi chestii ai .jsx, .js in rest. Vezi App si SidebarContext)
Poate nu e cazul acum, da’ incearca sa gandesti componentele cat mai reusable (e.g poate pe viitor vrei sa le scoti intr un pachet npm separat, poate un storybook pe ele etc). Nu exista solutia perfecta, dar poti avea o chestie de genul widgets/ si modules/, unde practic modules foloseste widgets, care sunt de sine statatoare, doar primesc parametri. (e.g Categories de fapt poate fi scos ca modul si sa ai o componenta Badges care de fapt iti ‘compune’ Categories)
Daca le ai organiza un piic mai ‘modular’ (ce ziceam mai sus), ai putea tine providers (context) in modulul respectiv si la fel, pe termen lung poti ‘externaliza’ toate modulele in pachete separate (monorepo) si sa ti faci o noua aplicatie cu doar 3 module, de exmplu. Practic ai toata logica modulului intr un singur folder, c/p si gata, il reutilizezi in alta parte fara stres
Keep up the good work
Multumesc foarte mult pentru feedback.
3/4 Inca invat cum sa le fac reusable si sa le organizez modular, ca sa fiu sincer nu stiu inca asta si asta vreau sa invat, sa-mi imbunatatesc skillurile.
Orice feedback ma ajuta foarte mult si daca doriti imi puteti lasa si link-uri de unde pot invata mai mult despre React.
EDIT: Am facut update la cod folosid eslint airbnb si prettier.
Daca poate cineva sa-mi confirme daca config file-urile sunt bune as fi foarte recunoscator.
Prettier o sa iti ruleze automat la salvare in VSCode daca instalezi plugin-ul de prettier. La fel si in IntelliJ Webstorm. Poti sa il faci sa ruleze la commit cu husky.
Pare ok, iti da ceva eroare ? Cea mai mare problema la config la eslint/prettier e ca sunt setari care se bat unul cu altul la save.
Nu imi da eroare la prettier doar ca a trebuie manual sa salvez fiecare file in parte ca sa se formateze codul.
prettier --write . si eslint --fix . in root-ul proiectului o sa iti reformateze fiecare fisier, dupa automat o sa aderi la stilul/regulile pe care le-ai pus.
Poti te rog sa-mi spui unde mai exact? Nu inteleg la ce te referi cand spui “root-ul proiectului”
Multumesc frumos pentru ajutor.
Root-ul este unde ai fisierul package.json al proiectului. Daca nu iti merg comenzile prettier sau eslint, poti sa le folosesti cu npm run prettier (trebuie sa ai script in package.json) sau cu npx run prettier/eslint care iti descarca si ruleaza doar o data local script-ul.
Day 3: working on the HomePage
Folosesc Youtube API inca mai am ceva de invatat despre el cat si cum sa folosesc axios. Momentan afisaza ce vreau eu dar probabil as putea sa lucrez mai mult la api/youtube.js la obiectul cu baseURL sa-l fac mai flexibil. Daca ma puteti ajuta cu niste sfaturi mi-ar prinde foarte bine.
Tin sa precizez ca la partea de API, axios, async await nu prea am experienta dar vreau sa invat cat mai multe.
PS: Am o pe git hub [.env.development si netlify.toml] cu un api din contul meu de la google? Este ok sa-l am acolo? Sau trebuie sa-l sterg? Am incercat sa adaug variabila si la cei de la netlify pe site si nu am resuit sa o fac sa mearga. Asa fara API nu prea aveam cum sa va arat ca lucrez la prima pagina pentru ca nu aprea nici un video pe versiunea live.
Astept cat mai multe sfaturi daca doriti sa-mi oferiti.
Dacă sunt chei private, atunci nu au ce să caute în repo.
Dacă sunt chei publice/readonly (e.g. legate de un domeniu, cum sunt cele de la youtube) atunci e OK.
Multumesc mult pentru raspuns.
–EDIT UPDATE:
@github: GitHub - cojoclaudiu/yt_project
@netlify: https://tender-fermat-e1769a.netlify.app/
Am adaugat durata videoclipului pe care a trebuit sa o transform din PT3M10S in 3:10
Sincer mi-a dat ceva batai de cap, am inceput prima data cu moment.js si moment-duration-format dar nu am vazut rostul lor doar pentru asa “mica” modificare, am cautat si pe google si stackoverflow dar pana la urma m-am decis sa fac eu o functie.
— acum vreau sa separ logica si sa mut functia intr-un foloder/file separat problema e ca nu stiu ce nume sa dau la folder sau unde mai exact sa o adaug. 
Poate ma ajutati voi cu o idee, best practice.
and if someone needs to implement Youtube API Time ISO 8601 String Video Duration to (h:mm:ss) they can find function below, probably I can work more on the function or restructure but I want to move on with some styles for my youtube app.
const durationStamp = (duration) => {
const durationArray = duration.match(/\d+/g).map(Number);
// let newHours = null;
let timeStamp = null;
if (durationArray.length === 1) {
const [sec] = durationArray;
if (sec <= 9) {
timeStamp = `0:0${sec}`;
} else {
timeStamp = `0:${sec}`;
}
}
if (durationArray.length === 2) {
const [min, sec] = durationArray;
if (sec <= 9) {
timeStamp = `${min}:0${sec}`;
} else {
timeStamp = `${min}:${sec}`;
}
}
if (durationArray.length === 3) {
const [hour, min, sec] = durationArray;
if (min <= 9 && sec <= 9) {
timeStamp = `${hour}:0${min}:0${sec}`;
} else if (min <= 9 && sec >= 9) {
timeStamp = `${hour}:0${min}:${sec}`;
} else if (min >= 9 && sec <= 9) {
timeStamp = `${hour}:${min}:0${sec}`;
} else {
timeStamp = `${hour}:${min}:${sec}`;
}
}
return `${timeStamp}`;
};