reactstrap | Simple React Bootstrap 5 components | Frontend Framework library

import { createSlice, createAsyncThunk } from "@reduxjs/toolkit";
import { loginFeedback } from "./feedBack";

export const login = createAsyncThunk(
    "user/login",
    async (userInfo, { rejectWithValue }) => {
        try {
            const response = await loginFeedback(userInfo);

            return response.data;
        } catch (err) {
            return rejectWithValue(err);
        }
    }
);

const initialState = {
    isAuthenticated: false,
    isLoading: false,
    user: null,
    error: null,
};

const userSlice = createSlice({
    name: "users",
    initialState,
    reducers: {},
    extraReducers: {
        [login.pending]: (state, action) => {
            state.isLoading = true;
            state.isAuthenticated = false;

        },
        [login.fulfilled]: (state, action) => {
            state.isLoading = false;
            state.isAuthenticated = true;
            state.user = action.payload;
        },
        [login.rejected]: (state, action) => {
            state.isLoading = false;
            state.isAuthenticated = false;
            state.user = [];
            state.error = action.payload.message;
        },
    },
});

export default userSlice.reducer;

 const handleSubmit = (e) => {
        e.preventDefault();

        dispatch(login({ email, password }))
        // something else....
}

// userSlice.js
        [login.pending]: (state, action) => {
            state.isLoading = true;
            state.isAuthenticated = false;

        },
        [login.fulfilled]: (state, action) => {
            state.isLoading = false;
            state.isAuthenticated = true;
            state.user = action.payload;
        },
        [login.rejected]: (state, action) => {
            state.isLoading = false;
            state.isAuthenticated = false;
            state.user = [];
            state.error = action.payload.message;
        },

 const handleSubmit = (e) => {
        e.preventDefault();

        dispatch(login({ email, password }))
            .then(unwrapResult)
            .then(() => {
                if (isAuthenticated && modal) {
                    setEmail("");
                    setPassword("");
                    toggle();
                }
            })
            .catch((error) => {
                setHasError(true);
            });
    };

import React, { useState } from "react";
import {
  Collapse,
  Navbar,
  NavbarToggler,
  NavbarBrand,
  Nav,
  NavItem,
  NavLink,
  UncontrolledDropdown,
  DropdownToggle,
  DropdownMenu,
  DropdownItem,
  NavbarText,
} from "reactstrap";

const Example = (props) => {
  const [isOpen, setIsOpen] = useState(false);

  const toggle = () => setIsOpen(!isOpen);

  return (
    
      
        
          reactstrap
        
        
        
          
            
              Team
            
            
              Events
            
            
              
                Unsere Beratung
              
              
                Bipapo
                TomLongSchlong
                
                Der coole Reset
              
            
            
              Social Media
            
            
              Kontakt
            
          
        
      
    
  );
};

export default Example;

import React, { Component } from 'react'
import {
    Card,
    Container,
    CardBody,
    Form,
    FormGroup,
    Label,
    Input,
    Button,


} from "reactstrap";

export default class Chk extends React.Component {

    states={
        Colornames:{
            ship:false,
            cabin:false,
            grade:false,
            rate:false,
            marketing:false,
            image:false
        }
    }

    chkClick = (e) => {
        var {name, checked} = e.target;
        var name = e.target.name;
        var checked = e.target.checked;
        console.log("xxxxx", e.Colornames)
        this.setState((e) => {
            var SelectedSport = e.Colornames;
            return SelectedSport[name]=checked;
        });
    };


    render() {
        var displaySports = Object.keys(this.states.Colornames);
        console.log("aaaaaa", displaySports)
        return (
            
                
                     Ship  
                     Cabin  
                     Grade  
                     Rate  
                     Marketing  
                     Image  
                
            
        )
    }
}

import 'bootstrap/dist/css/bootstrap.css';
export default function App({ Component, pageProps }) {
    return 
}

function App() {
    return (
      
        

          
            Link with href
          
          
            Button with data-bs-target
          
        
        
          
            Some placeholder content for the collapse component. This panel is hidden by default but revealed when the user activates the relevant trigger.
          
        
      
    );
}
export default App

import React, { useState } from "react";
import { Controller, useForm } from "react-hook-form";
import { Button, Form, Label, Input } from "reactstrap";

const setErrorStyle = (name) => {
  return {
    borderColor: name ? "red" : "",
    boxShadow: name ? "0 0 1.5px 1px red" : ""
  };
};

const App = () => {
  const [comment, setComment] = useState("");
  const {
    handleSubmit,
    control,
    formState: { errors }
  } = useForm();

  const submitForm = (data) => {
    console.log(data);
  };

  return (
    
      
        Note/Comment
      
       (
           setComment(e.target.value)}
            aria-invalid={!!errors.commentNote}
            style={setErrorStyle(errors.commentNote)}
          />
        )}
      />
      {errors.commentNote && (
        
          required
        
      )}
      
        Submit
      
    
  );
};

export default App;

  33 | }
  34 | 
  35 | private fetchUser() {
> 36 |     this.props.requestUser();
     | ^  37 | }
  38 | 
  39 | public render() {

import { Action, Reducer } from 'redux';
import { AppThunkAction } from './';

// app settings state
export interface AppSettingsState {
    isLoading: boolean;
    appSettings: AppSettings;
}

export interface AppSettings {
    SiteTitle: string;
    PrimaryBackgroundColor: string;
    PrimaryFontColor: string;
    FooterLinkColor: string;
} 

// ACTIONS - descriptions of state transitions
interface RequestAppSettingsAction {
    type: 'REQUEST_APP_SETTINGS';
}

interface ReceiveAppSettingsAction {
    type: 'RECEIVE_APP_SETTINGS';
    appSettings: AppSettings;
}

/* Declare a 'discriminated union' type. */
type KnownAction = RequestAppSettingsAction | ReceiveAppSettingsAction;

// ACTION CREATORS - These are functions exposed to UI components that will trigger a state transition.
// They don't directly mutate state, but they can have external side-effects (such as loading data).

export const actionCreators = {
    requestAppSettings: (): AppThunkAction => (dispatch, getState) => {
        /* Only load data if it's something we don't already have (and are not already loading) */
        console.log("AppSettings fired");
        const appState = getState();
        if (appState && appState.appSettings) {
            fetch(`appsettings`)
                .then(response => response.json() as Promise)
                .then(data => {
                    dispatch({ type: 'RECEIVE_APP_SETTINGS', appSettings: data });
                });

            dispatch({ type: 'REQUEST_APP_SETTINGS'});
        }
    }
};

/*
REDUCER - For a given state and action, returns the new state.
To support time travel, this must not mutate the old state.
*/

const unloadedState: AppSettingsState = {
    isLoading: false,
    appSettings: {
        SiteTitle: "",
        PrimaryBackgroundColor: "",
        PrimaryFontColor: "",
        FooterLinkColor: ""
    }
};

export const reducer: Reducer = (state: AppSettingsState | undefined, incomingAction: Action): AppSettingsState => {
    if (state === undefined) {
        return unloadedState;
    }

    const action = incomingAction as KnownAction;
    switch (action.type) {
        case 'REQUEST_APP_SETTINGS':
            return {
                appSettings: state.appSettings,
                isLoading: true
            };
        case 'RECEIVE_APP_SETTINGS':
            return {
                appSettings: action.appSettings,
                isLoading: false
            };
            break;
    }

    return state;
};

import { Action, Reducer } from 'redux';
import { isNullOrUndefined } from 'util';
import { AppThunkAction } from './';
import * as Cookies from '../Utilities/cookies';

export interface UserState {
    isLoading: boolean;
    loginError: string;
    loggedIn: boolean;
    user: User;
}

export interface User {
    username: string;
    email: string;
    firstName: string;
    lastName: string;
    token: string
} 

interface RequestUserAction {
    type: 'REQUEST_USER';
}

interface ReceiveUserAction {
    type: 'RECEIVE_USER';
    loginError: string;
    user: User;
}

type KnownAction = RequestUserAction | ReceiveUserAction;

export const actionCreators = {
    requestUser: (event?: React.FormEvent) : AppThunkAction => (dispatch, getState) => {

        const appState = getState();
        var url = "";
        var skip = false;
        var params = {};

        /* Two ways to get user info - they submitted the login form
         * or they are already logged in and have a user object cookie */

        if (event != undefined) {

            event.preventDefault();
            const target = event.target as typeof event.target & {
                username: { value: string };
                password: { value: string };
            };

            const username = target.username.value;
            const password = target.password.value;

            url = "user/login";
            params = {
                method: "POST",
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify({ username: username, password: password })
            }

        } else {

            var cUser: string | null = Cookies.getCookie("user");
            if (cUser) {
                var user: User = JSON.parse(cUser);
                url = "user";
                params = {
                    method: "GET",
                    headers: {
                        'Content-Type': 'application/json',
                        'Authorization': 'Bearer ' + user.token
                    }
                }

            } else {
                skip = true; // home page and never has or tried to login
            }
        }

        if (appState && appState.user && !skip) {
            fetch(url, params)
                .then(response => {
                    if (!response.ok) {
                        throw new Error(response.status.toString());
                    } else {
                        return response.json() as Promise;
                    }
                })
                .then(data => {
                    dispatch({ type: 'RECEIVE_USER', user: data, loginError: "" });
                })
                .catch(error => {
                    dispatch({ type: 'RECEIVE_USER', user: {} as User, loginError: error.message });
                });

            dispatch({ type: 'REQUEST_USER' });
        }
    }
};

const unloadedState: UserState = {
    isLoading: false,
    loginError: "",
    loggedIn: false,
    user: {
        username: "",
        email: "",
        firstName: "",
        lastName: "",
        token: ""
    }
};

export const reducer: Reducer = (state: UserState | undefined, incomingAction: Action): UserState => {
    if (state === undefined) {
        return unloadedState;
    }

    const action = incomingAction as KnownAction;
    switch (action.type) {
        case 'REQUEST_USER':
            return {
                user: state.user,
                loginError: "",
                loggedIn: false,
                isLoading: true,
            };
        case 'RECEIVE_USER':

            var loggedIn = false;

            if (!action.loginError) {
                loggedIn = true;
                Cookies.setCookie("user", JSON.stringify(action.user), 7);
            } else {
                loggedIn = false;
                Cookies.eraseCookie("user");
            }

            return {
                user: action.user,
                loginError: action.loginError,
                loggedIn: loggedIn,
                isLoading: false
            };
            break;
    }

    return state;
};

import * as React from 'react';
import { Route } from 'react-router';
import Layout from './components/Layout';
import Home from './components/Home';
import Counter from './components/Counter';
import FetchData from './components/FetchData';
import CapacityGrid from './components/CapacityGrid';
import { connect } from 'react-redux';
import { Container } from 'reactstrap';
import { ApplicationState } from './store';
import * as AppSettingsStore from './store/AppSettings';
import * as UserStore from './store/User';
import './css/custom.css'
import { userInfo } from 'os';

type AppSettingsProps =
    AppSettingsStore.AppSettingsState
    & typeof AppSettingsStore.actionCreators
 
type UserProps =
    UserStore.UserState
    & typeof UserStore.actionCreators

class App extends React.PureComponent {

    public componentDidMount() {
        this.fetchAppSettings();
        this.fetchUser();
    }

    private fetchAppSettings() {
        this.props.requestAppSettings();
    }

    private fetchUser() {
        this.props.requestUser();
    }

    public render() {
        return (
            
                {!this.props.isLoading &&
                    
                        
                        
                        
                        
                    
                }
            
        )
    }

}

/* works 
export default connect(
    (state: ApplicationState) => state.user,
    UserStore.actionCreators
)(App as any); */

/*const mapDispatchToProps = (dispatch: any) => ({
    userActions: () => dispatch(UserStore.actionCreators.requestUser),
    appActions: () => dispatch(AppSettingsStore.actionCreators.requestAppSettings),
});*/

const mapStateToProps = (state: ApplicationState) => ({
    user: state.user,
    appSettings: state.appSettings
});

const mapDispatchToProps = (
    UserStore.actionCreators,
    AppSettingsStore.actionCreators
);

export default connect(mapStateToProps, mapDispatchToProps)(App as any);

import React, { useState } from "react";
import { useForm } from "react-hook-form";
import { Form, FormGroup, Input } from "reactstrap";

const App = () => {
  const [loginData, setLoginData] = useState({
    email: null,
    password: null
  });
  const {
    register,
    handleSubmit,
    formState: { errors }
  } = useForm();

  const submitForm = (data) => {
    console.log(data);
  };

  return (
    
      
        
          
             console.log(e)}
              {...register("email", { required: true })}
              aria-invalid={errors.email ? "true" : "false"}
            />
            
              
            
            {errors.email && (
              
                required
              
            )}
          
        
      
    
  );
};

export default App;

    import React from 'react';
    import { Formik, Field, Form, ErrorMessage } from 'formik';
    import * as Yup from 'yup';
    import { errorMessage } from '../../utility/error-messages';
    import { Button, Modal, ModalBody, ModalFooter } from 'reactstrap';

    const TextFieldComponent = (props) => {
    return (
        
        {props.touched &&
        props.touched[props.name] &&
        props.errors &&
        props.errors[props.name] !== undefined ? (
             {msg}}
            />
        ) : (
            {props.label}
        )}

        
        
    );
    };

    const setSchema = Yup.object({
    email: Yup.string()
        .email(errorMessage.emailValidation)
        .required(errorMessage.emailRequired),
    });

    export const ForgetPasswordModal = ({ show = false, onClose = () => {} }) => {
    debugger;
    return (
        <>
         {
            setTimeout(() => {
                alert(JSON.stringify(values, null, 2));
                setSubmitting(false);
            }, 400);
            }}
        >
            {({ isSubmitting, errors, touched, handleChange, handleBlur }) => {
            return (
                <>
                
                    
                    
                        Reset password
                        

                        Enter the email.
                        
                        
                        
                        
                    
                    
                         onClose(false)}
                        >
                        Cancel
                        
                        
                        Send
                        
                    
                    
                
                
            );
            }}
        
        
    );
    };