User not found.
17 | )} 18 |Email: {email}
5 | ) : ( 6 | 14 | )} 15 |Current locale: {lang}
16 |This text is rendered on the server: {dictionary.landing.welcome}
17 |15 | This component is rendered on client: 16 | 19 | {count} 20 | 23 |
24 | ); 25 | } 26 | -------------------------------------------------------------------------------- /examples/2024-08-09-redux-basics/src/app/store.js: -------------------------------------------------------------------------------- 1 | import { 2 | applyMiddleware, 3 | combineReducers, 4 | legacy_createStore as createStore, 5 | } from 'redux'; 6 | import logger from 'redux-logger'; 7 | import { thunk } from 'redux-thunk'; 8 | 9 | import { 10 | reducer as exampleReducer, 11 | slice as exampleSlice, 12 | } from './example-reducer'; 13 | import { 14 | reducer as userProfileReducer, 15 | slice as userProfileSlice, 16 | } from './user-profile'; 17 | 18 | const rootReducer = combineReducers({ 19 | [exampleSlice]: exampleReducer, 20 | [userProfileSlice]: userProfileReducer, 21 | }); 22 | 23 | export const makeStore = () => { 24 | return createStore( 25 | rootReducer, 26 | rootReducer(), 27 | applyMiddleware(thunk, logger), 28 | ); 29 | }; 30 | -------------------------------------------------------------------------------- /examples/2024-08-20-redux-saga/src/features/user-authentication/user-authentication-page-container.js: -------------------------------------------------------------------------------- 1 | 'use client'; 2 | 3 | import { connect } from 'react-redux'; 4 | import { compose } from 'redux'; 5 | 6 | import { withRouter } from '../../hocs/with-router'; 7 | import { 8 | loginClicked, 9 | selectIsLoading, 10 | } from '../user-profiles/user-profile-reducer'; 11 | import { UserAuthenticationPageComponent } from './user-authentication-page-component'; 12 | 13 | const mapStateToProps = state => ({ 14 | isLoading: selectIsLoading(state), 15 | }); 16 | 17 | const mapDispatchToProps = { 18 | onLoginClicked: loginClicked, 19 | }; 20 | 21 | export default compose( 22 | withRouter, 23 | connect(mapStateToProps, mapDispatchToProps), 24 | )(UserAuthenticationPageComponent); 25 | -------------------------------------------------------------------------------- /examples/2024-08-09-redux-basics/src/app/globals.css: -------------------------------------------------------------------------------- 1 | @tailwind base; 2 | @tailwind components; 3 | @tailwind utilities; 4 | 5 | :root { 6 | --foreground-rgb: 0, 0, 0; 7 | --background-start-rgb: 214, 219, 220; 8 | --background-end-rgb: 255, 255, 255; 9 | } 10 | 11 | @media (prefers-color-scheme: dark) { 12 | :root { 13 | --foreground-rgb: 255, 255, 255; 14 | --background-start-rgb: 0, 0, 0; 15 | --background-end-rgb: 0, 0, 0; 16 | } 17 | } 18 | 19 | body { 20 | color: rgb(var(--foreground-rgb)); 21 | background: linear-gradient( 22 | to bottom, 23 | transparent, 24 | rgb(var(--background-end-rgb)) 25 | ) 26 | rgb(var(--background-start-rgb)); 27 | } 28 | 29 | @layer utilities { 30 | .text-balance { 31 | text-wrap: balance; 32 | } 33 | } 34 | -------------------------------------------------------------------------------- /examples/2024-08-20-redux-saga/src/components/ui/input.jsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | 3 | import { cn } from '../../lib/utils'; 4 | 5 | const Input = React.forwardRef(({ className, type, ...props }, ref) => { 6 | return ( 7 | 16 | ); 17 | }); 18 | Input.displayName = 'Input'; 19 | 20 | export { Input }; 21 | -------------------------------------------------------------------------------- /examples/2024-09-01-redux-for-production/src/features/app-loading/app-loading-container.tsx: -------------------------------------------------------------------------------- 1 | 'use client'; 2 | import { useEffect } from 'react'; 3 | import type { ConnectedProps } from 'react-redux'; 4 | import { connect } from 'react-redux'; 5 | 6 | import { AppLoadingComponent } from './app-loading-component'; 7 | import { loadApp } from './app-loading-saga'; 8 | 9 | const mapDispatchToProps = { loadApp }; 10 | 11 | const connector = connect(undefined, mapDispatchToProps); 12 | 13 | type AppLoadingPropsFromRedux = ConnectedPropsCount: {count}
17 | 18 | 26 |Count: {count}
14 | 15 | 23 |{post.body}
43 |Current Count: {currentCount}
; 40 | } 41 | 42 | export const selectCurrentUserId = state => state[slice].currentUserId; 43 | 44 | export const selectUsers = state => state[slice].users; 45 | 46 | export const selectCurrentUser = state => 47 | state[slice].users[state[slice].currentUserId]; 48 | 49 | export const selectCurrentUsersEmail = state => 50 | state[slice].users[state[slice].currentUserId]?.email ?? ''; 51 | 52 | export const selectCurrentUsersFullName = state => 53 | `${state[slice].users[state[slice].currentUserId]?.firstName ?? ''} ${state[slice].users[state[slice].currentUserId]?.lastName ?? ''}`; 54 | 55 | export const selectIsLoggedIn = state => Boolean(state[slice].currentUserId); 56 | -------------------------------------------------------------------------------- /examples/2024-08-20-redux-saga/src/features/user-authentication/user-authentication-page-component.js: -------------------------------------------------------------------------------- 1 | import { Button } from '../../components/ui/button'; 2 | import { 3 | Card, 4 | CardContent, 5 | CardDescription, 6 | CardFooter, 7 | CardHeader, 8 | CardTitle, 9 | } from '../../components/ui/card'; 10 | import { Input } from '../../components/ui/input'; 11 | import { Label } from '../../components/ui/label'; 12 | 13 | export function UserAuthenticationPageComponent({ 14 | isLoading, 15 | onLoginClicked, 16 | router, 17 | }) { 18 | return ( 19 |{title}
; 8 | } 9 | 10 | describe('withLayout', () => { 11 | test('given a component: returns the component with a default title', () => { 12 | const WrappedComponent = withLayout()(MyComponent); 13 | 14 | render(