@@ -58,7 +65,7 @@ const styles = {
backgroundColor: 'rgb(17, 17, 17)',
} as CSSProperties,
center: {
- margin: 'auto'
+ margin: 'auto',
} as CSSProperties,
}
@@ -66,16 +73,23 @@ function HomePage() {
const { height, width } = useStoryDimensions(16 / 9)
const [filterShown, setFilterShown] = useState(false)
- const [filter, setFilter] = useState(defaultFilters)
- const announcementsFetch = useAnnouncements(filter)
+ const [filter, setFilter] = useFilters()
- const stories = fallbackGenerateStories(announcementsFetch)
+ const announcements = useAnnouncements(filter)
+
+ const stories = useMemo(() => fallbackGenerateStories(announcements), [announcements])
+
+ const index = useStoryIndex(announcements.data?.length)
return (<>
-
+
=> async (event) => {
- event.preventDefault();
- event.stopPropagation();
-
- const formData = new FormData(event.currentTarget)
-
- const data = {
- email: formData.get('email') as string,
- name: newAccount ? formData.get('name') as string : undefined,
- surname: newAccount ? formData.get('surname') as string : undefined,
- password: formData.get('password') as string
- }
-
- const token = import.meta.env.PROD ? await doAuth(data, newAccount) : 'a'
-
- if (token) {
- setToken(token)
- navigate(-1 - Number(import.meta.env.DEV))
- }
+ function goBack() {
+ navigate(-1 - Number(import.meta.env.DEV))
}
return (
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
)
}
diff --git a/front/src/pages/UserPage.tsx b/front/src/pages/UserPage.tsx
index 6c90c41..f02bcc1 100644
--- a/front/src/pages/UserPage.tsx
+++ b/front/src/pages/UserPage.tsx
@@ -1,9 +1,44 @@
-import { Link } from 'react-router-dom'
+import { Container } from 'react-bootstrap'
+
+import { useUser } from '../hooks/api'
+import { userCategories } from '../assets/userCategories'
+import { BackHeader, CategoryPreview, Poetry, Points, SignOut } from '../components'
+import { gotError, gotResponse } from '../hooks/useFetch'
function UserPage() {
- /* TODO */
+ const user = useUser()
- return For Yet Go Home
+ return (
+
+
+
+
+
+
+
+ {userCategories.map(cat => (
+
+ ))}
+
+
+
+ )
}
export default UserPage
diff --git a/front/src/styles/Rating.module.css b/front/src/styles/Rating.module.css
new file mode 100644
index 0000000..48a57c7
--- /dev/null
+++ b/front/src/styles/Rating.module.css
@@ -0,0 +1,19 @@
+.star {
+ -webkit-text-stroke: 2px var(--bs-body-color);
+ font-size: 1.5rem;
+ color: var(--bs-modal-bg);
+ background: none;
+ border: none;
+ padding: 0 3px;
+ transition: 0.15s ease-in-out;
+}
+
+.starFilled {
+ color: var(--bs-body-color);
+}
+
+.starSelected {
+ color: var(--bs-success);
+ -webkit-text-stroke: 2px var(--bs-success);
+ transform: scale(1.3);
+}
\ No newline at end of file
diff --git a/front/src/utils/auth.ts b/front/src/utils/auth.ts
index a380ee4..aca470a 100644
--- a/front/src/utils/auth.ts
+++ b/front/src/utils/auth.ts
@@ -1,13 +1,76 @@
-const getToken = () => {
- const token = localStorage.getItem('Token')
+import jwt_decode, { JwtPayload } from 'jwt-decode'
- /* check expirity */
+import { isInt, isObject } from './types'
- return token
+const TOKEN_KEY = 'Token'
+
+function getToken() {
+ const token = localStorage.getItem(TOKEN_KEY)
+
+ if (token === null) {
+ return null
+ }
+
+ const payload = jwt_decode(token)
+
+ // Checks only expiration, not validity
+ if (
+ payload.exp &&
+ (Date.now() >= payload.exp * 1000)
+ ) {
+ return null
+ }
+
+ return token
}
function setToken(token: string) {
- localStorage.setItem('Token', token)
+ localStorage.setItem(TOKEN_KEY, token)
}
-export { getToken, setToken }
+function clearToken() {
+ localStorage.removeItem(TOKEN_KEY)
+}
+
+type TokenPayload = {
+ user_id: number,
+}
+
+const isTokenPayload = (data: unknown): data is TokenPayload => isObject(data, {
+ 'user_id': 'number',
+})
+
+function getId() {
+ try {
+ const token = getToken()
+
+ if (token === null) {
+ return -1
+ }
+
+ const payload = jwt_decode(token)
+
+ if (!isTokenPayload(payload)) {
+ throw new Error('Malformed token payload')
+ }
+
+ const id = payload.user_id
+
+ if (!isInt(id) || id < 0) {
+ throw new Error(`Not valid id: ${id}`)
+ }
+
+ return id
+ }
+ catch (err) {
+ if (import.meta.env.DEV) {
+ console.error(err)
+ }
+
+ clearToken()
+
+ return -1
+ }
+}
+
+export { getToken, setToken, clearToken, getId }
diff --git a/front/src/utils/dispose.ts b/front/src/utils/dispose.ts
new file mode 100644
index 0000000..65a87ff
--- /dev/null
+++ b/front/src/utils/dispose.ts
@@ -0,0 +1,9 @@
+import { Announcement } from '../api/announcement/types'
+
+const DAY_MS = 24 * 60 * 60 * 1000
+
+const isAnnExpired = (ann: Announcement) => (
+ (ann.bestBy - Date.now()) < DAY_MS
+)
+
+export { isAnnExpired }
diff --git a/front/src/utils/filters.ts b/front/src/utils/filters.ts
index 30a821f..bbad2e7 100644
--- a/front/src/utils/filters.ts
+++ b/front/src/utils/filters.ts
@@ -1,19 +1,59 @@
import { Announcement } from '../api/announcement/types'
+import { isCategory } from '../assets/category'
+import { fallbackToUndefined, isBoolean, isInt } from './types'
-const filterNames = ['userId', 'category', 'metro', 'bookedBy'] as const
+const filterNames = ['userId', 'category', 'metro', 'expired'] as const
type FilterNames = typeof filterNames[number]
-type FiltersType = Partial>
+type FiltersType = Partial<
+ Pick &
+ {
+ expired: boolean,
+ }
+>
-const defaultFilters: FiltersType = { userId: undefined, category: undefined, metro: undefined, bookedBy: undefined }
+const defaultFilters: FiltersType = { userId: undefined, category: undefined, metro: undefined, expired: false }
const URLEncodeFilters = (filters: FiltersType) => (
Object.fromEntries(
filterNames.map(
- fName => [fName, filters[fName]?.toString()]
+ fName => {
+ const v = filters[fName]
+ if (v || v === false) {
+ return [fName, v.toString()]
+ }
+ return [fName, undefined]
+ }
).filter((p): p is [string, string] => typeof p[1] !== 'undefined')
)
)
+const URLDecoreFilters = (params: URLSearchParams): FiltersType => {
+ const strFilters = Object.fromEntries(
+ filterNames.map(
+ fName => [fName, params.get(fName)]
+ ).filter((p): p is [FilterNames, string] => p[1] !== null)
+ ) as Record
+
+ return {
+ userId: fallbackToUndefined(Number.parseInt(strFilters['userId']), isInt),
+ category: fallbackToUndefined(strFilters['category'], isCategory),
+ metro: strFilters['metro'],
+ expired: fallbackToUndefined(strFilters['expired'] === 'true', isBoolean),
+ }
+}
+
+const excludeFilters = (obj: T) => (
+ filterNames.reduce((cObj, fName) => {
+ delete cObj[fName]
+ return cObj
+ }, obj)
+)
+
+const convertFilterNames = (input: Record) => ({
+ ...input,
+ ...(input['userId'] === undefined ? {} : { 'user_id': input['userId'] }),
+})
+
export type { FilterNames, FiltersType }
-export { defaultFilters, filterNames, URLEncodeFilters }
+export { defaultFilters, filterNames, URLEncodeFilters, URLDecoreFilters, excludeFilters, convertFilterNames }
diff --git a/front/src/utils/types.ts b/front/src/utils/types.ts
index 4ac3255..7d4ed30 100644
--- a/front/src/utils/types.ts
+++ b/front/src/utils/types.ts
@@ -60,8 +60,28 @@ const isString = (obj: unknown): obj is string => (
typeof obj === 'string'
)
+const isInt = (obj: unknown): obj is number => (
+ Number.isSafeInteger(obj)
+)
+
+const isBoolean = (obj: unknown): obj is boolean => (
+ typeof obj === 'boolean'
+)
+
+function fallbackToUndefined(obj: unknown, isT: ((obj: unknown) => obj is T)) {
+ if (!isT(obj)) return undefined
+
+ return obj
+}
+
+function fallbackTo(obj: unknown, isT: ((obj: unknown) => obj is T), to: T) {
+ if (!isT(obj)) return to
+
+ return obj
+}
+
type SetState = React.Dispatch>
export type { SetState }
-export { isRecord, isObject, isConst, isLiteralUnion, isArrayOf, isString }
+export { isRecord, isObject, isConst, isLiteralUnion, isArrayOf, isString, isInt, isBoolean, fallbackToUndefined, fallbackTo }
+