- ` : null - } +
+ ${
+ onSwitchToApprovalMode ?
+ html`
+
+ ` : null
+ }
+
+
+ ${unapprovedPostsMessageTemplatePromise} ${postsTemplate}
There are no posts yet. ${shouldIncludeCreateLink ? html`
ctx.page.redirect('/share-photos')} href="/share-photos">Create one!` : null}
- ` :
- html`
- There are no posts yet.
ctx.page.redirect('/login')} href="/login">Log in and create one!
- `
+export const getNoPostsTemplate = (shouldIncludeCreateLink, ctx, nothingWasFound) => {
+ if (nothingWasFound) {
+ return html`Nothing was found!
` + } else { + return ctx.user?.sessionToken ? + html` +There are no posts yet. ${shouldIncludeCreateLink ? html`
ctx.page.redirect('/share-photos')} href="/share-photos">Create one!` : null}
+ ` :
+ html`
+ There are no posts yet.
ctx.page.redirect('/login')} href="/login">Log in and create one!
+ `
+ }
}
\ No newline at end of file
diff --git a/src/views/car-pictures/posts/populatePostsArr.js b/src/views/car-pictures/posts/populatePostsArr.js
new file mode 100644
index 0000000..2fb5bd9
--- /dev/null
+++ b/src/views/car-pictures/posts/populatePostsArr.js
@@ -0,0 +1,84 @@
+import { html } from "/src/lib/lit-html.js";
+import { getNoPostsTemplate } from './getNoPostsTemplate.js'
+
+export async function populatePostsArr (ctx, posts, generatorsObject, postsType, initialPopstateChanges, prevWindowPath, arrOfPostObjectIdsHasItems) {
+ if (postsType == 'unapproved') {
+ if (arrOfPostObjectIdsHasItems) {
+ const generatorReturnedObject = await generatorsObject.asyncUnapprovedSearchPostsGenerator.next();
+
+ generatorsObject.asyncUnapprovedSearchPostsGeneratorIsDone = generatorReturnedObject.done;
+ const currPopstateChanges = Number(sessionStorage.getItem('popstateChanges') || 0);
+
+ let curWindowPath = window.location.href.replace(window.location.origin, '');
+ curWindowPath = window.location.hash ? curWindowPath : curWindowPath.replace("#", '');
+
+ if (generatorReturnedObject.value?.length > 0) {
+ const twoPosts = generatorReturnedObject.value;
+
+ if ((currPopstateChanges > initialPopstateChanges) || ((curWindowPath !== prevWindowPath) && prevWindowPath.startsWith('/car-pictures'))) {
+ return Promise.reject("view changed");
+ }
+
+ posts.push(...twoPosts);
+ } else {
+ return html`${getNoPostsTemplate(postsType !== 'unapproved', ctx, true)}`
+ }
+ } else {
+ const generatorReturnedObject = await generatorsObject.asyncUnapprovedPostsGenerator.next();
+
+ generatorsObject.asyncUnapprovedPostsGeneratorIsDone = generatorReturnedObject.done;
+ const currPopstateChanges = Number(sessionStorage.getItem('popstateChanges') || 0);
+
+ let curWindowPath = window.location.href.replace(window.location.origin, '');
+ curWindowPath = window.location.hash ? curWindowPath : curWindowPath.replace("#", '');
+
+ if (generatorReturnedObject.value?.length > 0) {
+ const twoPosts = generatorReturnedObject.value;
+
+ if ((currPopstateChanges > initialPopstateChanges) || ((curWindowPath !== prevWindowPath) && prevWindowPath.startsWith('/car-pictures'))) {
+ return Promise.reject("view changed");
+ }
+
+ posts.push(...twoPosts);
+ }
+ }
+ } else {
+ if (arrOfPostObjectIdsHasItems) {
+ const generatorReturnedObject = await generatorsObject.asyncSearchPostsGenerator.next();
+ generatorsObject.asyncSearchPostsGeneratorIsDone = generatorReturnedObject.done;
+ const currPopstateChanges = Number(sessionStorage.getItem('popstateChanges') || 0);
+
+ let curWindowPath = window.location.href.replace(window.location.origin, '');
+ curWindowPath = window.location.hash ? curWindowPath : curWindowPath.replace("#", '');
+
+ if (generatorReturnedObject.value?.length > 0) {
+ const twoPosts = generatorReturnedObject.value;
+
+ if ((currPopstateChanges > initialPopstateChanges) || ((curWindowPath !== prevWindowPath) && prevWindowPath.startsWith('/car-pictures'))) {
+ return Promise.reject("view changed");
+ }
+
+ posts.push(...twoPosts);
+ } else {
+ return html`${getNoPostsTemplate(postsType !== 'unapproved', ctx, true)}`
+ }
+ } else {
+ const generatorReturnedObject = await generatorsObject.asyncPostsGenerator.next();
+ generatorsObject.asyncPostsGeneratorIsDone = generatorReturnedObject.done;
+ const currPopstateChanges = Number(sessionStorage.getItem('popstateChanges') || 0);
+
+ let curWindowPath = window.location.href.replace(window.location.origin, '');
+ curWindowPath = window.location.hash ? curWindowPath : curWindowPath.replace("#", '');
+
+ if (generatorReturnedObject.value?.length > 0) {
+ const twoPosts = generatorReturnedObject.value;
+
+ if ((currPopstateChanges > initialPopstateChanges) || ((curWindowPath !== prevWindowPath) && prevWindowPath.startsWith('/car-pictures'))) {
+ return Promise.reject("view changed");
+ }
+
+ posts.push(...twoPosts);
+ }
+ }
+ }
+}
\ No newline at end of file
diff --git a/src/views/car-pictures/posts/sectionContentTemplate.js b/src/views/car-pictures/posts/sectionContentTemplate.js
index 4bd34f5..b8dc8e9 100644
--- a/src/views/car-pictures/posts/sectionContentTemplate.js
+++ b/src/views/car-pictures/posts/sectionContentTemplate.js
@@ -2,32 +2,24 @@ import { html } from "../../../lib/lit-html.js";
import { repeat } from "../../../lib/directives/repeat.js";
import { cardTemplate } from "./cardTemplate.js";
import { getApproveClickHandler, getDeleteHandler, getLikeClickHandler } from "./postActions.js";
+import { populatePostsArr } from "./populatePostsArr.js";
-export async function getSectionContentTemplate (getNoPostsTemplate, postsType, posts, generatorsObject, ctx) {
- try {
- if (postsType == 'unapproved') {
- const generatorReturnedObject = await generatorsObject.asyncUnapprovedPostsGenerator.next();
- generatorsObject.asyncUnapprovedPostsGeneratorIsDone = generatorReturnedObject.done;
+export async function getSectionContentTemplate (getNoPostsTemplate, postsType, posts, generatorsObject, ctx, arrOfPostObjectIds, pageUrlSrchTextPromise, windowPath) {
+ //? the popstate may change while some post promises are still pending so we create this variable to prevent the rendering of posts in a wrong view
+ let initialPopstateChanges = Number(sessionStorage.getItem('popstateChanges') || 0);
+
+ //? the window path may change while some post promises are still pending so we create this variable to prevent the rendering of posts in a wrong view
+ const prevWindowPath = windowPath || ctx.canonicalPath;
- if (generatorReturnedObject.value) {
- const twoPosts = generatorReturnedObject.value;
- for (const post of twoPosts) {
- posts.push(post);
- }
- }
- } else {
- const generatorReturnedObject = await generatorsObject.asyncPostsGenerator.next();
- generatorsObject.asyncPostsGeneratorIsDone = generatorReturnedObject.done;
+ if (pageUrlSrchTextPromise) {
+ await pageUrlSrchTextPromise; //? we wait for the searching of post object ids and the initialization of srch. gens. to finish
+ }
- if (generatorReturnedObject.value) {
- const twoPosts = generatorReturnedObject.value;
- for (const post of twoPosts) {
- posts.push(post);
- }
- }
- }
+ try {
+ //? The following function may return a rejected promise, if views changed while some post promises were still pending.
+ await populatePostsArr(ctx, posts, generatorsObject, postsType, initialPopstateChanges, prevWindowPath, arrOfPostObjectIds?.length > 0);
} catch (error) {
- alert(error.message);
+ console.error(error);
throw error;
}
diff --git a/src/views/car-pictures/posts/setUpMiscStuff.js b/src/views/car-pictures/posts/setUpMiscStuff.js
deleted file mode 100644
index dd97285..0000000
--- a/src/views/car-pictures/posts/setUpMiscStuff.js
+++ /dev/null
@@ -1,16 +0,0 @@
-import { setUpScrollToTop } from "../scrollToTop.js";
-
-export function setUpMiscStuff(ctx, sectionContentPromise) {
- if (!ctx.user?.isModerator) {
- ctx.nestedShadowRoot.querySelector('section').style['justifyContent'] = 'space-around';
- } else {
- sectionContentPromise.then(() => {
- const card = ctx.nestedShadowRoot.querySelector('section > .card');
- if (card) {
- ctx.nestedShadowRoot.querySelector('section').style.setProperty('--card-margin-top', '14px');
- }
- });
- }
-
- setUpScrollToTop(ctx);
-}
\ No newline at end of file
diff --git a/src/views/car-pictures/posts/startObservingTheThirdLastCard.js b/src/views/car-pictures/posts/startObservingTheThirdLastCard.js
index d7d3893..4ae73a2 100644
--- a/src/views/car-pictures/posts/startObservingTheThirdLastCard.js
+++ b/src/views/car-pictures/posts/startObservingTheThirdLastCard.js
@@ -18,5 +18,7 @@ export function startObservingTheThirdLastCard(ctx, localRenderNew) {
// Select the elements you want to observe
const thirdLastCard = ctx.nestedShadowRoot.querySelector('.card:nth-last-child(3)');
- observer.observe(thirdLastCard);
+ if (thirdLastCard) {
+ observer.observe(thirdLastCard);
+ }
}
\ No newline at end of file
diff --git a/src/views/car-pictures/renderNew.js b/src/views/car-pictures/renderNew.js
new file mode 100644
index 0000000..68e1cba
--- /dev/null
+++ b/src/views/car-pictures/renderNew.js
@@ -0,0 +1,125 @@
+import { html } from "../../lib/lit-html.js";
+import { until } from "../../lib/directives/until.js";
+import { get2SearchedPostObjects, get2UnapprovedSearchedPostObjects } from "../../api/posts.js";
+import { sectionClickHandler } from "./infoWindow/infoWindow.js";
+import { carPicturesTemplate } from "./carPicturesTemplate.js";
+import { getSwitchToApprovalModeHandler } from "./posts/switchToApprovalModeHandler.js";
+import { getNoPostsTemplate } from "./posts/getNoPostsTemplate.js";
+import { getUnapprovedPostsMessageTemplate } from "./posts/unapprovedPostsMessageTemplate.js";
+import { getSectionContentTemplate } from "./posts/sectionContentTemplate.js";
+import { startObservingTheThirdLastCard } from "./posts/startObservingTheThirdLastCard.js";
+import { searchHandler } from "./search/searchHandler.js";
+import { setUpScrollToTop } from "./scrollToTop.js";
+import { generatorsObject } from "./generatorsObject.js";
+import { checkIfRenderShouldStop } from "./checkIfRenderShouldStop.js";
+import { srchForPostIdsAndInitSrchGens } from "./srchForPostsAndInitSrchGens.js";
+
+const loadingTemplate = () => html`
+
+
+`
+
+let miscStuffSetUp = false;
+
+let portionsRendered = 0;
+
+let unapprovedPostsMessageTemplate = null;
+
+export function resetState(posts) {
+ portionsRendered = 0;
+ posts.length = 0;
+ generatorsObject.reset();
+}
+
+export async function renderNew(ctx, posts, arrOfPostObjectIds = [], pageUrlSrchText, windowPath, searchHandlerText) {
+ if (checkIfRenderShouldStop(arrOfPostObjectIds, generatorsObject, ctx)) {
+ return;
+ }
+
+ if ((generatorsObject.asyncSearchPostsGenerator === null && ctx.hash != 'approval-mode'
+ || generatorsObject.asyncUnapprovedSearchPostsGenerator === null && ctx.hash == 'approval-mode')
+ && arrOfPostObjectIds?.length > 0) {
+
+ //? Get a new search posts generator with the new post object ids.
+
+ if (ctx.hash == 'approval-mode') {
+ generatorsObject.asyncUnapprovedSearchPostsGenerator = get2UnapprovedSearchedPostObjects(arrOfPostObjectIds);
+ generatorsObject.asyncUnapprovedSearchPostsGeneratorIsDone = false;
+ } else {
+ generatorsObject.asyncSearchPostsGenerator = get2SearchedPostObjects(arrOfPostObjectIds);
+ generatorsObject.asyncSearchPostsGeneratorIsDone = false;
+ }
+ }
+
+ let pageUrlSrchTextPromise = null;
+ if (pageUrlSrchText) {
+ pageUrlSrchTextPromise = srchForPostIdsAndInitSrchGens(ctx, pageUrlSrchText, arrOfPostObjectIds, generatorsObject);
+ }
+
+ const sectionContentPromise = getSectionContentTemplate(
+ getNoPostsTemplate,
+ ctx.hash == 'approval-mode' ? 'unapproved' : null,
+ posts,
+ generatorsObject,
+ ctx,
+ arrOfPostObjectIds,
+ pageUrlSrchTextPromise,
+ windowPath
+ );
+
+ if (posts.length > 0) {
+ //? If we already have 2 posts, the displaying of the "loading" template is avoided and the posts are shown after they have loaded.
+ try {
+ await sectionContentPromise; //? we wait for the two cards to show up on the screen
+ } catch (error) {
+ //? The sectionContentPromise may reject, if views changed while some post promises were still pending.
+ console.error(error)
+ return;
+ }
+ }
+
+ //? If we already got the message, there is no need to get it again.
+ if (ctx.user && (unapprovedPostsMessageTemplate === null || posts.length == 0)) {
+ unapprovedPostsMessageTemplate = until(getUnapprovedPostsMessageTemplate(sectionContentPromise), null);
+ }
+
+ ctx.render(
+ carPicturesTemplate(
+ ev => sectionClickHandler(ev, posts, ctx),
+ until(sectionContentPromise, loadingTemplate()),
+ ctx.user?.isModerator ? getSwitchToApprovalModeHandler(ctx) : null,
+ ctx.user ? unapprovedPostsMessageTemplate : null,
+ ev => searchHandler(renderNew.bind(null, ctx, posts), ev, resetState.bind(null, posts), ctx),
+ ctx,
+ Boolean(arrOfPostObjectIds)
+ )
+ );
+
+ ctx.nestedShadowRoot.querySelector('#postsSearchInput').value = pageUrlSrchText || searchHandlerText || '';
+ if ((arrOfPostObjectIds == null || arrOfPostObjectIds?.length == 0) && posts.length == 0 && !pageUrlSrchText) {
+ }
+
+ if (!miscStuffSetUp) {
+ setUpScrollToTop(ctx);
+ miscStuffSetUp = true;
+ }
+
+ try {
+ await sectionContentPromise; //? we wait for the two cards to show up on the screen
+ } catch (error) {
+ //? the sectionContentPromise may reject if views change durring it "pending" state
+ console.error(error)
+ return;
+ }
+
+ portionsRendered++;
+
+ if (portionsRendered < 2) {
+ renderNew(ctx, posts, arrOfPostObjectIds); //? render one more portion
+ } else {
+ portionsRendered = 0;
+ startObservingTheThirdLastCard(ctx, renderNew.bind(null, ctx, posts, arrOfPostObjectIds)); //? When user sees the third card, repeat the rendering cycle.
+ }
+}
\ No newline at end of file
diff --git a/src/views/car-pictures/search/searchHandler.js b/src/views/car-pictures/search/searchHandler.js
new file mode 100644
index 0000000..023248d
--- /dev/null
+++ b/src/views/car-pictures/search/searchHandler.js
@@ -0,0 +1,37 @@
+import { searchForPosts } from "../../../api/posts.js";
+
+export async function searchHandler(renderNew, ev, resetState) {
+ ev.preventDefault();
+
+ const searchText = ev.target.querySelector('input.form-control').value.trim();
+ const srchBtn = ev.target.querySelector('button[type="submit"]');
+
+ const wordsRegEx = /(?:(?:[a-zA-Z_]|[\u0410-\u044F])|['-](?:[a-zA-Z_]|[\u0410-\u044F])|\d+(?:\.\d+)*)+/gm;
+ if (!wordsRegEx.test(searchText)) {
+ alert("Invalid search text!");
+ return;
+ }
+
+ const curUrl = `?search=${searchText}${window.location.hash}`;
+ history.pushState({}, "", curUrl);
+
+ //? (in getSectionContentTemplate) the window path may change while some post promises are still pending so we create this variable to prevent the rendering of posts in a wrong view
+ let windowPath = window.location.href.replace(window.location.origin, '');
+ windowPath = window.location.hash ? windowPath : windowPath.replace("#", '');
+
+ srchBtn.textContent = "Searching...";
+ srchBtn.disabled = true;
+
+ const srchResultsArr = await searchForPosts(searchText);
+ const postObjIds = [...new Set(srchResultsArr.sort((a, b) => b.matchCoefficient - a.matchCoefficient).map(srchResObj => srchResObj.postId))];
+
+ srchBtn.textContent = "Search";
+ srchBtn.removeAttribute('disabled');
+
+ if (srchResultsArr.length == 0) {
+ renderNew([]); //? render "nothing was found" message
+ } else {
+ resetState();
+ renderNew(postObjIds, null, windowPath, searchText);
+ }
+}
\ No newline at end of file
diff --git a/src/views/car-pictures/srchForPostsAndInitSrchGens.js b/src/views/car-pictures/srchForPostsAndInitSrchGens.js
new file mode 100644
index 0000000..ca92f26
--- /dev/null
+++ b/src/views/car-pictures/srchForPostsAndInitSrchGens.js
@@ -0,0 +1,15 @@
+import { get2SearchedPostObjects, get2UnapprovedSearchedPostObjects, searchForPosts } from "../../api/posts.js";
+
+export async function srchForPostIdsAndInitSrchGens(ctx, urlSrchText, arrOfPostObjectIds, generatorsObject) {
+ const srchResultsArr = await searchForPosts(urlSrchText);
+ const postObjIds = [...new Set(srchResultsArr.sort((a, b) => b.matchCoefficient - a.matchCoefficient).map(srchResObj => srchResObj.postId))];
+ arrOfPostObjectIds.push(...postObjIds)
+
+ if (ctx.hash == 'approval-mode') {
+ generatorsObject.asyncUnapprovedSearchPostsGenerator = get2UnapprovedSearchedPostObjects(arrOfPostObjectIds);
+ generatorsObject.asyncUnapprovedSearchPostsGeneratorIsDone = false;
+ } else {
+ generatorsObject.asyncSearchPostsGenerator = get2SearchedPostObjects(arrOfPostObjectIds);
+ generatorsObject.asyncSearchPostsGeneratorIsDone = false;
+ }
+}
\ No newline at end of file