Add screenshots and fixed minor bugs

README.md

@@ -1,42 +1,48 @@
 # Code Share
-A social media that allows users to write and post snippets in different languages with a code editor, and interact with other users' posts and profiles. It uses Supabase as the database and includes 2 microservices. It was inspired by Twitter and GitHub, and made using NextJs.
+
+A social network that allows users to write and post snippets in different languages with a code editor, and interact
+with other users' posts and profiles. It uses Supabase as the database and includes 2 microservices. It was inspired by
+Twitter and GitHub, and made using NextJs.
 
 ## Features
+
 * Dark theme interface using NextJs and Tailwind.
-  * Mobile friendly
+    * Mobile friendly
 * Authentication
-  * Email and password registration, with password requirements
-  * Option to sign in with GitHub
-  * Managed by Supabase
+    * Email and password registration, with password requirements
+    * Option to sign in with GitHub
+    * Managed by Supabase
 * Posting snippet
-  * Fields fot title and description
-  * Auto-generated keywords
-  * Code editor based on Jetbrains IDEs
-    * Syntax highlighting of keywords and literals
-    * Inline and Multiline comments
-    * Auto indent
-    * Auto insert closing characters ("()", "{}", "[]")
-    * Supports Java, C#, Javascript, Typescript and Python
+    * Fields fot title and description
+    * Auto-generated keywords
+    * Code editor based on Jetbrains IDEs
+        * Syntax highlighting of keywords and literals
+        * Inline and Multiline comments
+        * Auto indent
+        * Auto insert closing characters ("()", "{}", "[]")
+        * Supports Java, C#, Javascript, Typescript and Python
 * Search bar
 * Profile customization
-  * Username, real name and bio
-  * Random robot profile image or uploaded from computer (with crop and resize)
+    * Username, real name and bio
+    * Random robot profile image or uploaded from computer (with crop and resize)
 * Likes and comments
 * Microservices
-  * Key Terms Extractor
-    * Made in Python with Flask
-    * Adapted version of my other project [Key-Terms-Extractor](https://github.com/cau777/Key-Terms-Extractor)
-    * Calculates Td-Idf based on more than 100MB of code descriptions
-  * Image Service
-    * Made in C# with ASP.NET Core
-    * Executes crop and resize on images and converts them to .jpg
+    * Key Terms Extractor
+        * Made in Python with Flask
+        * Adapted version of my other project [Key-Terms-Extractor](https://github.com/cau777/Key-Terms-Extractor)
+        * Calculates Td-Idf based on more than 100MB of code descriptions
+    * Image Service
+        * Made in C# with ASP.NET Core
+        * Executes crop and resize on images and converts them to .jpg
 * Installable PWA with caching
 * Automatic deployment to Azure Container Apps using GitHub Actions
 * Great score on Lighthouse
 * Available in English and Portuguese
-* Hosted on https://cau777.github.io/code-share/ or https://code-share-nextjs.livelybay-b5b6ca38.brazilsouth.azurecontainerapps.io/
+* Hosted on https://cau777.github.io/code-share/
+  or https://code-share-nextjs.livelybay-b5b6ca38.brazilsouth.azurecontainerapps.io/
 
 ## Screenshots
+
 1) ![Home Page](https://github.com/cau777/code-share/blob/master/screenshots/home.png)
 2) ![Post Snippet Page](https://github.com/cau777/code-share/blob/master/screenshots/post_snippet.png)
 3) ![Profile Page](https://github.com/cau777/code-share/blob/master/screenshots/profile.png)

client/components/AuthContext.tsx

@@ -37,8 +37,6 @@ const AuthProvider: FC<PropsWithChildren> = (props) => {
             }
             if (event === "SIGNED_IN") {
                 await login(state, session!.user!);
-                if (router.pathname.includes("login"))
-                    await router.push("/");
             }
         });
     });

client/components/code_snippet/CodeDisplay.tsx

@@ -11,12 +11,11 @@ type Props = {
     language: LanguageOptions;
 }
 
-
 const CodeDisplay: FC<Props> = (props) => {
     const options = props.language;
     const height = 23 * countOccurrences(props.text, "\n");
     const [visible, setVisible] = useState(false);
-    const [state, setState] = useState< [string, Uint8Array][]>([]);
+    const [state, setState] = useState<[string, Uint8Array][]>([]);
 
     const {ref} = useInView({
         threshold: 0.001,

client/components/code_snippet/CodeLineNumbers.tsx

@@ -26,8 +26,8 @@ const CodeLineNumbers: FC<Props> = (props) => {
                 <tbody>
                 {children}
                 <tr>
-                    {/* Offset some display errors */}
-                    {props.offsetBottom && <td height={4}/>}
+                    {/* Offset scroll */}
+                    {props.offsetBottom ? (<td height={16}/>) : (<></>)}
                 </tr>
                 </tbody>
             </table>

client/components/create_post/CreatePostForm.tsx

@@ -59,7 +59,7 @@ const CreatePostForm: FC = () => {
             <>
                 <FloatingLabelInput label={t("postTitle")} props={register("title", {required: true, maxLength: 120})}></FloatingLabelInput>
                 <FloatingLabelTextarea label={t("postDescription")}
-                                       props={register("description", {required: true, maxLength: 500})}></FloatingLabelTextarea>
+                                       props={register("description", {maxLength: 500})}></FloatingLabelTextarea>
 
                 <div className={"mb-2"}>
                     <SearchSelect onChange={(o: any) => setValue("lang", o.value)} placeholder={t("postLanguage")}

client/components/home/SnippetComments.tsx

@@ -109,7 +109,7 @@ const SnippetComments: FC<Props> = (props) => {
                 <form onSubmit={handleSubmit(submit)}>
                     <div className={"flex align-middle gap-3"}>
                         <div className={"w-12 my-auto"}>
-                            <ProfilePicture></ProfilePicture>
+                            <ProfilePicture id={context.id}></ProfilePicture>
                         </div>
 
                         <div className={"flex-grow"}>

client/components/home/SnippetPost.tsx

@@ -123,8 +123,8 @@ const SnippetPost: FC<Props> = (props) => {
                 <div
                     className={mergeClasses("mt-2 mb-2 flex rounded border-back-1 border-2 overflow-auto monospace overflow-auto", {"max-h-[40vh]": props.limitHeight})}>
                     <CodeEditorLineNumbers
-                        lineCount={countOccurrences(props.code, "\n") + 1}></CodeEditorLineNumbers>
-                    <CodeDisplay text={props.code}
+                        lineCount={countOccurrences(props.code, "\n") + 2}></CodeEditorLineNumbers>
+                    <CodeDisplay text={props.code + "\n"}
                                  language={findLanguageByName(props.lang) ?? OtherLanguage}></CodeDisplay>
                 </div>
 

client/components/login/LogInForm.tsx

@@ -11,6 +11,7 @@ import {useTranslation} from "next-i18next";
 import BlockError from "../basic/BlockError";
 import {ApiError} from "@supabase/gotrue-js";
 import ProviderButton from "../basic/ProviderButton";
+import {useRouter} from "next/router";
 
 type Form = {
     email: string;
@@ -26,6 +27,7 @@ const LogInForm: FC = () => {
     const [state, setState] = useState<State>({busy: false});
     const {register, handleSubmit, formState: {errors}} = useForm<Form>({});
     const {t} = useTranslation();
+    const router = useRouter();
 
     function translateError(error: ApiError | null) {
         if (error === null) return undefined;
@@ -44,11 +46,12 @@ const LogInForm: FC = () => {
 
         if (error) {
             setState({busy: false, error: translateError(error)});
+        } else {
+            await router.push("/");
         }
     }
 
 
-
     return (
         <Card>
             <div className={"mb-3"}>

client/components/signup/SignUpForm.tsx

@@ -11,6 +11,7 @@ import {useTranslation} from "next-i18next";
 import BlockError from "../basic/BlockError";
 import {ApiError} from "@supabase/gotrue-js";
 import ProviderButton from "../basic/ProviderButton";
+import {useRouter} from "next/router";
 
 type Form = {
     email: string;
@@ -27,10 +28,11 @@ const SignUpForm: FC = () => {
     const [state, setState] = useState<State>({busy: false});
     const {register, handleSubmit, formState: {errors}, getValues} = useForm<Form>({});
     const {t} = useTranslation();
+    const router = useRouter();
 
-    function translateError(error: ApiError|null) {
-        if(error === null) return undefined;
-
+    function translateError(error: ApiError | null) {
+        if (error === null) return undefined;
+        
         // console.log(error.status, error.message);
         switch (error.status) {
             case 400:
@@ -43,9 +45,11 @@ const SignUpForm: FC = () => {
     async function submit(data: Form) {
         setState({busy: true});
         const {error} = await supabase.auth.signUp({email: data.email, password: data.password});
-
+        
         if (error) {
             setState({busy: false, error: translateError(error)});
+        } else {
+            await router.push("/");
         }
     }
 
@@ -68,7 +72,8 @@ const SignUpForm: FC = () => {
             <form className={"w-[20rem]"} onSubmit={handleSubmit(submit)}>
                 <BlockError>{state.error}</BlockError>
 
-                <FloatingLabelInput label={t("email")} inputType={"text"} error={errors.email?.message} autoCapitalize={"off"}
+                <FloatingLabelInput label={t("email")} inputType={"text"} error={errors.email?.message}
+                                    autoCapitalize={"off"}
                                     props={register("email", {
                                         pattern: {value: /\w+@\w+\.\w+/, message: t("errorInvalidEmail")},
                                     })}></FloatingLabelInput>
@@ -89,7 +94,8 @@ const SignUpForm: FC = () => {
                     <ProviderButton provider={"github"}></ProviderButton>
                 </div>
             </form>
-            <p className={"mt-2 text-sm"}>{t("alreadyRegistered?")} <span className={"simple-link"}><Link href={"/login"}>{t("login")}</Link></span></p>
+            <p className={"mt-2 text-sm"}>{t("alreadyRegistered?")} <span className={"simple-link"}><Link
+                href={"/login"}>{t("login")}</Link></span></p>
         </Card>
     )
 }