diff --git a/app-main/.prettierrc b/app-main/.prettierrc index 3d5eb71..4a68350 100644 --- a/app-main/.prettierrc +++ b/app-main/.prettierrc @@ -1,5 +1,22 @@ { "printWidth": 80, "singleQuote": false, - "tabWidth": 2 + "tabWidth": 2, + "useTabs": false, + "overrides": [ + { + "files": "*.html", + "options": { + "useTabs": true, + "singleQuote": false + } + }, + { + "files": "*.js", + "options": { + "useTabs": false, + "singleQuote": true + } + } + ] } diff --git a/app-main/babel.config.cjs b/app-main/babel.config.cjs index 8283743..24d5e76 100644 --- a/app-main/babel.config.cjs +++ b/app-main/babel.config.cjs @@ -1,3 +1,3 @@ module.exports = { - presets: [['@babel/preset-env', {targets: {node: 'current'}}]], + presets: [["@babel/preset-env", { targets: { node: "current" } }]], }; diff --git a/app-main/gulpfile.js b/app-main/gulpfile.js index 3efc06f..3a8cbec 100644 --- a/app-main/gulpfile.js +++ b/app-main/gulpfile.js @@ -1,16 +1,18 @@ var gulp = require('gulp'); var concat = require('gulp-concat'); -gulp.task('pack-js', function() { - return gulp.src(['public/js/index.js']) - .pipe(concat('bundle.js')) - .pipe(gulp.dest('public/build/js')) +gulp.task('pack-js', function () { + return gulp + .src(['public/js/index.js']) + .pipe(concat('bundle.js')) + .pipe(gulp.dest('public/build/js')); }); -gulp.task('pack-css', function() { - return gulp.src(['public/css/style.css']) - .pipe(concat('stylesheet.css')) - .pipe(gulp.dest('public/build/css')) +gulp.task('pack-css', function () { + return gulp + .src(['public/css/style.css']) + .pipe(concat('stylesheet.css')) + .pipe(gulp.dest('public/build/css')); }); -gulp.task('default', gulp.series(['pack-js', 'pack-css'])); \ No newline at end of file +gulp.task('default', gulp.series(['pack-js', 'pack-css'])); diff --git a/app-main/public/404.html b/app-main/public/404.html index fb19cc7..e9433bf 100644 --- a/app-main/public/404.html +++ b/app-main/public/404.html @@ -5,16 +5,10 @@ Page Not Found - + - + - tag.classList.contains("selected") + tag.classList.contains('selected') ); selectedTags.forEach((tag) => { - tag.classList.remove("selected"); + tag.classList.remove('selected'); }); } export function handleViewClick(lesson) { - const title = lesson.querySelector(".lesson-card-title").innerText; - const content = lesson.querySelector(".lesson-card-content").innerHTML; + const title = lesson.querySelector('.lesson-card-title').innerText; + const content = lesson.querySelector('.lesson-card-content').innerHTML; modalLessonTitle.innerText = title; modalLessonContent.innerHTML = content; - modalLesson.removeAttribute("hidden"); - overlay.removeAttribute("hidden"); - overlay.classList.add("dark"); + modalLesson.removeAttribute('hidden'); + overlay.removeAttribute('hidden'); + overlay.classList.add('dark'); } export function handleClearBtn() { let textLessonContent = quill.root.innerHTML; - let textTitleContent = document.querySelector(".create-lesson-input"); + let textTitleContent = document.querySelector('.create-lesson-input'); if ( textTitleContent.value.length > 0 || - (textLessonContent.length >= 8 && textLessonContent !== "


") + (textLessonContent.length >= 8 && textLessonContent !== '


') ) { - clearBtn.removeAttribute("hidden"); + clearBtn.removeAttribute('hidden'); } else { - clearBtn.setAttribute("hidden", ""); + clearBtn.setAttribute('hidden', ''); } } export function handleCloseLessonModal() { - modalLessonTitle.innerHTML = ""; - modalLessonContent.innerHTML = ""; + modalLessonTitle.innerHTML = ''; + modalLessonContent.innerHTML = ''; - modalLesson.setAttribute("hidden", ""); - overlay.setAttribute("hidden", ""); - overlay.classList.remove("dark"); + modalLesson.setAttribute('hidden', ''); + overlay.setAttribute('hidden', ''); + overlay.classList.remove('dark'); } export function handleEscapeLessonModal(event) { - if (event.key === "Escape" || event.keyCode === 27) { + if (event.key === 'Escape' || event.keyCode === 27) { handleCloseLessonModal(); } } export function handleTagVisibility(e) { - const tagSelectors = document.querySelector(".tag-selectors"); - tagSelectors.classList.toggle("hidden"); + const tagSelectors = document.querySelector('.tag-selectors'); + tagSelectors.classList.toggle('hidden'); } export function handleTagSelect(e) { - const addTagButton = document.querySelector(".add-tag"); + const addTagButton = document.querySelector('.add-tag'); let tag = e.target; - tag.classList.toggle("selected"); + tag.classList.toggle('selected'); } diff --git a/app-main/public/js/events/eventListeners.js b/app-main/public/js/events/eventListeners.js index 1fbc7ac..88966d0 100644 --- a/app-main/public/js/events/eventListeners.js +++ b/app-main/public/js/events/eventListeners.js @@ -6,38 +6,38 @@ import { handleViewClick, handleTagVisibility, handleTagSelect, -} from "./eventHandlers.js"; -import { addLesson } from "../lessons/index.js"; -import registerSW from "./serviceWorker.js"; +} from './eventHandlers.js'; +import { addLesson } from '../lessons/index.js'; +import registerSW from './serviceWorker.js'; export default function setEventListeners() { // cache necessary elements - const overlay = document.querySelector(".overlay"); - const modalLessonClose = document.querySelector(".modal-lesson-close"); - const formElement = document.querySelector("form"); - const clearBtn = document.querySelector(".create-lesson-clear"); - const addTagButton = document.querySelector(".add-tag"); - const tagSelectors = document.querySelector(".tag-selectors"); - - formElement.addEventListener("submit", function (e) { + const overlay = document.querySelector('.overlay'); + const modalLessonClose = document.querySelector('.modal-lesson-close'); + const formElement = document.querySelector('form'); + const clearBtn = document.querySelector('.create-lesson-clear'); + const addTagButton = document.querySelector('.add-tag'); + const tagSelectors = document.querySelector('.tag-selectors'); + + formElement.addEventListener('submit', function (e) { e.preventDefault(); addLesson(); }); // Modal event listeners - modalLessonClose.addEventListener("click", handleCloseLessonModal); - overlay.addEventListener("click", handleCloseLessonModal); - document.addEventListener("keydown", handleEscapeLessonModal); + modalLessonClose.addEventListener('click', handleCloseLessonModal); + overlay.addEventListener('click', handleCloseLessonModal); + document.addEventListener('keydown', handleEscapeLessonModal); - clearBtn.addEventListener("click", handleClear); + clearBtn.addEventListener('click', handleClear); - formElement.addEventListener("keyup", handleClearBtn); + formElement.addEventListener('keyup', handleClearBtn); - addTagButton.addEventListener("click", handleTagVisibility); + addTagButton.addEventListener('click', handleTagVisibility); - tagSelectors.addEventListener("click", handleTagSelect); + tagSelectors.addEventListener('click', handleTagSelect); - window.addEventListener("load", () => { + window.addEventListener('load', () => { registerSW(); }); } diff --git a/app-main/public/js/events/eventListeners.test.js b/app-main/public/js/events/eventListeners.test.js index 65babf2..8aa47f5 100644 --- a/app-main/public/js/events/eventListeners.test.js +++ b/app-main/public/js/events/eventListeners.test.js @@ -1,58 +1,58 @@ -const eventHandlers = require("./eventHandlers.js"); +const eventHandlers = require('./eventHandlers.js'); -describe("Checks that event listeners are called appropriately", () => { - test("Test modal lesson close click event", () => { - document.body.innerHTML = ` +describe('Checks that event listeners are called appropriately', () => { + test('Test modal lesson close click event', () => { + document.body.innerHTML = ` `; - const modalLessonClose = document.querySelector(".modal-lesson-close"); + const modalLessonClose = document.querySelector('.modal-lesson-close'); - eventHandlers.handleCloseLessonModal = jest.fn(() => {}); - modalLessonClose.addEventListener( - "click", - eventHandlers.handleCloseLessonModal - ); + eventHandlers.handleCloseLessonModal = jest.fn(() => {}); + modalLessonClose.addEventListener( + 'click', + eventHandlers.handleCloseLessonModal + ); - modalLessonClose.click(); - expect(eventHandlers.handleCloseLessonModal).toBeCalled(); - }); + modalLessonClose.click(); + expect(eventHandlers.handleCloseLessonModal).toBeCalled(); + }); - test("Test overlay lesson close click event", () => { - document.body.innerHTML = ` + test('Test overlay lesson close click event', () => { + document.body.innerHTML = `
`; - const overlay = document.querySelector(".overlay"); + const overlay = document.querySelector('.overlay'); - overlay.click(); - expect(eventHandlers.handleCloseLessonModal).toBeCalled(); - }); + overlay.click(); + expect(eventHandlers.handleCloseLessonModal).toBeCalled(); + }); - test("Test lesson close escape keypress event", () => { - eventHandlers.handleEscapeLessonModal = jest.fn(() => {}); - document.addEventListener("keydown", eventHandlers.handleEscapeLessonModal); + test('Test lesson close escape keypress event', () => { + eventHandlers.handleEscapeLessonModal = jest.fn(() => {}); + document.addEventListener('keydown', eventHandlers.handleEscapeLessonModal); - const event = new KeyboardEvent("keydown", { keyCode: 27, which: 27 }); - document.dispatchEvent(event); + const event = new KeyboardEvent('keydown', { keyCode: 27, which: 27 }); + document.dispatchEvent(event); - expect(eventHandlers.handleEscapeLessonModal).toBeCalled(); - }); + expect(eventHandlers.handleEscapeLessonModal).toBeCalled(); + }); - test("Test clear button click event", () => { - document.body.innerHTML = ` + test('Test clear button click event', () => { + document.body.innerHTML = ` `; - const clearBtn = document.querySelector(".create-lesson-clear"); - eventHandlers.handleClear = jest.fn(() => {}); - clearBtn.addEventListener("click", eventHandlers.handleClear); + const clearBtn = document.querySelector('.create-lesson-clear'); + eventHandlers.handleClear = jest.fn(() => {}); + clearBtn.addEventListener('click', eventHandlers.handleClear); - clearBtn.click(); - expect(eventHandlers.handleClear).toBeCalled(); - }); + clearBtn.click(); + expect(eventHandlers.handleClear).toBeCalled(); + }); - test("Test form clear button", () => { - document.body.innerHTML = ` + test('Test form clear button', () => { + document.body.innerHTML = `
{ `; - const formElement = document.querySelector("form"); - eventHandlers.handleClearBtn = jest.fn(() => {}); - formElement.addEventListener("keyup", eventHandlers.handleClearBtn); + const formElement = document.querySelector('form'); + eventHandlers.handleClearBtn = jest.fn(() => {}); + formElement.addEventListener('keyup', eventHandlers.handleClearBtn); - const event = new KeyboardEvent("keyup"); - formElement.dispatchEvent(event); + const event = new KeyboardEvent('keyup'); + formElement.dispatchEvent(event); - expect(eventHandlers.handleClearBtn).toBeCalled(); - }); + expect(eventHandlers.handleClearBtn).toBeCalled(); + }); - test("Test addTagButton click event", () => { - document.body.innerHTML = ` + test('Test addTagButton click event', () => { + document.body.innerHTML = ` `; - const addTagButton = document.querySelector(".add-tag"); - eventHandlers.handleTagVisibility = jest.fn(() => {}); - addTagButton.addEventListener("click", eventHandlers.handleTagVisibility); + const addTagButton = document.querySelector('.add-tag'); + eventHandlers.handleTagVisibility = jest.fn(() => {}); + addTagButton.addEventListener('click', eventHandlers.handleTagVisibility); - addTagButton.click(); - expect(eventHandlers.handleTagVisibility).toBeCalled(); - }); + addTagButton.click(); + expect(eventHandlers.handleTagVisibility).toBeCalled(); + }); - test("Test tagSelectors click event", () => { - document.body.innerHTML = ` + test('Test tagSelectors click event', () => { + document.body.innerHTML = ` `; - const tagSelectors = document.querySelector(".tag-selectors"); - eventHandlers.handleTagSelect = jest.fn(() => {}); - tagSelectors.addEventListener("click", eventHandlers.handleTagSelect); + const tagSelectors = document.querySelector('.tag-selectors'); + eventHandlers.handleTagSelect = jest.fn(() => {}); + tagSelectors.addEventListener('click', eventHandlers.handleTagSelect); - tagSelectors.click(); - expect(eventHandlers.handleTagSelect).toBeCalled(); - }); + tagSelectors.click(); + expect(eventHandlers.handleTagSelect).toBeCalled(); + }); }); diff --git a/app-main/public/js/events/serviceWorker.js b/app-main/public/js/events/serviceWorker.js index 3663694..0946e8f 100644 --- a/app-main/public/js/events/serviceWorker.js +++ b/app-main/public/js/events/serviceWorker.js @@ -1,12 +1,12 @@ export default async function registerSW() { - if ("serviceWorker" in navigator) { + if ('serviceWorker' in navigator) { try { - await navigator.serviceWorker.register("../../sw.js"); - console.log("Service Worker registered"); + await navigator.serviceWorker.register('../../sw.js'); + console.log('Service Worker registered'); } catch (e) { - alert("Service Worker registration failed."); + alert('Service Worker registration failed.'); } } else { - alert("Your browser does not support service workers."); + alert('Your browser does not support service workers.'); } } diff --git a/app-main/public/js/index.js b/app-main/public/js/index.js index c9ac6cc..ac7e990 100644 --- a/app-main/public/js/index.js +++ b/app-main/public/js/index.js @@ -1,4 +1,4 @@ -import init from "./init/init.js"; +import init from './init/init.js'; // initialize Application init(); diff --git a/app-main/public/js/init/avatars.js b/app-main/public/js/init/avatars.js index 3e3ff0f..cd3d949 100644 --- a/app-main/public/js/init/avatars.js +++ b/app-main/public/js/init/avatars.js @@ -1,12 +1,12 @@ const avatars = [ - "bear", - "butterfly", - "elephant", - "giraffe", - "goldfish", - "horse", - "octopus", - "parrot", + 'bear', + 'butterfly', + 'elephant', + 'giraffe', + 'goldfish', + 'horse', + 'octopus', + 'parrot', ]; export default avatars; diff --git a/app-main/public/js/init/init.js b/app-main/public/js/init/init.js index 974bd99..4495beb 100644 --- a/app-main/public/js/init/init.js +++ b/app-main/public/js/init/init.js @@ -1,8 +1,8 @@ -import { quill } from "../quill_init.js"; -import setEventListeners from "../events/eventListeners.js"; -import setUser from "./setUser.js"; -import showContainers from "./showContainers.js"; -import setTags from "./setTags.js"; +import { quill } from '../quill_init.js'; +import setEventListeners from '../events/eventListeners.js'; +import setUser from './setUser.js'; +import showContainers from './showContainers.js'; +import setTags from './setTags.js'; export default function init() { // create a quill diff --git a/app-main/public/js/init/setTags.js b/app-main/public/js/init/setTags.js index 66b4b67..037120d 100644 --- a/app-main/public/js/init/setTags.js +++ b/app-main/public/js/init/setTags.js @@ -1,18 +1,18 @@ export default function setTags() { const tags = [ - "programming", - "in-progress", - "frameworks", - "data-structures", - "algorithms", + 'programming', + 'in-progress', + 'frameworks', + 'data-structures', + 'algorithms', ]; - const tagSelectors = document.querySelector(".tag-selectors"); + const tagSelectors = document.querySelector('.tag-selectors'); tags.forEach((tag) => { - let option = document.createElement("div"); + let option = document.createElement('div'); option.value = tag; - option.className = "tagCheckboxes"; + option.className = 'tagCheckboxes'; option.classList.add(tag); tagSelectors.appendChild(option); }); diff --git a/app-main/public/js/init/setTags.test.js b/app-main/public/js/init/setTags.test.js index 9b0e6f3..320c9f8 100644 --- a/app-main/public/js/init/setTags.test.js +++ b/app-main/public/js/init/setTags.test.js @@ -7,34 +7,30 @@ test('Tests creating elements to hold tags', () => { // Tags hardcoded in setTags.js const tags = [ - "programming", - "in-progress", - "frameworks", - "data-structures", - "algorithms", + 'programming', + 'in-progress', + 'frameworks', + 'data-structures', + 'algorithms', ]; setTags(); - const tagSelectors = Array.from(document.querySelector(".tag-selectors").children); + const tagSelectors = Array.from( + document.querySelector('.tag-selectors').children + ); expect(tagSelectors.length).toBe(5); - tagSelectors.forEach(element => { - + tagSelectors.forEach((element) => { // Expects tagCheckboxes className to be added to each element - expect(element.className).toEqual( - expect.stringContaining("tagCheckboxes") - ); + expect(element.className).toEqual(expect.stringContaining('tagCheckboxes')); // Expects elements value to be one from array - expect(tags).toEqual( - expect.arrayContaining([element.value]) - ); + expect(tags).toEqual(expect.arrayContaining([element.value])); // Expects elements class to be one from array - expect([...tags, "tagCheckboxes"]).toEqual( + expect([...tags, 'tagCheckboxes']).toEqual( expect.arrayContaining(Array.from(element.classList)) ); - }); -}); \ No newline at end of file +}); diff --git a/app-main/public/js/init/setUser.js b/app-main/public/js/init/setUser.js index 1f1bd26..2b491ea 100644 --- a/app-main/public/js/init/setUser.js +++ b/app-main/public/js/init/setUser.js @@ -1,11 +1,11 @@ -import avatars from "./avatars.js"; -import { renderLessons } from "../lessons/index.js"; +import avatars from './avatars.js'; +import { renderLessons } from '../lessons/index.js'; export default function setUser() { - const avatarElement = document.querySelector(".avatar img"); - if (!localStorage.getItem("user")) { + const avatarElement = document.querySelector('.avatar img'); + if (!localStorage.getItem('user')) { localStorage.setItem( - "user", + 'user', JSON.stringify({ avatar: `/images/avatars/${ avatars[Math.floor(Math.random() * avatars.length)] @@ -14,10 +14,10 @@ export default function setUser() { }) ); } else { - renderLessons(JSON.parse(localStorage.getItem("user"))); + renderLessons(JSON.parse(localStorage.getItem('user'))); } avatarElement.setAttribute( - "src", - JSON.parse(localStorage.getItem("user")).avatar + 'src', + JSON.parse(localStorage.getItem('user')).avatar ); } diff --git a/app-main/public/js/init/setUser.test.js b/app-main/public/js/init/setUser.test.js index a7a8977..c061cff 100644 --- a/app-main/public/js/init/setUser.test.js +++ b/app-main/public/js/init/setUser.test.js @@ -1,15 +1,15 @@ -import setUser from "./setUser.js"; +import setUser from './setUser.js'; -test("Tests setting user data when local storage is empty", () => { - document.body.innerHTML = ` +test('Tests setting user data when local storage is empty', () => { + document.body.innerHTML = `
avatar
`; - const avatarElement = document.querySelector(".avatar img"); + const avatarElement = document.querySelector('.avatar img'); - setUser(); + setUser(); - expect(avatarElement.attributes.src).not.toBe(undefined); + expect(avatarElement.attributes.src).not.toBe(undefined); }); diff --git a/app-main/public/js/init/showContainers.js b/app-main/public/js/init/showContainers.js index fcd5758..78d09be 100644 --- a/app-main/public/js/init/showContainers.js +++ b/app-main/public/js/init/showContainers.js @@ -1,7 +1,7 @@ export default function showContainers() { - document.querySelector(".pre-auth-container").setAttribute("hidden", ""); - document.querySelector(".profile").removeAttribute("hidden"); - document.querySelector(".app-container").removeAttribute("hidden"); - document.querySelector(".modal").setAttribute("hidden", ""); - document.querySelector(".overlay").setAttribute("hidden", ""); + document.querySelector('.pre-auth-container').setAttribute('hidden', ''); + document.querySelector('.profile').removeAttribute('hidden'); + document.querySelector('.app-container').removeAttribute('hidden'); + document.querySelector('.modal').setAttribute('hidden', ''); + document.querySelector('.overlay').setAttribute('hidden', ''); } diff --git a/app-main/public/js/init/showContainers.test.js b/app-main/public/js/init/showContainers.test.js index ea200e3..176a4c1 100644 --- a/app-main/public/js/init/showContainers.test.js +++ b/app-main/public/js/init/showContainers.test.js @@ -1,6 +1,6 @@ -import showContainers from "./showContainers.js"; +import showContainers from './showContainers.js'; -test("Tests adjusting/removing classes from container elements", () => { +test('Tests adjusting/removing classes from container elements', () => { document.body.innerHTML = `
@@ -9,19 +9,17 @@ test("Tests adjusting/removing classes from container elements", () => {
`; - const preAuthContainer = document.querySelector(".pre-auth-container"); - const profile = document.querySelector(".profile"); - const appContainer = document.querySelector(".app-container"); - const modal = document.querySelector(".modal"); - const overlay = document.querySelector(".overlay"); - + const preAuthContainer = document.querySelector('.pre-auth-container'); + const profile = document.querySelector('.profile'); + const appContainer = document.querySelector('.app-container'); + const modal = document.querySelector('.modal'); + const overlay = document.querySelector('.overlay'); showContainers(); - expect(preAuthContainer.attributes.hidden.value).toBe(""); + expect(preAuthContainer.attributes.hidden.value).toBe(''); expect(profile.attributes.hidden).toBe(undefined); expect(appContainer.attributes.hidden).toBe(undefined); - expect(modal.attributes.hidden.value).toBe(""); - expect(overlay.attributes.hidden.value).toBe(""); - + expect(modal.attributes.hidden.value).toBe(''); + expect(overlay.attributes.hidden.value).toBe(''); }); diff --git a/app-main/public/js/lessons/index.js b/app-main/public/js/lessons/index.js index d1d266b..0c7c1a5 100644 --- a/app-main/public/js/lessons/index.js +++ b/app-main/public/js/lessons/index.js @@ -1,37 +1,37 @@ -import { quill } from "../quill_init.js"; -import lessonHelper from "./helper.js"; -import { handleClear, handleViewClick } from "../events/eventHandlers.js"; +import { quill } from '../quill_init.js'; +import lessonHelper from './helper.js'; +import { handleClear, handleViewClick } from '../events/eventHandlers.js'; // cache elements that are globally necessary -const lessonsContainer = document.querySelector(".lessons"); +const lessonsContainer = document.querySelector('.lessons'); const createLessonContainer = document.querySelector( - ".create-lesson-container" + '.create-lesson-container' ); -const lessonInput = document.querySelector(".create-lesson-input"); -const tagSelectors = document.querySelector(".tag-selectors"); +const lessonInput = document.querySelector('.create-lesson-input'); +const tagSelectors = document.querySelector('.tag-selectors'); // handle if no lessons in local storage function handleNoLessons() { - if (JSON.parse(localStorage.getItem("user")).lessons.length) { + if (JSON.parse(localStorage.getItem('user')).lessons.length) { return; } - const noLessons = document.createElement("p"); - noLessons.classList.add("no-lessons"); + const noLessons = document.createElement('p'); + noLessons.classList.add('no-lessons'); - noLessons.textContent = "No lessons :("; + noLessons.textContent = 'No lessons :('; lessonsContainer.appendChild(noLessons); } // Count lessons function handleLessonsCount() { - const lessonCount = document.querySelector(".lessons-count"); - if (JSON.parse(localStorage.getItem("user")).lessons.length) { + const lessonCount = document.querySelector('.lessons-count'); + if (JSON.parse(localStorage.getItem('user')).lessons.length) { lessonCount.innerHTML = JSON.parse( - localStorage.getItem("user") + localStorage.getItem('user') ).lessons.length; } else { - lessonCount.innerHTML = ""; + lessonCount.innerHTML = ''; return; } } @@ -39,23 +39,23 @@ function handleLessonsCount() { // Display lesson in editor function handleEditClick(lesson) { // cache clearBtn and submit button - const clearBtn = document.querySelector(".create-lesson-clear"); - const submitLessonElement = document.querySelector("#submit"); + const clearBtn = document.querySelector('.create-lesson-clear'); + const submitLessonElement = document.querySelector('#submit'); // get lesson title and content - const title = lesson.querySelector(".lesson-card-title").innerText; - const content = lesson.querySelector(".lesson-card-content").innerHTML; + const title = lesson.querySelector('.lesson-card-title').innerText; + const content = lesson.querySelector('.lesson-card-content').innerHTML; const delta = quill.clipboard.convert(content); // switch view state createLessonContainer.setAttribute( - "view", - `edit-lesson:${lesson.getAttribute("data-id")}` + 'view', + `edit-lesson:${lesson.getAttribute('data-id')}` ); - clearBtn.removeAttribute("hidden"); + clearBtn.removeAttribute('hidden'); - quill.setContents(delta, "silent"); + quill.setContents(delta, 'silent'); lessonInput.value = title; - submitLessonElement.textContent = "UPDATE LESSON"; + submitLessonElement.textContent = 'UPDATE LESSON'; } // handle buttons in lesson @@ -63,14 +63,14 @@ function lessonHandler(e) { const lessonCard = e.currentTarget; switch (e.target.id) { - case "delete": - removeLesson(lessonCard.getAttribute("data-id")); - alert("Lesson Deleted Successfully!"); + case 'delete': + removeLesson(lessonCard.getAttribute('data-id')); + alert('Lesson Deleted Successfully!'); return; - case "view": + case 'view': handleViewClick(lessonCard); return; - case "edit": + case 'edit': handleEditClick(lessonCard); return; } @@ -81,73 +81,73 @@ export function renderLessons({ lessons }) { handleClear(); if (lessonsContainer.childElementCount) { - lessonsContainer.innerHTML = ""; + lessonsContainer.innerHTML = ''; } lessons.forEach(({ title, content, id }) => { // create each element of card const lessonCard = lessonHelper({ - varName: document.createElement("div"), + varName: document.createElement('div'), eventListener: { click: lessonHandler }, - classList: ["lesson-card"], - attribute: [{ "data-id": id }], + classList: ['lesson-card'], + attribute: [{ 'data-id': id }], }); const buttonContainer = lessonHelper({ - varName: document.createElement("div"), - classList: ["lesson-card-content-buttons"], + varName: document.createElement('div'), + classList: ['lesson-card-content-buttons'], }); const titleContainer = lessonHelper({ - varName: document.createElement("div"), - classList: ["lesson-card-title-container"], + varName: document.createElement('div'), + classList: ['lesson-card-title-container'], }); const lessonTitle = lessonHelper({ - varName: document.createElement("h2"), - classList: ["lesson-card-title"], + varName: document.createElement('h2'), + classList: ['lesson-card-title'], textContent: title, }); const lessonContent = lessonHelper({ - varName: document.createElement("div"), - classList: ["lesson-card-content", "ql-editor", "ql-container"], + varName: document.createElement('div'), + classList: ['lesson-card-content', 'ql-editor', 'ql-container'], innerHTML: content, }); const lessonRemoveBtn = lessonHelper({ - varName: document.createElement("div"), - classList: ["button"], - id: "delete", + varName: document.createElement('div'), + classList: ['button'], + id: 'delete', }); const removeIcon = lessonHelper({ - varName: document.createElement("img"), + varName: document.createElement('img'), attribute: [ - { alt: "remove lesson icon" }, - { src: "./images/cancel-white.svg" }, + { alt: 'remove lesson icon' }, + { src: './images/cancel-white.svg' }, ], - id: "delete", + id: 'delete', }); const editIcon = lessonHelper({ - varName: document.createElement("img"), + varName: document.createElement('img'), attribute: [ - { alt: "edit lesson icon" }, - { src: "./images/edit-white.svg" }, + { alt: 'edit lesson icon' }, + { src: './images/edit-white.svg' }, ], - id: "edit", + id: 'edit', }); const lessonEditBtn = lessonHelper({ - varName: document.createElement("button"), - classList: ["button"], - id: "edit", + varName: document.createElement('button'), + classList: ['button'], + id: 'edit', }); const lessonViewBtn = lessonHelper({ - varName: document.createElement("button"), - classList: ["button"], - textContent: "VIEW", - id: "view", + varName: document.createElement('button'), + classList: ['button'], + textContent: 'VIEW', + id: 'view', }); // append elements to card @@ -172,27 +172,27 @@ export function renderLessons({ lessons }) { export function addLesson() { try { // get user - const user = JSON.parse(localStorage.getItem("user")); + const user = JSON.parse(localStorage.getItem('user')); // get editor content; const content = quill.root.innerHTML; // Boolean for if edit View const isEditView = createLessonContainer - .getAttribute("view") - .includes("edit-lesson"); + .getAttribute('view') + .includes('edit-lesson'); // filter tags that are "selected" upon submission const tags = [...tagSelectors.children].filter((tag) => - tag.classList.contains("selected") + tag.classList.contains('selected') ); // Regex to match any number of whitespaces in the content form. var regex = /<(.|\n)*?>/g; - if (content.replace(regex, "").trim().length === 0) { - alert("Tried to add empty lesson note."); + if (content.replace(regex, '').trim().length === 0) { + alert('Tried to add empty lesson note.'); return; } if (isEditView) { - const id = createLessonContainer.getAttribute("view").split(":")[1]; + const id = createLessonContainer.getAttribute('view').split(':')[1]; user.lessons = user.lessons.map((lesson) => { if (lesson.id === id) { @@ -204,13 +204,13 @@ export function addLesson() { }); if (!user.lessons.length) { - alert("Tried to add empty lessons."); + alert('Tried to add empty lessons.'); return; } - localStorage.setItem("user", JSON.stringify(user)); + localStorage.setItem('user', JSON.stringify(user)); renderLessons(user); - createLessonContainer.setAttribute("view", "create-lesson"); + createLessonContainer.setAttribute('view', 'create-lesson'); } else { user.lessons.push({ id: String(Math.floor(Math.random() * 90000 + 10000)), @@ -219,37 +219,37 @@ export function addLesson() { tags, }); - localStorage.setItem("user", JSON.stringify(user)); + localStorage.setItem('user', JSON.stringify(user)); - lessonInput.value = ""; + lessonInput.value = ''; renderLessons(user); } - let submitLessonElement = document.getElementById("submit"); - if (submitLessonElement.innerText === "UPDATE LESSON") { - submitLessonElement.innerText = "ADD LESSON"; + let submitLessonElement = document.getElementById('submit'); + if (submitLessonElement.innerText === 'UPDATE LESSON') { + submitLessonElement.innerText = 'ADD LESSON'; } } catch { - alert("Failed to add lesson. Try again later!"); + alert('Failed to add lesson. Try again later!'); } } // function to remove lesson function removeLesson(deleteId) { try { - const user = JSON.parse(localStorage.getItem("user")); + const user = JSON.parse(localStorage.getItem('user')); user.lessons = user.lessons.filter((lesson) => lesson.id !== deleteId); - localStorage.setItem("user", JSON.stringify(user)); + localStorage.setItem('user', JSON.stringify(user)); renderLessons(user); // if the lesson is in edit mode and user remove lesson submit button text should become "ADD LESSON" // and the view attribute should have value "create-lesson" insted of "edit-lesson" as we have removed the lesson. - if (createLessonContainer.getAttribute("view").includes("edit-lesson")) { - document.getElementById("submit").innerText = "ADD LESSON"; + if (createLessonContainer.getAttribute('view').includes('edit-lesson')) { + document.getElementById('submit').innerText = 'ADD LESSON'; - createLessonContainer.setAttribute("view", "create-lesson"); + createLessonContainer.setAttribute('view', 'create-lesson'); } } catch { - alert("Failed to delete! Try again later"); + alert('Failed to delete! Try again later'); } } diff --git a/app-main/public/js/quill_init.js b/app-main/public/js/quill_init.js index 8c205e8..0b95c7c 100644 --- a/app-main/public/js/quill_init.js +++ b/app-main/public/js/quill_init.js @@ -1,15 +1,15 @@ const toolbarOptions = [ - ["bold", "italic", "underline", "strike"], - ["code-block", "image", "link"], - [{ list: "ordered" }, { list: "bullet" }], - [{ indent: "-1" }, { indent: "+1" }], - [{ size: ["small", false, "large", "huge"] }], + ['bold', 'italic', 'underline', 'strike'], + ['code-block', 'image', 'link'], + [{ list: 'ordered' }, { list: 'bullet' }], + [{ indent: '-1' }, { indent: '+1' }], + [{ size: ['small', false, 'large', 'huge'] }], ]; -export const quill = new Quill("#editor", { +export const quill = new Quill('#editor', { modules: { toolbar: toolbarOptions, }, - placeholder: "Add some lesson notes!", - theme: "snow", + placeholder: 'Add some lesson notes!', + theme: 'snow', }); diff --git a/app-main/public/js/sampleCode.test.js b/app-main/public/js/sampleCode.test.js index 040dc90..52f9c94 100644 --- a/app-main/public/js/sampleCode.test.js +++ b/app-main/public/js/sampleCode.test.js @@ -1,5 +1,5 @@ -const sampleCode = require("./sampleCode"); +const sampleCode = require('./sampleCode'); -test("This verifies that sampleCode sends a bool response", () => { +test('This verifies that sampleCode sends a bool response', () => { expect(sampleCode()).toEqual(false); }); diff --git a/app-main/public/js/test/jest.setup.js b/app-main/public/js/test/jest.setup.js index 9bb9ba2..62e21e6 100644 --- a/app-main/public/js/test/jest.setup.js +++ b/app-main/public/js/test/jest.setup.js @@ -1,2 +1,2 @@ -import Quill from "./quillMock.js"; +import Quill from './quillMock.js'; global.Quill = Quill; diff --git a/app-main/public/sw.js b/app-main/public/sw.js index 43f9643..972b279 100644 --- a/app-main/public/sw.js +++ b/app-main/public/sw.js @@ -1,25 +1,25 @@ -const CACHE_NAME = "devJotPWA-v1"; +const CACHE_NAME = 'devJotPWA-v1'; const CACHE_FILE = [ - "./index.html", - "./js/index.js", - "./css/style.css", - "https://cdn.quilljs.com/1.3.6/quill.js", - "https://cdn.quilljs.com/1.3.6/quill.snow.css", + './index.html', + './js/index.js', + './css/style.css', + 'https://cdn.quilljs.com/1.3.6/quill.js', + 'https://cdn.quilljs.com/1.3.6/quill.snow.css', ]; // Install service worker, then caches all the files -self.addEventListener("install", function (e) { - console.log("[Service Worker] Install"); +self.addEventListener('install', function (e) { + console.log('[Service Worker] Install'); e.waitUntil( caches.open(CACHE_NAME).then(function (cache) { - console.log("[Service Worker] Caching all: app shell and content"); + console.log('[Service Worker] Caching all: app shell and content'); return cache.addAll(CACHE_FILE); }) ); }); // Fetch content from the cache if it is available there -self.addEventListener("fetch", function (event) { +self.addEventListener('fetch', function (event) { event.respondWith( caches.match(event.request).then(function (response) { // Cache hit - return response @@ -29,7 +29,7 @@ self.addEventListener("fetch", function (event) { return fetch(event.request).then(function (response) { // Check if we received a valid response - if (!response || response.status !== 200 || response.type !== "basic") { + if (!response || response.status !== 200 || response.type !== 'basic') { return response; } let responseToCache = response.clone();