Tag: Setting

npm install --save axios react-router-dom react-hook-form yup dayjs markdown-to-jsx sweetalert2 

npm install --save-dev miragejs @types/react-redux @types/react-router-dom @types/yup @types/markdown-to-jsx 

import { Server, Model, Factory, belongsTo, hasMany, Response } from 'miragejs';  export const handleErrors = (error: any, message = 'An error ocurred') => {   return new Response(400, undefined, {     data: {       message,       isError: true,     },   }); };  export const setupServer = (env?: string): Server => {   return new Server({     environment: env ?? 'development',      models: {       entry: Model.extend({         diary: belongsTo(),       }),       diary: Model.extend({         entry: hasMany(),         user: belongsTo(),       }),       user: Model.extend({         diary: hasMany(),       }),     },      factories: {       user: Factory.extend({         username: 'test',         password: 'password',         email: 'test@email.com',       }),     },      seeds: (server): any => {       server.create('user');     },      routes(): void {       this.urlPrefix = 'https://diaries.app';     },   }); }; 

import { Response, Request } from 'miragejs'; import { handleErrors } from '../server'; import { User } from '../../../interfaces/user.interface'; import { randomBytes } from 'crypto';  const generateToken = () => randomBytes(8).toString('hex');  export interface AuthResponse {   token: string;   user: User; }  const login = (schema: any, req: Request): AuthResponse | Response => {   const { username, password } = JSON.parse(req.requestBody);   const user = schema.users.findBy({ username });   if (!user) {     return handleErrors(null, 'No user with that username exists');   }   if (password !== user.password) {     return handleErrors(null, 'Password is incorrect');   }   const token = generateToken();   return {     user: user.attrs as User,     token,   }; };  const signup = (schema: any, req: Request): AuthResponse | Response => {   const data = JSON.parse(req.requestBody);   const exUser = schema.users.findBy({ username: data.username });   if (exUser) {     return handleErrors(null, 'A user with that username already exists.');   }   const user = schema.users.create(data);   const token = generateToken();   return {     user: user.attrs as User,     token,   }; };  export default {   login,   signup, }; 

export const create = (   schema: any,   req: Request ): { user: User; diary: Diary } | Response => {   try {     const { title, type, userId } = JSON.parse(req.requestBody) as Partial<       Diary     >;     const exUser = schema.users.findBy({ id: userId });     if (!exUser) {       return handleErrors(null, 'No such user exists.');     }     const now = dayjs().format();     const diary = exUser.createDiary({       title,       type,       createdAt: now,       updatedAt: now,     });     return {       user: {         ...exUser.attrs,       },       diary: diary.attrs,     };   } catch (error) {     return handleErrors(error, 'Failed to create Diary.');   } };  export const updateDiary = (schema: any, req: Request): Diary | Response => {   try {     const diary = schema.diaries.find(req.params.id);     const data = JSON.parse(req.requestBody) as Partial<Diary>;     const now = dayjs().format();     diary.update({       ...data,       updatedAt: now,     });     return diary.attrs as Diary;   } catch (error) {     return handleErrors(error, 'Failed to update Diary.');   } };  export const getDiaries = (schema: any, req: Request): Diary[] | Response => {   try {     const user = schema.users.find(req.params.id);     return user.diary as Diary[];   } catch (error) {     return handleErrors(error, 'Could not get user diaries.');   } }; 

export const addEntry = (   schema: any,   req: Request ): { diary: Diary; entry: Entry } | Response => {   try {     const diary = schema.diaries.find(req.params.id);     const { title, content } = JSON.parse(req.requestBody) as Partial<Entry>;     const now = dayjs().format();     const entry = diary.createEntry({       title,       content,       createdAt: now,       updatedAt: now,     });     diary.update({       ...diary.attrs,       updatedAt: now,     });     return {       diary: diary.attrs,       entry: entry.attrs,     };   } catch (error) {     return handleErrors(error, 'Failed to save entry.');   } };  export const getEntries = (   schema: any,   req: Request ): { entries: Entry[] } | Response => {   try {     const diary = schema.diaries.find(req.params.id);     return diary.entry;   } catch (error) {     return handleErrors(error, 'Failed to get Diary entries.');   } };  export const updateEntry = (schema: any, req: Request): Entry | Response => {   try {     const entry = schema.entries.find(req.params.id);     const data = JSON.parse(req.requestBody) as Partial<Entry>;     const now = dayjs().format();     entry.update({       ...data,       updatedAt: now,     });     return entry.attrs as Entry;   } catch (error) {     return handleErrors(error, 'Failed to update entry.');   } }; 

import { Server, Model, Factory, belongsTo, hasMany, Response } from 'miragejs';  import user from './routes/user'; import * as diary from './routes/diary'; 

import axios, { AxiosInstance, AxiosResponse, AxiosError } from 'axios'; import { showAlert } from '../util';  const http: AxiosInstance = axios.create({   baseURL: 'https://diaries.app', });  http.defaults.headers.post['Content-Type'] = 'application/json';  http.interceptors.response.use(   async (response: AxiosResponse): Promise => {     if (response.status >= 200 && response.status < 300) {       return response.data;     }   },   (error: AxiosError) => {     const { response, request }: {       response?: AxiosResponse;       request?: XMLHttpRequest;     } = error;     if (response) {       if (response.status >= 400 && response.status < 500) {         showAlert(response.data?.data?.message, 'error');         return null;       }     } else if (request) {       showAlert('Request failed. Please try again.', 'error');       return null;     }     return Promise.reject(error);   } );  export default http; 

import Swal, { SweetAlertIcon } from 'sweetalert2';  export const showAlert = (titleText = 'Something happened.', alertType?: SweetAlertIcon): void => {   Swal.fire({     titleText,     position: 'top-end',     timer: 3000,     timerProgressBar: true,     toast: true,     showConfirmButton: false,     showCancelButton: true,     cancelButtonText: 'Dismiss',     icon: alertType,     showClass: {       popup: 'swal2-noanimation',       backdrop: 'swal2-noanimation',     },     hideClass: {       popup: '',       backdrop: '',     },   }); }; 

export const store = configureStore({   reducer: rootReducer, // a single reducer function or an object of slice reducers }); 

import { createSlice, PayloadAction } from '@reduxjs/toolkit';  interface AuthState {   token: string | null;   isAuthenticated: boolean; }  const initialState: AuthState = {   token: null,   isAuthenticated: false, };  const auth = createSlice({   name: 'auth',   initialState,   reducers: {     saveToken(state, { payload }: PayloadAction) {       if (payload) {         state.token = payload;       }     },     clearToken(state) {       state.token = null;     },     setAuthState(state, { payload }: PayloadAction) {       state.isAuthenticated = payload;     },   }, });  export const { saveToken, clearToken, setAuthState } = auth.actions; export default auth.reducer; 

import { createSlice, PayloadAction } from '@reduxjs/toolkit'; import { Diary } from '../../interfaces/diary.interface';  const diaries = createSlice({   name: 'diaries',   initialState: [] as Diary[],   reducers: {     addDiary(state, { payload }: PayloadAction<Diary[]>) {       const diariesToSave = payload.filter((diary) => {         return state.findIndex((item) => item.id === diary.id) === -1;       });       state.push(...diariesToSave);     },     updateDiary(state, { payload }: PayloadAction<Diary>) {       const { id } = payload;       const diaryIndex = state.findIndex((diary) => diary.id === id);       if (diaryIndex !== -1) {         state.splice(diaryIndex, 1, payload);       }     },   }, });  export const { addDiary, updateDiary } = diaries.actions; export default diaries.reducer; 

import { createSlice, PayloadAction } from '@reduxjs/toolkit'; import { Entry } from '../../interfaces/entry.interface';  interface EditorState {   canEdit: boolean;   currentlyEditing: Entry | null;   activeDiaryId: string | null; }  const initialState: EditorState = {   canEdit: false,   currentlyEditing: null,   activeDiaryId: null, };  const editor = createSlice({   name: 'editor',   initialState,   reducers: {     setCanEdit(state, { payload }: PayloadAction<boolean>) {       state.canEdit = payload != null ? payload : !state.canEdit;     },     setCurrentlyEditing(state, { payload }: PayloadAction<Entry | null>) {       state.currentlyEditing = payload;     },     setActiveDiaryId(state, { payload }: PayloadAction<string>) {       state.activeDiaryId = payload;     },   }, });  export const { setCanEdit, setCurrentlyEditing, setActiveDiaryId } = editor.actions; export default editor.reducer; 

import React, { FC, lazy, Suspense } from 'react'; import { BrowserRouter as Router, Switch, Route } from 'react-router-dom'; import { useSelector } from 'react-redux'; import { RootState } from '../rootReducer';  const Auth = lazy(() => import('../features/auth/Auth')); const Home = lazy(() => import('../features/home/Home'));  const App: FC = () => {   const isLoggedIn = useSelector(     (state: RootState) => state.auth.isAuthenticated   );   return (     <Router>       <Switch>         <Route path="/">           <Suspense fallback={<p>Loading...</p>}>             {isLoggedIn ? <Home /> : <Auth />}           </Suspense>         </Route>       </Switch>     </Router>   ); };  export default App; 

import React, { FC, useState } from 'react'; import { useForm } from 'react-hook-form'; import { User } from '../../interfaces/user.interface'; import * as Yup from 'yup'; import http from '../../services/api'; import { saveToken, setAuthState } from './authSlice'; import { setUser } from './userSlice'; import { AuthResponse } from '../../services/mirage/routes/user'; import { useAppDispatch } from '../../store';  const schema = Yup.object().shape({   username: Yup.string()     .required('What? No username?')     .max(16, 'Username cannot be longer than 16 characters'),   password: Yup.string().required('Without a password, "None shall pass!"'),   email: Yup.string().email('Please provide a valid email address (abc@xy.z)'), });  const Auth: FC = () => {   const { handleSubmit, register, errors } = useForm<User>({     validationSchema: schema,   });   const [isLogin, setIsLogin] = useState(true);   const [loading, setLoading] = useState(false);   const dispatch = useAppDispatch();    const submitForm = (data: User) => {     const path = isLogin ? '/auth/login' : '/auth/signup';     http       .post<User, AuthResponse>(path, data)       .then((res) => {         if (res) {           const { user, token } = res;           dispatch(saveToken(token));           dispatch(setUser(user));           dispatch(setAuthState(true));         }       })       .catch((error) => {         console.log(error);       })       .finally(() => {         setLoading(false);       });   };    return (     <div className="auth">       <div className="card">         <form onSubmit={handleSubmit(submitForm)}>           <div className="inputWrapper">             <input ref={register} name="username" placeholder="Username" />             {errors && errors.username && (               <p className="error">{errors.username.message}</p>             )}           </div>           <div className="inputWrapper">             <input               ref={register}               name="password"               type="password"               placeholder="Password"             />             {errors && errors.password && (               <p className="error">{errors.password.message}</p>             )}           </div>           {!isLogin && (             <div className="inputWrapper">               <input                 ref={register}                 name="email"                 placeholder="Email (optional)"               />               {errors && errors.email && (                 <p className="error">{errors.email.message}</p>               )}             </div>           )}           <div className="inputWrapper">             <button type="submit" disabled={loading}>               {isLogin ? 'Login' : 'Create account'}             </button>           </div>           <p             onClick={() => setIsLogin(!isLogin)}             style={{ cursor: 'pointer', opacity: 0.7 }}           >             {isLogin ? 'No account? Create one' : 'Already have an account?'}           </p>         </form>       </div>     </div>   ); };  export default Auth; 

import React, { FC, useState, useEffect } from 'react'; import { useSelector } from 'react-redux'; import { RootState } from '../../rootReducer'; import Markdown from 'markdown-to-jsx'; import http from '../../services/api'; import { Entry } from '../../interfaces/entry.interface'; import { Diary } from '../../interfaces/diary.interface'; import { setCurrentlyEditing, setCanEdit } from './editorSlice'; import { updateDiary } from '../diary/diariesSlice'; import { updateEntry } from './entriesSlice'; import { showAlert } from '../../util'; import { useAppDispatch } from '../../store';  const Editor: FC = () => {   const { currentlyEditing: entry, canEdit, activeDiaryId } = useSelector(     (state: RootState) => state.editor   );   const [editedEntry, updateEditedEntry] = useState(entry);   const dispatch = useAppDispatch();    const saveEntry = async () => {     if (activeDiaryId == null) {       return showAlert('Please select a diary.', 'warning');     }     if (entry == null) {       http         .post<Entry, { diary: Diary; entry: Entry }>(           /diaries/entry/$  {activeDiaryId},           editedEntry         )         .then((data) => {           if (data != null) {             const { diary, entry: _entry } = data;             dispatch(setCurrentlyEditing(_entry));             dispatch(updateDiary(diary));           }         });     } else {       http         .put<Entry, Entry>(diaries/entry/$  {entry.id}, editedEntry)         .then((_entry) => {           if (_entry != null) {             dispatch(setCurrentlyEditing(_entry));             dispatch(updateEntry(_entry));           }         });     }     dispatch(setCanEdit(false));   };    useEffect(() => {     updateEditedEntry(entry);   }, [entry]);    return (     <div className="editor">       <header         style={{           display: 'flex',           flexWrap: 'wrap',           alignItems: 'center',           marginBottom: '0.2em',           paddingBottom: '0.2em',           borderBottom: '1px solid rgba(0,0,0,0.1)',         }}       >         {entry && !canEdit ? (           <h4>             {entry.title}             <a               href="#edit"               onClick={(e) => {                 e.preventDefault();                 if (entry != null) {                   dispatch(setCanEdit(true));                 }               }}               style={{ marginLeft: '0.4em' }}             >               (Edit)             </a>           </h4>         ) : (           <input             value={editedEntry?.title ?? ''}             disabled={!canEdit}             onChange={(e) => {               if (editedEntry) {                 updateEditedEntry({                   ...editedEntry,                   title: e.target.value,                 });               } else {                 updateEditedEntry({                   title: e.target.value,                   content: '',                 });               }             }}           />         )}       </header>       {entry && !canEdit ? (         <Markdown>{entry.content}</Markdown>       ) : (         <>           <textarea             disabled={!canEdit}             placeholder="Supports markdown!"             value={editedEntry?.content ?? ''}             onChange={(e) => {               if (editedEntry) {                 updateEditedEntry({                   ...editedEntry,                   content: e.target.value,                 });               } else {                 updateEditedEntry({                   title: '',                   content: e.target.value,                 });               }             }}           />           <button onClick={saveEntry} disabled={!canEdit}>             Save           </button>         </>       )}     </div>   ); };  export default Editor; 

import React, { FC, useState } from 'react'; import { Diary } from '../../interfaces/diary.interface'; import http from '../../services/api'; import { updateDiary } from './diariesSlice'; import { setCanEdit, setActiveDiaryId, setCurrentlyEditing } from '../entry/editorSlice'; import { showAlert } from '../../util'; import { Link } from 'react-router-dom'; import { useAppDispatch } from '../../store';  interface Props {   diary: Diary; }  const buttonStyle: React.CSSProperties = {   fontSize: '0.7em',   margin: '0 0.5em', };  const DiaryTile: FC<Props> = (props) => {   const [diary, setDiary] = useState(props.diary);   const [isEditing, setIsEditing] = useState(false);   const dispatch = useAppDispatch();   const totalEntries = props.diary?.entryIds?.length;    const saveChanges = () => {     http       .put<Diary, Diary>(/diaries/$  {diary.id}, diary)       .then((diary) => {         if (diary) {           dispatch(updateDiary(diary));           showAlert('Saved!', 'success');         }       })       .finally(() => {         setIsEditing(false);       });   };    return (     <div className="diary-tile">       <h2         className="title"         title="Click to edit"         onClick={() => setIsEditing(true)}         style={{           cursor: 'pointer',         }}       >         {isEditing ? (           <input             value={diary.title}             onChange={(e) => {               setDiary({                 ...diary,                 title: e.target.value,               });             }}             onKeyUp={(e) => {               if (e.key === 'Enter') {                 saveChanges();               }             }}           />         ) : (           <span>{diary.title}</span>         )}       </h2>       <p className="subtitle">{totalEntries ?? '0'} saved entries</p>       <div style={{ display: 'flex' }}>         <button           style={buttonStyle}           onClick={() => {             dispatch(setCanEdit(true));             dispatch(setActiveDiaryId(diary.id as string));             dispatch(setCurrentlyEditing(null));           }}         >           Add New Entry         </button>         <Link to={diary/$  {diary.id}} style={{ width: '100%' }}>           <button className="secondary" style={buttonStyle}>             View all →           </button>         </Link>       </div>     </div>   ); };  export default DiaryTile; 

import React, { FC, useEffect } from 'react'; import { useParams, Link } from 'react-router-dom'; import { useSelector } from 'react-redux'; import { RootState } from '../../rootReducer'; import http from '../../services/api'; import { Entry } from '../../interfaces/entry.interface'; import { setEntries } from '../entry/entriesSlice'; import { setCurrentlyEditing, setCanEdit } from '../entry/editorSlice'; import dayjs from 'dayjs'; import { useAppDispatch } from '../../store';  const DiaryEntriesList: FC = () => {   const { entries } = useSelector((state: RootState) => state);   const dispatch = useAppDispatch();   const { id } = useParams();    useEffect(() => {     if (id != null) {       http         .get<null, { entries: Entry[] }>(/diaries/entries/$  {id})         .then(({ entries: _entries }) => {           if (_entries) {             const sortByLastUpdated = _entries.sort((a, b) => {               return dayjs(b.updatedAt).unix() - dayjs(a.updatedAt).unix();             });             dispatch(setEntries(sortByLastUpdated));           }         });     }   }, [id, dispatch]);    return (     <div className="entries">       <header>         <Link to="/">           <h3>← Go Back</h3>         </Link>       </header>       <ul>         {entries.map((entry) => (           <li             key={entry.id}             onClick={() => {               dispatch(setCurrentlyEditing(entry));               dispatch(setCanEdit(true));             }}           >             {entry.title}           </li>         ))}       </ul>     </div>   ); };  export default DiaryEntriesList; 

import React, { FC, useEffect } from 'react'; import { useSelector } from 'react-redux'; import { RootState } from '../../rootReducer'; import http from '../../services/api'; import { Diary } from '../../interfaces/diary.interface'; import { addDiary } from './diariesSlice'; import Swal from 'sweetalert2'; import { setUser } from '../auth/userSlice'; import DiaryTile from './DiaryTile'; import { User } from '../../interfaces/user.interface'; import { Route, Switch } from 'react-router-dom'; import DiaryEntriesList from './DiaryEntriesList'; import { useAppDispatch } from '../../store'; import dayjs from 'dayjs';  const Diaries: FC = () => {   const dispatch = useAppDispatch();   const diaries = useSelector((state: RootState) => state.diaries);   const user = useSelector((state: RootState) => state.user);    useEffect(() => {     const fetchDiaries = async () => {       if (user) {         http.get<null, Diary[]>(diaries/$  {user.id}).then((data) => {           if (data && data.length > 0) {             const sortedByUpdatedAt = data.sort((a, b) => {               return dayjs(b.updatedAt).unix() - dayjs(a.updatedAt).unix();             });             dispatch(addDiary(sortedByUpdatedAt));           }         });       }     };     fetchDiaries();   }, [dispatch, user]);    const createDiary = async () => {     const result = await Swal.mixin({       input: 'text',       confirmButtonText: 'Next →',       showCancelButton: true,       progressSteps: ['1', '2'],     }).queue([       {         titleText: 'Diary title',         input: 'text',       },       {         titleText: 'Private or public diary?',         input: 'radio',         inputOptions: {           private: 'Private',           public: 'Public',         },         inputValue: 'private',       },     ]);     if (result.value) {       const { value } = result;       const {         diary,         user: _user,       } = await http.post<Partial<Diary>, { diary: Diary; user: User }>('/diaries/', {         title: value[0],         type: value[1],         userId: user?.id,       });       if (diary && user) {         dispatch(addDiary([diary] as Diary[]));         dispatch(addDiary([diary] as Diary[]));         dispatch(setUser(_user));         return Swal.fire({           titleText: 'All done!',           confirmButtonText: 'OK!',         });       }     }     Swal.fire({       titleText: 'Cancelled',     });   };    return (     <div style={{ padding: '1em 0.4em' }}>       <Switch>         <Route path="/diary/:id">           <DiaryEntriesList />         </Route>         <Route path="/">           <button onClick={createDiary}>Create New</button>           {diaries.map((diary, idx) => (             <DiaryTile key={idx} diary={diary} />           ))}         </Route>       </Switch>     </div>   ); };  export default Diaries; 

:root {   --primary-color: #778899;   --error-color: #f85032;   --text-color: #0d0d0d;   --transition: all ease-in-out 0.3s; } body {   margin: 0;   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',     'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',     sans-serif;   -webkit-font-smoothing: antialiased;   -moz-osx-font-smoothing: grayscale; } html, body, #root {   height: 100%; } , :before, *:after {   box-sizing: border-box; } .auth {   display: flex;   align-items: center;   height: 100%; } .card {   background: #fff;   padding: 3rem;   text-align: center;   box-shadow: 2px 8px 12px rgba(0, 0, 0, 0.1);   max-width: 450px;   width: 90%;   margin: 0 auto; } .inputWrapper {   margin: 1rem auto;   width: 100%; } input:not([type='checkbox']), button {   border-radius: 0.5rem;   width: 100%; } input:not([type='checkbox']), textarea {   border: 2px solid rgba(0, 0, 0, 0.1);   padding: 1em;   color: var(--text-color);   transition: var(--transition); } input:not([type='checkbox']):focus, textarea:focus {   outline: none;   border-color: var(--primary-color); } button {   appearance: none;   border: 1px solid var(--primary-color);   color: #fff;   background-color: var(--primary-color);   text-transform: uppercase;   font-weight: bold;   outline: none;   cursor: pointer;   padding: 1em;   box-shadow: 1px 4px 6px rgba(0, 0, 0, 0.1);   transition: var(--transition); } button.secondary {   color: var(--primary-color);   background-color: #fff;   border-color: #fff; } button:hover, button:focus {   box-shadow: 1px 6px 8px rgba(0, 0, 0, 0.1); } .error {   margin: 0;   margin-top: 0.2em;   font-size: 0.8em;   color: var(--error-color);   animation: 0.3s ease-in-out forwards fadeIn; } .two-cols {   display: flex;   flex-wrap: wrap;   height: 100vh; } .two-cols .left {   border-right: 1px solid rgba(0, 0, 0, 0.1);   height: 100%;   overflow-y: scroll; } .two-cols .right {   overflow-y: auto; } .title {   font-size: 1.3rem; } .subtitle {   font-size: 0.9rem;   opacity: 0.85; } .title, .subtitle {   margin: 0; } .diary-tile {   border-bottom: 1px solid rgba(0, 0, 0, 0.1);   padding: 1em; } .editor {   height: 100%;   padding: 1em; } .editor input {   width: 100%; } .editor textarea {   width: 100%;   height: calc(100vh - 160px); } .entries ul {   list-style: none;   padding: 0; } .entries li {   border-top: 1px solid rgba(0, 0, 0, 0.1);   padding: 0.5em;   cursor: pointer; } .entries li:nth-child(even) {   background: rgba(0, 0, 0, 0.1); }  @media (min-width: 768px) {   .two-cols .left {     width: 25%;   }   .two-cols .right {     width: 75%;   } } @keyframes fadeIn {   0% {     opacity: 0;   }   100% {     opacity: 0.8;   } } 

npm install --save axios react-router-dom react-hook-form yup dayjs markdown-to-jsx sweetalert2 

npm install --save-dev miragejs @types/react-redux @types/react-router-dom @types/yup @types/markdown-to-jsx 

import { Server, Model, Factory, belongsTo, hasMany, Response } from 'miragejs';  export const handleErrors = (error: any, message = 'An error ocurred') => {   return new Response(400, undefined, {     data: {       message,       isError: true,     },   }); };  export const setupServer = (env?: string): Server => {   return new Server({     environment: env ?? 'development',      models: {       entry: Model.extend({         diary: belongsTo(),       }),       diary: Model.extend({         entry: hasMany(),         user: belongsTo(),       }),       user: Model.extend({         diary: hasMany(),       }),     },      factories: {       user: Factory.extend({         username: 'test',         password: 'password',         email: 'test@email.com',       }),     },      seeds: (server): any => {       server.create('user');     },      routes(): void {       this.urlPrefix = 'https://diaries.app';     },   }); }; 

import { Response, Request } from 'miragejs'; import { handleErrors } from '../server'; import { User } from '../../../interfaces/user.interface'; import { randomBytes } from 'crypto';  const generateToken = () => randomBytes(8).toString('hex');  export interface AuthResponse {   token: string;   user: User; }  const login = (schema: any, req: Request): AuthResponse | Response => {   const { username, password } = JSON.parse(req.requestBody);   const user = schema.users.findBy({ username });   if (!user) {     return handleErrors(null, 'No user with that username exists');   }   if (password !== user.password) {     return handleErrors(null, 'Password is incorrect');   }   const token = generateToken();   return {     user: user.attrs as User,     token,   }; };  const signup = (schema: any, req: Request): AuthResponse | Response => {   const data = JSON.parse(req.requestBody);   const exUser = schema.users.findBy({ username: data.username });   if (exUser) {     return handleErrors(null, 'A user with that username already exists.');   }   const user = schema.users.create(data);   const token = generateToken();   return {     user: user.attrs as User,     token,   }; };  export default {   login,   signup, }; 

export const create = (   schema: any,   req: Request ): { user: User; diary: Diary } | Response => {   try {     const { title, type, userId } = JSON.parse(req.requestBody) as Partial<       Diary     >;     const exUser = schema.users.findBy({ id: userId });     if (!exUser) {       return handleErrors(null, 'No such user exists.');     }     const now = dayjs().format();     const diary = exUser.createDiary({       title,       type,       createdAt: now,       updatedAt: now,     });     return {       user: {         ...exUser.attrs,       },       diary: diary.attrs,     };   } catch (error) {     return handleErrors(error, 'Failed to create Diary.');   } };  export const updateDiary = (schema: any, req: Request): Diary | Response => {   try {     const diary = schema.diaries.find(req.params.id);     const data = JSON.parse(req.requestBody) as Partial<Diary>;     const now = dayjs().format();     diary.update({       ...data,       updatedAt: now,     });     return diary.attrs as Diary;   } catch (error) {     return handleErrors(error, 'Failed to update Diary.');   } };  export const getDiaries = (schema: any, req: Request): Diary[] | Response => {   try {     const user = schema.users.find(req.params.id);     return user.diary as Diary[];   } catch (error) {     return handleErrors(error, 'Could not get user diaries.');   } }; 

export const addEntry = (   schema: any,   req: Request ): { diary: Diary; entry: Entry } | Response => {   try {     const diary = schema.diaries.find(req.params.id);     const { title, content } = JSON.parse(req.requestBody) as Partial<Entry>;     const now = dayjs().format();     const entry = diary.createEntry({       title,       content,       createdAt: now,       updatedAt: now,     });     diary.update({       ...diary.attrs,       updatedAt: now,     });     return {       diary: diary.attrs,       entry: entry.attrs,     };   } catch (error) {     return handleErrors(error, 'Failed to save entry.');   } };  export const getEntries = (   schema: any,   req: Request ): { entries: Entry[] } | Response => {   try {     const diary = schema.diaries.find(req.params.id);     return diary.entry;   } catch (error) {     return handleErrors(error, 'Failed to get Diary entries.');   } };  export const updateEntry = (schema: any, req: Request): Entry | Response => {   try {     const entry = schema.entries.find(req.params.id);     const data = JSON.parse(req.requestBody) as Partial<Entry>;     const now = dayjs().format();     entry.update({       ...data,       updatedAt: now,     });     return entry.attrs as Entry;   } catch (error) {     return handleErrors(error, 'Failed to update entry.');   } }; 

import { Server, Model, Factory, belongsTo, hasMany, Response } from 'miragejs';  import user from './routes/user'; import * as diary from './routes/diary'; 

import axios, { AxiosInstance, AxiosResponse, AxiosError } from 'axios'; import { showAlert } from '../util';  const http: AxiosInstance = axios.create({   baseURL: 'https://diaries.app', });  http.defaults.headers.post['Content-Type'] = 'application/json';  http.interceptors.response.use(   async (response: AxiosResponse): Promise => {     if (response.status >= 200 && response.status < 300) {       return response.data;     }   },   (error: AxiosError) => {     const { response, request }: {       response?: AxiosResponse;       request?: XMLHttpRequest;     } = error;     if (response) {       if (response.status >= 400 && response.status < 500) {         showAlert(response.data?.data?.message, 'error');         return null;       }     } else if (request) {       showAlert('Request failed. Please try again.', 'error');       return null;     }     return Promise.reject(error);   } );  export default http; 

import Swal, { SweetAlertIcon } from 'sweetalert2';  export const showAlert = (titleText = 'Something happened.', alertType?: SweetAlertIcon): void => {   Swal.fire({     titleText,     position: 'top-end',     timer: 3000,     timerProgressBar: true,     toast: true,     showConfirmButton: false,     showCancelButton: true,     cancelButtonText: 'Dismiss',     icon: alertType,     showClass: {       popup: 'swal2-noanimation',       backdrop: 'swal2-noanimation',     },     hideClass: {       popup: '',       backdrop: '',     },   }); }; 

export const store = configureStore({   reducer: rootReducer, // a single reducer function or an object of slice reducers }); 

import { createSlice, PayloadAction } from '@reduxjs/toolkit';  interface AuthState {   token: string | null;   isAuthenticated: boolean; }  const initialState: AuthState = {   token: null,   isAuthenticated: false, };  const auth = createSlice({   name: 'auth',   initialState,   reducers: {     saveToken(state, { payload }: PayloadAction) {       if (payload) {         state.token = payload;       }     },     clearToken(state) {       state.token = null;     },     setAuthState(state, { payload }: PayloadAction) {       state.isAuthenticated = payload;     },   }, });  export const { saveToken, clearToken, setAuthState } = auth.actions; export default auth.reducer; 

import { createSlice, PayloadAction } from '@reduxjs/toolkit'; import { Diary } from '../../interfaces/diary.interface';  const diaries = createSlice({   name: 'diaries',   initialState: [] as Diary[],   reducers: {     addDiary(state, { payload }: PayloadAction<Diary[]>) {       const diariesToSave = payload.filter((diary) => {         return state.findIndex((item) => item.id === diary.id) === -1;       });       state.push(...diariesToSave);     },     updateDiary(state, { payload }: PayloadAction<Diary>) {       const { id } = payload;       const diaryIndex = state.findIndex((diary) => diary.id === id);       if (diaryIndex !== -1) {         state.splice(diaryIndex, 1, payload);       }     },   }, });  export const { addDiary, updateDiary } = diaries.actions; export default diaries.reducer; 

import { createSlice, PayloadAction } from '@reduxjs/toolkit'; import { Entry } from '../../interfaces/entry.interface';  interface EditorState {   canEdit: boolean;   currentlyEditing: Entry | null;   activeDiaryId: string | null; }  const initialState: EditorState = {   canEdit: false,   currentlyEditing: null,   activeDiaryId: null, };  const editor = createSlice({   name: 'editor',   initialState,   reducers: {     setCanEdit(state, { payload }: PayloadAction<boolean>) {       state.canEdit = payload != null ? payload : !state.canEdit;     },     setCurrentlyEditing(state, { payload }: PayloadAction<Entry | null>) {       state.currentlyEditing = payload;     },     setActiveDiaryId(state, { payload }: PayloadAction<string>) {       state.activeDiaryId = payload;     },   }, });  export const { setCanEdit, setCurrentlyEditing, setActiveDiaryId } = editor.actions; export default editor.reducer; 

import React, { FC, lazy, Suspense } from 'react'; import { BrowserRouter as Router, Switch, Route } from 'react-router-dom'; import { useSelector } from 'react-redux'; import { RootState } from '../rootReducer';  const Auth = lazy(() => import('../features/auth/Auth')); const Home = lazy(() => import('../features/home/Home'));  const App: FC = () => {   const isLoggedIn = useSelector(     (state: RootState) => state.auth.isAuthenticated   );   return (     <Router>       <Switch>         <Route path="/">           <Suspense fallback={<p>Loading...</p>}>             {isLoggedIn ? <Home /> : <Auth />}           </Suspense>         </Route>       </Switch>     </Router>   ); };  export default App; 

import React, { FC, useState } from 'react'; import { useForm } from 'react-hook-form'; import { User } from '../../interfaces/user.interface'; import * as Yup from 'yup'; import http from '../../services/api'; import { saveToken, setAuthState } from './authSlice'; import { setUser } from './userSlice'; import { AuthResponse } from '../../services/mirage/routes/user'; import { useAppDispatch } from '../../store';  const schema = Yup.object().shape({   username: Yup.string()     .required('What? No username?')     .max(16, 'Username cannot be longer than 16 characters'),   password: Yup.string().required('Without a password, "None shall pass!"'),   email: Yup.string().email('Please provide a valid email address (abc@xy.z)'), });  const Auth: FC = () => {   const { handleSubmit, register, errors } = useForm<User>({     validationSchema: schema,   });   const [isLogin, setIsLogin] = useState(true);   const [loading, setLoading] = useState(false);   const dispatch = useAppDispatch();    const submitForm = (data: User) => {     const path = isLogin ? '/auth/login' : '/auth/signup';     http       .post<User, AuthResponse>(path, data)       .then((res) => {         if (res) {           const { user, token } = res;           dispatch(saveToken(token));           dispatch(setUser(user));           dispatch(setAuthState(true));         }       })       .catch((error) => {         console.log(error);       })       .finally(() => {         setLoading(false);       });   };    return (     <div className="auth">       <div className="card">         <form onSubmit={handleSubmit(submitForm)}>           <div className="inputWrapper">             <input ref={register} name="username" placeholder="Username" />             {errors && errors.username && (               <p className="error">{errors.username.message}</p>             )}           </div>           <div className="inputWrapper">             <input               ref={register}               name="password"               type="password"               placeholder="Password"             />             {errors && errors.password && (               <p className="error">{errors.password.message}</p>             )}           </div>           {!isLogin && (             <div className="inputWrapper">               <input                 ref={register}                 name="email"                 placeholder="Email (optional)"               />               {errors && errors.email && (                 <p className="error">{errors.email.message}</p>               )}             </div>           )}           <div className="inputWrapper">             <button type="submit" disabled={loading}>               {isLogin ? 'Login' : 'Create account'}             </button>           </div>           <p             onClick={() => setIsLogin(!isLogin)}             style={{ cursor: 'pointer', opacity: 0.7 }}           >             {isLogin ? 'No account? Create one' : 'Already have an account?'}           </p>         </form>       </div>     </div>   ); };  export default Auth; 

import React, { FC, useState, useEffect } from 'react'; import { useSelector } from 'react-redux'; import { RootState } from '../../rootReducer'; import Markdown from 'markdown-to-jsx'; import http from '../../services/api'; import { Entry } from '../../interfaces/entry.interface'; import { Diary } from '../../interfaces/diary.interface'; import { setCurrentlyEditing, setCanEdit } from './editorSlice'; import { updateDiary } from '../diary/diariesSlice'; import { updateEntry } from './entriesSlice'; import { showAlert } from '../../util'; import { useAppDispatch } from '../../store';  const Editor: FC = () => {   const { currentlyEditing: entry, canEdit, activeDiaryId } = useSelector(     (state: RootState) => state.editor   );   const [editedEntry, updateEditedEntry] = useState(entry);   const dispatch = useAppDispatch();    const saveEntry = async () => {     if (activeDiaryId == null) {       return showAlert('Please select a diary.', 'warning');     }     if (entry == null) {       http         .post<Entry, { diary: Diary; entry: Entry }>(           /diaries/entry/$  {activeDiaryId},           editedEntry         )         .then((data) => {           if (data != null) {             const { diary, entry: _entry } = data;             dispatch(setCurrentlyEditing(_entry));             dispatch(updateDiary(diary));           }         });     } else {       http         .put<Entry, Entry>(diaries/entry/$  {entry.id}, editedEntry)         .then((_entry) => {           if (_entry != null) {             dispatch(setCurrentlyEditing(_entry));             dispatch(updateEntry(_entry));           }         });     }     dispatch(setCanEdit(false));   };    useEffect(() => {     updateEditedEntry(entry);   }, [entry]);    return (     <div className="editor">       <header         style={{           display: 'flex',           flexWrap: 'wrap',           alignItems: 'center',           marginBottom: '0.2em',           paddingBottom: '0.2em',           borderBottom: '1px solid rgba(0,0,0,0.1)',         }}       >         {entry && !canEdit ? (           <h4>             {entry.title}             <a               href="#edit"               onClick={(e) => {                 e.preventDefault();                 if (entry != null) {                   dispatch(setCanEdit(true));                 }               }}               style={{ marginLeft: '0.4em' }}             >               (Edit)             </a>           </h4>         ) : (           <input             value={editedEntry?.title ?? ''}             disabled={!canEdit}             onChange={(e) => {               if (editedEntry) {                 updateEditedEntry({                   ...editedEntry,                   title: e.target.value,                 });               } else {                 updateEditedEntry({                   title: e.target.value,                   content: '',                 });               }             }}           />         )}       </header>       {entry && !canEdit ? (         <Markdown>{entry.content}</Markdown>       ) : (         <>           <textarea             disabled={!canEdit}             placeholder="Supports markdown!"             value={editedEntry?.content ?? ''}             onChange={(e) => {               if (editedEntry) {                 updateEditedEntry({                   ...editedEntry,                   content: e.target.value,                 });               } else {                 updateEditedEntry({                   title: '',                   content: e.target.value,                 });               }             }}           />           <button onClick={saveEntry} disabled={!canEdit}>             Save           </button>         </>       )}     </div>   ); };  export default Editor; 

import React, { FC, useState } from 'react'; import { Diary } from '../../interfaces/diary.interface'; import http from '../../services/api'; import { updateDiary } from './diariesSlice'; import { setCanEdit, setActiveDiaryId, setCurrentlyEditing } from '../entry/editorSlice'; import { showAlert } from '../../util'; import { Link } from 'react-router-dom'; import { useAppDispatch } from '../../store';  interface Props {   diary: Diary; }  const buttonStyle: React.CSSProperties = {   fontSize: '0.7em',   margin: '0 0.5em', };  const DiaryTile: FC<Props> = (props) => {   const [diary, setDiary] = useState(props.diary);   const [isEditing, setIsEditing] = useState(false);   const dispatch = useAppDispatch();   const totalEntries = props.diary?.entryIds?.length;    const saveChanges = () => {     http       .put<Diary, Diary>(/diaries/$  {diary.id}, diary)       .then((diary) => {         if (diary) {           dispatch(updateDiary(diary));           showAlert('Saved!', 'success');         }       })       .finally(() => {         setIsEditing(false);       });   };    return (     <div className="diary-tile">       <h2         className="title"         title="Click to edit"         onClick={() => setIsEditing(true)}         style={{           cursor: 'pointer',         }}       >         {isEditing ? (           <input             value={diary.title}             onChange={(e) => {               setDiary({                 ...diary,                 title: e.target.value,               });             }}             onKeyUp={(e) => {               if (e.key === 'Enter') {                 saveChanges();               }             }}           />         ) : (           <span>{diary.title}</span>         )}       </h2>       <p className="subtitle">{totalEntries ?? '0'} saved entries</p>       <div style={{ display: 'flex' }}>         <button           style={buttonStyle}           onClick={() => {             dispatch(setCanEdit(true));             dispatch(setActiveDiaryId(diary.id as string));             dispatch(setCurrentlyEditing(null));           }}         >           Add New Entry         </button>         <Link to={diary/$  {diary.id}} style={{ width: '100%' }}>           <button className="secondary" style={buttonStyle}>             View all →           </button>         </Link>       </div>     </div>   ); };  export default DiaryTile; 

import React, { FC, useEffect } from 'react'; import { useParams, Link } from 'react-router-dom'; import { useSelector } from 'react-redux'; import { RootState } from '../../rootReducer'; import http from '../../services/api'; import { Entry } from '../../interfaces/entry.interface'; import { setEntries } from '../entry/entriesSlice'; import { setCurrentlyEditing, setCanEdit } from '../entry/editorSlice'; import dayjs from 'dayjs'; import { useAppDispatch } from '../../store';  const DiaryEntriesList: FC = () => {   const { entries } = useSelector((state: RootState) => state);   const dispatch = useAppDispatch();   const { id } = useParams();    useEffect(() => {     if (id != null) {       http         .get<null, { entries: Entry[] }>(/diaries/entries/$  {id})         .then(({ entries: _entries }) => {           if (_entries) {             const sortByLastUpdated = _entries.sort((a, b) => {               return dayjs(b.updatedAt).unix() - dayjs(a.updatedAt).unix();             });             dispatch(setEntries(sortByLastUpdated));           }         });     }   }, [id, dispatch]);    return (     <div className="entries">       <header>         <Link to="/">           <h3>← Go Back</h3>         </Link>       </header>       <ul>         {entries.map((entry) => (           <li             key={entry.id}             onClick={() => {               dispatch(setCurrentlyEditing(entry));               dispatch(setCanEdit(true));             }}           >             {entry.title}           </li>         ))}       </ul>     </div>   ); };  export default DiaryEntriesList; 

import React, { FC, useEffect } from 'react'; import { useSelector } from 'react-redux'; import { RootState } from '../../rootReducer'; import http from '../../services/api'; import { Diary } from '../../interfaces/diary.interface'; import { addDiary } from './diariesSlice'; import Swal from 'sweetalert2'; import { setUser } from '../auth/userSlice'; import DiaryTile from './DiaryTile'; import { User } from '../../interfaces/user.interface'; import { Route, Switch } from 'react-router-dom'; import DiaryEntriesList from './DiaryEntriesList'; import { useAppDispatch } from '../../store'; import dayjs from 'dayjs';  const Diaries: FC = () => {   const dispatch = useAppDispatch();   const diaries = useSelector((state: RootState) => state.diaries);   const user = useSelector((state: RootState) => state.user);    useEffect(() => {     const fetchDiaries = async () => {       if (user) {         http.get<null, Diary[]>(diaries/$  {user.id}).then((data) => {           if (data && data.length > 0) {             const sortedByUpdatedAt = data.sort((a, b) => {               return dayjs(b.updatedAt).unix() - dayjs(a.updatedAt).unix();             });             dispatch(addDiary(sortedByUpdatedAt));           }         });       }     };     fetchDiaries();   }, [dispatch, user]);    const createDiary = async () => {     const result = await Swal.mixin({       input: 'text',       confirmButtonText: 'Next →',       showCancelButton: true,       progressSteps: ['1', '2'],     }).queue([       {         titleText: 'Diary title',         input: 'text',       },       {         titleText: 'Private or public diary?',         input: 'radio',         inputOptions: {           private: 'Private',           public: 'Public',         },         inputValue: 'private',       },     ]);     if (result.value) {       const { value } = result;       const {         diary,         user: _user,       } = await http.post<Partial<Diary>, { diary: Diary; user: User }>('/diaries/', {         title: value[0],         type: value[1],         userId: user?.id,       });       if (diary && user) {         dispatch(addDiary([diary] as Diary[]));         dispatch(addDiary([diary] as Diary[]));         dispatch(setUser(_user));         return Swal.fire({           titleText: 'All done!',           confirmButtonText: 'OK!',         });       }     }     Swal.fire({       titleText: 'Cancelled',     });   };    return (     <div style={{ padding: '1em 0.4em' }}>       <Switch>         <Route path="/diary/:id">           <DiaryEntriesList />         </Route>         <Route path="/">           <button onClick={createDiary}>Create New</button>           {diaries.map((diary, idx) => (             <DiaryTile key={idx} diary={diary} />           ))}         </Route>       </Switch>     </div>   ); };  export default Diaries; 

:root {   --primary-color: #778899;   --error-color: #f85032;   --text-color: #0d0d0d;   --transition: all ease-in-out 0.3s; } body {   margin: 0;   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',     'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',     sans-serif;   -webkit-font-smoothing: antialiased;   -moz-osx-font-smoothing: grayscale; } html, body, #root {   height: 100%; } , :before, *:after {   box-sizing: border-box; } .auth {   display: flex;   align-items: center;   height: 100%; } .card {   background: #fff;   padding: 3rem;   text-align: center;   box-shadow: 2px 8px 12px rgba(0, 0, 0, 0.1);   max-width: 450px;   width: 90%;   margin: 0 auto; } .inputWrapper {   margin: 1rem auto;   width: 100%; } input:not([type='checkbox']), button {   border-radius: 0.5rem;   width: 100%; } input:not([type='checkbox']), textarea {   border: 2px solid rgba(0, 0, 0, 0.1);   padding: 1em;   color: var(--text-color);   transition: var(--transition); } input:not([type='checkbox']):focus, textarea:focus {   outline: none;   border-color: var(--primary-color); } button {   appearance: none;   border: 1px solid var(--primary-color);   color: #fff;   background-color: var(--primary-color);   text-transform: uppercase;   font-weight: bold;   outline: none;   cursor: pointer;   padding: 1em;   box-shadow: 1px 4px 6px rgba(0, 0, 0, 0.1);   transition: var(--transition); } button.secondary {   color: var(--primary-color);   background-color: #fff;   border-color: #fff; } button:hover, button:focus {   box-shadow: 1px 6px 8px rgba(0, 0, 0, 0.1); } .error {   margin: 0;   margin-top: 0.2em;   font-size: 0.8em;   color: var(--error-color);   animation: 0.3s ease-in-out forwards fadeIn; } .two-cols {   display: flex;   flex-wrap: wrap;   height: 100vh; } .two-cols .left {   border-right: 1px solid rgba(0, 0, 0, 0.1);   height: 100%;   overflow-y: scroll; } .two-cols .right {   overflow-y: auto; } .title {   font-size: 1.3rem; } .subtitle {   font-size: 0.9rem;   opacity: 0.85; } .title, .subtitle {   margin: 0; } .diary-tile {   border-bottom: 1px solid rgba(0, 0, 0, 0.1);   padding: 1em; } .editor {   height: 100%;   padding: 1em; } .editor input {   width: 100%; } .editor textarea {   width: 100%;   height: calc(100vh - 160px); } .entries ul {   list-style: none;   padding: 0; } .entries li {   border-top: 1px solid rgba(0, 0, 0, 0.1);   padding: 0.5em;   cursor: pointer; } .entries li:nth-child(even) {   background: rgba(0, 0, 0, 0.1); }  @media (min-width: 768px) {   .two-cols .left {     width: 25%;   }   .two-cols .right {     width: 75%;   } } @keyframes fadeIn {   0% {     opacity: 0;   }   100% {     opacity: 0.8;   } } 

npm install --save axios react-router-dom react-hook-form yup dayjs markdown-to-jsx sweetalert2 

npm install --save-dev miragejs @types/react-redux @types/react-router-dom @types/yup @types/markdown-to-jsx 

import { Server, Model, Factory, belongsTo, hasMany, Response } from 'miragejs';  export const handleErrors = (error: any, message = 'An error ocurred') => {   return new Response(400, undefined, {     data: {       message,       isError: true,     },   }); };  export const setupServer = (env?: string): Server => {   return new Server({     environment: env ?? 'development',      models: {       entry: Model.extend({         diary: belongsTo(),       }),       diary: Model.extend({         entry: hasMany(),         user: belongsTo(),       }),       user: Model.extend({         diary: hasMany(),       }),     },      factories: {       user: Factory.extend({         username: 'test',         password: 'password',         email: 'test@email.com',       }),     },      seeds: (server): any => {       server.create('user');     },      routes(): void {       this.urlPrefix = 'https://diaries.app';     },   }); }; 

import { Response, Request } from 'miragejs'; import { handleErrors } from '../server'; import { User } from '../../../interfaces/user.interface'; import { randomBytes } from 'crypto';  const generateToken = () => randomBytes(8).toString('hex');  export interface AuthResponse {   token: string;   user: User; }  const login = (schema: any, req: Request): AuthResponse | Response => {   const { username, password } = JSON.parse(req.requestBody);   const user = schema.users.findBy({ username });   if (!user) {     return handleErrors(null, 'No user with that username exists');   }   if (password !== user.password) {     return handleErrors(null, 'Password is incorrect');   }   const token = generateToken();   return {     user: user.attrs as User,     token,   }; };  const signup = (schema: any, req: Request): AuthResponse | Response => {   const data = JSON.parse(req.requestBody);   const exUser = schema.users.findBy({ username: data.username });   if (exUser) {     return handleErrors(null, 'A user with that username already exists.');   }   const user = schema.users.create(data);   const token = generateToken();   return {     user: user.attrs as User,     token,   }; };  export default {   login,   signup, }; 

export const create = (   schema: any,   req: Request ): { user: User; diary: Diary } | Response => {   try {     const { title, type, userId } = JSON.parse(req.requestBody) as Partial<       Diary     >;     const exUser = schema.users.findBy({ id: userId });     if (!exUser) {       return handleErrors(null, 'No such user exists.');     }     const now = dayjs().format();     const diary = exUser.createDiary({       title,       type,       createdAt: now,       updatedAt: now,     });     return {       user: {         ...exUser.attrs,       },       diary: diary.attrs,     };   } catch (error) {     return handleErrors(error, 'Failed to create Diary.');   } };  export const updateDiary = (schema: any, req: Request): Diary | Response => {   try {     const diary = schema.diaries.find(req.params.id);     const data = JSON.parse(req.requestBody) as Partial<Diary>;     const now = dayjs().format();     diary.update({       ...data,       updatedAt: now,     });     return diary.attrs as Diary;   } catch (error) {     return handleErrors(error, 'Failed to update Diary.');   } };  export const getDiaries = (schema: any, req: Request): Diary[] | Response => {   try {     const user = schema.users.find(req.params.id);     return user.diary as Diary[];   } catch (error) {     return handleErrors(error, 'Could not get user diaries.');   } }; 

export const addEntry = (   schema: any,   req: Request ): { diary: Diary; entry: Entry } | Response => {   try {     const diary = schema.diaries.find(req.params.id);     const { title, content } = JSON.parse(req.requestBody) as Partial<Entry>;     const now = dayjs().format();     const entry = diary.createEntry({       title,       content,       createdAt: now,       updatedAt: now,     });     diary.update({       ...diary.attrs,       updatedAt: now,     });     return {       diary: diary.attrs,       entry: entry.attrs,     };   } catch (error) {     return handleErrors(error, 'Failed to save entry.');   } };  export const getEntries = (   schema: any,   req: Request ): { entries: Entry[] } | Response => {   try {     const diary = schema.diaries.find(req.params.id);     return diary.entry;   } catch (error) {     return handleErrors(error, 'Failed to get Diary entries.');   } };  export const updateEntry = (schema: any, req: Request): Entry | Response => {   try {     const entry = schema.entries.find(req.params.id);     const data = JSON.parse(req.requestBody) as Partial<Entry>;     const now = dayjs().format();     entry.update({       ...data,       updatedAt: now,     });     return entry.attrs as Entry;   } catch (error) {     return handleErrors(error, 'Failed to update entry.');   } }; 

import { Server, Model, Factory, belongsTo, hasMany, Response } from 'miragejs';  import user from './routes/user'; import * as diary from './routes/diary'; 

import axios, { AxiosInstance, AxiosResponse, AxiosError } from 'axios'; import { showAlert } from '../util';  const http: AxiosInstance = axios.create({   baseURL: 'https://diaries.app', });  http.defaults.headers.post['Content-Type'] = 'application/json';  http.interceptors.response.use(   async (response: AxiosResponse): Promise => {     if (response.status >= 200 && response.status < 300) {       return response.data;     }   },   (error: AxiosError) => {     const { response, request }: {       response?: AxiosResponse;       request?: XMLHttpRequest;     } = error;     if (response) {       if (response.status >= 400 && response.status < 500) {         showAlert(response.data?.data?.message, 'error');         return null;       }     } else if (request) {       showAlert('Request failed. Please try again.', 'error');       return null;     }     return Promise.reject(error);   } );  export default http; 

import Swal, { SweetAlertIcon } from 'sweetalert2';  export const showAlert = (titleText = 'Something happened.', alertType?: SweetAlertIcon): void => {   Swal.fire({     titleText,     position: 'top-end',     timer: 3000,     timerProgressBar: true,     toast: true,     showConfirmButton: false,     showCancelButton: true,     cancelButtonText: 'Dismiss',     icon: alertType,     showClass: {       popup: 'swal2-noanimation',       backdrop: 'swal2-noanimation',     },     hideClass: {       popup: '',       backdrop: '',     },   }); }; 

export const store = configureStore({   reducer: rootReducer, // a single reducer function or an object of slice reducers }); 

import { createSlice, PayloadAction } from '@reduxjs/toolkit';  interface AuthState {   token: string | null;   isAuthenticated: boolean; }  const initialState: AuthState = {   token: null,   isAuthenticated: false, };  const auth = createSlice({   name: 'auth',   initialState,   reducers: {     saveToken(state, { payload }: PayloadAction) {       if (payload) {         state.token = payload;       }     },     clearToken(state) {       state.token = null;     },     setAuthState(state, { payload }: PayloadAction) {       state.isAuthenticated = payload;     },   }, });  export const { saveToken, clearToken, setAuthState } = auth.actions; export default auth.reducer; 

import { createSlice, PayloadAction } from '@reduxjs/toolkit'; import { Diary } from '../../interfaces/diary.interface';  const diaries = createSlice({   name: 'diaries',   initialState: [] as Diary[],   reducers: {     addDiary(state, { payload }: PayloadAction<Diary[]>) {       const diariesToSave = payload.filter((diary) => {         return state.findIndex((item) => item.id === diary.id) === -1;       });       state.push(...diariesToSave);     },     updateDiary(state, { payload }: PayloadAction<Diary>) {       const { id } = payload;       const diaryIndex = state.findIndex((diary) => diary.id === id);       if (diaryIndex !== -1) {         state.splice(diaryIndex, 1, payload);       }     },   }, });  export const { addDiary, updateDiary } = diaries.actions; export default diaries.reducer; 

import { createSlice, PayloadAction } from '@reduxjs/toolkit'; import { Entry } from '../../interfaces/entry.interface';  interface EditorState {   canEdit: boolean;   currentlyEditing: Entry | null;   activeDiaryId: string | null; }  const initialState: EditorState = {   canEdit: false,   currentlyEditing: null,   activeDiaryId: null, };  const editor = createSlice({   name: 'editor',   initialState,   reducers: {     setCanEdit(state, { payload }: PayloadAction<boolean>) {       state.canEdit = payload != null ? payload : !state.canEdit;     },     setCurrentlyEditing(state, { payload }: PayloadAction<Entry | null>) {       state.currentlyEditing = payload;     },     setActiveDiaryId(state, { payload }: PayloadAction<string>) {       state.activeDiaryId = payload;     },   }, });  export const { setCanEdit, setCurrentlyEditing, setActiveDiaryId } = editor.actions; export default editor.reducer; 

import React, { FC, lazy, Suspense } from 'react'; import { BrowserRouter as Router, Switch, Route } from 'react-router-dom'; import { useSelector } from 'react-redux'; import { RootState } from '../rootReducer';  const Auth = lazy(() => import('../features/auth/Auth')); const Home = lazy(() => import('../features/home/Home'));  const App: FC = () => {   const isLoggedIn = useSelector(     (state: RootState) => state.auth.isAuthenticated   );   return (     <Router>       <Switch>         <Route path="/">           <Suspense fallback={<p>Loading...</p>}>             {isLoggedIn ? <Home /> : <Auth />}           </Suspense>         </Route>       </Switch>     </Router>   ); };  export default App; 

import React, { FC, useState } from 'react'; import { useForm } from 'react-hook-form'; import { User } from '../../interfaces/user.interface'; import * as Yup from 'yup'; import http from '../../services/api'; import { saveToken, setAuthState } from './authSlice'; import { setUser } from './userSlice'; import { AuthResponse } from '../../services/mirage/routes/user'; import { useAppDispatch } from '../../store';  const schema = Yup.object().shape({   username: Yup.string()     .required('What? No username?')     .max(16, 'Username cannot be longer than 16 characters'),   password: Yup.string().required('Without a password, "None shall pass!"'),   email: Yup.string().email('Please provide a valid email address (abc@xy.z)'), });  const Auth: FC = () => {   const { handleSubmit, register, errors } = useForm<User>({     validationSchema: schema,   });   const [isLogin, setIsLogin] = useState(true);   const [loading, setLoading] = useState(false);   const dispatch = useAppDispatch();    const submitForm = (data: User) => {     const path = isLogin ? '/auth/login' : '/auth/signup';     http       .post<User, AuthResponse>(path, data)       .then((res) => {         if (res) {           const { user, token } = res;           dispatch(saveToken(token));           dispatch(setUser(user));           dispatch(setAuthState(true));         }       })       .catch((error) => {         console.log(error);       })       .finally(() => {         setLoading(false);       });   };    return (     <div className="auth">       <div className="card">         <form onSubmit={handleSubmit(submitForm)}>           <div className="inputWrapper">             <input ref={register} name="username" placeholder="Username" />             {errors && errors.username && (               <p className="error">{errors.username.message}</p>             )}           </div>           <div className="inputWrapper">             <input               ref={register}               name="password"               type="password"               placeholder="Password"             />             {errors && errors.password && (               <p className="error">{errors.password.message}</p>             )}           </div>           {!isLogin && (             <div className="inputWrapper">               <input                 ref={register}                 name="email"                 placeholder="Email (optional)"               />               {errors && errors.email && (                 <p className="error">{errors.email.message}</p>               )}             </div>           )}           <div className="inputWrapper">             <button type="submit" disabled={loading}>               {isLogin ? 'Login' : 'Create account'}             </button>           </div>           <p             onClick={() => setIsLogin(!isLogin)}             style={{ cursor: 'pointer', opacity: 0.7 }}           >             {isLogin ? 'No account? Create one' : 'Already have an account?'}           </p>         </form>       </div>     </div>   ); };  export default Auth; 

import React, { FC, useState, useEffect } from 'react'; import { useSelector } from 'react-redux'; import { RootState } from '../../rootReducer'; import Markdown from 'markdown-to-jsx'; import http from '../../services/api'; import { Entry } from '../../interfaces/entry.interface'; import { Diary } from '../../interfaces/diary.interface'; import { setCurrentlyEditing, setCanEdit } from './editorSlice'; import { updateDiary } from '../diary/diariesSlice'; import { updateEntry } from './entriesSlice'; import { showAlert } from '../../util'; import { useAppDispatch } from '../../store';  const Editor: FC = () => {   const { currentlyEditing: entry, canEdit, activeDiaryId } = useSelector(     (state: RootState) => state.editor   );   const [editedEntry, updateEditedEntry] = useState(entry);   const dispatch = useAppDispatch();    const saveEntry = async () => {     if (activeDiaryId == null) {       return showAlert('Please select a diary.', 'warning');     }     if (entry == null) {       http         .post<Entry, { diary: Diary; entry: Entry }>(           /diaries/entry/$  {activeDiaryId},           editedEntry         )         .then((data) => {           if (data != null) {             const { diary, entry: _entry } = data;             dispatch(setCurrentlyEditing(_entry));             dispatch(updateDiary(diary));           }         });     } else {       http         .put<Entry, Entry>(diaries/entry/$  {entry.id}, editedEntry)         .then((_entry) => {           if (_entry != null) {             dispatch(setCurrentlyEditing(_entry));             dispatch(updateEntry(_entry));           }         });     }     dispatch(setCanEdit(false));   };    useEffect(() => {     updateEditedEntry(entry);   }, [entry]);    return (     <div className="editor">       <header         style={{           display: 'flex',           flexWrap: 'wrap',           alignItems: 'center',           marginBottom: '0.2em',           paddingBottom: '0.2em',           borderBottom: '1px solid rgba(0,0,0,0.1)',         }}       >         {entry && !canEdit ? (           <h4>             {entry.title}             <a               href="#edit"               onClick={(e) => {                 e.preventDefault();                 if (entry != null) {                   dispatch(setCanEdit(true));                 }               }}               style={{ marginLeft: '0.4em' }}             >               (Edit)             </a>           </h4>         ) : (           <input             value={editedEntry?.title ?? ''}             disabled={!canEdit}             onChange={(e) => {               if (editedEntry) {                 updateEditedEntry({                   ...editedEntry,                   title: e.target.value,                 });               } else {                 updateEditedEntry({                   title: e.target.value,                   content: '',                 });               }             }}           />         )}       </header>       {entry && !canEdit ? (         <Markdown>{entry.content}</Markdown>       ) : (         <>           <textarea             disabled={!canEdit}             placeholder="Supports markdown!"             value={editedEntry?.content ?? ''}             onChange={(e) => {               if (editedEntry) {                 updateEditedEntry({                   ...editedEntry,                   content: e.target.value,                 });               } else {                 updateEditedEntry({                   title: '',                   content: e.target.value,                 });               }             }}           />           <button onClick={saveEntry} disabled={!canEdit}>             Save           </button>         </>       )}     </div>   ); };  export default Editor; 

import React, { FC, useState } from 'react'; import { Diary } from '../../interfaces/diary.interface'; import http from '../../services/api'; import { updateDiary } from './diariesSlice'; import { setCanEdit, setActiveDiaryId, setCurrentlyEditing } from '../entry/editorSlice'; import { showAlert } from '../../util'; import { Link } from 'react-router-dom'; import { useAppDispatch } from '../../store';  interface Props {   diary: Diary; }  const buttonStyle: React.CSSProperties = {   fontSize: '0.7em',   margin: '0 0.5em', };  const DiaryTile: FC<Props> = (props) => {   const [diary, setDiary] = useState(props.diary);   const [isEditing, setIsEditing] = useState(false);   const dispatch = useAppDispatch();   const totalEntries = props.diary?.entryIds?.length;    const saveChanges = () => {     http       .put<Diary, Diary>(/diaries/$  {diary.id}, diary)       .then((diary) => {         if (diary) {           dispatch(updateDiary(diary));           showAlert('Saved!', 'success');         }       })       .finally(() => {         setIsEditing(false);       });   };    return (     <div className="diary-tile">       <h2         className="title"         title="Click to edit"         onClick={() => setIsEditing(true)}         style={{           cursor: 'pointer',         }}       >         {isEditing ? (           <input             value={diary.title}             onChange={(e) => {               setDiary({                 ...diary,                 title: e.target.value,               });             }}             onKeyUp={(e) => {               if (e.key === 'Enter') {                 saveChanges();               }             }}           />         ) : (           <span>{diary.title}</span>         )}       </h2>       <p className="subtitle">{totalEntries ?? '0'} saved entries</p>       <div style={{ display: 'flex' }}>         <button           style={buttonStyle}           onClick={() => {             dispatch(setCanEdit(true));             dispatch(setActiveDiaryId(diary.id as string));             dispatch(setCurrentlyEditing(null));           }}         >           Add New Entry         </button>         <Link to={diary/$  {diary.id}} style={{ width: '100%' }}>           <button className="secondary" style={buttonStyle}>             View all →           </button>         </Link>       </div>     </div>   ); };  export default DiaryTile; 

import React, { FC, useEffect } from 'react'; import { useParams, Link } from 'react-router-dom'; import { useSelector } from 'react-redux'; import { RootState } from '../../rootReducer'; import http from '../../services/api'; import { Entry } from '../../interfaces/entry.interface'; import { setEntries } from '../entry/entriesSlice'; import { setCurrentlyEditing, setCanEdit } from '../entry/editorSlice'; import dayjs from 'dayjs'; import { useAppDispatch } from '../../store';  const DiaryEntriesList: FC = () => {   const { entries } = useSelector((state: RootState) => state);   const dispatch = useAppDispatch();   const { id } = useParams();    useEffect(() => {     if (id != null) {       http         .get<null, { entries: Entry[] }>(/diaries/entries/$  {id})         .then(({ entries: _entries }) => {           if (_entries) {             const sortByLastUpdated = _entries.sort((a, b) => {               return dayjs(b.updatedAt).unix() - dayjs(a.updatedAt).unix();             });             dispatch(setEntries(sortByLastUpdated));           }         });     }   }, [id, dispatch]);    return (     <div className="entries">       <header>         <Link to="/">           <h3>← Go Back</h3>         </Link>       </header>       <ul>         {entries.map((entry) => (           <li             key={entry.id}             onClick={() => {               dispatch(setCurrentlyEditing(entry));               dispatch(setCanEdit(true));             }}           >             {entry.title}           </li>         ))}       </ul>     </div>   ); };  export default DiaryEntriesList; 

import React, { FC, useEffect } from 'react'; import { useSelector } from 'react-redux'; import { RootState } from '../../rootReducer'; import http from '../../services/api'; import { Diary } from '../../interfaces/diary.interface'; import { addDiary } from './diariesSlice'; import Swal from 'sweetalert2'; import { setUser } from '../auth/userSlice'; import DiaryTile from './DiaryTile'; import { User } from '../../interfaces/user.interface'; import { Route, Switch } from 'react-router-dom'; import DiaryEntriesList from './DiaryEntriesList'; import { useAppDispatch } from '../../store'; import dayjs from 'dayjs';  const Diaries: FC = () => {   const dispatch = useAppDispatch();   const diaries = useSelector((state: RootState) => state.diaries);   const user = useSelector((state: RootState) => state.user);    useEffect(() => {     const fetchDiaries = async () => {       if (user) {         http.get<null, Diary[]>(diaries/$  {user.id}).then((data) => {           if (data && data.length > 0) {             const sortedByUpdatedAt = data.sort((a, b) => {               return dayjs(b.updatedAt).unix() - dayjs(a.updatedAt).unix();             });             dispatch(addDiary(sortedByUpdatedAt));           }         });       }     };     fetchDiaries();   }, [dispatch, user]);    const createDiary = async () => {     const result = await Swal.mixin({       input: 'text',       confirmButtonText: 'Next →',       showCancelButton: true,       progressSteps: ['1', '2'],     }).queue([       {         titleText: 'Diary title',         input: 'text',       },       {         titleText: 'Private or public diary?',         input: 'radio',         inputOptions: {           private: 'Private',           public: 'Public',         },         inputValue: 'private',       },     ]);     if (result.value) {       const { value } = result;       const {         diary,         user: _user,       } = await http.post<Partial<Diary>, { diary: Diary; user: User }>('/diaries/', {         title: value[0],         type: value[1],         userId: user?.id,       });       if (diary && user) {         dispatch(addDiary([diary] as Diary[]));         dispatch(addDiary([diary] as Diary[]));         dispatch(setUser(_user));         return Swal.fire({           titleText: 'All done!',           confirmButtonText: 'OK!',         });       }     }     Swal.fire({       titleText: 'Cancelled',     });   };    return (     <div style={{ padding: '1em 0.4em' }}>       <Switch>         <Route path="/diary/:id">           <DiaryEntriesList />         </Route>         <Route path="/">           <button onClick={createDiary}>Create New</button>           {diaries.map((diary, idx) => (             <DiaryTile key={idx} diary={diary} />           ))}         </Route>       </Switch>     </div>   ); };  export default Diaries; 

:root {   --primary-color: #778899;   --error-color: #f85032;   --text-color: #0d0d0d;   --transition: all ease-in-out 0.3s; } body {   margin: 0;   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',     'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',     sans-serif;   -webkit-font-smoothing: antialiased;   -moz-osx-font-smoothing: grayscale; } html, body, #root {   height: 100%; } , :before, *:after {   box-sizing: border-box; } .auth {   display: flex;   align-items: center;   height: 100%; } .card {   background: #fff;   padding: 3rem;   text-align: center;   box-shadow: 2px 8px 12px rgba(0, 0, 0, 0.1);   max-width: 450px;   width: 90%;   margin: 0 auto; } .inputWrapper {   margin: 1rem auto;   width: 100%; } input:not([type='checkbox']), button {   border-radius: 0.5rem;   width: 100%; } input:not([type='checkbox']), textarea {   border: 2px solid rgba(0, 0, 0, 0.1);   padding: 1em;   color: var(--text-color);   transition: var(--transition); } input:not([type='checkbox']):focus, textarea:focus {   outline: none;   border-color: var(--primary-color); } button {   appearance: none;   border: 1px solid var(--primary-color);   color: #fff;   background-color: var(--primary-color);   text-transform: uppercase;   font-weight: bold;   outline: none;   cursor: pointer;   padding: 1em;   box-shadow: 1px 4px 6px rgba(0, 0, 0, 0.1);   transition: var(--transition); } button.secondary {   color: var(--primary-color);   background-color: #fff;   border-color: #fff; } button:hover, button:focus {   box-shadow: 1px 6px 8px rgba(0, 0, 0, 0.1); } .error {   margin: 0;   margin-top: 0.2em;   font-size: 0.8em;   color: var(--error-color);   animation: 0.3s ease-in-out forwards fadeIn; } .two-cols {   display: flex;   flex-wrap: wrap;   height: 100vh; } .two-cols .left {   border-right: 1px solid rgba(0, 0, 0, 0.1);   height: 100%;   overflow-y: scroll; } .two-cols .right {   overflow-y: auto; } .title {   font-size: 1.3rem; } .subtitle {   font-size: 0.9rem;   opacity: 0.85; } .title, .subtitle {   margin: 0; } .diary-tile {   border-bottom: 1px solid rgba(0, 0, 0, 0.1);   padding: 1em; } .editor {   height: 100%;   padding: 1em; } .editor input {   width: 100%; } .editor textarea {   width: 100%;   height: calc(100vh - 160px); } .entries ul {   list-style: none;   padding: 0; } .entries li {   border-top: 1px solid rgba(0, 0, 0, 0.1);   padding: 0.5em;   cursor: pointer; } .entries li:nth-child(even) {   background: rgba(0, 0, 0, 0.1); }  @media (min-width: 768px) {   .two-cols .left {     width: 25%;   }   .two-cols .right {     width: 75%;   } } @keyframes fadeIn {   0% {     opacity: 0;   }   100% {     opacity: 0.8;   } }