Skip to content

Commit

Permalink
chore: add components to modularize code
Browse files Browse the repository at this point in the history 
added components to the new added effects.
  • Loading branch information
@aamir-067
aamir-067 committed Oct 13, 2024
1 parent 1a8a35a commit 3fe241f
Show file tree
Hide file tree
Showing 12 changed files with 79 additions and 139 deletions.
22 changes: 11 additions & 11 deletions ads/adIds.ts
View file
Original file line number Diff line number Diff line change
@@ -1,17 +1,17 @@
import { TestIds } from "react-native-google-mobile-ads";

// export const AdIds = {
// appOpen: TestIds.APP_OPEN,
// adaptiveBanner: TestIds.ADAPTIVE_BANNER,
// Interstitial: TestIds.INTERSTITIAL,
// rewarded: TestIds.REWARDED,
// rewardedInterstitial: TestIds.REWARDED_INTERSTITIAL,
// };

export const AdIds = {
appOpen: TestIds.APP_OPEN,
adaptiveBanner: "ca-app-pub-3417831874175604/7074955178",
Interstitial: "ca-app-pub-3417831874175604/6639064228",
rewarded: "ca-app-pub-3417831874175604/9119216895",
adaptiveBanner: TestIds.ADAPTIVE_BANNER,
Interstitial: TestIds.INTERSTITIAL,
rewarded: TestIds.REWARDED,
rewardedInterstitial: TestIds.REWARDED_INTERSTITIAL,
};

// export const AdIds = {
// appOpen: TestIds.APP_OPEN,
// adaptiveBanner: "ca-app-pub-3417831874175604/7074955178",
// Interstitial: "ca-app-pub-3417831874175604/6639064228",
// rewarded: "ca-app-pub-3417831874175604/9119216895",
// rewardedInterstitial: TestIds.REWARDED_INTERSTITIAL,
// };
5 changes: 1 addition & 4 deletions app/(screens)/effects/backgroundRemove.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -128,14 +128,11 @@
//? ================== Temporary =================

import { Text, View, ScrollView } from 'react-native'
import React, { useContext } from 'react'
import React from 'react'
import { Link } from 'expo-router'
import BannerAdComponent from '@/ads/banner';
import { BannerAdSize } from 'react-native-google-mobile-ads';
import ComingSoon from '@/components/comingSoon';
import { GlobalContext } from '@/context/contextProvider';
const backgroundRemove = () => {
const { allowAds } = useContext(GlobalContext)
return (
<View className='bg-background h-full px-[10px]'>
<ScrollView>
Expand Down
1 change: 1 addition & 0 deletions app/(screens)/effects/backgroundReplace.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -101,6 +101,7 @@ const backgroundReplace = () => {

<EffectImagePreview
getPicture={getPicture}
originalButtonText='Replace'
effectTitle={"Background Replace"}
image={img}
setButtonText={setButtonText}
Expand Down
55 changes: 9 additions & 46 deletions app/(screens)/effects/generativeFill.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,7 @@ import PromptComponent from '@/components/common/promptComponent';
import { generativeFill } from '@/utils/effects/generativeFill';
import { rewarded } from '@/ads/reward';
import EffectImagePreview from '@/components/common/effectImagePreview';
import ActionButtons from '@/components/common/actionButtons';

export const dots = {
north_west: 0,
Expand Down Expand Up @@ -78,7 +79,7 @@ const GenerativeFill = () => {
}


setLoadingMessage("Initializing generative recolor...");
setLoadingMessage("Initializing generative Fill...");


await validateAppVersion();
Expand Down Expand Up @@ -161,6 +162,7 @@ const GenerativeFill = () => {
getPicture={getPicture}
effectTitle={"Generative Fill"}
image={img}
originalButtonText='Fill'
setButtonText={setButtonText}
loadingMessage={loadingMessage}
setLoadingMessage={setLoadingMessage}
Expand All @@ -170,41 +172,6 @@ const GenerativeFill = () => {
/>


<Text style={{ fontFamily: "Outfit-Medium" }} className='text-text text-3xl my-7'>Generative Fill</Text>

{

<TouchableOpacity onPress={getPicture} activeOpacity={0.5} className='bg-[#1D1B20] h-[280px] relative items-center rounded-[10px] justify-center'>

<Image
onLoadStart={() => setLoadingMessage("Generative fill in progress...")}
onLoad={() => setLoadingMessage("")}
onError={() => {
setLoadingMessage("")
Alert.alert("Error", "something went wrong while loading images. try again later");
setTransformedImageUrl(undefined)
}}
resizeMode={"contain"}
className={`w-full absolute top-0 left-0 h-full ${loadingMessage ? "opacity-0" : "opacity-100"}`}
source={transformedImageUrl
? { uri: transformedImageUrl }
: img?.uri
? { uri: img.uri }
: require("@/assets/images/transparent.png")}
/>

<View className={`items-center absolute top-1/3 left-1/3 z-0 gap-y-2 ${(img || transformedImageUrl) ? "hidden" : ""}`}>
<Svg width="32" height="41" viewBox="0 0 32 41" fill="">
<Path d="M20 0.5H4C1.8 0.5 0 2.3 0 4.5V36.5C0 38.7 1.8 40.5 4 40.5H28C30.2 40.5 32 38.7 32 36.5V12.5L20 0.5ZM6 32.5L11 25.834L14 29.834L19 23.168L26 32.5H6ZM18 14.5V3.5L29 14.5H18Z" fill="#e5e7eb" />
</Svg>
<Text style={{ fontFamily: "Outfit-Medium" }} className='text-gray-200 text-xl'>Select Image</Text>
</View>


<LoadingWithMessage message={loadingMessage} />
</TouchableOpacity>
}




Expand Down Expand Up @@ -249,16 +216,12 @@ const GenerativeFill = () => {
</View> : null}

{/* buttons */}
<View className='flex-row justify-between pb-96 items-center mt-4'>
<Link href={".."} asChild>
<TouchableOpacity activeOpacity={0.5} className='border-2 border-buttonBackground h-[50px] rounded-md justify-center items-center max-w-40 w-[48%]'>
<Text style={{ fontFamily: "Poppins-SemiBold" }} className='text-text text-sm'>Cancel</Text>
</TouchableOpacity>
</Link>
<TouchableOpacity onPress={handleTransformation} activeOpacity={0.5} className='bg-buttonBackground h-[50px] rounded-md justify-center items-center max-w-40 w-[48%]'>
<Text style={{ fontFamily: "Poppins-SemiBold" }} className='text-text text-sm'>{(transformedImageUrl && !loadingMessage) ? "Save" : "Recolor"}</Text>
</TouchableOpacity>
</View>
<ActionButtons
mainButtonAction={handleTransformation}
mainButtonText={buttonText}
loading={loadingMessage.length > 1}
style='pb-40'
/>



Expand Down
112 changes: 42 additions & 70 deletions app/(screens)/effects/generativeRecolor.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,10 @@ import Checkbox from "expo-checkbox";
import { validateAppVersion } from '@/utils/validateAppVersion';
import ColorPickerModel from '@/components/colorPickerModel';
import { rewarded } from '@/ads/reward';
import EffectImagePreview from '@/components/common/effectImagePreview';
import PromptComponent from '@/components/common/promptComponent';
import CustomCheckBox from '@/components/common/customCheckBox';
import ActionButtons from '@/components/common/actionButtons';


const GenerativeRecolor = () => {
Expand All @@ -25,7 +29,7 @@ const GenerativeRecolor = () => {
const [transformedImageUrl, setTransformedImageUrl] = useState<string | undefined>(undefined)
const [loadingMessage, setLoadingMessage] = useState("");
const { allowAds } = useContext(GlobalContext);

const [buttonText, setButtonText] = useState("Recolor");
const getPicture = async () => {
const asset = await getAssetFromGallery({ fileType: "image" });
setImg(asset)
Expand Down Expand Up @@ -70,7 +74,7 @@ const GenerativeRecolor = () => {
return;
}

if (items.length === 0) {
if (items.length === 0 && prompt.trim().length === 0) {
Alert.alert("Prompt Missing", "Select at least one item to recolor");
return;
}
Expand All @@ -80,7 +84,13 @@ const GenerativeRecolor = () => {
await validateAppVersion();
// remove the hast from the start.
const color = colorPicked.slice(1);
const promptToSend = items.length === 1 ? items.join("") : `(${items.join(";")})`;
let promptToSend;

if (items.length == 0) {
promptToSend = `(${prompt})`;
} else {
promptToSend = items.length === 1 ? items.join("") : `(${items.join(";")})`;
}


if (allowAds && rewarded.loaded) {
Expand Down Expand Up @@ -116,53 +126,27 @@ const GenerativeRecolor = () => {
return (
<View className='bg-background h-full px-[10px]'>
<ScrollView>
<Text style={{ fontFamily: "Outfit-Medium" }} className='text-text text-3xl my-7'>Generative Recolor</Text>

{

<TouchableOpacity onPress={getPicture} activeOpacity={0.5} className='bg-[#1D1B20] h-[280px] relative items-center rounded-[10px] justify-center'>

<Image
onLoadStart={() => setLoadingMessage("Generative recolor in progress...")}
onLoad={() => setLoadingMessage("")}
onError={() => {
setLoadingMessage("")
Alert.alert("Error", "something went wrong while loading images. try again later");
setTransformedImageUrl(undefined)
}}
resizeMode={"contain"}
className={`w-full absolute top-0 left-0 h-full ${loadingMessage ? "opacity-0" : "opacity-100"}`}
source={transformedImageUrl
? { uri: transformedImageUrl }
: img?.uri
? { uri: img.uri }
: require("@/assets/images/transparent.png")}
/>

<View className={`items-center absolute top-1/3 left-1/3 z-0 gap-y-2 ${(img || transformedImageUrl) ? "hidden" : ""}`}>
<Svg width="32" height="41" viewBox="0 0 32 41" fill="">
<Path d="M20 0.5H4C1.8 0.5 0 2.3 0 4.5V36.5C0 38.7 1.8 40.5 4 40.5H28C30.2 40.5 32 38.7 32 36.5V12.5L20 0.5ZM6 32.5L11 25.834L14 29.834L19 23.168L26 32.5H6ZM18 14.5V3.5L29 14.5H18Z" fill="#e5e7eb" />
</Svg>
<Text style={{ fontFamily: "Outfit-Medium" }} className='text-gray-200 text-xl'>Select Image</Text>
</View>


<LoadingWithMessage message={loadingMessage} />
</TouchableOpacity>
}
<EffectImagePreview
getPicture={getPicture}
effectTitle={"Generative Recolor"}
image={img}
originalButtonText='Recolor'
setButtonText={setButtonText}
loadingMessage={loadingMessage}
setLoadingMessage={setLoadingMessage}
transformedImageUrl={transformedImageUrl}
setTransformedImageUrl={setTransformedImageUrl}

/>

{/* prompt Area */}
<TextInput
value={prompt}
onChangeText={(e) => {
<PromptComponent
promptValue={prompt}
style='mt-8 h-12 px-2 bg-backgroundContainer text-gray-200 focus:border-2 rounded-md focus:border-outline'
onPromptChange={(e: string) => {
handleItems(e)
setTransformedImageUrl("");
}}
numberOfLines={3}
placeholder={items.length === 0 ? 'Items to recolor separate my comma. (3 max)' : items.length >= 3 ? "Max items selected" : "New items"}
className='mt-8 h-12 px-2 bg-backgroundContainer text-gray-200 focus:border-2 rounded-md focus:border-outline'
placeholderTextColor={"#65558F"}
/>

{/* items to recolor */}
Expand All @@ -186,24 +170,17 @@ const GenerativeRecolor = () => {


<View className='flex-row justify-between items-center mt-4 gap-x-3'>
<TouchableOpacity
onPress={() => {
setMultiple(prev => !prev);
setTransformedImageUrl("");
}}
activeOpacity={1}
className='flex-row py-1.5 items-center'
>
<Checkbox
value={multiple}
onValueChange={() => {
setMultiple(prev => !prev);
setTransformedImageUrl("");
<View>
<CustomCheckBox
checked={multiple}
style='pl-3'
onChecked={() => {
setMultiple(prev => !prev)
transformedImageUrl && setTransformedImageUrl("");
}}
color={multiple ? "#326AFD" : "white"}
label={"Recolor Multiple"}
/>
<Text className='text-text ml-2'>Recolor multiple</Text>
</TouchableOpacity>
</View>


<View className='w-1/2 h-full flex-row justify-end gap-x-3 items-center'>
Expand All @@ -213,16 +190,11 @@ const GenerativeRecolor = () => {
</View>

{/* buttons */}
<View className='flex-row justify-between items-center mt-4'>
<Link href={".."} asChild>
<TouchableOpacity activeOpacity={0.5} className='border-2 border-buttonBackground h-[50px] rounded-md justify-center items-center max-w-40 w-[48%]'>
<Text style={{ fontFamily: "Poppins-SemiBold" }} className='text-text text-sm'>Cancel</Text>
</TouchableOpacity>
</Link>
<TouchableOpacity onPress={handleTransformation} activeOpacity={0.5} className='bg-buttonBackground h-[50px] rounded-md justify-center items-center max-w-40 w-[48%]'>
<Text style={{ fontFamily: "Poppins-SemiBold" }} className='text-text text-sm'>{(transformedImageUrl && !loadingMessage) ? "Save" : "Recolor"}</Text>
</TouchableOpacity>
</View>
<ActionButtons
mainButtonAction={handleTransformation}
mainButtonText={buttonText}
loading={loadingMessage ? true : false}
/>

</ScrollView>

Expand Down
5 changes: 3 additions & 2 deletions app/(screens)/effects/generativeReplace.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -96,6 +96,7 @@ const GenerativeReplace = () => {
<ScrollView>
<EffectImagePreview
getPicture={getPicture}
originalButtonText='Replace'
effectTitle={"Generative Replace"}
image={img}
setButtonText={setButtonText}
Expand All @@ -110,7 +111,7 @@ const GenerativeReplace = () => {
<View className='flex-row justify-between items-center'>

<PromptComponent
onPromptChange={(e) => {
onPromptChange={(e: string) => {
setFrom(e);
transformedImageUrl && setTransformedImageUrl("");
}}
Expand All @@ -119,7 +120,7 @@ const GenerativeReplace = () => {
style='w-[48%]'
/>
<PromptComponent
onPromptChange={(e) => {
onPromptChange={(e: string) => {
setTo(e);
transformedImageUrl && setTransformedImageUrl("");
}}
Expand Down
1 change: 1 addition & 0 deletions app/(screens)/effects/imageRestore.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -93,6 +93,7 @@ const ImageRestore = () => {

<EffectImagePreview
getPicture={getPicture}
originalButtonText='Restore'
effectTitle={"Image Restore"}
image={img}
setButtonText={setButtonText}
Expand Down
1 change: 1 addition & 0 deletions app/(screens)/effects/imageUpscale.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -88,6 +88,7 @@ const ImageUpscale = () => {
getPicture={getPicture}
effectTitle={"Image Upscale"}
image={img}
originalButtonText='Upscale'
setButtonText={setButtonText}
loadingMessage={loadingMessage}
setLoadingMessage={setLoadingMessage}
Expand Down
1 change: 1 addition & 0 deletions app/(screens)/effects/improveColors.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -150,6 +150,7 @@ const ImproveColors = () => {
getPicture={getPicture}
effectTitle={"Improve Colors"}
image={img}
originalButtonText={"Improve"}
setButtonText={setButtonText}
loadingMessage={loadingMessage}
setLoadingMessage={setLoadingMessage}
Expand Down
3 changes: 2 additions & 1 deletion app/(screens)/effects/magicEraser.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -104,6 +104,7 @@ const MagicEraser = () => {
getPicture={getPicture}
effectTitle={"Generative Remove"}
image={img}
originalButtonText='Remove'
setButtonText={setButtonText}
loadingMessage={loadingMessage}
setLoadingMessage={setLoadingMessage}
Expand All @@ -115,7 +116,7 @@ const MagicEraser = () => {
{/* prompt Area */}
<PromptComponent
promptValue={prompt}
onPromptChange={(e) => {
onPromptChange={(e: string) => {
setPrompt(e)
transformedImageUrl && setTransformedImageUrl("");
}}
Expand Down
5 changes: 3 additions & 2 deletions components/common/customCheckBox.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,13 +6,14 @@ interface Props {
onChecked: () => void
checked: boolean
label: string
style?: string
}
const CustomCheckBox = ({ onChecked, checked, label }: Props) => {
const CustomCheckBox = ({ onChecked, checked, label, style }: Props) => {
return (
<TouchableOpacity
onPress={onChecked}
activeOpacity={1}
className='flex-row py-1.5 items-center'
className={'flex-row py-1.5 items-center' + style}
>
<Checkbox
value={checked}
Expand Down
Loading

0 comments on commit 3fe241f

Please sign in to comment.