feat: update to ua22

* add buckless integration
* add network status
* update colors

public/manifest.json

@@ -1,6 +1,6 @@
 {
-  "short_name": "React App",
-  "name": "Create React App Sample",
+  "short_name": "Turbobouffe",
+  "name": "Appli de commandes de l'UA",
   "icons": [
     {
       "src": "favicon.ico",

src/app.scss

@@ -19,9 +19,9 @@ body {
   --primary: #393e46;
   --primary-light: #4a505b;
 
-  --color-accent-dark: #006492;
-  --color-accent-light: #fbb464;
-  --color-accent-primary: #f1737f;
+  --color-accent-dark: #8767aa;
+  --color-accent-light: #f0dced;
+  --color-accent-primary: #cbd7ef;
 
   --success: #28a745;
   --warning: #ffc107;
@@ -36,3 +36,4 @@ body {
   width: 0px; /* Remove scrollbar space */
   background: transparent; /* Optional: just make scrollbar invisible */
 }
+

src/components/navbar.scss

@@ -1,38 +1,48 @@
-.navbar {
-  height: 50px;
-  margin: 0;
-  font-size: 2rem;
-  display: flex;
-  align-items: center;
-
-  .back {
-    padding: 0 30px 0 15px;
-    height: 50px;
-    display: flex;
-    align-items: center;
-  }
-
-  .title {
-    padding: 0 30px;
-    margin: auto;
-
-    .reload-icon {
-      font-size: 0.8em;
-      margin-right: 12px;
-    }
-  }
-
-  .absolute-left {
-    position: absolute;
-    left: 0;
-  }
-
-  .absolute-right {
-    position: absolute;
-    right: 0;
-  }
-
-  > *:hover {
-    filter: brightness(0.9);
-  }
-}
+.navbar {
+  height: 50px;
+  margin: 0;
+  font-size: 2rem;
+  display: flex;
+  align-items: center;
+
+  .back {
+    padding: 0 30px 0 15px;
+    gap: 15px;
+    height: 50px;
+    display: flex;
+    align-items: center;
+  }
+
+  .online {
+    color: var(--success);
+  }
+
+  .offline {
+    color: var(--danger);
+  }
+
+  .title {
+    padding: 0 30px;
+    margin: auto;
+
+    .reload-icon {
+      font-size: 0.8em;
+      margin-right: 12px;
+    }
+  }
+
+  .absolute-left {
+    position: absolute;
+    left: 0;
+  }
+
+  .absolute-right {
+    position: absolute;
+    right: 0;
+  }
+
+  > *:hover {
+    filter: brightness(0.9);
+  }
+}
+

src/components/navbar.tsx

@@ -16,6 +16,7 @@ interface PropTypes {
 const Navbar = ({ back, onBack, children }: PropTypes) => {
   const [time, setTime] = useState(moment().format('H[h]mm'));
   const name = useSelector((state: State) => state.login.name);
+  const serverOnline = useSelector((state: State) => state.server.internetConnected);
 
   useEffect(() => {
     const interval = setInterval(() => {
@@ -37,13 +38,13 @@ const Navbar = ({ back, onBack, children }: PropTypes) => {
 
   return (
     <nav className="navbar">
-      {back ? (
-        <div className="back absolute-left" onClick={() => onBackClick()}>
-          <FontAwesome name="chevron-left" />
+      <div className="back absolute-left" onClick={() => (back ? onBackClick() : null)}>
+        {back ? <FontAwesome name="chevron-left" /> : ''}
+        <div className={serverOnline ? 'online' : 'offline'} onClick={() => onBackClick()}>
+          <FontAwesome name={serverOnline ? 'check-circle' : 'exclamation-circle'} />{' '}
+          {serverOnline ? 'En ligne' : 'Hors ligne'}
         </div>
-      ) : (
-        ''
-      )}
+      </div>
       <span className="title" onClick={() => window.location.reload()}>
         <FontAwesome name="sync-alt" className="reload-icon" /> {time} - {name}
       </span>

src/reducers/login.ts

@@ -3,12 +3,13 @@ import { toast } from 'react-toastify';
 import { Socket } from '../utils/socket';
 import { clearOrders, setOrders } from './orders';
 import { clearBasket } from './basket';
-import { LoginState, User, Action, Dispatch } from '../types';
+import { LoginState, User, Action, Dispatch, ApiLoginResponse } from '../types';
 import { clearPromotions, setPromotions } from './promotions';
 import { getOrders } from '../utils/orders';
 import { getCategories } from '../utils/categories';
 import { setCategories } from './categories';
 import { getPromotions } from '../utils/promotions';
+import { setServerOffline, setServerOnline } from './server';
 
 const initialState: LoginState = {
   token: null,
@@ -105,10 +106,11 @@ export const autoLogin = () => async (dispatch: Dispatch) => {
     const oldToken: string = localStorage.getItem(BOUFFE_TOKEN);
 
     try {
-      const res = await API.post<User>('/auth/refreshToken', { token: oldToken });
-      const { token, name, key } = res.data;
+      const res = await API.post<ApiLoginResponse>('/auth/refreshToken', { token: oldToken });
+      const { token, name, key, isOnline } = res.data;
 
       dispatch(setUser({ token, name, key }));
+      dispatch(isOnline ? setServerOnline() : setServerOffline());
       dispatch(fetchData());
     } catch (err) {
       dispatch(logout());
@@ -120,10 +122,12 @@ export const autoLogin = () => async (dispatch: Dispatch) => {
 };
 
 export const tryLogin = (pin: string) => async (dispatch: Dispatch) => {
-  const res = await API.post<User>(`/auth/login`, { pin });
-  const { token, name, key } = res.data;
+  const res = await API.post<ApiLoginResponse>(`/auth/login`, { pin });
+  const { token, name, key, isOnline } = res.data;
   toast.success('Connexion validée');
   dispatch(setLoading(true));
   dispatch(setUser({ token, name, key }));
+  dispatch(isOnline ? setServerOnline() : setServerOffline());
   dispatch(fetchData());
 };
+

src/reducers/server.ts

@@ -2,10 +2,13 @@ import { Action, ServerState } from '../types';
 
 const initialState: ServerState = {
   socketConnected: false,
+  internetConnected: false,
 };
 
 export const SET_SOCKET_CONNECTED = 'SET_SOCKET_CONNECTED';
 export const SET_SOCKET_DISCONNECTED = 'SET_SOCKET_DISCONNECTED';
+export const SET_SERVER_ONLINE = 'SET_SERVER_ONLINE';
+export const SET_SERVER_OFFLINE = 'SET_SERVER_OFFLINE';
 
 export default (state = initialState, action: Action) => {
   switch (action.type) {
@@ -21,6 +24,17 @@ export default (state = initialState, action: Action) => {
         socketConnected: false,
       };
 
+    case SET_SERVER_ONLINE:
+      return {
+        ...state,
+        internetConnected: true,
+      };
+
+    case SET_SERVER_OFFLINE:
+      return {
+        ...state,
+        internetConnected: false,
+      };
     default:
       return state;
   }
@@ -33,3 +47,11 @@ export const setSocketConnected = () => ({
 export const setSocketDisconnected = () => ({
   type: SET_SOCKET_DISCONNECTED,
 });
+
+export const setServerOnline = () => ({
+  type: SET_SERVER_ONLINE,
+});
+
+export const setServerOffline = () => ({
+  type: SET_SERVER_OFFLINE,
+});

src/types.ts

@@ -60,6 +60,10 @@ export interface User {
   key: string;
 }
 
+export interface ApiLoginResponse extends User {
+  isOnline: boolean;
+}
+
 export interface Promotion extends Price {
   name: string;
   key: string;
@@ -109,4 +113,5 @@ export interface LoginState extends User {
 
 export interface ServerState {
   socketConnected: boolean;
+  internetConnected: boolean;
 }

src/utils/socket.ts

@@ -3,7 +3,7 @@ import { setOrders } from '../reducers/orders';
 import { toast } from 'react-toastify';
 import { Order, Category, Dispatch } from '../types';
 import { setCategories } from '../reducers/categories';
-import { setSocketDisconnected, setSocketConnected } from '../reducers/server';
+import { setSocketDisconnected, setSocketConnected, setServerOnline, setServerOffline } from '../reducers/server';
 
 let socket: ClientSocket | undefined = undefined;
 
@@ -22,6 +22,15 @@ export const Socket = {
         dispatch(setCategories(categories));
       });
 
+      socket.on('networkStatus', ({ online }) => {
+        dispatch(online ? setServerOnline() : setServerOffline());
+        if (!online) {
+          toast.warning("Turbobouffe a été deconnecté d'internet. Passage en mode hors ligne", { autoClose: false });
+        } else {
+          toast.info('Turbobouff est de nouveau en ligne !', { autoClose: false });
+        }
+      });
+
       socket.on('disconnect', (reason: string) => {
         if (reason === 'transport close' || reason === 'ping timeout') {
           toast.error('Extinction du serveur...');