Jak poprawnie skorzystać z API systemu plików w komponencie?

Jak poprawnie skorzystać z API systemu plików w komponencie?

Wątek przeniesiony 2024-11-03 12:45 z JavaScript przez Riddle.

vermaterc
VE
vermaterc
VE
  • Rejestracja:10 miesięcy
  • Ostatnio:2 dni
  • Postów:10
1

Potrzebuję porady jak zaimplementować obsługę przeglądarkowego FileSystem API w sposób zgody z "dobrymi praktykami" pisania apliakcji w React.

FilesystemAPI to jest interfejs który pozwala aplikacji przeglądarkowej na dostęp do systemu plików użytkownika. Użytkownik może wybrać sobie folder, aplikacja dostaje tzw. handle (uchwyt? 😀 ) i za jego pośrednictwem można czytać z plików tym folderze. Haczyk jest taki, że nie wiadomo kiedy uchwyt traci dostęp do folderu. Można to sprawdzić albo podczas próby dostępu do niego (leci wtedy błąd) albo wykonując metodę typu queryPermission. Ja potrzebuję w aplikacji wyświetlić alert natychmiast kiedy okaże się że straciłem dostęp, wtedy pytam użytkownika o udzielenie go ponownie.

Piszę na co dzień w językach obiektowych i naturalnym sposobem na rozwiązanie tego problemu jest dla mnie utworzenie klasy typu Singleton, która trzyma stan uchwytu (jakaś tam properta isActive). Klasa pośredniczyłaby we wszystkich próbach dostępu do systemu plików i zmieniałaby status isActive zawsze gdy poleciałby jakiś wyjątek przy próbie zrobienia tego.

Pytanie czy to rozwiązanie w React to nie jest jakiś antypattern? Podobno komponenty Reactowe powinny raczej "pure" czyli ten sam danych wejściowych powinien generować zawsze ten sam wynik. Jak dodam sobie globalnie dostępny singleton to zasada ta pewnie zostanie złamana?

edytowany 1x, ostatnio: Riddle
Udostępnij
Kopiuj link do postu Kopiuj link do postu jako Markdown
Komentuj
Riddle
Riddle
Riddle
Riddle
Administrator
  • Rejestracja:prawie 15 lat
  • Ostatnio:około 2 godziny
  • Lokalizacja:Laska, z Polski
  • Postów:10053
0

Hej @vermaterc! Fajnie że jesteś na forum! 👋

vermaterc napisał(a):

Potrzebuję porady jak zaimplementować obsługę przeglądarkowego FileSystem API w sposób zgody z "dobrymi praktykami" pisania apliakcji w React.

To są osobne rzeczy, obsługa systemu plików to jedno, prezentacja aplikacji (React) to drugie.

Oczywiście one muszą się wywołać nawzajem, więć do pewnego stopnia muszą o sobie wiedzieć, ale to powinno być ograniczone do minimum.

edytowany 1x, ostatnio: Riddle
Udostępnij
Kopiuj link do postu Kopiuj link do postu jako Markdown
Komentuj
vermaterc
VE
vermaterc
VE
  • Rejestracja:10 miesięcy
  • Ostatnio:2 dni
  • Postów:10
1

czyli jak to w praktyce powinno wyglądać? Chcę żeby user klikając "save" zapisał coś do pliku, a jak sobie przeładuje stronę albo kliknie "reload" to żeby aplikacja odczytała plik i wyświetliła informacje z niego w UI. Co powinno zarządzać takimi operacjami i jeśli jednak klasa typu Singleton na jakim etapie ją utworzyć?

Udostępnij
Kopiuj link do postu Kopiuj link do postu jako Markdown
Komentuj
Riddle
Riddle
Riddle
Riddle
Administrator
  • Rejestracja:prawie 15 lat
  • Ostatnio:około 2 godziny
  • Lokalizacja:Laska, z Polski
  • Postów:10053
1
vermaterc napisał(a):

czyli jak to w praktyce powinno wyglądać? Chcę żeby user klikając "save" zapisał coś do pliku, a jak sobie przeładuje stronę albo kliknie "reload" to żeby aplikacja odczytała plik i wyświetliła informacje z niego w UI.

Powinieneś mieć klasę która umie operować plikiem i wystawia prosty interfejs, np. fs.saveFile('hello', onSave); oraz fs.openFile(onOpen). Komponent może wtedy wywołać te metody i przekazać swoje funkcje jako parametr żeby być powiadomionym o wyniku. Dodatkowo chcesz być powiadomiony o błędzie, czyli ta funkcja powinna oprócz wartości zwrócić informację o tym czy był błąd czy nie, może to być true/false.

Instancja Twojej klasy może być przekazana do komponentu albo przez property albo przez context/provide (przy czym property są łatwiejsze przy małych projektach). Jej instancja może być stworzona zanim React wstanie, ewentualnie któryś z komponentów może ją stworzyć (tylko wtedy widok wie więcej o aplikacji, co nie koniecznie jest dobre, bo zmiana Twojej klasy wpłynie na zmianę komponentu).

vermaterc napisał(a):

Co powinno zarządzać takimi operacjami i jeśli jednak klasa typu Singleton na jakim etapie ją utworzyć?

Część powinna być po stronie widoku, część po stronie Twojej klasy:

  • Widok (czyli komponent React) powinien:

    • jeśli user będzie chciał wczytać plik, widok powinien przekazać kontrolę do Twojej klasy
    • odebrać od klasy treść pliku kiedy jest wczytana i ją wyświetlić
    • umożliwić zapisanie pliku na klik (czyli jeśli user będzie chciał zapisać plik, to widok przekażę kontrolę do Twojej klasy)
    • odbierze treści pliku od użytkownika (przez jakieś pole, np. textarea) i przekaże ją do Twojej klasy do zapisania
    • odebranie informacji od klasy czy zapisanie się powiodło czy nie i sprezentowanie tej informacji
    • Widok mógłby też zainicjować pierwsze wczytanie pliku.

  • Twoja klasa powinna:

    • znać szczegóły API przeglądarkowego, pamiętać handle pliku
    • wystawić interfejs który widok może zawołać żeby zapisać lub wczytać plik
    • przyjąć treść pliku do zapisania,
    • przy wczytaniu, za pośrednictwem tego interfejsu wysłać do widoku treść wczytanego pliku oraz/lub informację o tym czy był błąd
    • Powinien stanowić warstwę abstrakcji między widokiem a API przeglądarki, tak żeby widok nie znał szczegółów API przeglądarki.

Przykład kodu poniżej. Zauważ że klasa MyFilesystem w ogóle nie musi używać systemu plików na potrzeby przykładu, implementację można łatwo zastąpić.

Kopiuj
import React, {useState} from 'react';
import ReactDOM from 'react-dom/client';

class MyFilesystem {
  saveFile(content, onSaveOrError) {
    console.log('saving a file', content);
    if (Math.random() < 0.5) { // simulate error
      onSaveOrError(true); // success
    } else {
      onSaveOrError(false); // there was an error
    }
  }

  openFile(onOpenOrError) {
    console.log('reading a file');
    if (Math.random() < 0.5) { // simulate error
      onOpenOrError(true, 'content loaded from file'); // success
    } else {
      onOpenOrError(false, null); // there was an error
    }
  }
}
function MyComponent({ fs }) {
  const [text, setText] = useState('');
  const [errorMessage, setErrorMessage] = useState(null);

  function handleSave() {
    fs.saveFile(text, (success) => {
      setErrorMessage(!success ? 'There was an error saving a file.' : 'Saved file.');
    });
  }

  function handleOpen() {
    fs.openFile((success, content) => {
      if (success) {
        setText(content );
        setErrorMessage('Opened file.');
      } else {
        setText('');
        setErrorMessage('There was an error opening a file.');
      }
    });
  }

  useEffect(() => handleOpen(), []); // invoke open on first render

  return (
    <div>
      <button onClick={handleSave}>Save</button>
      <button onClick={handleOpen}>Open</button>
      <div>
        <textarea value={text} onChange={e=>setText(e.target.value)}/>
      </div>
      <p>{errorMessage}</p>
    </div>
  );
}

const myFileSystem = new MyFilesystem();

ReactDOM.createRoot(document.getElementById('root')).render(
  <MyComponent fs={myFileSystem} />
);
edytowany 18x, ostatnio: Riddle
Udostępnij
Kopiuj link do postu Kopiuj link do postu jako Markdown
Komentuj
Treść
Podgląd
Kliknij, aby dodać treść...
Kliknij, aby dodać załącznik lub wklej ze schowka.
Instrukcja obsługi Markdown
Pomoc 1.18.8

Typografia

Edytor obsługuje składnie Markdown, w której pojedynczy akcent *kursywa* oraz _kursywa_ to pochylenie. Z kolei podwójny akcent **pogrubienie** oraz __pogrubienie__ to pogrubienie. Dodanie znaczników ~~strike~~ to przekreślenie.

Możesz dodać formatowanie komendami , , oraz .

Ponieważ dekoracja podkreślenia jest przeznaczona na linki, markdown nie zawiera specjalnej składni dla podkreślenia. Dlatego by dodać podkreślenie, użyj <u>underline</u>.

Komendy formatujące reagują na skróty klawiszowe: Ctrl+B, Ctrl+I, Ctrl+U oraz Ctrl+S.

Linki

By dodać link w edytorze użyj komendy lub użyj składni [title](link). URL umieszczony w linku lub nawet URL umieszczony bezpośrednio w tekście będzie aktywny i klikalny.

Jeżeli chcesz, możesz samodzielnie dodać link: <a href="link">title</a>.

Wewnętrzne odnośniki

Możesz umieścić odnośnik do wewnętrznej podstrony, używając następującej składni: [[Delphi/Kompendium]] lub [[Delphi/Kompendium|kliknij, aby przejść do kompendium]]. Odnośniki mogą prowadzić do Forum 4programmers.net lub np. do Kompendium.

Wspomnienia użytkowników

By wspomnieć użytkownika forum, wpisz w formularzu znak @. Zobaczysz okienko samouzupełniające nazwy użytkowników. Samouzupełnienie dobierze odpowiedni format wspomnienia, zależnie od tego czy w nazwie użytkownika znajduje się spacja.

Znaczniki HTML

Dozwolone jest używanie niektórych znaczników HTML: <a>, <b>, <i>, <kbd>, <del>, <strong>, <dfn>, <pre>, <blockquote>, <hr/>, <sub>, <sup> oraz <img/>.

Skróty klawiszowe

Dodaj kombinację klawiszy komendą notacji klawiszy lub skrótem klawiszowym Alt+K.

Reprezentuj kombinacje klawiszowe używając taga <kbd>. Oddziel od siebie klawisze znakiem plus, np <kbd>Alt+Tab</kbd>.

Indeks górny oraz dolny

Przykład: wpisując H<sub>2</sub>O i m<sup>2</sup> otrzymasz: H2O i m2.

Składnia Tex

By precyzyjnie wyrazić działanie matematyczne, użyj składni Tex.

<tex>arcctg(x) = argtan(\frac{1}{x}) = arcsin(\frac{1}{\sqrt{1+x^2}})</tex>

Kod źródłowy

Krótkie fragmenty kodu

Wszelkie jednolinijkowe instrukcje języka programowania powinny być zawarte pomiędzy obróconymi apostrofami: `kod instrukcji` lub ``console.log(`string`);``.

Kod wielolinijkowy

Dodaj fragment kodu komendą . Fragmenty kodu zajmujące całą lub więcej linijek powinny być umieszczone w wielolinijkowym fragmencie kodu. Znaczniki ``` lub ~~~ umożliwiają kolorowanie różnych języków programowania. Możemy nadać nazwę języka programowania używając auto-uzupełnienia, kod został pokolorowany używając konkretnych ustawień kolorowania składni:

```javascript
document.write('Hello World');
```

Możesz zaznaczyć również już wklejony kod w edytorze, i użyć komendy  by zamienić go w kod. Użyj kombinacji Ctrl+`, by dodać fragment kodu bez oznaczników języka.

Tabelki

Dodaj przykładową tabelkę używając komendy . Przykładowa tabelka składa się z dwóch kolumn, nagłówka i jednego wiersza.

Wygeneruj tabelkę na podstawie szablonu. Oddziel komórki separatorem ; lub |, a następnie zaznacz szablonu.

nazwisko;dziedzina;odkrycie
Pitagoras;mathematics;Pythagorean Theorem
Albert Einstein;physics;General Relativity
Marie Curie, Pierre Curie;chemistry;Radium, Polonium

Użyj komendy by zamienić zaznaczony szablon na tabelkę Markdown.

Lista uporządkowana i nieuporządkowana

Możliwe jest tworzenie listy numerowanych oraz wypunktowanych. Wystarczy, że pierwszym znakiem linii będzie * lub - dla listy nieuporządkowanej oraz 1. dla listy uporządkowanej.

Użyj komendy by dodać listę uporządkowaną.

1. Lista numerowana
2. Lista numerowana

Użyj komendy by dodać listę nieuporządkowaną.

* Lista wypunktowana
* Lista wypunktowana
** Lista wypunktowana (drugi poziom)

Składnia Markdown

Edytor obsługuje składnię Markdown, która składa się ze znaków specjalnych. Dostępne komendy, jak formatowanie , dodanie tabelki lub fragmentu kodu są w pewnym sensie świadome otaczającej jej składni, i postarają się unikać uszkodzenia jej.

Dla przykładu, używając tylko dostępnych komend, nie możemy dodać formatowania pogrubienia do kodu wielolinijkowego, albo dodać listy do tabelki - mogłoby to doprowadzić do uszkodzenia składni.

W pewnych odosobnionych przypadkach brak nowej linii przed elementami markdown również mógłby uszkodzić składnie, dlatego edytor dodaje brakujące nowe linie. Dla przykładu, dodanie formatowania pochylenia zaraz po tabelce, mogłoby zostać błędne zinterpretowane, więc edytor doda oddzielającą nową linię pomiędzy tabelką, a pochyleniem.

Skróty klawiszowe

Skróty formatujące, kiedy w edytorze znajduje się pojedynczy kursor, wstawiają sformatowany tekst przykładowy. Jeśli w edytorze znajduje się zaznaczenie (słowo, linijka, paragraf), wtedy zaznaczenie zostaje sformatowane.

  • Ctrl+B - dodaj pogrubienie lub pogrub zaznaczenie
  • Ctrl+I - dodaj pochylenie lub pochyl zaznaczenie
  • Ctrl+U - dodaj podkreślenie lub podkreśl zaznaczenie
  • Ctrl+S - dodaj przekreślenie lub przekreśl zaznaczenie

Notacja Klawiszy

  • Alt+K - dodaj notację klawiszy

Fragment kodu bez oznacznika

  • Alt+C - dodaj pusty fragment kodu

Skróty operujące na kodzie i linijkach:

  • Alt+L - zaznaczenie całej linii
  • Alt+, Alt+ - przeniesienie linijki w której znajduje się kursor w górę/dół.
  • Tab/⌘+] - dodaj wcięcie (wcięcie w prawo)
  • Shit+Tab/⌘+[ - usunięcie wcięcia (wycięcie w lewo)

Dodawanie postów:

  • Ctrl+Enter - dodaj post
  • ⌘+Enter - dodaj post (MacOS)