Merge pull request #412 from xmtp-labs/dj/custom-content-type

Fixed effect type

package.json

@@ -39,7 +39,7 @@
     "@xmtp/content-type-reaction": "^1.1.3",
     "@xmtp/content-type-remote-attachment": "^1.1.4",
     "@xmtp/content-type-reply": "^1.1.5",
-    "@xmtp/experimental-content-type-screen-effect": "^1.0.0",
+    "@xmtp/experimental-content-type-screen-effect": "^1.0.1",
     "@xmtp/react-sdk": "^3.0.0",
     "@xmtp/xmtp-js": "^11.2.1",
     "buffer": "^6.0.3",

src/component-library/components/EffectDialog/EffectDialog.tsx

@@ -1,13 +1,9 @@
-// To-do: pull from package once exported
-enum EffectType {
-  SNOW = "SNOW",
-  RAIN = "RAIN",
-}
+import type { EffectType } from "@xmtp/experimental-content-type-screen-effect";
 
 export const EffectDialog = ({
   handleSendEffect,
 }: {
-  handleSendEffect: (effect: string) => void;
+  handleSendEffect: (effect: EffectType) => void;
 }) => (
   <dialog
     open
@@ -24,10 +20,10 @@ export const EffectDialog = ({
     }}>
     <div className="w-full flex flex-col justify-around items-center text-md">
       <b>Send with effect:</b>
-      <button type="button" onClick={() => handleSendEffect(EffectType.SNOW)}>
+      <button type="button" onClick={() => handleSendEffect("SNOW")}>
         **Let it Snow**
       </button>
-      <button type="button" onClick={() => handleSendEffect(EffectType.RAIN)}>
+      <button type="button" onClick={() => handleSendEffect("RAIN")}>
         Make it Rain XMTP!
       </button>
     </div>

src/component-library/components/ScreenEffects/RainEffect.tsx

@@ -1,12 +1,6 @@
 import { useEffect, useState } from "react";
 import "./RainEffect.css";
 
-// To-do: pull from package once exported
-enum EffectType {
-  SNOW = "SNOW",
-  RAIN = "RAIN",
-}
-
 interface logoStyles {
   left: string;
   opacity: number;
@@ -36,7 +30,7 @@ const RainEffect = ({ attachedMessageId }: { attachedMessageId: string }) => {
     const timeout = setTimeout(() => {
       setIsVisible(false);
       document.body.style.pointerEvents = "auto";
-      localStorage.setItem(attachedMessageId, EffectType.RAIN);
+      localStorage.setItem(attachedMessageId, "RAIN");
     }, 3000);
 
     // Clear the timeout if the component unmounts

src/component-library/components/ScreenEffects/SnowEffect.tsx

@@ -1,12 +1,6 @@
 import { useState, useEffect } from "react";
 import "./SnowEffect.css";
 
-// To-do: pull from package once exported
-enum EffectType {
-  SNOW = "SNOW",
-  RAIN = "RAIN",
-}
-
 interface snowflakeStyles {
   left: string;
   opacity: number;
@@ -35,7 +29,7 @@ const SnowEffect = ({ attachedMessageId }: { attachedMessageId: string }) => {
     const timeout = setTimeout(() => {
       setIsVisible(false);
       document.body.style.pointerEvents = "auto";
-      localStorage.setItem(attachedMessageId, EffectType.SNOW);
+      localStorage.setItem(attachedMessageId, "SNOW");
     }, 3000);
 
     // // Clear the timeout if the component unmounts

src/controllers/FullConversationController.tsx

@@ -17,12 +17,6 @@ import { updateConversationIdentity } from "../helpers/conversation";
 import SnowEffect from "../component-library/components/ScreenEffects/SnowEffect";
 import RainEffect from "../component-library/components/ScreenEffects/RainEffect";
 
-// To-do: pull from package once exported
-enum EffectType {
-  SNOW = "SNOW",
-  RAIN = "RAIN",
-}
-
 type FullConversationControllerProps = {
   conversation: CachedConversation;
 };
@@ -51,13 +45,13 @@ export const FullConversationController: React.FC<
         // if the message content type is not support and has no fallback,
         // disregard it
 
-        if (msg.content?.effectType === EffectType.SNOW) {
+        if (msg.content?.effectType === "SNOW") {
           if (!localStorage.getItem(msg.content?.messageId)) {
             setEffect("snow");
             setAttachedMessageId(msg.content.messageId);
           }
         }
-        if (msg.content?.effectType === EffectType.RAIN) {
+        if (msg.content?.effectType === "RAIN") {
           if (!localStorage.getItem(msg.content?.messageId)) {
             setEffect("rain");
             setAttachedMessageId(msg.content.messageId);