Added auto-refresh for greeting and date. Fixed multiple React warnings

client/src/components/Bookmarks/BookmarkCard/BookmarkCard.tsx

@@ -14,12 +14,13 @@ const BookmarkCard = (props: ComponentProps): JSX.Element => {
       <h3>{props.category.name}</h3>
       <div className={classes.Bookmarks}>
         {props.category.bookmarks.map((bookmark: Bookmark) => {
-          const [displayUrl, redirectUrl] = urlParser(bookmark.url);
+          const redirectUrl = urlParser(bookmark.url)[1];
 
           return (
             <a
               href={redirectUrl}
               target='_blank'
+              rel='noreferrer'
               key={`bookmark-${bookmark.id}`}>
               {bookmark.icon && (
                 <div className={classes.BookmarkIcon}>

client/src/components/Bookmarks/BookmarkForm/BookmarkForm.tsx

@@ -184,7 +184,15 @@ const BookmarkForm = (props: ComponentProps): JSX.Element => {
                 value={formData.url}
                 onChange={(e) => inputChangeHandler(e)}
               />
-              <span>Only urls without http[s]:// are supported</span>
+              <span>
+                <a
+                  href='https://github.com/pawelmalak/flame#supported-URL-formats-for-applications-and-bookmarks'
+                  target='_blank'
+                  rel='noreferrer'
+                  >
+                  {' '}Check supported URL formats
+                </a>
+              </span>
             </InputGroup>
             <InputGroup>
               <label htmlFor='categoryId'>Bookmark Category</label>

client/src/components/Bookmarks/BookmarkGrid/BookmarkGrid.tsx

@@ -2,7 +2,7 @@ import { Link } from 'react-router-dom';
 
 import classes from './BookmarkGrid.module.css';
 
-import { Bookmark, Category } from '../../../interfaces';
+import { Category } from '../../../interfaces';
 
 import BookmarkCard from '../BookmarkCard/BookmarkCard';
 

client/src/components/Bookmarks/Bookmarks.tsx

@@ -28,6 +28,12 @@ export enum ContentType {
 }
 
 const Bookmarks = (props: ComponentProps): JSX.Element => {
+  const {
+    getCategories,
+    categories,
+    loading
+  } = props;
+
   const [modalIsOpen, setModalIsOpen] = useState(false);
   const [formContentType, setFormContentType] = useState(ContentType.category);
   const [isInEdit, setIsInEdit] = useState(false);
@@ -52,10 +58,10 @@ const Bookmarks = (props: ComponentProps): JSX.Element => {
   })
 
   useEffect(() => {
-    if (props.categories.length === 0) {
-      props.getCategories();
+    if (categories.length === 0) {
+      getCategories();
     }
-  }, [props.getCategories])
+  }, [getCategories, categories])
 
   const toggleModal = (): void => {
     setModalIsOpen(!modalIsOpen);
@@ -132,13 +138,13 @@ const Bookmarks = (props: ComponentProps): JSX.Element => {
         />
       </div>
 
-      {props.loading
+      {loading
         ? <Spinner />
         : (!isInEdit
-          ? <BookmarkGrid categories={props.categories} />
+          ? <BookmarkGrid categories={categories} />
           : <BookmarkTable
               contentType={tableContentType}
-              categories={props.categories}
+              categories={categories}
               updateHandler={goToUpdateMode}
             />
           )