Skip to content

remove Blocks / Mod Tools tabs everywhere #83

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
vdikransamarjian wants to merge 1 commit into
base: main
Choose a base branch
from
Open

remove Blocks / Mod Tools tabs everywhere #83

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
408 changes: 11 additions & 397 deletions docs/capabilities/client/forms.mdx
View file
Open in desktop

Large diffs are not rendered by default.

94 changes: 1 addition & 93 deletions docs/capabilities/client/menu-actions.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,10 +11,7 @@ Add an item to the three dot menu for posts, comments, or subreddits. Menu actio

**For most menu actions, use direct client effects.** These provide immediate responses and are perfect for simple actions that don't require server processing.

<Tabs>
<TabItem value="web" label="Devvit Web">

**Menu items defined in devvit.json:**
**Menu items defined in devvit.json:**

```json title="devvit.json"
{
Expand Down Expand Up @@ -74,53 +71,6 @@ app.post<string, never, UiResponse, MenuItemRequest>(
</TabItem>
</Tabs>

</TabItem>
<TabItem value="blocks" label="Devvit Blocks / Mod Tools">

```tsx
import { Devvit } from '@devvit/public-api';

// Simple menu action with direct client effects
Devvit.addMenuItem({
label: 'Show user info',
location: 'post', // 'post', 'comment', 'subreddit', or array
onPress: async (event, context) => {
// Direct client effect - no server processing needed
context.ui.showToast('Menu action clicked!');
},
});

// Menu action with form
const surveyForm = Devvit.createForm(
{
fields: [
{
type: 'string',
name: 'feedback',
label: 'Your feedback',
},
],
},
(event, context) => {
// onSubmit handler
context.ui.showToast({ text: `Thanks for the feedback: ${event.values.feedback}` });
}
);

Devvit.addMenuItem({
label: 'Quick survey',
location: 'subreddit',
forUserType: 'moderator', // Optional: restrict to moderators
onPress: async (event, context) => {
context.ui.showForm(surveyForm);
},
});

````

</TabItem>
</Tabs>

## Supported contexts

You can decide where the menu action shows up by specifying the location property.
Expand All @@ -139,9 +89,6 @@ For moderator permission security, when opening a form from a menu action with `

In Devvit Web, your menu item should respond with a client side effect to give feedback to users. This is available as a UIResponse as you do not have access to the `@devvit/web/client` library from your server endpoints.

<Tabs>
<TabItem value="web" label="Devvit Web">

**Menu items with server processing:**

```json title="devvit.json"
Expand Down Expand Up @@ -242,45 +189,6 @@ app.post<string, never, UiResponse, MenuItemRequest>(

</TabItem>
</Tabs>
</TabItem>
<TabItem value="blocks" label="Devvit Blocks / Mod Tools">

For Devvit Blocks, use the direct context approach even for complex workflows:

```tsx
Devvit.addMenuItem({
label: "Process and validate data",
location: "post", // 'post', 'comment', 'subreddit', or array
forUserType: "moderator", // Optional: restrict to moderators
onPress: async (event, context) => {
try {
// Perform server-side processing
const userData = await validateAndProcessData();

// Show form with server-fetched data
const result = await context.ui.showForm(
{
fields: [
{
type: "string",
name: "processedData",
label: "Processed Data",
},
],
},
(values) => {
context.ui.showToast(`Processed: ${values.processedData}`);
},
);
} catch (error) {
context.ui.showToast("Processing failed. Please try again.");
}
},
});
```

</TabItem>
</Tabs>

### Menu response examples

Expand Down
158 changes: 26 additions & 132 deletions docs/capabilities/client/navigation.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,3 @@
import Tabs from '@theme/Tabs';
import TabItem from '@theme/TabItem';

# Navigation

Use navigation functions to redirect users to Reddit content or external websites in response to user actions, such as button clicks. You can redirect to a `url` string or to objects such as [`Subreddit`](/api/redditapi/models/classes/Subreddit.md), [`Post`](/api/redditapi/models/classes/Post.md), or [`Comment`](/api/redditapi/models/classes/Comment.md).
Expand All @@ -13,135 +10,32 @@ When linking to Reddit content, the navigation function requires the app account

## Basic navigation

<Tabs>
<TabItem value="web" label="Devvit Web">
```ts title="client/index.ts"
import { navigateTo } from '@devvit/web/client';

// Navigate to external URLs
navigateTo('https://www.youtube.com/watch?v=dQw4w9WgXcQ');

// Navigate to Reddit URLs
navigateTo('https://www.reddit.com/r/movies/comments/tzxev3/');

// Navigate to Reddit objects
async function goToPost() {
const post = await fetch('/api/getPost').then(r => r.json());
navigateTo(post);
}

// Use in button handlers or user interactions
function handleNavigateClick() {
navigateTo('https://www.reddit.com/r/webdev');
}
```

### Parameters

**`navigateTo(target)`**

- `target`: Either a URL string or a Reddit object (Subreddit, Post, Comment)

</TabItem>
<TabItem value="blocks" label="Devvit Blocks / Mod Tools">
```tsx
import { Devvit } from '@devvit/public-api';

Devvit.configure({ redditAPI: true });

// Navigate to URL
Devvit.addMenuItem({
label: 'Navigate to url',
location: 'subreddit',
onPress: async (_event, context) => {
const url = 'https://www.reddit.com/r/movies/comments/tzxev3/';
context.ui.navigateTo(url);
},
});

// Navigate to subreddit
Devvit.addMenuItem({
label: 'Navigate to subreddit',
location: 'subreddit',
onPress: async (_event, context) => {
const subredditId = 't5_2qh1o';
const subreddit = await context.reddit.getSubredditById(subredditId);
context.ui.navigateTo(subreddit);
},
});

// Navigate to post
Devvit.addMenuItem({
label: 'Navigate to post',
location: 'subreddit',
onPress: async (_event, context) => {
const postId = 't3_tzxev3';
const post = await context.reddit.getPostById(postId);
context.ui.navigateTo(post);
},
});

// Navigate to comment
Devvit.addMenuItem({
label: 'Navigate to comment',
location: 'subreddit',
onPress: async (_event, context) => {
const commentId = 't1_i426ob1';
const comment = await context.reddit.getCommentById(commentId);
context.ui.navigateTo(comment);
},
});

// Interactive post with navigation
// addCustomPostType() is deprecated and will be unsupported. It will not work after June 30. View the announcement below this example.
Devvit.addCustomPostType({
name: 'Navigation Post',
render: (context) => {
return (
<vstack height="100%" alignment="middle center">
<button
onPress={async () => {
const postId = 't3_tzxev3';
const post = await context.reddit.getPostById(postId);
context.ui.navigateTo(post);
}}
>
Navigate to post
</button>
</vstack>
);
},
});

// Menu action to create interactive post
Devvit.addMenuItem({
label: 'Add navigation post',
location: 'subreddit',
onPress: async (_event, context) => {
const subreddit = await context.reddit.getCurrentSubreddit();
await context.reddit.submitPost({
title: 'Navigate to post',
subredditName: subreddit.name,
preview: (
<vstack height="100%" width="100%" alignment="middle center">
<text>Loading ...</text>
</vstack>
),
});
context.ui.showToast('Created post!');
},
});
```
[View `addCustomPostType` deprecation announcement.](https://www.reddit.com/r/Devvit/comments/1r3xcm2/devvit_web_and_the_future_of_devvit/)

### Parameters

**`context.ui.navigateTo(target)`**

- `target`: Either a URL string or a Reddit object (Subreddit, Post, Comment)

</TabItem>
</Tabs>
```ts title="client/index.ts"
import { navigateTo } from '@devvit/web/client';

// Navigate to external URLs
navigateTo('https://www.youtube.com/watch?v=dQw4w9WgXcQ');

// Navigate to Reddit URLs
navigateTo('https://www.reddit.com/r/movies/comments/tzxev3/');

// Navigate to Reddit objects
async function goToPost() {
const post = await fetch('/api/getPost').then(r => r.json());
navigateTo(post);
}

// Use in button handlers or user interactions
function handleNavigateClick() {
navigateTo('https://www.reddit.com/r/webdev');
}
```

### Parameters

**`navigateTo(target)`**

- `target`: Either a URL string or a Reddit object (Subreddit, Post, Comment)

:::tip Menu response navigation
For navigation in menu response workflows (when you need server processing before navigation), see the [Menu Actions](./menu-actions.mdx) documentation.
Expand Down
Loading
Loading