From d9c9da7cd245775aed241ab9a15b392ae4e9923c Mon Sep 17 00:00:00 2001 From: Akshay Date: Sat, 23 Nov 2024 21:43:55 +0000 Subject: add search page --- src/geddit.js | 2 +- src/mixins/header.pug | 4 ++-- src/mixins/subUtils.pug | 49 ++++++++++++++++++++++++++++++++++++++++++++++++ src/public/styles.css | 23 +++++++++++++++++++++++ src/routes/index.js | 32 +++++++++++++++++++++++++++++++ src/views/index.pug | 49 +++--------------------------------------------- src/views/sub-search.pug | 36 +++++++++++++++++++++++++++++++++++ 7 files changed, 146 insertions(+), 49 deletions(-) create mode 100644 src/mixins/subUtils.pug create mode 100644 src/views/sub-search.pug (limited to 'src') diff --git a/src/geddit.js b/src/geddit.js index aee7703..d81cedf 100644 --- a/src/geddit.js +++ b/src/geddit.js @@ -263,7 +263,7 @@ class Geddit { const params = { limit: 25, - include_over_18: true, + include_over_18: false, }; return await fetch( diff --git a/src/mixins/header.pug b/src/mixins/header.pug index 4bec1f8..9cf1e1a 100644 --- a/src/mixins/header.pug +++ b/src/mixins/header.pug @@ -5,9 +5,9 @@ mixin header(user) div.header-item a(href=`/r/all`) all div.header-item - a(href=`/r/popular`) popular + a(href=`/search`) search div.header-item - a(href=`/subs`) subscriptions + a(href=`/subs`) subs if user div.header-item a(href='/dashboard') #{user.username} diff --git a/src/mixins/subUtils.pug b/src/mixins/subUtils.pug new file mode 100644 index 0000000..7f40bf4 --- /dev/null +++ b/src/mixins/subUtils.pug @@ -0,0 +1,49 @@ +- +script(defer). + async function toggleSub(sub) { + let thinger = document.getElementById(`thinger_${sub}`); + if (thinger.innerText === 'unsubscribe') { + await doThing(sub, 'unsubscribe'); + } else { + await doThing(sub, 'subscribe'); + } + } + + function getCookie(name) { + const value = `; ${document.cookie}`; + const parts = value.split(`; ${name}=`); + if (parts.length === 2) return parts.pop().split(";").shift(); + } + + async function doThing(sub, thing) { + const jwtToken = getCookie("auth_token"); + const response = await fetch(`/${thing}`, { + method: 'POST', + headers: { + 'Authorization': `Bearer ${jwtToken}`, + 'Content-Type': 'application/json', + }, + body: JSON.stringify({ subreddit: sub }), + }); + + let thinger = document.getElementById(`thinger_${sub}`); + if (thing === 'subscribe') { + thinger.innerText = 'unsubscribe'; + } else { + thinger.innerText = 'subscribe'; + } + + if (!response.ok) { + console.error(response); + console.error(`Failed to do ${thing}`); + } + } + + function toggleDetails(details_id) { + var detailsElement = document.getElementById(details_id); + if (detailsElement) { + detailsElement.open = !detailsElement.open; + } + } + + diff --git a/src/public/styles.css b/src/public/styles.css index ba2940d..3b3e80d 100644 --- a/src/public/styles.css +++ b/src/public/styles.css @@ -542,3 +542,26 @@ form input[type="submit"]:hover { .invite-link { font-family: monospace; } + +.search-bar { + display: flex; + flex-direction: row; + justify-content: space-evenly; + width: 100%; + gap: 10px; +} + +.search-input { + flex: 9; +} + +.search-button { + flex: 1; + padding: 10px; +} + +.search-results { + display: flex; + flex-direction: column; + gap: 20px; +} diff --git a/src/routes/index.js b/src/routes/index.js index e585d3d..c56b73e 100644 --- a/src/routes/index.js +++ b/src/routes/index.js @@ -103,6 +103,38 @@ router.get("/subs", authenticateToken, async (req, res) => { res.render("subs", { subs, user: req.user }); }); +// GET /search-subreddits +router.get("/search", authenticateToken, async (req, res) => { + if (!req.query || !req.query.q) { + res.render("sub-search", {}); + } else { + const { q, options } = req.query.q.split(/\s+/).reduce( + (acc, word) => { + if (word.startsWith("+")) { + acc.options.push(word.slice(1)); + } else { + acc.q += `${word} `; + } + return acc; + }, + { options: [], q: "" }, + ); + + const { items, after } = await G.searchSubreddits(q, { + include_over_18: options.includes("nsfw"), + }); + const subs = db + .query("SELECT subreddit FROM subscriptions WHERE user_id = $id") + .all({ id: req.user.id }) + .map((res) => res.subreddit); + const message = + items.length === 0 + ? "no results found" + : `showing ${items.length} results`; + res.render("sub-search", { items, subs, after, message }); + } +}); + // GET /dashboard router.get("/dashboard", authenticateToken, async (req, res) => { let invites = null; diff --git a/src/views/index.pug b/src/views/index.pug index 140cd57..636f9ac 100644 --- a/src/views/index.pug +++ b/src/views/index.pug @@ -5,50 +5,7 @@ include ../utils doctype html html +head("home") - script(defer). - async function subscribe(sub) { - await doThing(sub, 'subscribe'); - } - - async function unsubscribe(sub) { - await doThing(sub, 'unsubscribe'); - } - - function getCookie(name) { - const value = `; ${document.cookie}`; - const parts = value.split(`; ${name}=`); - if (parts.length === 2) return parts.pop().split(";").shift(); - } - - async function doThing(sub, thing) { - const jwtToken = getCookie("auth_token"); - const response = await fetch(`/${thing}`, { - method: 'POST', - headers: { - 'Authorization': `Bearer ${jwtToken}`, - 'Content-Type': 'application/json', - }, - body: JSON.stringify({ subreddit: sub }), - }); - - let thinger = document.getElementById('thinger'); - if (thing == 'subscribe') { - thinger.innerText = 'unsubscribe'; - } else { - thinger.innerText = 'subscribe'; - } - - if (!response.ok) { - console.error(`Failed to do ${thing}`); - } - } - - function toggleDetails(details_id) { - var detailsElement = document.getElementById(details_id); - if (detailsElement) { - detailsElement.open = !detailsElement.open; - } - } + include ../mixins/subUtils body main#content @@ -64,9 +21,9 @@ html if !isMulti div#button-container if isSubbed - button(onclick=`unsubscribe('${subreddit}')`)#thinger unsubscribe + button(onclick=`toggleSub('${subreddit}')` id=`thinger_${subreddit}`) unsubscribe else - button(onclick=`subscribe('${subreddit}')`)#thinger subscribe + button(onclick=`toggleSub('${subreddit}')` id=`thinger_${subreddit}`) subscribe if about && !isMulti p #{about.public_description} else diff --git a/src/views/sub-search.pug b/src/views/sub-search.pug new file mode 100644 index 0000000..4fa707e --- /dev/null +++ b/src/views/sub-search.pug @@ -0,0 +1,36 @@ +include ../mixins/header +include ../mixins/head + +doctype html +html + +head("search subreddits") + include ../mixins/subUtils + body + main#content + +header(user) + div.hero + h1 search subreddits + form(action="/search" method="get").search-bar + input(type="text" name="q" placeholder="search subreddits (add +nsfw to include over-18 results)" required).search-input + button(type="submit").search-button go + if message + div.search-message + | #{message} + if items + div.search-results + each i in items + div.search-result + - var subreddit = i.data.display_name + - var isSubbed = subs.includes(subreddit) + div.sub-title + h3 + a(href=`/r/${subreddit}`) + | r/#{subreddit} + div#button-container + if isSubbed + button(onclick=`toggleSub('${subreddit}')` id=`thinger_${subreddit}`) unsubscribe + else + button(onclick=`toggleSub('${subreddit}')` id=`thinger_${subreddit}`) subscribe + + if i.data.public_description + p #{i.data.public_description} -- cgit v1.2.3