|
| 1 | +import "./faqs.scss"; |
| 2 | +import Page from "components/page"; |
| 3 | +import searchBar from "components/searchbar"; |
| 4 | +import DOMPurify from "dompurify"; |
| 5 | +import defaultStrings from "lang/en-us.json"; |
| 6 | +import actionStack from "lib/actionStack"; |
| 7 | +import config from "lib/config"; |
| 8 | +import markdownIt from "markdown-it"; |
| 9 | + |
| 10 | +export default function FAQs() { |
| 11 | + const cacheKey = `faqs:${config.API_BASE}`; |
| 12 | + const markdown = markdownIt({ linkify: true }); |
| 13 | + const search = ( |
| 14 | + <button |
| 15 | + type="button" |
| 16 | + className="icon search" |
| 17 | + attr-action="search" |
| 18 | + aria-label={strings.search} |
| 19 | + onclick={showSearch} |
| 20 | + disabled |
| 21 | + /> |
| 22 | + ); |
| 23 | + const page = Page(strings.faqs, { tail: search }); |
| 24 | + page.classList.add("faqs-page"); |
| 25 | + const status = <p role="status" />; |
| 26 | + const retry = ( |
| 27 | + <button type="button" className="button faq-retry" onclick={load} hidden> |
| 28 | + {strings.retry || defaultStrings.retry} |
| 29 | + </button> |
| 30 | + ); |
| 31 | + const state = ( |
| 32 | + <div className="faq-state"> |
| 33 | + <span className="icon help" aria-hidden="true" /> |
| 34 | + {status} |
| 35 | + {retry} |
| 36 | + </div> |
| 37 | + ); |
| 38 | + const list = <div className="faq-list" />; |
| 39 | + let faqs = []; |
| 40 | + let controller; |
| 41 | + let closed = false; |
| 42 | + let hideSearchBar; |
| 43 | + |
| 44 | + page.body = ( |
| 45 | + <main id="faqs-page" className="main scroll"> |
| 46 | + {state} |
| 47 | + {list} |
| 48 | + </main> |
| 49 | + ); |
| 50 | + page.onhide = () => { |
| 51 | + closed = true; |
| 52 | + hideSearchBar?.(); |
| 53 | + controller?.abort(); |
| 54 | + actionStack.remove("faqs"); |
| 55 | + }; |
| 56 | + page.ondisconnect = () => hideSearchBar?.(); |
| 57 | + actionStack.push({ id: "faqs", action: page.hide }); |
| 58 | + app.append(page); |
| 59 | + void load(); |
| 60 | + return page; |
| 61 | + |
| 62 | + async function load() { |
| 63 | + const cached = readCache(); |
| 64 | + const request = new AbortController(); |
| 65 | + controller = request; |
| 66 | + const timeout = setTimeout(() => request.abort(), 15000); |
| 67 | + retry.hidden = true; |
| 68 | + if (cached) render(cached); |
| 69 | + else status.textContent = strings["loading..."]; |
| 70 | + try { |
| 71 | + const response = await fetch(`${config.API_BASE}/faqs`, { |
| 72 | + signal: request.signal, |
| 73 | + }); |
| 74 | + if (!response.ok) |
| 75 | + throw new Error(`FAQ request failed: ${response.status}`); |
| 76 | + const data = await response.json(); |
| 77 | + if (!isValid(data)) throw new Error("Invalid FAQ response"); |
| 78 | + if (closed) return; |
| 79 | + try { |
| 80 | + localStorage.setItem(cacheKey, JSON.stringify(data)); |
| 81 | + } catch (error) { |
| 82 | + console.warn("Unable to cache FAQs", error); |
| 83 | + } |
| 84 | + if (!cached?.length) render(data); |
| 85 | + } catch (error) { |
| 86 | + if (closed || cached?.length) return; |
| 87 | + console.error("Unable to load FAQs", error); |
| 88 | + status.textContent = |
| 89 | + strings["faqs load failed"] || defaultStrings["faqs load failed"]; |
| 90 | + retry.hidden = false; |
| 91 | + } finally { |
| 92 | + clearTimeout(timeout); |
| 93 | + } |
| 94 | + } |
| 95 | + |
| 96 | + function render(data) { |
| 97 | + faqs = data.map((faq) => ({ ...faq, element: renderFAQ(faq) })); |
| 98 | + search.disabled = !faqs.length; |
| 99 | + state.hidden = !!faqs.length; |
| 100 | + status.textContent = faqs.length |
| 101 | + ? "" |
| 102 | + : strings["faqs empty"] || defaultStrings["faqs empty"]; |
| 103 | + list.replaceChildren(...(faqs.length ? results(faqs) : [])); |
| 104 | + } |
| 105 | + |
| 106 | + function readCache() { |
| 107 | + try { |
| 108 | + const data = JSON.parse(localStorage.getItem(cacheKey)); |
| 109 | + if (isValid(data)) return data; |
| 110 | + } catch (error) { |
| 111 | + console.warn("Unable to read cached FAQs", error); |
| 112 | + } |
| 113 | + } |
| 114 | + |
| 115 | + function isValid(data) { |
| 116 | + return ( |
| 117 | + Array.isArray(data) && |
| 118 | + data.every( |
| 119 | + (faq) => typeof faq?.q === "string" && typeof faq?.a === "string", |
| 120 | + ) |
| 121 | + ); |
| 122 | + } |
| 123 | + |
| 124 | + function showSearch() { |
| 125 | + if (hideSearchBar || search.disabled) return; |
| 126 | + searchBar( |
| 127 | + list, |
| 128 | + (hide) => { |
| 129 | + hideSearchBar = hide; |
| 130 | + }, |
| 131 | + () => { |
| 132 | + hideSearchBar = null; |
| 133 | + }, |
| 134 | + (value) => { |
| 135 | + const query = value.trim().toLowerCase(); |
| 136 | + page.body.scrollTop = 0; |
| 137 | + return results( |
| 138 | + faqs.filter((faq) => |
| 139 | + `${faq.q}\n${faq.a}`.toLowerCase().includes(query), |
| 140 | + ), |
| 141 | + true, |
| 142 | + ); |
| 143 | + }, |
| 144 | + false, |
| 145 | + ); |
| 146 | + } |
| 147 | + |
| 148 | + function results(matches, searching = false) { |
| 149 | + if (!matches.length) |
| 150 | + return [ |
| 151 | + <div className="faq-state"> |
| 152 | + <span className="icon search" aria-hidden="true" /> |
| 153 | + <p role="status">{strings["no result"]}</p> |
| 154 | + </div>, |
| 155 | + ]; |
| 156 | + const key = |
| 157 | + matches.length === 1 |
| 158 | + ? "search result label singular" |
| 159 | + : "search result label plural"; |
| 160 | + const label = searching |
| 161 | + ? strings[key] || defaultStrings[key] |
| 162 | + : strings.faqs; |
| 163 | + return [ |
| 164 | + <div className="faq-count" role="status"> |
| 165 | + {`${matches.length} ${label}`} |
| 166 | + </div>, |
| 167 | + ...matches.map((faq) => faq.element), |
| 168 | + ]; |
| 169 | + } |
| 170 | + |
| 171 | + function renderFAQ(faq) { |
| 172 | + const answer = <div className="md faq-answer" />; |
| 173 | + const details = ( |
| 174 | + <details> |
| 175 | + <summary> |
| 176 | + <span>{faq.q}</span> |
| 177 | + <span className="icon keyboard_arrow_down" aria-hidden="true" /> |
| 178 | + </summary> |
| 179 | + {answer} |
| 180 | + </details> |
| 181 | + ); |
| 182 | + details.ontoggle = () => { |
| 183 | + if (!details.open || answer.childNodes.length) return; |
| 184 | + answer.innerHTML = DOMPurify.sanitize(markdown.render(faq.a)); |
| 185 | + for (const link of answer.querySelectorAll("a[href]")) { |
| 186 | + try { |
| 187 | + link.href = new URL(link.getAttribute("href"), config.BASE_URL).href; |
| 188 | + } catch { |
| 189 | + link.removeAttribute("href"); |
| 190 | + } |
| 191 | + } |
| 192 | + }; |
| 193 | + return details; |
| 194 | + } |
| 195 | +} |
0 commit comments