From 631b39d4dc544ba28f4fdf7e827381e4d08e99f2 Mon Sep 17 00:00:00 2001 From: Isabelle Date: Sun, 17 Nov 2024 09:06:29 -0300 Subject: [PATCH 1/5] sidebar selected page style resolves #98 --- src/app/user/(sidebar)/events/page.js | 1 - src/components/SideBar/index.js | 51 ++++++++++++++------------- src/components/SideBar/sideBar.scss | 9 +++-- src/resources/locale/index.js | 2 +- 4 files changed, 34 insertions(+), 29 deletions(-) diff --git a/src/app/user/(sidebar)/events/page.js b/src/app/user/(sidebar)/events/page.js index 8d1a767..36ab7a9 100644 --- a/src/app/user/(sidebar)/events/page.js +++ b/src/app/user/(sidebar)/events/page.js @@ -32,7 +32,6 @@ export default function EventsPage() { setIsLoading(false) }, 1000) } - let aux = {} userCategories.categoriesList.forEach((category) => { aux[category.code] = category.title diff --git a/src/components/SideBar/index.js b/src/components/SideBar/index.js index 7d4852e..3af5ed0 100644 --- a/src/components/SideBar/index.js +++ b/src/components/SideBar/index.js @@ -1,6 +1,6 @@ 'use client' -import { useContext } from 'react' +import { useContext, useState } from 'react' import Link from 'next/link' import { FaArrowRight, FaGear, FaCircleInfo, FaBook, FaPlus, FaArrowRightFromBracket, FaHouse, FaRegFile, FaRegCalendar, FaHashtag, FaCircleCheck, FaClock, FaRegClock } from 'react-icons/fa6' @@ -18,6 +18,7 @@ export default function SideBar() { const weekday = currentDate.getDay() const today = `${weekdaysMap[weekday]}, ${currentDate.toLocaleDateString()}` + const [ currentPage, setCurrentPage ] = useState('DASHBOARD') const { userInfo } = useContext(UserInfoContext) async function handleLogOut() { @@ -25,6 +26,17 @@ export default function SideBar() { navigateTo({ path: routesMap.home }) } + function NavListItem({ children, path = '/', customIcon = null, itemId, selected }) { + return ( +
  • { setCurrentPage(itemId) }}> + + {customIcon ? customIcon : } + {children} + +
    • + ) + } + return ( ) }; -function NavListItem({ children, path = '/', customIcon = null, itemId }) { - return ( -
  • - - {customIcon ? customIcon : } - {children} - -
    • - ) -} - function NavListButton({ children, onClickFunction, customIcon }) { return (
  • diff --git a/src/components/SideBar/sideBar.scss b/src/components/SideBar/sideBar.scss index 3c105e3..389ed25 100644 --- a/src/components/SideBar/sideBar.scss +++ b/src/components/SideBar/sideBar.scss @@ -62,7 +62,7 @@ nav { min-height: 40px; margin-bottom: 5px; padding: 0% 2%; - + border-radius: variables.$radius; color: variables.$primary-font-color; text-decoration: none; @@ -92,7 +92,7 @@ nav { border-right: 2px solid variables.$primary-color-light; color: variables.$primary-color-light; - div { + div { color: variables.$primary-color-light; } @@ -103,4 +103,9 @@ nav { a { color: variables.$primary-color-light; } +} + +.selected { + background-color: variables.$primary-color-dark--15op; + border-right: 2px solid variables.$primary-color-light; } \ No newline at end of file diff --git a/src/resources/locale/index.js b/src/resources/locale/index.js index e8fc410..7f5b763 100644 --- a/src/resources/locale/index.js +++ b/src/resources/locale/index.js @@ -252,5 +252,5 @@ export const messagesTitles = { export const timerTitles = { focus: 'Foco', shortBreak: 'Descanso Curto', - longBreak: 'Descanso Longo', + longBreak: 'Descanso Longo' } \ No newline at end of file From aa967f2310214c9ce26e41471e40acc67c26d104 Mon Sep 17 00:00:00 2001 From: Isabelle Date: Sun, 17 Nov 2024 09:24:03 -0300 Subject: [PATCH 2/5] review notecard component resolves #104 --- src/components/Card/card.scss | 7 ++++++- src/components/SideBar/index.js | 8 ++++++++ 2 files changed, 14 insertions(+), 1 deletion(-) diff --git a/src/components/Card/card.scss b/src/components/Card/card.scss index 0c7b550..fb7dacd 100644 --- a/src/components/Card/card.scss +++ b/src/components/Card/card.scss @@ -84,12 +84,15 @@ } .past-date { - .tag__icon, .tag__content{ + + .tag__icon, + .tag__content { color: variables.$danger-color; } } .note-container { + align-items: flex-start; text-decoration: none; height: 250px; @@ -109,6 +112,7 @@ transition: 200ms; .note__title { + align-self: center; width: 90%; min-height: fit-content; padding: 10px 0; @@ -118,6 +122,7 @@ } .note__abstract { + align-self: center; width: 90%; flex: 1; padding: 10px 0; diff --git a/src/components/SideBar/index.js b/src/components/SideBar/index.js index 3af5ed0..ba6153a 100644 --- a/src/components/SideBar/index.js +++ b/src/components/SideBar/index.js @@ -1,6 +1,7 @@ 'use client' import { useContext, useState } from 'react' +import { usePathname } from 'next/navigation' import Link from 'next/link' import { FaArrowRight, FaGear, FaCircleInfo, FaBook, FaPlus, FaArrowRightFromBracket, FaHouse, FaRegFile, FaRegCalendar, FaHashtag, FaCircleCheck, FaClock, FaRegClock } from 'react-icons/fa6' @@ -14,6 +15,8 @@ import { weekdaysMap, pagesTitles, actionsTitles, pagesKeys } from '@/resources/ import './sideBar.scss' export default function SideBar() { + const router = useRouter() + const pathname = usePathname() const currentDate = new Date() const weekday = currentDate.getDay() const today = `${weekdaysMap[weekday]}, ${currentDate.toLocaleDateString()}` @@ -21,6 +24,11 @@ export default function SideBar() { const [ currentPage, setCurrentPage ] = useState('DASHBOARD') const { userInfo } = useContext(UserInfoContext) + const history = window. + console.log('history: ', history) + const p = pathname + console.log('p: ', p) + async function handleLogOut() { await clearTokenCookie() navigateTo({ path: routesMap.home }) From 95f8cbaa26c5a79df7aec3cdd77843caec8b539b Mon Sep 17 00:00:00 2001 From: Isabelle Date: Sun, 17 Nov 2024 09:25:20 -0300 Subject: [PATCH 3/5] review aboutpage - resolves #105 --- src/app/public/about/about.scss | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/src/app/public/about/about.scss b/src/app/public/about/about.scss index 5092c9f..d194d84 100644 --- a/src/app/public/about/about.scss +++ b/src/app/public/about/about.scss @@ -1,7 +1,10 @@ @use '../../../styles/variables.scss'; .about__container { - height: 80vh; + // height: 80vh; + height: 100%; + width: 100%; + max-width: 90vw; justify-content: flex-start; } .about__section { From 17ea83fbaf14f0a8fa788f48297c34ca681f443f Mon Sep 17 00:00:00 2001 From: Isabelle Date: Sun, 17 Nov 2024 10:45:23 -0300 Subject: [PATCH 4/5] sidebar style + manageing routes resolves #98 --- src/app/login/page.js | 4 +- src/app/public/about/page.js | 2 +- src/app/public/contents/page.js | 2 +- src/app/sign-up/page.js | 4 +- src/app/user/(sidebar)/categories/new/page.js | 3 -- src/app/user/(sidebar)/categories/page.js | 11 +---- src/app/user/(sidebar)/dashboard/page.js | 21 +++++---- src/app/user/(sidebar)/events/[id]/page.js | 16 +++---- src/app/user/(sidebar)/events/new/page.js | 3 +- src/components/Loading/PartialLoading.js | 17 -------- src/components/Loading/index.js | 4 +- src/components/Menu/index.js | 17 ++------ src/components/SideBar/index.js | 34 ++++++++++----- src/resources/locale/index.js | 43 ++++++++++--------- src/resources/routesMap.js | 2 +- 15 files changed, 79 insertions(+), 104 deletions(-) delete mode 100644 src/components/Loading/PartialLoading.js diff --git a/src/app/login/page.js b/src/app/login/page.js index 54acfef..6ab0973 100644 --- a/src/app/login/page.js +++ b/src/app/login/page.js @@ -50,10 +50,10 @@ export default function Login() { return ( - +
    handleLoginSubmit(e, { email: userEmail, password: userPassword })} > diff --git a/src/app/public/about/page.js b/src/app/public/about/page.js index a6e6d02..3dd04f9 100644 --- a/src/app/public/about/page.js +++ b/src/app/public/about/page.js @@ -5,7 +5,7 @@ import Image from 'next/image' export default function AboutPage() { return (
    -

    {pagesTitles.about}

    +

    {pagesTitles.about.base}

    Sobre a Ferramenta

    diff --git a/src/app/public/contents/page.js b/src/app/public/contents/page.js index 194b905..3f9b5fe 100644 --- a/src/app/public/contents/page.js +++ b/src/app/public/contents/page.js @@ -24,7 +24,7 @@ function FeedListItem({ contentInfo }) { export default function ContentsFeed() { return (
    -

    {locale.pagesTitles.contents}

    +

    {locale.pagesTitles.contents.base}

    { contentsList.length > 0 ? diff --git a/src/app/sign-up/page.js b/src/app/sign-up/page.js index 128e0f2..b7ce9f1 100644 --- a/src/app/sign-up/page.js +++ b/src/app/sign-up/page.js @@ -62,10 +62,10 @@ export default function SignUp() { return ( - +
    handleSignUpSubmit(e, { firstName, lastName, email, password, confirmPassword })} > diff --git a/src/app/user/(sidebar)/categories/new/page.js b/src/app/user/(sidebar)/categories/new/page.js index 5733f3f..db3e0cd 100644 --- a/src/app/user/(sidebar)/categories/new/page.js +++ b/src/app/user/(sidebar)/categories/new/page.js @@ -14,10 +14,8 @@ import { DefaultButton } from '@/components/Buttons' export default function NewCategory() { const { userCategories, setUserCategories } = useContext(UserCategoriesContext) - const [ categoryTitle, setCategoryTitle ] = useState('') const [ categoryDescription, setCategoryDescription ] = useState('') - const [ isLoading, setIsLoading ] = useState(false) async function handleNewCategoryForm(e, formData) { @@ -46,7 +44,6 @@ export default function NewCategory() { navigateTo({ path: routesMap.categories.base }) } } catch (error) { - // console.log('[handleNewCategoryForm] error: ', error); setIsLoading(false) alert(error) } diff --git a/src/app/user/(sidebar)/categories/page.js b/src/app/user/(sidebar)/categories/page.js index a901892..c1af26d 100644 --- a/src/app/user/(sidebar)/categories/page.js +++ b/src/app/user/(sidebar)/categories/page.js @@ -2,10 +2,9 @@ import * as locale from '@/resources/locale' -import { useEffect, useState, useContext } from 'react' +import { useContext } from 'react' import { UserCategoriesContext } from '@/hooks' -import Loading from '@/components/Loading' import { GeneralInfo } from '@/components/Messages' import { CategoryCard } from '@/components/Card' @@ -13,14 +12,6 @@ import './categoriesPage.scss' export default function ContentsFeed() { const { userCategories } = useContext(UserCategoriesContext) - // const [ isLoading, setIsLoading ] = useState(false) - - // useEffect(() => { - // userCategories.categoriesList ?? (setIsLoading(true) && setTimeout(() => { setIsLoading(false)}, 2000) ) - - // }, [ userCategories.categoriesList ]) - - // if (isLoading) return return (
    diff --git a/src/app/user/(sidebar)/dashboard/page.js b/src/app/user/(sidebar)/dashboard/page.js index 567e2d8..c461588 100644 --- a/src/app/user/(sidebar)/dashboard/page.js +++ b/src/app/user/(sidebar)/dashboard/page.js @@ -14,19 +14,18 @@ import { GeneralInfo } from '@/components/Messages' export default function Dashboard() { console.log('[DASHBOARD]') - const [categories, setCategories] = useState({}) - const [today, setToday] = useState({ tasks: [], events: [] }) - const [withinAWeek, setWithinAWeek] = useState({ tasks: [], events: [] }) - const [otherTasks, setOtherTasks] = useState([]) - const [pastDueTasks, setPastDueTasks] = useState([]) - const [otherEvents, setOtherEvents] = useState([]) + const [ categories, setCategories ] = useState({}) + const [ today, setToday ] = useState({ tasks: [], events: [] }) + const [ withinAWeek, setWithinAWeek ] = useState({ tasks: [], events: [] }) + const [ otherTasks, setOtherTasks ] = useState([]) + const [ pastDueTasks, setPastDueTasks ] = useState([]) + const [ otherEvents, setOtherEvents ] = useState([]) + const [ isLoading, setIsLoading ] = useState(true) const { userCategories, setUserCategories } = useContext(UserCategoriesContext) const { userTasks, setUserTasks } = useContext(UserTasksContext) const { userEvents, setUserEvents } = useContext(UserEventsContext) - const [isLoading, setIsLoading] = useState(true) - useEffect(() => { setTimeout(() => { let aux = {} @@ -40,9 +39,9 @@ export default function Dashboard() { setToday({ tasks: sortedTasks.today, events: sortedEvents.today }) setWithinAWeek({ tasks: sortedTasks.withinAWeek, events: sortedEvents.withinAWeek }) - setPastDueTasks([...sortedTasks.pastDue]) - setOtherTasks([...sortedTasks.other]) - setOtherEvents([...sortedEvents.other]) + setPastDueTasks([ ...sortedTasks.pastDue ]) + setOtherTasks([ ...sortedTasks.other ]) + setOtherEvents([ ...sortedEvents.other ]) setIsLoading(false) }, 500) diff --git a/src/app/user/(sidebar)/events/[id]/page.js b/src/app/user/(sidebar)/events/[id]/page.js index 1e9f51c..7262e8b 100644 --- a/src/app/user/(sidebar)/events/[id]/page.js +++ b/src/app/user/(sidebar)/events/[id]/page.js @@ -19,14 +19,14 @@ export default function EventPage({ params, searchParams }) { const { userCategories, setUserCategories } = useContext(UserCategoriesContext) const { userEvents, setUserEvents } = useContext(UserEventsContext) - const [title, setTitle] = useState(searchParams.title) - const [description, setDescription] = useState(searchParams.description) - const [startDate, setStartDate] = useState(searchParams.startDate) - const [endDate, setEndDate] = useState(searchParams.endDate) - const [categoryCode, setCategoryCode] = useState(searchParams.categoryCode) - - const [editing, setEditing] = useState(false) - const [isLoading, setIsLoading] = useState(false) + const [ title, setTitle ] = useState(searchParams.title) + const [ description, setDescription ] = useState(searchParams.description) + const [ startDate, setStartDate ] = useState(searchParams.startDate) + const [ endDate, setEndDate ] = useState(searchParams.endDate) + const [ categoryCode, setCategoryCode ] = useState(searchParams.categoryCode) + + const [ editing, setEditing ] = useState(false) + const [ isLoading, setIsLoading ] = useState(false) function handleEditing() { if (editing) { diff --git a/src/app/user/(sidebar)/events/new/page.js b/src/app/user/(sidebar)/events/new/page.js index 03a5c16..d79bad8 100644 --- a/src/app/user/(sidebar)/events/new/page.js +++ b/src/app/user/(sidebar)/events/new/page.js @@ -2,9 +2,9 @@ import { navigateTo } from '@/utils' import { createEventService, getAllEventsService } from '@/services/eventServices' - import { pagesTitles, entitiesProperties, formDefaults, notFoundDefaults } from '@/resources/locale' import { routesMap } from '@/resources/routesMap' +import { formatEventsDates } from '@/utils/date.utils' import { useState, useContext } from 'react' import { UserCategoriesContext, UserEventsContext } from '@/hooks' @@ -12,7 +12,6 @@ import { UserCategoriesContext, UserEventsContext } from '@/hooks' import Loading from '@/components/Loading' import { DefaultButton } from '@/components/Buttons' import { FormContainer, FormSection } from '@/components/Form' -import { formatEventsDates } from '@/utils/date.utils' export default function NewEvent() { const { userCategories, setUserCategories } = useContext(UserCategoriesContext) diff --git a/src/components/Loading/PartialLoading.js b/src/components/Loading/PartialLoading.js deleted file mode 100644 index 8a9ffc1..0000000 --- a/src/components/Loading/PartialLoading.js +++ /dev/null @@ -1,17 +0,0 @@ -import './loading.scss'; - -import * as locale from '@/resources/locale'; - -export default function PartialLoading() { - return ( -
    -
    -
    -
    -
    -
    - -

    {locale.pagesTitles.loading}

    -
    - ); -} \ No newline at end of file diff --git a/src/components/Loading/index.js b/src/components/Loading/index.js index 8362cfd..f24d336 100644 --- a/src/components/Loading/index.js +++ b/src/components/Loading/index.js @@ -1,6 +1,6 @@ -import './loading.scss'; +import './loading.scss' -import * as locale from '@/resources/locale'; +import * as locale from '@/resources/locale' export default function Loading() { return ( diff --git a/src/components/Menu/index.js b/src/components/Menu/index.js index 1f2b536..d45fdf9 100644 --- a/src/components/Menu/index.js +++ b/src/components/Menu/index.js @@ -6,7 +6,7 @@ import { LinkButton } from '@/components/Buttons' import './menu.scss' -export default function Menu({ buttonsShown=false }) { +export default function Menu() { return ( ) } \ No newline at end of file diff --git a/src/components/SideBar/index.js b/src/components/SideBar/index.js index ba6153a..865c7d7 100644 --- a/src/components/SideBar/index.js +++ b/src/components/SideBar/index.js @@ -1,6 +1,6 @@ 'use client' -import { useContext, useState } from 'react' +import { useContext, useEffect, useState } from 'react' import { usePathname } from 'next/navigation' import Link from 'next/link' @@ -15,8 +15,6 @@ import { weekdaysMap, pagesTitles, actionsTitles, pagesKeys } from '@/resources/ import './sideBar.scss' export default function SideBar() { - const router = useRouter() - const pathname = usePathname() const currentDate = new Date() const weekday = currentDate.getDay() const today = `${weekdaysMap[weekday]}, ${currentDate.toLocaleDateString()}` @@ -24,10 +22,25 @@ export default function SideBar() { const [ currentPage, setCurrentPage ] = useState('DASHBOARD') const { userInfo } = useContext(UserInfoContext) - const history = window. - console.log('history: ', history) - const p = pathname - console.log('p: ', p) + const pathname = usePathname() + + useEffect(() => { + if (!pathname.includes(currentPage.toLowerCase())) { + console.log('!includes') + + const splitPathname = pathname.split('/', 10) + console.log('splitPathname: ', splitPathname) + + if (pathname.includes('/new')) { + const currentPageKey = pagesKeys[splitPathname[splitPathname.length - 2]].new + setCurrentPage(currentPageKey) + return + } + + const currentPageKey = pagesKeys[splitPathname[splitPathname.length - 1]].base + setCurrentPage(currentPageKey) + } + }, []) async function handleLogOut() { await clearTokenCookie() @@ -47,6 +60,7 @@ export default function SideBar() { return ( diff --git a/src/resources/locale/index.js b/src/resources/locale/index.js index 7f5b763..0f402ac 100644 --- a/src/resources/locale/index.js +++ b/src/resources/locale/index.js @@ -94,8 +94,13 @@ export const weekdaysMap = { export const pagesTitles = { home: 'Início', + login: 'Login', + signUp: 'Cadastro', + loading: 'Carregando', - contents: 'Conteúdos', + contents: { + base: 'Conteúdos' + }, categories: { base: 'Categorias', @@ -104,7 +109,9 @@ export const pagesTitles = { view: 'Visualizar Categoria' }, - dashboard: 'Dashboard', + dashboard: { + base: 'Dashboard' + }, events: { new: 'Novo Evento', @@ -142,20 +149,19 @@ export const pagesTitles = { options: 'Opções' }, - user: { - login: 'Login', - signUp: 'Cadastro' - }, - - about: 'Sobre', - - loading: 'Carregando' + about: { + base: 'Sobre' + } } export const pagesKeys = { home: 'HOME', + login: 'LOGIN', + signUp: 'SIGN_UP', - contents: 'CONTENTS', + contents: { + base: 'CONTENTS' + }, categories: { base: 'CATEGORIES', @@ -164,7 +170,9 @@ export const pagesKeys = { view: 'VIEW_CATEGORY' }, - dashboard: 'DASHBOARD', + dashboard: { + base: 'DASHBOARD' + }, events: { base: 'EVENTS', @@ -196,14 +204,9 @@ export const pagesKeys = { view: 'VIEW_TASKS' }, - user: { - login: 'LOGIN', - signUp: 'SIGN_UP' - }, - - about: 'ABOUT', - - loading: 'LOADING' + about: { + base: 'ABOUT' + } } export const actionsTitles = { diff --git a/src/resources/routesMap.js b/src/resources/routesMap.js index 9d5c187..6fc6343 100644 --- a/src/resources/routesMap.js +++ b/src/resources/routesMap.js @@ -8,7 +8,7 @@ exports.routesMap = { home: '/', login: '/login', signUp: '/sign-up', - + about: { base: '/public/about' }, From 624610a76cfd3589379c02c56cf4d2ea2d4bf2ca Mon Sep 17 00:00:00 2001 From: Isabelle Date: Sun, 17 Nov 2024 10:48:54 -0300 Subject: [PATCH 5/5] fixing cards --- src/components/Card/card.scss | 7 ++++--- src/components/Card/index.js | 2 +- 2 files changed, 5 insertions(+), 4 deletions(-) diff --git a/src/components/Card/card.scss b/src/components/Card/card.scss index fb7dacd..e71166d 100644 --- a/src/components/Card/card.scss +++ b/src/components/Card/card.scss @@ -92,7 +92,6 @@ } .note-container { - align-items: flex-start; text-decoration: none; height: 250px; @@ -112,7 +111,6 @@ transition: 200ms; .note__title { - align-self: center; width: 90%; min-height: fit-content; padding: 10px 0; @@ -122,12 +120,15 @@ } .note__abstract { - align-self: center; width: 90%; flex: 1; padding: 10px 0; text-wrap: wrap; } + + .note__tag { + align-self: flex-start; + } } .note-container:hover { diff --git a/src/components/Card/index.js b/src/components/Card/index.js index 578b520..55250b6 100644 --- a/src/components/Card/index.js +++ b/src/components/Card/index.js @@ -77,7 +77,7 @@ export function NoteCard({ noteInfo, categoryTitle }) {

    {noteInfo.title.length > 0 ? titleAbstract : 'Nota Sem Título'}

    {contentAbstract}

    - {noteInfo.categoryCode && } + {noteInfo.categoryCode && } ) } \ No newline at end of file