#47 Smart Post Embeds (#49)

* feat: Support generic links, vehicle vins, and OBD codes
* Add Vehicle Link parsing
* Add profile link parsing
* feat: List link chips

.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+  "jest.jestCommandLine": "npm run test --"
+}

README.md

@@ -9,8 +9,9 @@ Top Features:
 - Individual post page with comments (Similar to Reddit)
 - Profile pages with comprehensive information on Activity, Vehicles, Lists, etc
 - Integrated Vehicle, List, & Person search functionality
+- Enhanced post parsing w/ support for OBD-ii Codes, `@mentions`, `#VIN`, and more
 
-> **Note**: This application uses the native rest.vinwiki.com API,
+> **Note**: This application uses the native vinwiki.com API,
 > but is not affiliated with VINwiki.com in any way.
 
 # Usage

src/Providers/AuthProvider.tsx

@@ -26,7 +26,7 @@ export enum ProviderStatus {
 
 const defaultState: ProviderState = { status: ProviderStatus.LOADING, authenticated: false };
 
-const Context = React.createContext<ProviderState | null>(null);
+export const Context = React.createContext<ProviderState | null>(null);
 
 export const useAuthProvider = (): ProviderState => {
   const contextState = React.useContext(Context);

src/components/CreatePost/index.tsx

@@ -16,8 +16,8 @@ import { DateTimePicker } from '@mui/x-date-pickers';
 import dayjs from "dayjs";
 import { useAuthProvider } from "../../Providers/AuthProvider";
 import { ENDPOINTS, MEDIA_ENDPOINTS, STATUS_OK } from "../../config/Endpoints";
-import { PostRouter } from "../FeedPost";
 import { ImageUpload } from "../ImageUpload";
+import FeedPost from "../FeedPost";
 import Loader from "../Loader";
 import PlateDecoder from "../PlateDecoder/Dialog";
 import ProfileAvatar from "../ProfileAvatar";
@@ -320,7 +320,7 @@ const CreatePost: FC = () => {
               <Step disabled={!stepStatuses[2]} last>
                 <StepButton onClick={() => setActiveStep(3)}>Preview & Submit</StepButton>
                 <StyledStepContent>
-                  <PostRouter {...generateDemoPost()} isPreview />
+                  <FeedPost {...generateDemoPost()} isPreview />
                   <Button disabled={Object.values(stepStatuses).some((s) => !s)} onClick={createPost}>Post</Button>
                 </StyledStepContent>
               </Step>

src/components/FeedPost/Components/PostComment.tsx

@@ -10,7 +10,7 @@ import { ENDPOINTS } from "../../../config/Endpoints";
 import { useAuthProvider } from "../../../Providers/AuthProvider";
 import { formatDateTime } from "../../../utils/date";
 import ProfileAvatar from "../../ProfileAvatar";
-import GenericText from "./GenericText";
+import GenericText from "../../GenericText/GenericText";
 
 type Props = {
   comment: PostComment;

src/components/FeedPost/Image.tsx

@@ -10,7 +10,7 @@ import { useCopyToClipboard } from "usehooks-ts";
 import useProgressiveQuality from "../../hooks/useProgressiveQuality";
 import PostComments from "./Components/PostComments";
 import ProfileBit from "./Components/PostProfile";
-import GenericText from "./Components/GenericText";
+import GenericText from "../GenericText/GenericText";
 import { formatDateTime } from "../../utils/date";
 import { useAuthProvider } from "../../Providers/AuthProvider";
 import { useFeedProvider } from "../../Providers/FeedProvider";

src/components/FeedPost/Text.tsx

@@ -8,7 +8,7 @@ import {
 import { useCopyToClipboard } from "usehooks-ts";
 import { useAuthProvider } from "../../Providers/AuthProvider";
 import { formatDateTime } from "../../utils/date";
-import GenericText from "./Components/GenericText";
+import GenericText from "../GenericText/GenericText";
 import PostComments from "./Components/PostComments";
 import ProfileBit from "./Components/PostProfile";
 import DeletePostDialog from "./Components/DeletePostDialog";

src/components/FeedPost/VerticalImage.tsx

@@ -5,7 +5,7 @@ import { useCopyToClipboard } from "usehooks-ts";
 import useProgressiveQuality from "../../hooks/useProgressiveQuality";
 import PostComments from "./Components/PostComments";
 import ProfileBit from "./Components/PostProfile";
-import GenericText from "./Components/GenericText";
+import GenericText from "../GenericText/GenericText";
 import { formatDateTime } from "../../utils/date";
 import { useAuthProvider } from "../../Providers/AuthProvider";
 import { useFeedProvider } from "../../Providers/FeedProvider";

src/components/FeedPost/index.tsx

@@ -1,9 +1,9 @@
-import React, { FC, Ref, forwardRef } from "react";
+import React, { Ref, forwardRef } from "react";
 import ImagePost from "./Image";
 import VerticalImagePost from "./VerticalImage";
 import TextPost from "./Text";
 
-export const PostRouter: FC<FeedPostProps> = forwardRef((props: FeedPostProps, ref: Ref<HTMLDivElement>) => {
+export default forwardRef((props: FeedPostProps, ref: Ref<HTMLDivElement>) => {
   switch (props.type) {
     case "photo":
       if (props.post_text?.length > 50) {