Skip to content

Feature/weaponsforge 5 #13

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 14 commits into from
Mar 19, 2023
Merged

Feature/weaponsforge 5 #13

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
14 commits
Select commit Hold shift + click to select a range
b33d2fd
chore: Display item list in the home page
weaponsforge Mar 18, 2023
739f5a3
chore: Create layout components
weaponsforge Mar 18, 2023
42362b7
chore: Implement usesyncexternalstore from the docs
weaponsforge Mar 19, 2023
35e702c
chore: Add a delete method on the external store
weaponsforge Mar 19, 2023
be5b7d7
chore: Create and implement a basic todos redux store
weaponsforge Mar 19, 2023
679fe7e
chore: Minimize full page rerendering
weaponsforge Mar 19, 2023
7a4710f
chore: Minimize full page rerendering from usesyncexternalstore
weaponsforge Mar 19, 2023
f347657
chore: Update docs
weaponsforge Mar 19, 2023
649ca2d
chore: Update docs
weaponsforge Mar 19, 2023
92b2efa
chore: Testing page re-renders when loading redux data from deeply-ne…
weaponsforge Mar 19, 2023
b7b6675
chore: Testing page re-renders when loading global variable data from…
weaponsforge Mar 19, 2023
5f78c5c
chore: Update description
weaponsforge Mar 19, 2023
37fe6eb
chore: Testing page re-renders when loading local state data set by u…
weaponsforge Mar 19, 2023
b870865
chore: Display todo list state data from an inner component
weaponsforge Mar 19, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 6 additions & 1 deletion client/jsconfig.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,12 @@
{
"compilerOptions": {
"paths": {
"@/*": ["./src/*"]
"@/*": ["./src/*"],
"@/hooks/*": ["./src/lib/hooks/*"],
"@/public/*": ["./public/*"],
"@/services/*": ["./src/lib/services/*"],
"@/store/*": ["./src/lib/store/*"],
"@/utils/*": ["./src/lib/utils/*"]
}
}
}
155 changes: 154 additions & 1 deletion client/package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

4 changes: 3 additions & 1 deletion client/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,10 +15,12 @@
"export": "npm run build && next export"
},
"dependencies": {
"@reduxjs/toolkit": "^1.9.3",
"eslint": "8.36.0",
"eslint-config-next": "13.2.4",
"next": "13.2.4",
"react": "18.2.0",
"react-dom": "18.2.0"
"react-dom": "18.2.0",
"react-redux": "^8.0.5"
}
}
12 changes: 12 additions & 0 deletions client/src/common/layout/head/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
import Head from 'next/head'

export default function HeadComponent () {
return (
<Head>
<title>React Hooks Playground</title>
<meta name="description" content="React Hooks Playground" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="icon" href="/favicon.ico" />
</Head>
)
}
13 changes: 13 additions & 0 deletions client/src/common/layout/page/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
import HeadComponent from '../head'

export default function Page ({ children }) {
return (
<div style={{
height: '100vh',
width: '100%' }}
>
<HeadComponent />
{ children }
</div>
)
}
8 changes: 8 additions & 0 deletions client/src/common/ui/card/Card.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
.card {
border: 1px solid;
min-width: 400px;
max-width: 600px;
min-height: 100px;
border-radius: 16px;
padding: 16px;
}
11 changes: 11 additions & 0 deletions client/src/common/ui/card/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
import styles from './Card.module.css'

function Card ({ children }) {
return (
<div className={styles.card}>
{children}
</div>
)
}

export default Card
16 changes: 11 additions & 5 deletions client/src/styles/Home.module.css → client/src/components/home/Home.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
.main {
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;

height: 100vh;
display: grid;
place-content: center;
padding: 6rem;
min-height: 100vh;

}

.description {
Expand All @@ -16,6 +16,7 @@
width: 100%;
z-index: 2;
font-family: var(--font-mono);
margin: auto;
}

.description a {
Expand Down Expand Up @@ -72,6 +73,11 @@
max-width: 30ch;
}

.h2 {
text-align: center;
margin-bottom: 24px;
}

.center {
display: flex;
justify-content: center;
Expand Down
30 changes: 30 additions & 0 deletions client/src/components/home/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,30 @@
import Link from 'next/link'
import Page from '@/common/layout/page'

import { Inter } from 'next/font/google'
import styles from './Home.module.css'
import navlinks from './items.json'

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

export default function HomeComponent() {
return (
<Page>
<main className={styles.main}>
<div className={styles.description}>
<div className={styles.h2}>
<h1 className={inter.className}>
React Hooks Playground
</h1>
</div>

{navlinks.map((item, index) => (
<Link href={item.link} key={index} className={styles.card}>
{item.name}
</Link>
))}
</div>
</main>
</Page>
)
}
14 changes: 14 additions & 0 deletions client/src/components/home/items.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
[
{
"name": "useSyncExternalStore",
"link": "/usesyncexternalstore"
},
{
"name": "redux toolkit",
"link": "/redux"
},
{
"name": "useState",
"link": "/usestate"
}
]
Loading