Submitted about 1 year ago

NextJS, Tailwind, React-Beautiful-DND, Next-themes

Thomas TS• 670

@ttsoares

Preview site(opens in new window)View code(opens in new window)

This is a solution for...

Todo app

HTML
CSS
JS

3intermediate

View challenge

Design comparison

SolutionDesign

Solution retrospective

Next13 has some issues about themes. I was not able to fix the initial load error message about "Hydration". I know that there are workarounds by it is needed knowledge beyond be...

Community feedback

Alex Holguin• 410

@JAleXDesigN

Posted about 1 year ago

Hi, you can use npm install @wits/next-themes, I have used this a few times for themes in Next js with appDir and it works fine.

You wrap the layout with the ServerThemeProvider

import "./globals.css";
import { Inter } from "next/font/google";
import { ServerThemeProvider } from "@wits/next-themes";
import Providers from "./Providers";

const inter = Inter({ subsets: ["latin"] });

export default function RootLayout({
children,
}: {
children: React.ReactNode;
}) {
return (
<ServerThemeProvider>
<html lang="en">
<body className={inter.className}>
<Providers>{children}</Providers>
</body>
</html>
</ServerThemeProvider>
);
}

and for the client side provider you can do it in a separate component and use it in layout

"use client";

import type { FC, PropsWithChildren } from "react";

import { ThemeProvider } from "@wits/next-themes";

const Providers: FC<PropsWithChildren> = ({ children }) => {
return <ThemeProvider>{children}</ThemeProvider>;
};

export default Providers;

Marked as helpful

Yup• 710

@Yup03

Posted 12 months ago

Hi @ttsoares nice challenge

First impression i wanted to put emphasis on is the structure of the todos array

I think you should whether have the completed property like so :

{
    id: "item-1",
    content: "Complete entire javaScript course ",
    completed: false,   /*If the checkbox is "checked", the "completed" property will have "true" as value/ And your checkbox  "unchecked" will result this property becoming "false" */
  },

Or the active property :

{
    id: "item-1",
    content: "Complete entire javaScript course ",
    active: true,  /*If the checkbox is "checked", the "active" property will have "false" as value/ And your checkbox  "unchecked" will result as "true" for this property  */
  },

And your toggleCompleted function should take the id as argument due its uniqueness

Otherwise if you use the content, you can encounter many tasks that have the same content
And it's valable for the remove and toggleActive functions

function toggleCompleted(id ) {/*instead of "todo"*/
    const result = todos.map((elm) => {
      if (elm.id === id) {
        return { ...elm, completed: !elm.completed };
      } else return elm;
    });
    setTodos(result);
    setBackTodos(result);
  }

And as a result you'll also call toggleCompleted or remove or toggleActive functions with the id of your task like so :

<div onClick={() => toggleCompleted(todo.id)}></div>

At first sight, these are some point that i can highlight on your code; And i hope this will help you improve your solution

Thomas TS• 670

@ttsoares

Posted about 1 year ago

I did fix two accessibility problems and the screenshot. After update the repository, those changes will automatically reflect here ?
Most of the HTML Validation errors are code generated by the NextJS environment (Babel, etc...) and are not in my code.
Will that way to fix the Hydration problem... Thanks.

EDITED: Just did the test and worked like a charm... :-)

Please log in to post a comment

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord