- "How to center a div?"
- command c
- command v
satttoshi / art-gallery Goto Github PK
View Code? Open in Web Editor NEWedu recap project 5
Home Page: https://art-gallery-vert.vercel.app
edu recap project 5
Home Page: https://art-gallery-vert.vercel.app
As an art enthusiast
I want to write comments for art pieces
so that I can note my ideas regarding the work.
artPiecesInfo
stateCommentForm
componentCommentForm
props: onSubmitComment
Comments
componentsComments
props: comments
As an art enthusiast
I want to see a list of all art pieces
so that I can get an overview of all art pieces.
SWR
in pages/index.js
ArtPieces
to render a listArtPieces
props: pieces
ArtPiecePreview
ArtPiecePreview
props: image
, title
, artist
Componente Art Pieces Preview aufteilen in:
Art Pieces Spotlight
Art Pieces Details (gutes Naming finden?)
Props richtig verknüpfen.
As an art enthusiast
I want to see the color palette of an art piece
so that I can find color inspiration.
colors
given by the API to the ArtPieceDetails
component 🖼️As an art enthusiast
I want to mark art piece pieces as favorites
so that I can find them easier.
artPiecesInfo
to save further information for art piecesartPiecesInfo
state globally available for all pagesartPiecesInfo
slug
in the additional stateFavoriteButton
FavoriteButton
props: isFavorite
, onToggleFavorite
FavoriteButton
component in the Spotlight
, ArtPiecePreview
and ArtPieceDetails
componentAs an art enthusiast
I want to persist my favorites and comments
so that the data will not be lost when I close the app.
use-local-storage-state
useLocalStorageState
hook to store the artPiecesInfo
stateTo use the useImmer
hook to mutate the artPiecesInfo
state, implement this example to combine both.
Hook:
import produce, { freeze } from "immer";
import { useCallback } from "react";
import useLocalStorageState from "use-local-storage-state";
export function useImmerLocalStorageState(key, options) {
const [value, setValue] = useLocalStorageState(key, {
...options,
defaultValue: freeze(options.defaultValue),
});
return [
value,
useCallback(
(updater) => {
if (typeof updater === "function") setValue(produce(updater));
else setValue(freeze(updater));
},
[setValue]
),
];
}
Usage in App
component:
import { useImmerLocalStorageState } from "./useImmerLocalStorageState";
export default function App({ Component, pageProps }) {
const [artPiecesInfo, updateArtPiecesInfo] = useImmerLocalStorageState(
"art-pieces-info",
{ defaultValue: [] }
);
// ...
}
💡 For now, it's not necessary to understand how the
useImmerLocalStorageState
hook works.
As an art enthusiast
I want to be able to switch between the spotlight and list view
so that I can navigate the app easier.
pages/_app
pages/index
: rename the function to SpotlightPage
and have it render only the Spotlight
componentpages/art-pieces/index
that renders the ArtPieces
componentNavigation
that renders all navigation linksLayout
that renders the Navigation
componentLayout
component in pages/_app
As an art enthusiast
I want to see a spotlight piece
so that I can get inspirational highlights.
Spotlight
Spotlight
props: image
, artist
As an art enthusiast
I want to be able to see the full art piece with detail information
so that I can learn everything about the piece.
ArtPieceDetails
ArtPieceDetails
props: image
, title
, artist
, year
, genre
pages/art-pieces/[slug]
that renders ArtPieceDetails
slug
from next/router
slug
to find the art piece to displayAs an art enthusiast
I want to see a comprehensive list of all my favorite art pieces
so that I can have an overview of all of my favorites.
pages/favorites
that renders the ArtPieces
componentartPiecesInfo
state to filter for all favorite art piecespieces
to the ArtPieces
componentA declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.