From d110d9b73268bec3ce659ca238c7a905059e2783 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Pawe=C5=82=20Malak?= Date: Mon, 22 Nov 2021 12:29:47 +0100 Subject: [PATCH] Empty sections will be hidden from guests. Fixed temperature value rounding. Added welcome message --- CHANGELOG.md | 6 ++- .../Apps/AppGrid/AppGrid.module.css | 18 ------- .../src/components/Apps/AppGrid/AppGrid.tsx | 49 +++++++++---------- .../BookmarkGrid/BookmarkGrid.module.css | 9 ---- .../Bookmarks/BookmarkGrid/BookmarkGrid.tsx | 15 +++--- client/src/components/Home/Home.tsx | 23 +++++++-- .../Settings/AppDetails/AuthForm/AuthForm.tsx | 9 +++- .../UI/Text/Message/Message.module.css | 8 +++ .../components/UI/Text/Message/Message.tsx | 11 +++++ client/src/components/UI/index.ts | 1 + .../Widgets/WeatherWidget/WeatherWidget.tsx | 2 +- 11 files changed, 80 insertions(+), 71 deletions(-) create mode 100644 client/src/components/UI/Text/Message/Message.module.css create mode 100644 client/src/components/UI/Text/Message/Message.tsx diff --git a/CHANGELOG.md b/CHANGELOG.md index 834a186..27a7641 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,7 +1,9 @@ ### v2.0.2 (TBA) - Added support for .ico files for custom icons ([#209](https://github.com/pawelmalak/flame/issues/209)) -- Added option to pin apps and categories directly from table view - +- Empty apps and categories sections will now be hidden from guests ([#210](https://github.com/pawelmalak/flame/issues/210)) +- Fixed bug with fahrenheit degrees being displayed as float ([#221](https://github.com/pawelmalak/flame/issues/221)) +- Added option to change visibilty of apps and categories directly from table view +- Password input will now autofocus when visiting /settings/app ### v2.0.1 (2021-11-19) - Added option to display humidity in the weather widget ([#136](https://github.com/pawelmalak/flame/issues/136)) diff --git a/client/src/components/Apps/AppGrid/AppGrid.module.css b/client/src/components/Apps/AppGrid/AppGrid.module.css index 7874918..daff441 100644 --- a/client/src/components/Apps/AppGrid/AppGrid.module.css +++ b/client/src/components/Apps/AppGrid/AppGrid.module.css @@ -20,21 +20,3 @@ grid-template-columns: repeat(4, 1fr); } } - -.GridMessage { - color: var(--color-primary); -} - -.GridMessage a { - color: var(--color-accent); - font-weight: 600; -} - -.AppsMessage { - color: var(--color-primary); -} - -.AppsMessage a { - color: var(--color-accent); - font-weight: 600; -} \ No newline at end of file diff --git a/client/src/components/Apps/AppGrid/AppGrid.tsx b/client/src/components/Apps/AppGrid/AppGrid.tsx index 6b02443..b4cfb4e 100644 --- a/client/src/components/Apps/AppGrid/AppGrid.tsx +++ b/client/src/components/Apps/AppGrid/AppGrid.tsx @@ -3,6 +3,7 @@ import { Link } from 'react-router-dom'; import { App } from '../../../interfaces/App'; import { AppCard } from '../AppCard/AppCard'; +import { Message } from '../../UI'; interface Props { apps: App[]; @@ -13,36 +14,32 @@ interface Props { export const AppGrid = (props: Props): JSX.Element => { let apps: JSX.Element; - if (props.apps.length > 0) { - apps = ( -
- {props.apps.map((app: App): JSX.Element => { - return ; - })} -
- ); - } else { - if (props.totalApps) { - if (props.searching) { - apps = ( -

- No apps match your search criteria -

- ); - } else { - apps = ( -

- There are no pinned applications. You can pin them from the{' '} - /applications menu -

- ); - } + if (props.searching || props.apps.length) { + if (!props.apps.length) { + apps = No apps match your search criteria; } else { apps = ( -

+

+ {props.apps.map((app: App): JSX.Element => { + return ; + })} +
+ ); + } + } else { + if (props.totalApps) { + apps = ( + + There are no pinned applications. You can pin them from the{' '} + /applications menu + + ); + } else { + apps = ( + You don't have any applications. You can add a new one from{' '} /applications menu -

+ ); } } diff --git a/client/src/components/Bookmarks/BookmarkGrid/BookmarkGrid.module.css b/client/src/components/Bookmarks/BookmarkGrid/BookmarkGrid.module.css index 8c0d1ab..9e89f3a 100644 --- a/client/src/components/Bookmarks/BookmarkGrid/BookmarkGrid.module.css +++ b/client/src/components/Bookmarks/BookmarkGrid/BookmarkGrid.module.css @@ -20,12 +20,3 @@ grid-template-columns: repeat(4, 1fr); } } - -.BookmarksMessage { - color: var(--color-primary); -} - -.BookmarksMessage a { - color: var(--color-accent); - font-weight: 600; -} \ No newline at end of file diff --git a/client/src/components/Bookmarks/BookmarkGrid/BookmarkGrid.tsx b/client/src/components/Bookmarks/BookmarkGrid/BookmarkGrid.tsx index 516c3b2..01a5ed1 100644 --- a/client/src/components/Bookmarks/BookmarkGrid/BookmarkGrid.tsx +++ b/client/src/components/Bookmarks/BookmarkGrid/BookmarkGrid.tsx @@ -5,6 +5,7 @@ import classes from './BookmarkGrid.module.css'; import { Category } from '../../../interfaces'; import { BookmarkCard } from '../BookmarkCard/BookmarkCard'; +import { Message } from '../../UI'; interface Props { categories: Category[]; @@ -17,11 +18,7 @@ export const BookmarkGrid = (props: Props): JSX.Element => { if (props.categories.length) { if (props.searching && !props.categories[0].bookmarks.length) { - bookmarks = ( -

- No bookmarks match your search criteria -

- ); + bookmarks = No bookmarks match your search criteria; } else { bookmarks = (
@@ -36,17 +33,17 @@ export const BookmarkGrid = (props: Props): JSX.Element => { } else { if (props.totalCategories) { bookmarks = ( -

+ There are no pinned categories. You can pin them from the{' '} /bookmarks menu -

+ ); } else { bookmarks = ( -

+ You don't have any bookmarks. You can add a new one from{' '} /bookmarks menu -

+ ); } } diff --git a/client/src/components/Home/Home.tsx b/client/src/components/Home/Home.tsx index d7f3872..d369aaa 100644 --- a/client/src/components/Home/Home.tsx +++ b/client/src/components/Home/Home.tsx @@ -11,7 +11,7 @@ import { actionCreators } from '../../store'; import { App, Category } from '../../interfaces'; // UI -import { Icon, Container, SectionHeadline, Spinner } from '../UI'; +import { Icon, Container, SectionHeadline, Spinner, Message } from '../UI'; // CSS import classes from './Home.module.css'; @@ -30,6 +30,7 @@ export const Home = (): JSX.Element => { apps: { apps, loading: appsLoading }, bookmarks: { categories, loading: bookmarksLoading }, config: { config }, + auth: { isAuthenticated }, } = useSelector((state: State) => state); const dispatch = useDispatch(); @@ -100,7 +101,18 @@ export const Home = (): JSX.Element => {
- {!config.hideApps ? ( + {!isAuthenticated && + !apps.some((a) => a.isPinned) && + !categories.some((c) => c.isPinned) ? ( + + Welcome to Flame! Go to /settings, + login and start customizing your new homepage + + ) : ( + <> + )} + + {!config.hideApps && (isAuthenticated || apps.some((a) => a.isPinned)) ? ( {appsLoading ? ( @@ -119,10 +131,11 @@ export const Home = (): JSX.Element => {
) : ( -
+ <> )} - {!config.hideCategories ? ( + {!config.hideCategories && + (isAuthenticated || categories.some((c) => c.isPinned)) ? ( {bookmarksLoading ? ( @@ -142,7 +155,7 @@ export const Home = (): JSX.Element => { )} ) : ( -
+ <> )} diff --git a/client/src/components/Settings/AppDetails/AuthForm/AuthForm.tsx b/client/src/components/Settings/AppDetails/AuthForm/AuthForm.tsx index 2742d76..d0f6466 100644 --- a/client/src/components/Settings/AppDetails/AuthForm/AuthForm.tsx +++ b/client/src/components/Settings/AppDetails/AuthForm/AuthForm.tsx @@ -1,4 +1,4 @@ -import { FormEvent, Fragment, useEffect, useState } from 'react'; +import { FormEvent, Fragment, useEffect, useState, useRef } from 'react'; // Redux import { useSelector, useDispatch } from 'react-redux'; @@ -23,6 +23,12 @@ export const AuthForm = (): JSX.Element => { duration: '14d', }); + const passwordInputRef = useRef(null); + + useEffect(() => { + passwordInputRef.current?.focus(); + }, []); + useEffect(() => { if (token) { const decoded = decodeToken(token); @@ -52,6 +58,7 @@ export const AuthForm = (): JSX.Element => { name="password" placeholder="••••••" autoComplete="current-password" + ref={passwordInputRef} value={formData.password} onChange={(e) => setFormData({ ...formData, password: e.target.value }) diff --git a/client/src/components/UI/Text/Message/Message.module.css b/client/src/components/UI/Text/Message/Message.module.css new file mode 100644 index 0000000..e459212 --- /dev/null +++ b/client/src/components/UI/Text/Message/Message.module.css @@ -0,0 +1,8 @@ +.message { + color: var(--color-primary); +} + +.message a { + color: var(--color-accent); + font-weight: 600; +} diff --git a/client/src/components/UI/Text/Message/Message.tsx b/client/src/components/UI/Text/Message/Message.tsx new file mode 100644 index 0000000..2409f1c --- /dev/null +++ b/client/src/components/UI/Text/Message/Message.tsx @@ -0,0 +1,11 @@ +import { ReactNode } from 'react'; + +import classes from './Message.module.css'; + +interface Props { + children: ReactNode; +} + +export const Message = ({ children }: Props): JSX.Element => { + return

{children}

; +}; diff --git a/client/src/components/UI/index.ts b/client/src/components/UI/index.ts index e1c0917..23d5f73 100644 --- a/client/src/components/UI/index.ts +++ b/client/src/components/UI/index.ts @@ -12,3 +12,4 @@ export * from './Forms/InputGroup/InputGroup'; export * from './Forms/ModalForm/ModalForm'; export * from './Buttons/ActionButton/ActionButton'; export * from './Buttons/Button/Button'; +export * from './Text/Message/Message'; diff --git a/client/src/components/Widgets/WeatherWidget/WeatherWidget.tsx b/client/src/components/Widgets/WeatherWidget/WeatherWidget.tsx index 1664eff..d300328 100644 --- a/client/src/components/Widgets/WeatherWidget/WeatherWidget.tsx +++ b/client/src/components/Widgets/WeatherWidget/WeatherWidget.tsx @@ -71,7 +71,7 @@ export const WeatherWidget = (): JSX.Element => { {config.isCelsius ? ( {weather.tempC}°C ) : ( - {weather.tempF}°F + {Math.round(weather.tempF)}°F )} {/* ADDITIONAL DATA */}