release 0.0.6 (#20)

* feat: mobile front
SchneiderNicolas · Oct 3, 2023 · 8814944 · 8814944
1 parent 736e396
commit 8814944
Show file tree

Hide file tree

Showing 8 changed files with 79 additions and 20 deletions.
diff --git a/front/src/App.tsx b/front/src/App.tsx
@@ -9,8 +9,12 @@ import Settings from './pages/Settings';
 import AcceptInvitationPage from './pages/AcceptInvitationPage';
 import NotFound from './pages/NotFound';
 import { DiscussionProvider } from './contexts/DiscussionContext';
+import { useResponsive } from './hooks/useResponsive';
+import Discussion from './components/discussion/Discussion';
+import NewDiscussion from './components/discussion/new/NewDiscussion';
 
 const App = () => {
+  const { isMobile } = useResponsive();
   return (
     <BrowserRouter>
       <DiscussionProvider>
@@ -23,8 +27,14 @@ const App = () => {
               <Route path="/register" element={<AcceptInvitationPage />} />
               <Route path="/" element={<ProtectedRoute />}>
                 <Route index element={<Home />} />
-                <Route path="/discussion/:discussionId" element={<Home />} />
-                <Route path="/new" element={<Home />} />
+                <Route
+                  path="/discussion/:discussionId"
+                  element={isMobile ? <Discussion /> : <Home />}
+                />
+                <Route
+                  path="/new"
+                  element={isMobile ? <NewDiscussion /> : <Home />}
+                />
 
                 <Route path="settings" element={<Settings />} />
               </Route>

diff --git a/front/src/components/Sidebar.tsx b/front/src/components/Sidebar.tsx
@@ -93,7 +93,7 @@ const Sidebar = (props: SidebarType) => {
 
       <aside
         id="default-sidebar"
-        className={`fixed top-0 left-0 z-40 h-screen transition-transform md:translate-x-0 ${
+        className={`fixed top-0 left-0 z-50 h-screen transition-transform md:translate-x-0 ${
           !isOpen ? '-translate-x-full' : ''
         } ${isMobile ? 'w-60' : 'border-r border-gray-200'}`}
         aria-label="Sidebar"

diff --git a/front/src/components/discussion/DiscussionTopBar.tsx b/front/src/components/discussion/DiscussionTopBar.tsx
@@ -1,4 +1,7 @@
 import React from 'react';
+import { FiArrowLeft } from 'react-icons/fi';
+import { useNavigate } from 'react-router-dom';
+import { useDiscussionContext } from '../../contexts/DiscussionContext';
 import { useResponsive } from '../../hooks/useResponsive';
 import { User } from '../../types/discussionTypes';
 import Tooltip from '../Tooltip';
@@ -9,18 +12,38 @@ type DiscussionTopBarProps = {
 };
 
 const DiscussionTopBar = ({ title, users }: DiscussionTopBarProps) => {
-  const isMobile = useResponsive();
+  const navigate = useNavigate();
+  const { isMobile } = useResponsive();
+  const { resetViewState } = useDiscussionContext();
+
+  const handleBackClick = () => {
+    resetViewState();
+    navigate('/');
+  };
+
   return (
-    <div
-      className={`z-40 sticky top-0 bg-white border-b border-gray-200 ${
-        !isMobile ? ' border-l border-gray-200 ml-96 border-r' : ''
-      }`}
-    >
+    <div className={'z-40 sticky top-0 bg-white border-b border-gray-200'}>
+      {isMobile && (
+        <button
+          onClick={handleBackClick}
+          className="absolute top-0 left-0 cursor-pointer flex items-center p-2 text-base font-semibold text-violet-500 rounded-br-md hover:bg-violet-100"
+          aria-label="Go back"
+        >
+          <FiArrowLeft size={24} color={'#8b5cf6'} />
+        </button>
+      )}
       <div className="flex flex-col items-center px-4 py-2">
-        <div className="text-lg font-bold text-center mb-1">{title}</div>
+        <div className="text-lg font-bold text-center mb-4 md:mb-2">
+          {title}
+        </div>
         <div className="flex flex-wrap space-x-2 self-start">
           {users.map((user) => (
-            <Tooltip key={user.id} tooltipText={user.email} position="top">
+            <Tooltip
+              isMobile={isMobile}
+              key={user.id}
+              tooltipText={user.email}
+              position="top"
+            >
               <div className="px-3 py-1 rounded-md bg-violet-400 text-white font-medium text-sm mb-1 cursor-pointer">
                 {user.name || user.email}
               </div>

diff --git a/front/src/components/discussion/new/NewDiscussion.tsx b/front/src/components/discussion/new/NewDiscussion.tsx
@@ -4,6 +4,7 @@ import { User } from '../../../types/discussionTypes';
 import { useCookies } from 'react-cookie';
 import NewDiscussionTopBar from './NewDiscussionTopBar';
 import { useDiscussionContext } from '../../../contexts/DiscussionContext';
+import { useNavigate } from 'react-router-dom';
 
 const NewDiscussion = () => {
   const [messageInput, setMessageInput] = useState('');
@@ -14,6 +15,7 @@ const NewDiscussion = () => {
   const [cookies] = useCookies(['accessToken']);
   const [selectedUsers, setSelectedUsers] = useState<User[]>([]);
   const { showDiscussion, toggleForceUpdate } = useDiscussionContext();
+  const navigate = useNavigate();
 
   const handleTitleChange = (newTitle: string) => {
     setTitle(newTitle);
@@ -51,6 +53,7 @@ const NewDiscussion = () => {
       .then((data) => {
         showDiscussion(data.id);
         toggleForceUpdate();
+        navigate(`/discussion/${data.id}`);
       })
       .catch((error) => console.error('Error:', error));
   };

diff --git a/front/src/components/discussion/new/NewDiscussionTopBar.tsx b/front/src/components/discussion/new/NewDiscussionTopBar.tsx
@@ -4,7 +4,9 @@ import { User } from '../../../types/discussionTypes';
 import UserSearch from './UserSearch';
 import SelectedUser from './SelectedUser';
 import Tooltip from '../../Tooltip';
-import { FiEdit2 } from 'react-icons/fi';
+import { FiArrowLeft, FiEdit2 } from 'react-icons/fi';
+import { useNavigate } from 'react-router-dom';
+import { useDiscussionContext } from '../../../contexts/DiscussionContext';
 
 type NewDiscussionTopBarProps = {
   title: string;
@@ -22,25 +24,38 @@ const NewDiscussionTopBar = ({
   onUserRemove,
 }: NewDiscussionTopBarProps) => {
   const [isEditingTitle, setIsEditingTitle] = useState(false);
-  const isMobile = useResponsive();
+  const { isMobile } = useResponsive();
   const inputRef = useRef<HTMLInputElement>(null);
+  const navigate = useNavigate();
+  const { resetViewState } = useDiscussionContext();
 
   const handleTitleKeyPress = (e: React.KeyboardEvent<HTMLInputElement>) => {
     if (e.key === 'Enter') {
       setIsEditingTitle(false);
     }
   };
 
+  const handleBackClick = () => {
+    resetViewState();
+    navigate('/');
+  };
+
   return (
-    <div
-      className={`z-40 sticky top-0 bg-white border-b border-gray-200 ${
-        !isMobile ? ' border-l border-gray-200 ml-96 border-r' : ''
-      }`}
-    >
+    <div className={'z-40 sticky top-0 bg-white border-b border-gray-200'}>
+      {isMobile && (
+        <button
+          onClick={handleBackClick} // use handleBackClick function
+          className="absolute top-0 left-0 cursor-pointer flex items-center p-2 text-base font-semibold text-violet-500 rounded-br-md hover:bg-violet-100"
+          aria-label="Go back"
+        >
+          <FiArrowLeft size={24} color={'#8b5cf6'} />{' '}
+        </button>
+      )}
       <div className="flex flex-col items-center px-4 py-2">
         <div className="text-lg font-bold text-center mb-1 flex items-center">
           {isEditingTitle ? (
             <input
+              autoComplete="off"
               ref={inputRef}
               value={title}
               onChange={(e) => onTitleChange(e.target.value)}
@@ -53,7 +68,7 @@ const NewDiscussionTopBar = ({
             <>
               {title}
               <Tooltip
-                isMobile={isMobile.isMobile}
+                isMobile={isMobile}
                 tooltipText="Edit Title"
                 position="right+"
               >

diff --git a/front/src/components/discussion/new/UserSearch.tsx b/front/src/components/discussion/new/UserSearch.tsx
@@ -49,6 +49,7 @@ const UserSearch = ({ onSelect, selectedUsers }: UserSearchProps) => {
         To:
       </label>
       <input
+        autoComplete="off"
         ref={inputRef}
         id="userSearch"
         type="text"
@@ -60,7 +61,7 @@ const UserSearch = ({ onSelect, selectedUsers }: UserSearchProps) => {
         autoFocus
       />
       {filteredUsers && filteredUsers.length > 0 && (
-        <div className="absolute top-full mt-2 w-96 bg-white border border-gray-300 p-2 rounded-xl shadow-md z-50 overflow-hidden">
+        <div className="absolute top-full mt-2 w-80 sm:w-96 bg-white border border-gray-300 p-2 rounded-xl shadow-md z-50 overflow-hidden">
           {filteredUsers.map((user) => (
             <div
               key={user.email}

diff --git a/front/src/contexts/DiscussionContext.tsx b/front/src/contexts/DiscussionContext.tsx
@@ -18,6 +18,7 @@ interface IDiscussionContext {
   showNewDiscussion: () => void;
   forceUpdate: boolean;
   toggleForceUpdate: () => void;
+  resetViewState: () => void;
 }
 
 const DiscussionContext = createContext<IDiscussionContext | undefined>(
@@ -74,6 +75,10 @@ export const DiscussionProvider = ({ children }: DiscussionProviderProps) => {
     setViewState({ type: 'NEW_DISCUSSION', discussionId: null });
   }, []);
 
+  const resetViewState = useCallback(() => {
+    setViewState({ type: 'NEW_DISCUSSION', discussionId: null });
+  }, []);
+
   return (
     <DiscussionContext.Provider
       value={{
@@ -82,6 +87,7 @@ export const DiscussionProvider = ({ children }: DiscussionProviderProps) => {
         showNewDiscussion,
         forceUpdate,
         toggleForceUpdate,
+        resetViewState,
       }}
     >
       {children}

diff --git a/front/src/index.css b/front/src/index.css
@@ -9,6 +9,7 @@ body {
     sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
+  overflow-x: hidden;
 }
 
 code {