🐛 Correction de quelques bugs et suppression de chakra-ui

Author: mckenziearts

app/Http/Controllers/HomeController.php

@@ -78,7 +78,7 @@ public function index()
             'posts' => $posts,
             'tutorials' => $tutorials,
             'popularTutorials' => $popularTutorials
-        ]);
+        ])->withViewData(['title' => "Accueil"]);
     }
 
     /**
@@ -88,7 +88,7 @@ public function index()
      */
     public function privacy()
     {
-        return Inertia::render('commons/Privacy');
+        return Inertia::render('commons/Privacy')->withViewData(['title' => "Confidentialité"]);
     }
 
     /**
@@ -98,7 +98,7 @@ public function privacy()
      */
     public function terms()
     {
-        return Inertia::render('commons/Terms');
+        return Inertia::render('commons/Terms')->withViewData(['title' => "Conditions d'utilisation"]);
     }
 
     /**
@@ -108,7 +108,11 @@ public function terms()
      */
     public function slack()
     {
-        return Inertia::render('commons/Slack');
+        return Inertia::render('commons/Slack')
+            ->withViewData([
+                'title' => "Rejoindre Slack",
+                'description' => "Rejoignez notre slack pour discuter a propos de Laravel, Javascript, Design, comment demarrer et mener un projet de bout en bout, et découvrer l'univers du développement au Cameroun."
+            ]);
     }
 
     /**

package.json

@@ -11,9 +11,6 @@
     "lint": "tsc --noEmit && eslint --ext .ts,.tsx --fix"
   },
   "dependencies": {
-    "@chakra-ui/core": "^0.5.2",
-    "@emotion/core": "^10.0.27",
-    "@emotion/styled": "^10.0.27",
     "@grafikart/drop-files-element": "^1.0.9",
     "@inertiajs/inertia": "^0.1.7",
     "@inertiajs/inertia-react": "^0.1.4",
@@ -24,7 +21,6 @@
     "axios": "^0.19",
     "classnames": "^2.2.6",
     "date-fns": "^2.10.0",
-    "emotion-theming": "^10.0.27",
     "filepond": "^4.12.0",
     "filepond-plugin-image-exif-orientation": "^1.0.6",
     "filepond-plugin-image-preview": "^4.6.1",
@@ -33,10 +29,12 @@
     "highlight.js": "^9.18.1",
     "laravel-mix": "^4.0.7",
     "laravel-mix-purgecss": "^4.2.0",
+    "laravel-mix-tailwind": "^0.1.0",
     "lodash": "^4.17.13",
     "prismjs": "^1.19.0",
     "quill": "1.3.6",
     "react": "^16.12.0",
+    "react-app-polyfill": "^1.0.6",
     "react-content-loader": "^5.0.2",
     "react-country-region-selector": "^2.0.0",
     "react-datepicker": "^2.13.0",
@@ -101,5 +99,17 @@
     "ts-loader": "^6.0.4",
     "typescript": "^3.5.3",
     "vue-template-compiler": "^2.6.10"
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
   }
 }

public/css/application.css

@@ -1,7 +1,5 @@
 {
-    "/js/app.js": "/js/app.js?id=55dec51a3bf9b41ffef4",
-    "/css/application.css": "/css/application.css?id=6460c225c1513bfee32f",
-    "/js/app.js.map": "/js/app.js.map?id=c51d3110c5c343ffa705",
-    "/js/backend.js": "/js/backend.js?id=515555c10e07306c645b",
-    "/js/backend.js.map": "/js/backend.js.map?id=a4f485ce092245d168d8"
+    "/js/app.js": "/js/app.js",
+    "/css/application.css": "/css/application.css",
+    "/js/backend.js": "/js/backend.js"
 }

public/js/app.js

@@ -1,8 +1,8 @@
 import * as React from "react";
 import { render } from "react-dom";
 import { InertiaApp } from "@inertiajs/inertia-react";
-import { ThemeProvider } from "@chakra-ui/core";
 import * as Sentry from '@sentry/browser';
+import 'react-app-polyfill/stable';
 import "../sass/plugins.scss";
 
 Sentry.init({
@@ -12,11 +12,9 @@ Sentry.init({
 const app: any = document.getElementById("app");
 
 render(
-  <ThemeProvider>
-    <InertiaApp
-      initialPage={JSON.parse(app.dataset.page)}
-      resolveComponent={(name) => import(`./pages/${name}`).then((module) => module.default)}
-    />
-  </ThemeProvider>,
+  <InertiaApp
+    initialPage={JSON.parse(app.dataset.page)}
+    resolveComponent={(name) => import(`./pages/${name}`).then((module) => module.default)}
+  />,
   app,
 );

public/js/backend.js

@@ -1,16 +1,17 @@
 import React, { useState, useEffect } from "react";
 import axios from "axios";
 import { usePage, InertiaLink } from "@inertiajs/inertia-react";
-import { useToast } from "@chakra-ui/core";
 
 import { NotificationType } from "@/utils/types";
 import Notification from "@/components/Notification";
+import NotifyAlert from "@/components/NotifyAlert";
 
 export default () => {
   const [isOpen, setIsOpen] = useState(false);
   const [notifications, setNotifications] = useState<NotificationType[]>([]);
   const { auth: { user } } = usePage();
-  const toast = useToast();
+  const [message, setMessage] = useState("");
+  const [notify, setNotify] = useState(false);
 
   useEffect(() => {
     setNotifications(user.notifications);
@@ -19,85 +20,80 @@ export default () => {
   function readNotification(e: React.SyntheticEvent, id: number) {
     e.preventDefault();
     axios.delete(`/notifications/${id}`).then((response) => {
-      toast({
-        position: `bottom-right`,
-        description: `Notification marquée comme lue.`,
-        status: `success`,
-        duration: 2500,
-        isClosable: true,
-      });
+      setNotify(true);
+      setMessage("Notification marquée comme lue.");
+      setTimeout(() => setNotify(false), 2500);
       setNotifications(response.data.notifications);
     }).catch((error) => {
-      toast({
-        position: `bottom-right`,
-        description: `Impossible de marquée cette notification comme lue.`,
-        status: `error`,
-        duration: 2500,
-        isClosable: true,
-      });
+      setNotify(true);
+      setMessage("Impossible de marquée cette notification comme lue.");
+      setTimeout(() => setNotify(false), 2500);
       console.error(error);
     });
   }
 
   return (
-    <div className="relative">
-      <InertiaLink
-        // onClick={() => setIsOpen(!isOpen)}
-        href="/notifications"
-        className="relative inline-flex p-1 border-2 border-transparent text-gray-600 rounded-full hover:text-gray-700 focus:outline-none focus:text-gray-700 focus:bg-gray-100 transition duration-150 ease-in-out z-10"
-      >
-        <svg className="h-7 w-7" stroke="currentColor" fill="none" viewBox="0 0 24 24">
-          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9" />
-        </svg>
-        {notifications.length > 0 && (
-          <span
-            className="absolute h-5 w-5 flex items-center justify-center bg-brand-primary rounded-full text-white text-xs"
-            style={{ top: "-5px", right: "-4px" }}
-          >
-            {notifications.length}
-          </span>
-        )}
-      </InertiaLink>
-      <button
-        onClick={() => setIsOpen(false)}
-        className={`fixed w-full h-full inset-0 bg-transparent cursor-default ${isOpen ? "" : "hidden"}`}
-        tabIndex={-1}
-        aria-label="Menu"
-      />
-      <div
-        className={`absolute right-0 rounded bg-white w-96 h-100 shadow-lg mt-2 ${isOpen ? "" : "hidden"}`}
-      >
-        <div className="p-3 bg-gray-50 text-gray-700 border-b border-gray-100 flex items-center">
-          <svg fill="none" viewBox="0 0 24 24" stroke="currentColor" className="w-6 h-6 mr-2">
+    <>
+      <div className="relative">
+        <InertiaLink
+          // onClick={() => setIsOpen(!isOpen)}
+          href="/notifications"
+          className="relative inline-flex p-1 border-2 border-transparent text-gray-600 rounded-full hover:text-gray-700 focus:outline-none focus:text-gray-700 focus:bg-gray-100 transition duration-150 ease-in-out z-10"
+        >
+          <svg className="h-7 w-7" stroke="currentColor" fill="none" viewBox="0 0 24 24">
             <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9" />
           </svg>
-          <span className="font-medium">Notifications</span>
-        </div>
-        <div id="notifications" className="overflow-y-auto h-80">
-          {
-            notifications.length > 0
-            && notifications.map((notification: NotificationType) => (
-              <Notification
-                key={notification.id}
-                notification={notification}
-                readNotification={readNotification}
-              />
-            ))
-          }
-
-          {notifications.length === 0 && (
-            <div className="h-80 flex flex-col items-center justify-center">
-              <svg fill="none" viewBox="0 0 24 24" stroke="currentColor" className="w-10 h-10 mb-4">
-                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9" />
-              </svg>
-              <small className="text-gray-500 text-lg">Aucune notification</small>
-            </div>
+          {notifications.length > 0 && (
+            <span
+              className="absolute h-5 w-5 flex items-center justify-center bg-brand-primary rounded-full text-white text-xs"
+              style={{ top: "-5px", right: "-4px" }}
+            >
+              {notifications.length}
+            </span>
           )}
-        </div>
-        <div className="p-3 bg-gray-50 text-gray-700 border-b border-gray-100 text-center">
-          <a href="/notifications" className="font-medium">Toutes les notifications</a>
+        </InertiaLink>
+        <button
+          onClick={() => setIsOpen(false)}
+          className={`fixed w-full h-full inset-0 bg-transparent cursor-default ${isOpen ? "" : "hidden"}`}
+          tabIndex={-1}
+          aria-label="Menu"
+        />
+        <div
+          className={`absolute right-0 rounded bg-white w-96 h-100 shadow-lg mt-2 ${isOpen ? "" : "hidden"}`}
+        >
+          <div className="p-3 bg-gray-50 text-gray-700 border-b border-gray-100 flex items-center">
+            <svg fill="none" viewBox="0 0 24 24" stroke="currentColor" className="w-6 h-6 mr-2">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9" />
+            </svg>
+            <span className="font-medium">Notifications</span>
+          </div>
+          <div id="notifications" className="overflow-y-auto h-80">
+            {
+              notifications.length > 0
+              && notifications.map((notification: NotificationType) => (
+                <Notification
+                  key={notification.id}
+                  notification={notification}
+                  readNotification={readNotification}
+                />
+              ))
+            }
+
+            {notifications.length === 0 && (
+              <div className="h-80 flex flex-col items-center justify-center">
+                <svg fill="none" viewBox="0 0 24 24" stroke="currentColor" className="w-10 h-10 mb-4">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9" />
+                </svg>
+                <small className="text-gray-500 text-lg">Aucune notification</small>
+              </div>
+            )}
+          </div>
+          <div className="p-3 bg-gray-50 text-gray-700 border-b border-gray-100 text-center">
+            <a href="/notifications" className="font-medium">Toutes les notifications</a>
+          </div>
         </div>
       </div>
-    </div>
+      <NotifyAlert show={notify} onClose={() => setNotify(false)} message={message} />
+    </>
   );
 };

public/mix-manifest.json

@@ -0,0 +1,49 @@
+import React from "react";
+import { InertiaLink, usePage } from "@inertiajs/inertia-react";
+
+import Transition from "@/components/Transition";
+
+export default ({ show, onClose, message }: { show: boolean; onClose: () => void; message: string }) => {
+  const { auth: { user } } = usePage();
+
+  return (
+    <Transition show={show}>
+      <div className="fixed z-100 inset-0 flex items-end justify-center px-4 py-6 pointer-events-none sm:p-6 sm:items-start sm:justify-end">
+        <Transition
+          enter="transform ease-out duration-300 transition"
+          enterFrom="translate-y-2 opacity-0 sm:translate-y-0 sm:translate-x-2"
+          enterTo="translate-y-0 opacity-100 sm:translate-x-0"
+          leave="transition ease-in duration-100"
+          leaveFrom="opacity-100"
+          leaveTo="opacity-0"
+        >
+          <div className="max-w-sm w-full bg-white shadow-lg rounded-lg pointer-events-auto">
+            <div className="rounded-lg shadow-xs overflow-hidden">
+              <div className="p-4">
+                <div className="flex items-start">
+                  <div className="w-0 flex-1 flex justify-between">
+                    <p className="w-0 flex-1 text-sm leading-5 font-medium text-gray-900">
+                      {message}
+                    </p>
+                    {!user && (
+                      <InertiaLink href="/login" className="ml-3 flex-shrink-0 text-sm leading-5 font-medium text-brand-primary hover:text-brand-900 focus:outline-none focus:underline transition ease-in-out duration-150">
+                        Connexion
+                      </InertiaLink>
+                    )}
+                  </div>
+                  <div className="ml-4 flex-shrink-0 flex">
+                    <button onClick={onClose} className="inline-flex text-gray-400 focus:outline-none focus:text-gray-500 transition ease-in-out duration-150">
+                      <svg className="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
+                        <path fillRule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clipRule="evenodd" />
+                      </svg>
+                    </button>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </Transition>
+      </div>
+    </Transition>
+  );
+};