-
+
diff --git a/src/components/auth.tsx b/src/components/auth.tsx
index 3e17f8c..c601236 100644
--- a/src/components/auth.tsx
+++ b/src/components/auth.tsx
@@ -1,14 +1,5 @@
-import {
- Component,
- createContext,
- createSignal,
- For,
- JSX,
- Setter,
- Show,
- Signal,
- useContext,
-} from 'solid-js';
+/* eslint-disable jsdoc/check-param-names */
+import { Component, createSignal, For, Setter, Show, Signal } from 'solid-js';
import { OcArrowleft2 } from 'solid-icons/oc';
import { Status, Statuses, BasicStatus } from '../common';
import { A } from '@solidjs/router';
@@ -19,7 +10,7 @@ export namespace FormInput {
export type AuthSubmit = (Inputs: InputMap) => Promise;
/**
- * Used by {@link AuthOnClick}
+ * Used by {@link authOnClick}
*/
export interface AuthOnClickInputs {
page: FormInput.AuthProps;
@@ -96,23 +87,12 @@ export namespace FormInput {
*/
const InputMap: FormInput.InputMap = new Map();
-/**
- * Happens the input has a keyup event, then updates the signal and adds from {@link InputMap}
- * @param key The name of {@link InputUI Input}
- * @param Signal Contains getter (0) and setter (1)
- * @returns An event connecter
- */
-function onInput(
- key: string,
- Signal: Signal,
-): JSX.EventHandlerUnion {
- return (event) => {
- const Target: HTMLInputElement = event.target as HTMLInputElement;
-
- Signal[1](Target.value);
- InputMap.set(key, Signal[0]());
- };
-}
+const onInput = (key: string, signal: Signal, event: KeyboardEvent) => {
+ const Target: HTMLInputElement = event.target as HTMLInputElement;
+
+ signal[1](Target.value);
+ InputMap.set(key, signal[0]());
+};
/**
* The InputComponent included in {@link Auth}
@@ -124,7 +104,7 @@ const InputUI: Component = (props) => {
return (
onInput(props.key, [input, setInput], event)}
class='rounded border-2 border-outline bg-background p-2 text-text placeholder:text-subtitle focus:outline-accent'
placeholder={
props.limit ? `${props.key} (${props.limit} limit)` : props.key
@@ -136,79 +116,31 @@ const InputUI: Component = (props) => {
);
};
+// eslint-disable-next-line jsdoc/require-param
/**
* When the submit button is clicked
- * @param setStatus Sets the page's status
+ * @param 0 Sets the page's status
+ * @param 1 The auth page
* @param event The event occured on Mouse Click
*/
-const AuthOnClick = async (setStatus: Setter, event: MouseEvent) => {
+const authOnClick = async (
+ [setStatus, page]: [Setter, FormInput.AuthProps],
+ event: MouseEvent,
+) => {
event.preventDefault();
- const page = usePage();
-
const result = await page.submit(InputMap),
resultStatus = new Status(result.msg, result.ok);
setStatus(resultStatus);
- console.log(result);
+ console.log('Auth: Result is', result);
if (result.ok) {
location.href = '/';
}
};
-const AuthBottom: Component<{ setStatus: Setter }> = (props) => {
- const page = usePage();
-
- return (
-
-
-
-
-
- );
-};
-
-const AuthTitle: Component = () => {
- const page = usePage();
- return (
- ({
- title: '',
- subtitle: '',
- confirmText: '',
- Inputs: [],
- submit: (() => {}) as any,
-});
-
-/**
- * Get the page context
- */
-function usePage(): FormInput.AuthProps {
- const page = useContext(PageContext);
- if (!page) {
- throw new Error('Cannot get page');
- }
- return page;
-}
-
/**
* The Auth Page (could be Login / Signin)
* @param props The page's propetries
@@ -216,16 +148,21 @@ function usePage(): FormInput.AuthProps {
const Auth: Component<{ page: FormInput.AuthProps }> = (props) => {
const [status, setStatus] = createSignal(Statuses.DefaultStatus);
+ const page = () => props.page;
+
const statusColour = () => (status().ok ? 'text-accent' : 'text-warning');
return (
-
+ <>
CoffeeCo - {props.page.title}
-
+
);
};
diff --git a/src/components/comment.tsx b/src/components/comment.tsx
index 820fdc2..88913ea 100644
--- a/src/components/comment.tsx
+++ b/src/components/comment.tsx
@@ -1,13 +1,13 @@
import { Component, createResource, Show } from 'solid-js';
import { DefaultUser, getUserFromID } from '../requests/user';
-import { PostProps } from './Post';
+import { PostProps } from './post';
const Comment: Component = (props) => {
- const pst = props.post;
+ const pst = () => props.post;
const [user] = createResource(async () => {
try {
- const user = await getUserFromID(pst.postedBy);
+ const user = await getUserFromID(pst().postedBy);
return user;
} catch {
@@ -15,7 +15,7 @@ const Comment: Component = (props) => {
}
});
- const date = new Date(pst.timeCreated).toDateString();
+ const date = () => new Date(pst().timeCreated).toDateString();
return (
@@ -31,9 +31,9 @@ const Comment: Component = (props) => {
-
-
- );
-};
-
-const PageContext = createContext- {page.title} -
- {page.subtitle} -@{user()!.handle}
- {date} + {date()}{pst.content}
+{pst().content}
+
+
+
+ );
+};
+
/**
* Appears when there is {@link PostList} has no posts
*/
const ListFallback: Component = () => {
return (
+
+
+
+
-
);
};
@@ -44,6 +58,8 @@ export interface PostListState {
* @param props The amount of the PostList
*/
const PostList: Component404
-- Not Found -
+
diff --git a/src/components/rich-text.tsx b/src/components/rich-text.tsx
index ed30506..546ddb9 100644
--- a/src/components/rich-text.tsx
+++ b/src/components/rich-text.tsx
@@ -89,7 +89,8 @@ const RichText: Component = (props) => {
loadEncodings(he.encode(props.children), getEncodings()),
);
- return ;
+ // eslint-disable-next-line solid/no-innerhtml
+ return ;
};
export default RichText;
diff --git a/src/components/sides-compontents/island.tsx b/src/components/sides-compontents/island.tsx
index 163333d..7bb7543 100644
--- a/src/components/sides-compontents/island.tsx
+++ b/src/components/sides-compontents/island.tsx
@@ -8,11 +8,11 @@ export interface IslandLinkProps extends ChildrenProps {
}
export const IslandLink: Component = (props) => {
- const background: string = props.selected ? 'bg-slate-950/35' : '';
+ const background = () => (props.selected ? 'bg-slate-950/35' : '');
return (
-
+
{props.children}
diff --git a/src/components/sides-compontents/popular.tsx b/src/components/sides-compontents/popular.tsx
index 8b01784..179839d 100644
--- a/src/components/sides-compontents/popular.tsx
+++ b/src/components/sides-compontents/popular.tsx
@@ -1,4 +1,4 @@
-import { Component } from 'solid-js';
+import { Component, createEffect } from 'solid-js';
import { OcHash2 } from 'solid-icons/oc';
import Island, { IslandLink } from './island';
@@ -7,9 +7,11 @@ interface HashtagProps {
}
const Hashtag: Component = (props) => {
+ const text = () => props.text;
+
const href = new URL(location.href);
- href.searchParams.set('h', encodeURIComponent(props.text));
+ createEffect(() => href.searchParams.set('h', encodeURIComponent(text())));
return (
diff --git a/src/components/sides-compontents/side-links.tsx b/src/components/sides-compontents/side-links.tsx
index e7e069f..ec13ea3 100644
--- a/src/components/sides-compontents/side-links.tsx
+++ b/src/components/sides-compontents/side-links.tsx
@@ -1,6 +1,6 @@
import { Component, createMemo, For } from 'solid-js';
import { A } from '@solidjs/router';
-import getLeftLink from '../../sideurls';
+import getLeftLink from '../../side-urls';
import { ChildrenProps } from '../../common';
import Island from './island';
@@ -15,7 +15,7 @@ const LeftLink: Component = (props) => {
return (
{props.children}
diff --git a/src/contexts/usercontext.tsx b/src/contexts/user-context.tsx
similarity index 64%
rename from src/contexts/usercontext.tsx
rename to src/contexts/user-context.tsx
index 0182409..d6a1109 100644
--- a/src/contexts/usercontext.tsx
+++ b/src/contexts/user-context.tsx
@@ -20,18 +20,20 @@ async function GetUser(): Promise {
// refresh page
Cookies.remove('AuthToken');
- console.error('Invalid Auth Token; Refreshing.');
+ console.warn('GetUser: Invalid `AuthToken`, refreshing');
location.reload();
return undefined as never;
}
+ console.log('GetUser: Gotten user successfully', User);
+
return User;
} catch {
- /* empty */
- }
+ console.warn('GetUser: Could not get user');
- return undefined;
+ return undefined;
+ }
}
/**
@@ -46,15 +48,22 @@ const UserResource = Solid.createResource(GetUser);
export const UserProvider: Solid.Component = (props) => {
const [user] = UserResource;
- const Auth = UserReq.getAuth(),
- isInDevelopment = import.meta.env.DEV;
+ const isInDevelopment = import.meta.env.DEV;
+
+ Solid.createEffect(() => {
+ console.log('Is in Development:', isInDevelopment);
+ });
- return !Auth || isInDevelopment ? (
- {props.children}
- ) : (
-
- {props.children}
-
+ return (
+ <>
+ {isInDevelopment ? (
+ {props.children}
+ ) : (
+
+ {props.children}
+
+ )}
+
);
};
diff --git a/src/index.css b/src/index.css
index dd7c2fa..750f958 100644
--- a/src/index.css
+++ b/src/index.css
@@ -9,7 +9,7 @@
}
.head-btn {
- @apply p-2 rounded text-lg outline outline-1 text-title outline-outline h-8 gap-2 full-center;
+ @apply p-2 rounded outline outline-1 text-title outline-outline h-8 gap-2 full-center;
}
.btn {
diff --git a/src/index.tsx b/src/index.tsx
index 8d530bc..d25b46d 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -5,7 +5,7 @@ import { render } from 'solid-js/web';
import { Router, Route } from '@solidjs/router';
import { Link, MetaProvider } from '@solidjs/meta';
-import { UserProvider } from './contexts/usercontext';
+import { UserProvider } from './contexts/user-context';
import 'solid-devtools';
import './index.css';
@@ -49,21 +49,20 @@ function getRoot(): HTMLElement {
*/
const RouteElement = () => {
return (
-
+
-
-
-
+
+
-
-
-
-
+
+
+
+
-
+
-
+
);
};
diff --git a/src/logo.png b/src/logo.png
deleted file mode 100644
index c850aaf..0000000
Binary files a/src/logo.png and /dev/null differ
diff --git a/src/logo.svg b/src/logo.svg
deleted file mode 100644
index 8f5906c..0000000
--- a/src/logo.svg
+++ /dev/null
@@ -1,150 +0,0 @@
-
-
diff --git a/src/requests/images.ts b/src/requests/images.ts
index 0b1d7d4..65d7ddf 100644
--- a/src/requests/images.ts
+++ b/src/requests/images.ts
@@ -52,6 +52,8 @@ export function deformatImages(images: string): ImageObj[] {
index++;
}
+ console.log(`DeformatImages: ${images}:`, total);
+
return total;
}
@@ -71,7 +73,10 @@ export function reformatImages(images: ImageObj[]): string {
index++;
}
- return total.join(',');
+ const join = total.join(',');
+
+ console.log('ReformatImages:', total, `: ${join}`);
+ return join;
}
/**
diff --git a/src/requests/post.ts b/src/requests/post.ts
index 442f60b..0899443 100644
--- a/src/requests/post.ts
+++ b/src/requests/post.ts
@@ -10,6 +10,13 @@ export interface Post {
content: string;
timeCreated: string;
parentID: number;
+
+ likes: number;
+ whoLiked: string;
+
+ dislikes: number;
+ whoDisliked: string;
+
images: string;
}
@@ -29,6 +36,10 @@ export interface PostListReq {
export const DefaultPost: Post = {
ID: 0,
postedBy: 0,
+ whoDisliked: '',
+ dislikes: 0,
+ likes: 0,
+ whoLiked: '',
content: 'THIS TEST CODE DO NOT USE FOR PRODUCTION',
timeCreated: 'Invalid Date',
parentID: -1,
diff --git a/src/routes/add-post.tsx b/src/routes/add-post.tsx
index ceed596..897bd64 100644
--- a/src/routes/add-post.tsx
+++ b/src/routes/add-post.tsx
@@ -2,8 +2,8 @@ import { NoEnter, Status, Statuses } from '../common';
import { Accessor, Component, For, Show } from 'solid-js';
import { addPost as addPost, AddPostRequest } from '../requests/post';
-import { PostSkeleton } from '../components/Post';
-import { useUser } from '../contexts/usercontext';
+import { PostSkeleton } from '../components/post';
+import { useUser } from '../contexts/user-context';
import { OcImage2, OcPaperairplane2, OcX2 } from 'solid-icons/oc';
import { uploadImage, reformatImages, ImageObj } from '../requests/images';
import Header from '../components/header';
@@ -11,12 +11,13 @@ import Sides from '../components/sides';
import { useInput } from '../hooks';
import { Meta, Title } from '@solidjs/meta';
import { createStore, SetStoreFunction } from 'solid-js/store';
+import { User } from '../requests/user';
/**
* Propetries for {@link AddImageButton}
*/
interface AddImageProps {
- OnFileAdd: (Params: FileAddParams, event: Event) => Promise | void;
+ onFileAdd: (Params: FileAddParams, event: Event) => Promise | void;
Params: FileAddParams;
}
@@ -47,7 +48,7 @@ const AddImageButton: Component = (props) => {
type='file'
id='image-picker'
class='absolute -z-10 opacity-0'
- onInput={[props.OnFileAdd, props.Params as any]}
+ onInput={(event) => props.onFileAdd(props.Params, event)}
accept='image/png, image/jpeg, image/gif'
multiple
/>
@@ -55,44 +56,26 @@ const AddImageButton: Component = (props) => {
);
};
-/**
- * Inputs need to {@link OnSubmit submit} a post.
- */
-interface SubmitInputs {
- /*The content of the post*/
- input: Accessor;
- /**
- * Gets the status and images
- */
- state: PromptState;
- /**
- * Sets the status and images
- */
- setState: SetStoreFunction;
-}
-
-/**
- * Submits a new post to the Database (Can fail)
- * @param inputs content, images and setting status
- * @param event The mouse event
- */
-const OnSubmit = async (inputs: SubmitInputs, event: MouseEvent) => {
+const onSubmit = async (
+ input: Accessor,
+ state: PromptState,
+ setState: SetStoreFunction,
+ user: User,
+ event: MouseEvent,
+) => {
event.preventDefault();
try {
- const userID = useUser()?.ID;
- if (!userID) throw new Error('UserID doesn not exist');
-
const Req: AddPostRequest = {
- content: inputs.input(),
- images: reformatImages(inputs.state.Images),
- postedBy: userID,
+ content: input(),
+ images: reformatImages(state.Images),
+ postedBy: user.ID,
parentID: -1, // Sole Post
};
const Res = await addPost(Req);
- inputs.setState('status', {
+ setState('status', {
show: true,
ok: Res.ok,
msg: Res.ok ? 'Success' : 'Something Went Wrong',
@@ -102,7 +85,7 @@ const OnSubmit = async (inputs: SubmitInputs, event: MouseEvent) => {
} catch (err) {
console.error(err);
- inputs.setState('status', {
+ setState('status', {
show: true,
ok: false,
msg: (err as Error).message,
@@ -187,7 +170,7 @@ module ImagePreview {
* Closes a {@link ImagePreview}
* @param Params the {@link ImagePreview.Props Propetries} of {@link ImagePreview}
*/
- export const Close = (Params: Props) => {
+ export const close = (Params: Props) => {
Params.setState('Images', (prev) => {
const clone = [...prev];
clone.splice(Params.index, 1);
@@ -200,19 +183,19 @@ module ImagePreview {
* @param props {@link ImagePreview.Props Propetries}
*/
export const Preview: Component = (props) => {
- const image = props.state.Images[props.index];
+ const image = () => props.state.Images[props.index];
return (
{
const [Connecter, getInput] = useInput();
- const User = useUser();
- if (!User) throw new Error('UserID doesn not exist');
+ const user = useUser();
+ if (!user) throw new Error('UserID doesn not exist');
const [state, setState] = createStore({
Images: [],
@@ -246,7 +229,7 @@ const Prompt: Component = () => {
const colorStatus = () => (state.status.ok ? 'text-accent' : 'text-warning');
return (
-
+
@@ -262,8 +245,8 @@ const Prompt: Component = () => {
cols={50}
rows={6}
maxLength={240}
- oninput={Connecter}
- onkeydown={NoEnter}
+ onInput={Connecter}
+ onKeyDown={NoEnter}
/>
- 0}>
{getInput().length}/240 @@ -271,7 +254,7 @@ const Prompt: Component = () => {
-
@@ -293,10 +276,7 @@ const Prompt: Component = () => {